<script lang="ts" setup>
import { systemInfo } from '@/utils/systemInfo'
import echartsTools from '../components/echartsTools.vue'

definePage({
  style: {
    navigationStyle: 'custom',
  },
})
const list = ref([
  {
    name: '关注',
  },
  {
    name: '推荐',
  },
])
const tabConfig = ref({
  height: 44,
})
const test = ref('orderNum')
const test2 = ref('1')

const echatsConfig = ref({
  // 骑行数据
  riding: {
    canvasId: 'ridingRef',
    defaultValueData: 'orderNum',
    defaultValueTime: '1',
    chartData: {},
    title: '骑行数据',
  },
  order: {
    canvasId: 'orderRef',
    defaultValueData: 'orderNum',
    defaultValueTime: '1',
    chartData: {},
    title: '订单数据',
    type: 'line',
    options: {
      color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
      padding: [15, 10, 0, 15],
      enableScroll: false,
      legend: {},
      xAxis: {
        disableGrid: true,
      },
      yAxis: {
        gridType: 'dash',
        dashLength: 2,
      },
      extra: {
        line: {
          type: 'straight',
          width: 2,
          activeType: 'hollow',
        },
      },
    },
  },
})

onLoad(() => {
  const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  tabConfig.value.height = menuButtonInfo.height + (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + systemInfo.statusBarHeight
})

onMounted(() => {
  setTimeout(() => {
    const res = {
      categories: ['2018', '2019', '2020', '2021', '2022', '2023'],
      series: [
        {
          name: '目标值',
          data: [35, 36, 31, 33, 13, 34],
        },
        {
          name: '完成量',
          data: [18, 27, 21, 24, 6, 28],
        },
      ],
    }
    const res2 = {
      categories: ['2018', '2019', '2020', '2021', '2022', '2023'],
      series: [
        {
          name: '成交量A',
          data: [35, 8, 25, 37, 4, 20],
        },
        {
          name: '成交量B',
          data: [70, 40, 65, 100, 44, 68],
        },
        {
          name: '成交量C',
          data: [100, 80, 95, 150, 112, 132],
        },
      ],
    }
    echatsConfig.value.riding.chartData = JSON.parse(JSON.stringify(res))
    setTimeout(() => {
      echatsConfig.value.riding.chartData = JSON.parse(JSON.stringify(res2))
    }, 1000)
    echatsConfig.value.order.chartData = JSON.parse(JSON.stringify(res2))
  }, 500)
})
</script>

<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view
      class="header_bar"
      :style="{
        height: `${(tabConfig.height)}px`,
      }"
    >
      <view class="back_icon">
        <uv-icon name="arrow-left" color="#ffffff" size="22" />
      </view>
      <view class="title">
        经营统计
      </view>
    </view>
    <!-- tab栏 -->
    <view class="tab_bar">
      <uv-tabs :list="list" />
    </view>
    <!-- 内容栏 -->
    <view class="content_bar">
      <echartsTools
        v-model:btndata="echatsConfig.riding.defaultValueData"
        v-model:btntime="echatsConfig.riding.defaultValueTime"
        :data="echatsConfig.riding.chartData"
        :title="echatsConfig.riding.title"
        :canvas-id="echatsConfig.riding.canvasId"
      />
      <echartsTools
        v-model:btndata="echatsConfig.order.defaultValueData"
        v-model:btntime="echatsConfig.order.defaultValueTime"
        :data="echatsConfig.order.chartData"
        :title="echatsConfig.order.title"
        :type="echatsConfig.order.type"
        :options="echatsConfig.order.options"
        :canvas-id="echatsConfig.order.canvasId"
      />
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;

  .header_bar {
    width: 100%;
    position: relative;
    background-color: #1488f5;

    .back_icon {
      position: absolute;
      left: 20rpx;
      bottom: 20rpx;
    }

    .title {
      font-size: 30rpx;
      color: white;
      position: absolute;
      left: 50%;
      margin-left: -60rpx;
      bottom: 20rpx;
    }
  }

  .tab_bar {
    width: calc(100% - 40rpx);
    background-color: #1488f5;
    padding: 5rpx 20rpx;
    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
  }

  .content_bar {
    width: calc(100% - 40rpx);
    padding: 20rpx;
  }
}
</style>
