<template>
  <div  class="go-title-03">
    <div class="btnbox">
      <div class="btn" v-for="(item, index) in textBtnArr" @click="btnClick(item,index)">
        <img class="img" v-if="btnIndex==index" src="@/assets/images/chart/units/texttitle05bg.png" />
        <img class="img" v-else src="@/assets/images/chart/units/texttitle050bg.png" />
        {{item.label}}
      </div>
    </div>
    <div class="chartsbox">
      <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option.value" autoresize></v-chart>
    </div> 
  </div>
</template>

<script setup lang="ts">
import { reactive, watch, PropType, toRefs, ref, onMounted } from 'vue'
import VChart from 'vue-echarts'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import { use, graphic } from 'echarts/core'

import config, { includes } from './config'
import { mergeTheme } from '@/packages/public/chart'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'

import { isPreview, colorGradientCustomMerge} from '@/utils'
import axios from 'axios'
import { getAppEnvConfig } from '@/utils/env'
var { VITE_GLOB_API_URL } = getAppEnvConfig();

const props = defineProps({
  themeSetting: {
    type: Object,
    required: true
  },
  themeColor: {
    type: Object,
    required: true
  },
  chartConfig: {
    type: Object as PropType<config>,
    required: true
  }
})
const {
  textBtnArr
} = toRefs(props.chartConfig.option)
const btnIndex = ref(1)
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)

const chartEditStore = useChartEditStore()

const option = reactive({
  value: {}
})

// 渐变色处理
watch(
  () => chartEditStore.getEditCanvasConfig.chartThemeColor,
  (newColor: keyof typeof chartColorsSearch) => {
    try {
      if (!isPreview()) {
        const themeColor =
          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[newColor] ||
          colorGradientCustomMerge(chartEditStore.getEditCanvasConfig.chartCustomThemeColorInfo)[defaultTheme]
          console.log('themeColor', themeColor)
          props.chartConfig.option.series.forEach((value: any, index: number) => {
            value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: value.lineStyle.color
              },
              {
                offset: 1,
                color: 'rgba(0,0,0, 0)'
              }
            ])
          })
      }
      option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
      props.chartConfig.option = option.value
    } catch (error) {
      console.log(error)
    }
  },
  {
    immediate: true
  }
)

watch(
  () => props.chartConfig.option.dataset,
  () => {
    option.value = props.chartConfig.option
  }
)
const btnClick = function(item,index){
  btnIndex.value = index
  getListData()
}

const getListData=()=>{
  axios({
      method: "get",
      url: VITE_GLOB_API_URL + '/api/FireManagement/GetFireClueStatistics',
      params: {
        type: textBtnArr.value[btnIndex.value].value,
      },
      headers: {
          'X-Token': localStorage.getItem("X-Token")
      }
  }).then(res => {
      let arr = []
      res.data.result.forEach(item =>{
        arr.push({
          label: item.dateTime,
          value: item.count
        })
      })
      props.chartConfig.option.dataset.source = arr
  })
}
onMounted(() => {
  getListData()
})
</script>

<style lang="scss" scoped>
@include go('title-03') {
  position: relative;
  padding-top: 40px;
  .btnbox{
    height: 25px;
    position: absolute;
    right: 0;
    top: 0;
    display:flex;
    justify-content: center;
    .btn{
      width: 80px;
      height: 25px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 14px;
      cursor: pointer;
      .img{
        width: 80px;
        height: 25px;
        position: absolute;
      }
    }
  }
  .chartsbox{
    width: 100%;
    height: calc(100% - 40px);
  }
}
</style>
