import { historyStat,rateHistoryStat,historyMarketSevenDay,historyStatSevenDay} from '@/api/daikin/base'
import type { EChartsOption } from 'echarts'
import * as echarts from 'echarts'
import {calculateDateIntervals} from '@/utils/format'



const state = reactive<any>({
  type: 'Cu',
})
const state1 = reactive<any>({
  currencyCodeFrom:'CNA',
  currencyCodeTo:'USD',
})
const state2 = reactive<any>({
  currencyCodeFrom:'CNA',
  currencyCodeTo:'USD',
})
const state3 = reactive<any>({
  currencyCodeFrom:'USD',
  currencyCodeTo:'CNA',
})
const state4 = reactive<any>({
  number:'Cu',
  type: '2',
  dateList:calculateDateIntervals('','').list,
  startTime:'',
  endTime:'',
})
const state5 = reactive<any>({
  currencyCodeFrom:'CNA',
  currencyCodeTo:'JPY',
  type: '2',
  dateList:calculateDateIntervals('','').list,
  startTime:'',
  endTime:'',
})

function getDay(){
  const today = new Date();
  const pastSevenDays = [];

  for (let i = 6; i >= 0; i--) {
    const date = new Date(today);
    date.setDate(today.getDate() - i);
    pastSevenDays.push(date.toISOString().split('T')[0]);
  }

  return pastSevenDays;
}

function reverseArray(inputArray: string | any[],star: number,enc: number) {
  const reversedArray = [];
  
  for (let i = 0; i <= inputArray.length - 1; i++) {
    reversedArray.push(inputArray[i].substring(star,enc));
  }
  
  return reversedArray;
}
export function Chart1() {

  const chartRef = ref()
  const optionRef = ref()
async  function getDat() {
  const {data} = await historyMarketSevenDay({number:state.type})
  if(!data) return
  let  {LME,SMM} = data[state.type]

    const option = {

      height: '150px', // 设置图表高度为 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: reverseArray(getDay(),5,10)
      },
      yAxis: [
        {
          type: 'value',
          // name:'1',
        },
        {
          // name:'2',
          type: 'value',
        },
      ],
      series: [
        {
          name: 'SMM',
          data: SMM,
          color: '#8F97F8',
          type: 'line',
          yAxisIndex: 1,
          label: {
            show: true,
            position: 'top'
          },
        },
        {
          name: 'LME',
          data: LME,
          type: 'line',
          color: '#FF603A',
          label: {
            show: true,
            position: 'top'
          },
        }
      ]

    }
    optionRef.value = option
  }
  const ss = computed(() => [state.type])
  watch(() => unref(ss),
    async (v) => {
      console.log(state.type)
      getDat()

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

  return { chartRef, option: optionRef, state }
}


export function Chart3() {
  const chartRef = ref()
  const optionRef = ref<any>({});

  async  function getDat() {
    const {data} = await historyStatSevenDay({currencyCodeFrom:state2.currencyCodeFrom,currencyCodeTo:state2.currencyCodeTo})
    if(!data) return
    const  dat = data[state2.currencyCodeFrom+'-'+state2.currencyCodeTo]
  
    const option = {

      height: '150px', // 设置图表高度为 400 像素
      grid: { left: '10', top: 90, right: '10', bottom: '10', containLabel: true },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data:state2.currencyCodeFrom+'-'+state2.currencyCodeTo,
        right: 20,
        top: 10,
      },
      xAxis: {
        type: 'category',
        data: reverseArray(getDay(),8,10)
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: state2.currencyCodeFrom+'-'+state2.currencyCodeTo,
          data: dat,
          color: '#8F97F8',
          type: 'line',
          label: {
            show: true,
            position: 'top'
          },
        },
      ]
    }


    optionRef.value = option;
  }
  const ss = computed(() => [state2.currencyCodeFrom,state2.currencyCodeTo])
  watch(() => unref(ss),
    async (v) => {
      console.log(state2.type)
      getDat()

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


export function Chart4() {

  const chartRef = ref()
  const optionRef = ref<any>({});

  async  function getDat() {
    const {data} = await historyStatSevenDay({currencyCodeFrom:state3.currencyCodeFrom,currencyCodeTo:state3.currencyCodeTo})
    if(!data) return
    const  dat = data[state3.currencyCodeFrom+'-'+state3.currencyCodeTo]
  
    const option = {
      grid: { left: '10', top: 90, right: '10', bottom: '10', containLabel: true },

      height: '150px', // 设置图表高度为 400 像素

      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data:state3.currencyCodeFrom+'-'+state3.currencyCodeTo,
        right: 20,
        top: 10,
      },
      xAxis: {
        type: 'category',
        data: reverseArray(getDay(),8,10)
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: state3.currencyCodeFrom+'-'+state3.currencyCodeTo,
          data: dat,
          color: '#8F97F8',
          type: 'line',
          label: {
            show: true,
            position: 'top'
          },
          
        },
    
      ]

    }

  optionRef.value = option;
  }
  const ss = computed(() => [state3.currencyCodeFrom,state3.currencyCodeTo])
  watch(() => unref(ss),
    async (v) => {
      console.log(state3.type)

      getDat()

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

export function Chart5() {
  const chartRef = ref()
  const optionRef = ref<any>({});
 let nameX: string[] 
async  function dataList() {
  let SMM,LME
    const {data} = await historyStat({number:state4.number,type:state4.type,dateList:state4.dateList})
    if(data&&data[state4.number]){
       SMM=data[state4.number].SMM
      LME = data[state4.number].LME
    }
 

    const option = {
      // width: '250px', // 设置图表宽度为 800 像素
      // height: '150px', // 设置图表高度为 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:nameX
      },
      yAxis: [
        {
          type: 'value',
          // name:'1',
        },
        {
          // name:'2',
          type: 'value',
        },
      ],
      series: [
        {
          name: 'SMM',
          data: SMM,
          color: '#FF9307',
          type: 'line',
          smooth: true
        },
        {
          name: 'LME',
          data: LME,
          type: 'line',
          color: '#0063ED',
          smooth: true,
          yAxisIndex: 1,
        }
      ]


    }
    optionRef.value = option;
  }
  const ss = computed(() => [state4.number,state4.startTime,state4.endTime])
  watch(() => unref(ss),
    async (v) => {
   
      // console.log(calculateDateIntervals(state4.startTime,state4.endTime),88888)
      const {type,list} = calculateDateIntervals(state4.startTime,state4.endTime)
      nameX =list
      state4.dateList = list
      state4.type = type
      console.log(state4.number)
      dataList()
    },
    { immediate: true, deep: true },
  )
  watchEffect(() => {
    const option = chartRef.value;
    chartRef.value = option;
  });
  return { chartRef, option: optionRef, state4 }
}

export function Chart6() {
  const chartRef = ref()
  const optionRef = ref<any>({});

  let nameX: string[] 
async function getDat() {
    const {data} = await rateHistoryStat({currencyCodeFrom:state5.currencyCodeFrom,currencyCodeTo:state5.currencyCodeTo,type:state5.type,dateList:state5.dateList})
    const  dat = data[state5.currencyCodeFrom+'-'+state5.currencyCodeTo]
    const option = {
      // width: '250px', // 设置图表宽度为 800 像素
      // height: '150px', // 设置图表高度为 400 像素
      grid: { left: '10', top: 90, right: '10', bottom: '10', containLabel: true },
      tooltip: {
        trigger: 'axis'
      },
      // legend: {
      //   data:state5.currencyCodeFrom-state5.currencyCodeTo,
      //   right: 20,
      //   top: 10,
      // },
      xAxis: {
        type: 'category',
        data:nameX
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: state5.currencyCodeFrom+'-'+state5.currencyCodeTo,
          data: dat,
          color: '#89DF75',
          type: 'line',
          smooth: true
        },
      ]
    }
    optionRef.value = option;
  }
  const ss = computed(() => [state5.currencyCodeFrom,state5.currencyCodeTo,state5.startTime,state5.endTime])
  watch(() => unref(ss),
    async (v) => {
      const {type,list} = calculateDateIntervals(state5.startTime,state5.endTime)

      nameX =list
      state5.dateList = list
      state5.type = type
      getDat()

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