import type { EChartsOption } from 'echarts'
import * as echarts from 'echarts'
import { toYearDataList, hisYearDataStat, curYearDataStat, hisDataList, treeList } from '@/api/daikin/base'


export function defineCompont() {
  const clickData = reactive<any>({
    id: 3
  })

  const toYearData = ref<any>()
  const hisData = ref<any>()
  const treeData = ref<any>()

  async function getData() {
    const { id: cateId } = clickData

    const { data } = await toYearDataList({ cateId })
    toYearData.value = data
    const {data:da2} =await hisDataList({cateId})
    hisData.value = da2

  }

    const ss = computed(() => [clickData.id])
      watch(() => unref(ss),
        async (v) => {
          getData()
        }, 
        { immediate: true, deep: true },
      )
  return { clickData, toYearData,hisData, getData }
}


export function curYearData() {
  const chartRef = ref();
  let allData = ref<any[]>([]);
  let seriesList = ref<any[]>([]);
  const optionRef = ref<any>({});

  async function getDataList() {
    const { data } = await curYearDataStat({ cateId: 1 })
    // 提取所有不重复的name
    const uniqueNames = [...new Set(data.flatMap(item => item.data.map(dataItem => dataItem.name)))];
    // 运算得到结果
    allData = uniqueNames.map(name => {
      const values = data.map(item => {
        const foundData = item.data.find(dataItem => dataItem.name === name);
        return foundData ? parseFloat(foundData.value) : 0;
      });
      return [name, ...values];
    });

    seriesList = data.map((item: { name: string }) => {
      if (item.name === "柱状图") {
        return { type: 'bar' , barWidth: 30,};
      } else if (item.name === "折线图") {
        return { type: 'line' };
      }
    });
    // console.log(seriesList,allData)

    const option = {
      width: '528px', // 设置图表宽度为 800 像素
      height: '160px', // 设置图表高度为 400 像素
      legend: { right: 30 },
      title: [
        { text: '数据', left: 12, top: 0, textAlign: 'left', textStyle: { color: '#142142', fontSize: 16, fontWeight: 800 } },
      ],
      tooltip: {},
      dataset: {
        source: allData
      },
      xAxis: { type: 'category' },
      yAxis: [
        {
          type: 'value',
          min: 0,
          max: 1000,
        },
        {
          type: 'value',
          min: 0,
          max: 100,
          axisLabel: {
            formatter: '{value} %'
          }
        }
      ],
      series: seriesList
    };
    optionRef.value = option;
  }
  getDataList();
  watchEffect(() => {
    // 在回调函数中使用 optionRef
    const option = optionRef.value;

    // 更新图表选项
    optionRef.value = option;
  });

  return { chartRef, option: optionRef };
}


export function hisYearData() {

  const chartRef = ref();
  let allData = ref<any[]>([]);
  let seriesList = ref<any[]>([]);
  const optionRef = ref<any>({});
  const state = reactive<any>({
      cateId: 1,
      yearTime:'2020'
    })
  async function getDataList() {
    const {cateId,yearTime} = state
    const { data } = await hisYearDataStat({ cateId,yearTime})
    // 提取所有不重复的name
    const uniqueNames = [...new Set(data.flatMap(item => item.data.map(dataItem => dataItem.name)))];
    // 运算得到结果
    allData = uniqueNames.map(name => {
      const values = data.map(item => {
        const foundData = item.data.find(dataItem => dataItem.name === name);
        return foundData ? parseFloat(foundData.value) : 0;
      });
      return [name, ...values];
    });

    seriesList = data.map((item: { name: string }) => {
      if (item.name === "柱状图") {
        return { type: 'bar' , barWidth: 30,};
      } else if (item.name === "折线图") {
        return { type: 'line' };
      }
    });
    // console.log(seriesList,allData)

    const option = {
      width: '528px', // 设置图表宽度为 800 像素
      height: '150px', // 设置图表高度为 400 像素
      legend: { right: 30, data: ['交涉', 'Theme'],},
      title: [
        { text: '数据', left: 12, top: 0, textAlign: 'left', textStyle: { color: '#142142', fontSize: 16, fontWeight: 800 } },
      ],
      tooltip: {},
      dataset: {
        source: allData
      },
      xAxis: { type: 'category' },
      yAxis: [
        {
          type: 'value',
          min: 0,
          max: 1000,
        },
        {
          type: 'value',
          min: 0,
          max: 100,
          axisLabel: {
            formatter: '{value} %'
          }
        }
      ],
      series: seriesList
    };
    optionRef.value = option;
  }
  /**
   * cateId: 1,
      yearTime:'2020'
   */
  const ss = computed(() => [state.cateId, state.yearTime])
    watch(() => unref(ss),
      async (v) => {
        getDataList()
      }, 
      { immediate: true, deep: true },
    )
    watchEffect(() => {
      const option = optionRef.value;
      optionRef.value = option;
    });

  return {state, chartRef, option: optionRef,getDataList };
}


const axisLine = { show: true, lineStyle: { color: '#e4e6eb' } }
const hidden = { show: false }

export function useChart3() {
  const chartRef = ref()
  const option = ref<EChartsOption>({
    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
    grid: [
      { top: '35', width: '300px', bottom: 14, left: 14, containLabel: true },
      { top: '35', width: '300px', bottom: 14, right: 14, containLabel: true },
    ],
    xAxis: [
      {
        gridIndex: 1,
        type: 'category',
        splitLine: hidden,
        axisTick: hidden,
        axisLabel: { show: true, color: '#808696', fontSize: 12 },
        axisLine,
        data: ['0313', '0314', '0315', '0316'],
        boundaryGap: false,
      },
      {
        gridIndex: 0,
        type: 'category',
        splitLine: hidden,
        axisTick: hidden,
        axisLabel: { show: true, color: '#808696', fontSize: 12 },
        axisLine,
        data: ['0313', '0314', '0315', '0316'],
      },
    ],
    yAxis: [
      {
        gridIndex: 1,
        type: 'value',
        max: 100,
        axisLine,
        axisTick: hidden,
        axisLabel: { show: true, color: '#808696', fontSize: 12 },
        splitLine: hidden,
      },
      {
        gridIndex: 0,
        type: 'value',
        max: 100,
        axisLine,
        axisTick: hidden,
        axisLabel: { show: true, color: '#808696', fontSize: 12 },
        splitLine: hidden,
      },
    ],
    // title: [
    //   { text: 'CD堆积', left: 8, top: '', textAlign: 'left', textStyle: { color: '#142142', fontSize: 16, fontWeight: 500 } },
    //   { text: '发注金额推移', left: '50%', top: '', textAlign: 'left', textStyle: { color: '#142142', fontSize: 16, fontWeight: 500 } },
    // ],
    // graphic: {
    //   elements: [
    //     { type: 'image', left: 25, top: -5, style: pieBg },
    //     { type: 'image', right: 26, top: -5, style: pieBg },
    //   ],
    // },
    series: [

      {
        xAxisIndex: 1,
        yAxisIndex: 1,
        type: 'bar',
        data: [12, 31, 35, 47],
        showBackground: true,
        backgroundStyle: { color: '#f4f6fa' },
        itemStyle: {
          borderRadius: 2,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#70b8f0' },
            { offset: 1, color: '#2b7ff9' },
          ]),
        },
      },
      { type: 'line', smooth: true, data: [32, 21, 75, 57] },
      { type: 'line', smooth: true, data: [12, 31, 35, 47] },

    ],
  })

  return { chartRef, option }
}