<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount, Ref, onBeforeMount, watch, computed } from 'vue'
import * as echarts from 'echarts'
import { useShopInfo } from '/@/stores/shopInfo'
import { getLineData, getCardData } from '../api'
import { spCampaignMetricsEnum } from '/@/views/adManage/utils/enum.js'
import MetricsCards from '/@/components/MetricsCards/index.vue'
import XEUtils from 'xe-utils'
import { buildChartOpt } from '/@/views/adManage/utils/tools.js'
import { usePublicData } from '/@/stores/publicData'
import { storeToRefs } from 'pinia'

defineOptions({
  name: 'DataTendencyChart',
})

onMounted(() => {
  getMetricsItems()
  addResize()
  // initLine()
  setTimeout(() => {
    initLine()
  }, 0)
})
onBeforeUnmount(() => {
  if (chartObj) {
    chartObj.dispose()
    chartObj = null
  }
  removeResize()
})

const publicData = usePublicData()
const metrics = ref([
  { metric: 'Impression', color: '#0085ff', label: '曝光量' },
  { metric: 'Click', color: '#3fd4cf', label: '点击量' },
  { metric: 'Spend', color: '#ff9500', label: '花费' },
])
const shopInfo = useShopInfo()
const metricsItems: Ref<MetricData[]> = ref([])
let chartObj: any
const chartRef = ref()
const option: any = {
  dataset: {
    source: [],
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      label: {
        backgroundColor: '#6a7985',
      },
    },
  },
  legend: {
    selected: {}, // 控制显隐
    show: false,
  },
  grid: {
    top: 50,
    right: 150,
    bottom: 30,
    left: 55,
  },
  xAxis: {
    type: 'category',
  },
  yAxis: [
    {
      id: 0,
      type: 'value',
      name: '曝光量',
      splitLine: {
        show: true, // 设置显示分割线
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#0085ff',
        },
      },
      show: true,
    },
    {
      id: 1,
      type: 'value',
      name: '点击量',
      position: 'right',
      splitLine: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#3fd4cf',
        },
      },
      show: true,
    },
    {
      id: 2,
      type: 'value',
      position: 'right',
      offset: 90,
      name: '花费',
      splitLine: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#ff9500',
        },
      },
      show: true,
    },
  ],
  series: [
    {
      id: 0,
      name: '曝光量',
      type: 'bar',
      encode: {
        x: 'date',
        y: 'Impression',
      },
      barWidth: '20px',
      yAxisIndex: 0,
      itemStyle: {
        color: '#0085ff',
        borderRadius: [6, 6, 6, 6],
      },
    },
    {
      id: 1,
      name: '点击量',
      type: 'line',
      encode: {
        x: 'date',
        y: 'Click',
      },
      symbolSize: 6,
      symbol: 'circle',
      smooth: true,
      yAxisIndex: 1,
      itemStyle: { color: '#3fd4cf', borderColor: '#3fd4cf' },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#3fd4cf53' },
          { offset: 1, color: '#3fd4cf03' },
        ]),
      },
      emphasis: {
        focus: 'series',
      },
    },
    {
      id: 2,
      name: '花费',
      type: 'line',
      encode: {
        x: 'date',
        y: 'Spend',
      },
      symbolSize: 6,
      symbol: 'circle',
      smooth: true,
      yAxisIndex: 2,
      itemStyle: { color: '#ff9500', borderColor: '#ff9500' },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#ff950053' },
          { offset: 1, color: '#ff950003' },
        ]),
      },
      emphasis: {
        focus: 'series',
      },
    },
  ],
}
const { dateRange } = storeToRefs(publicData)
const loading = ref(true)

const getDataset = async () => {
  const resp = await getLineData({ profile: shopInfo.profile.profile_id, start: dateRange.value[0], end: dateRange.value[1] })
  return resp.data
}
const initLine = async () => {
  chartObj = echarts.init(chartRef.value)
  const items = await getDataset()
  option.dataset.source = items
  XEUtils.arrayEach(metricsItems.value, (info) => {
    option.legend.selected[info.label] = false
  })
  for (const info of metrics.value) {
    option.legend.selected[info.label] = true
  }
  chartObj.setOption(option)
  loading.value = false
}

const getMetricsItems = async () => {
  const resp = await getCardData({ start: dateRange.value[0], end: dateRange.value[1], profile: shopInfo.profile.profile_id })
  const data = resp.data
  metricsItems.value.length = 0
  XEUtils.arrayEach(spCampaignMetricsEnum, (info) => {
    const tmp: MetricData = {
      label: info.label,
      value: info.value,
      metricVal: data[info.value],
      gapVal: data[`gap${info.value}`],
      preVal: data[`prev${info.value}`],
    }
    metricsItems.value.push(tmp)
  })
}

const changeMetric = () => {
  const opt = buildChartOpt(option, metrics.value)
  chartObj.setOption(opt)
}

watch(dateRange, async () => {
  loading.value = true
  await getMetricsItems()
  const items = await getDataset()
  const opt = { dataset: { source: items } }
  chartObj.setOption(opt)
  loading.value = false
})

const resizeChart = () => {
  chartObj.resize()
}
const addResize = () => {
  window.addEventListener('resize', resizeChart)
}
const removeResize = () => {
  window.removeEventListener('resize', resizeChart)
}
</script>

<template>
  <div v-loading="loading">
    <MetricsCards v-model="metrics" :metric-items="metricsItems" @change="changeMetric"></MetricsCards>
    <div style="height: 350px" ref="chartRef"></div>
  </div>
</template>

<style scoped>
.metrics-cards {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}
</style>
