import {timeStat } from '@/api/daikin/base'
import type { EChartsOption } from 'echarts'
import * as echarts from 'echarts'
import {formatDate} from '@/utils/format'

const currentDate = new Date();
const currentDates = new Date();
const value1 = ref<[Date, Date]>([
    currentDate.setMonth(currentDate.getMonth() ),
    new Date()
])
const value2 = ref<[Date, Date]>([
    currentDates.setMonth(currentDates.getMonth() ),
    new Date()
])

const states = reactive<any>({
  startTime:formatDate(value1.value[0]).substring(0,10),
  endTime: formatDate(value1.value[1]).substring(0,10),
  // timeType:2,
})


export function Chart1() {

  const chartRef = ref()
  const optionRef = ref()
async  function getDat() {
  const {data} = await timeStat(states)
  let xAxisData:any[]=[]
  let siomesData:any[]=[]
  data.map((item: { moduleName: any; visitCount: any; })=>{
    xAxisData.push(item.moduleName)
    siomesData.push(item.visitCount)
  })
console.log(xAxisData,siomesData)
  if(!data) return
  // let  {LME,SMM} = data[state.type]

    const option = {

      // height: '450px', // 设置图表高度为 400 像素
      grid: { left: '10', top: 90, right: '10', bottom: '10', containLabel: true },
      tooltip: {
        trigger: 'axis'
      },
      // legend: {
      //   data: ["SMM", "LME"],
      //   right: 20,
      //   top: 10,
      // },
      xAxis: {
        type: 'category',
        data:xAxisData
      },
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          data: siomesData,
          color: '#8F97F8',
          type: 'bar',
       
        }
      ]
    }
    optionRef.value = option
  }
  const ss = computed(() => [states.timeType,states.startTime,states.endTime])
  watch(() => unref(ss),
    async (v) => {
      console.log(states.timeType)
      getDat()

    },
    { immediate: true, deep: true },
  )
  watchEffect(() => {
    const option = chartRef.value;
    chartRef.value = option;
  });

  return { chartRef, option: optionRef, states }
}