import type { EChartsOption } from 'echarts'
import * as echarts from 'echarts'
const state = reactive<any>({
  type: 'Cu',
})
const state1 = reactive<any>({
  type: '',
})
const state2 = reactive<any>({
  type: 'CN',
})
const state3 = reactive<any>({
  type: 'CM',
})
const state4 = reactive<any>({
  type: 'Cu',
  dateList:''
})
const state5 = reactive<any>({
  type: 'CN',
  dateList:'',
})

export function Chart1() {
  const dats = {
    Cu: {
      date: [200, 1600, 500, 450, 1700,200, 1600, 500, 450, 1700,200, 1600],
      dates: [452, 875, 1900, 378, 1700,452, 875, 1900, 378, 1700,452, 877]
    },
    Fe: {
      date: [1500, 600, 1500, 700, 1700],
      dates: [1200, 875, 400, 1700, 800]
    },
    AI: {
      date: [500, 1600, 1500, 2100, 1700],
      dates: [1900, 850, 1600, 1400, 600]
    },
    Sz: {
      date: [600, 800, 1500, 100, 1700],
      dates: [800, 1000, 300, 900, 1400]
    },
  }
  const data = ref([500, 1600, 1500, 2100, 1700])
  const dat = ref([600, 400, 1600, 700, 2100])
  const chartRef = ref()
  const optionRef = ref()
  function getDat() {
    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: ['1月', '2月', '3月', '4月', '5月']
      },
      yAxis: [
        {
          type: 'value',
          // name:'1',
        },
        {
          // name:'2',
          type: 'value',
        },
      ],
      series: [
        {
          name: 'SMM',
          data: data,
          color: '#8F97F8',
          type: 'line',
          yAxisIndex: 1,
        },
        {
          name: 'LME',
          data: dat,
          type: 'line',
          color: '#FF603A'
        }
      ]

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

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

  return { chartRef, option: optionRef, state }
}
export function Chart2() {

  const chartRef = ref()
  const option = ref<EChartsOption>({
    grid: { left: '10', top: 90, right: '10', bottom: '10', containLabel: true },

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

    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ["SMM", "LME"],
      right: 20,
      top: 10,
    },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月']
    },
    yAxis: {
      type: 'value',
      // name:'1',
    },

    series: [
      {
        name: 'SMM',
        data: [1500, 800, 900, 2100, 1700],
        color: '#8F97F8',
        type: 'line',

      },
      {
        name: 'LME',
        data: [1200, 1300, 600, 1300, 300],
        type: 'line',
        color: '#FF603A',

      }
    ]


  })
  return { chartRef, option, state1 }
}

export function Chart3() {
  const chartRef = ref()
  const optionRef = ref<any>({});
  const dats = {
    DOG: {
      date: [200, 1600, 500, 450, 1700],
      dates: [452, 875, 1900, 378, 1700]
    },
    CN: {
      date: [1500, 600, 1500, 700, 1700],
      dates: [1200, 875, 400, 1700, 800]
    },
    CM: {
      date: [500, 1600, 1500, 2100, 1700],
      dates: [1900, 850, 1600, 1400, 600]
    }
  }
  const data = ref([500, 1600, 1500, 2100, 1700])
  const dat = ref([600, 400, 1600, 700, 2100])

  function getDat() {
    const option = {

      height: '150px', // 设置图表高度为 400 像素
      grid: { left: '10', top: 90, right: '10', bottom: '10', containLabel: true },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ["日元", "人民币"],
        right: 20,
        top: 10,
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '日元',
          data: data,
          color: '#8F97F8',
          type: 'line'
        },
        {
          name: '人民币',
          data: dat,
          type: 'line',
          color: '#FF603A'
        }
      ]
    }


    optionRef.value = option;
  }
  const ss = computed(() => [state2.type])
  watch(() => unref(ss),
    async (v) => {
      console.log(state2.type)
      data.value = dats[state2.type].date
      dat.value = dats[state2.type].dates
      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>({});
  const dats = {
    DOG: {
      date: [200, 1600, 500, 450, 1700],
      dates: [452, 875, 1900, 378, 1700]
    },
    CN: {
      date: [1500, 600, 1500, 700, 1700],
      dates: [1200, 875, 400, 1700, 800]
    },
    CM: {
      date: [500, 1600, 1500, 2100, 1700],
      dates: [1900, 850, 1600, 1400, 600]
    }
  }
  const data = ref([500, 1600, 1500, 2100, 1700])
  const dat = ref([600, 400, 1600, 700, 2100])

  function getDat() {
    const option = {
      grid: { left: '10', top: 90, right: '10', bottom: '10', containLabel: true },

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

      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ["日元", "美元"],
        right: 20,
        top: 10,
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '日元',
          data: data,
          color: '#8F97F8',
          type: 'line'
        },
        {
          name: '美元',
          data: dat,
          type: 'line',
          color: '#4CA1FF'
        }
      ]

    }

  optionRef.value = option;
  }
  const ss = computed(() => [state3.type])
  watch(() => unref(ss),
    async (v) => {
      console.log(state3.type)
      data.value = dats[state3.type].date
      dat.value = dats[state3.type].dates
      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>({});
  const dats = {
    Cu: {
      date: [200, 1600, 500, 450, 1700],
      dates: [452, 875, 1900, 378, 1700]
    },
    Fe: {
      date: [1500, 600, 1500, 700, 1700],
      dates: [1200, 875, 400, 1700, 800]
    },
    AI: {
      date: [500, 1600, 1500, 2100, 1700],
      dates: [1900, 850, 1600, 1400, 600]
    },
    Sz: {
      date: [600, 800, 1500, 100, 1700],
      dates: [800, 1000, 300, 900, 1400]
    },
  }
  const data = ref([500, 1600, 1500, 2100, 1700])
  const dat = ref([600, 400, 1600, 700, 2100])
  function dataList() {

    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: ['1月', '2月', '3月', '4月', '5月']
      },
      yAxis: [
        {
          type: 'value',
          // name:'1',
        },
        {
          // name:'2',
          type: 'value',
        },
      ],
      series: [
        {
          name: 'SMM',
          data: data.value,
          color: '#FF9307',
          type: 'line',
          smooth: true
        },
        {
          name: 'LME',
          data: dat,
          type: 'line',
          color: '#0063ED',
          smooth: true,
          yAxisIndex: 1,
        }
      ]


    }
    optionRef.value = option;
  }
  const ss = computed(() => [state4.type])
  watch(() => unref(ss),
    async (v) => {
      console.log(state4.type)
      data.value = dats[state4.type].date
      dat.value = dats[state4.type].dates
      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>({});
  const dats = {
    DOG: {
      date: [200, 1600, 500, 450, 1700],
      dates: [452, 875, 1900, 378, 1700]
    },
    CN: {
      date: [1500, 600, 1500, 700, 1700],
      dates: [1200, 875, 400, 1700, 800]
    },
    CM: {
      date: [500, 1600, 1500, 2100, 1700],
      dates: [1900, 850, 1600, 1400, 600]
    }
  }
  const data = ref([500, 1600, 1500, 2100, 1700])
  const dat = ref([600, 400, 1600, 700, 2100])

  function getDat() {
    const option = {
      // width: '250px', // 设置图表宽度为 800 像素
      // height: '150px', // 设置图表高度为 400 像素
      grid: { left: '10', top: 90, right: '10', bottom: '10', containLabel: true },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ["日元-人民币", "日元-美元"],
        right: 20,
        top: 10,
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '日元-人民币',
          data: data,
          color: '#89DF75',
          type: 'line',
          smooth: true
        },
        {
          name: '日元-美元',
          data: dat,
          type: 'line',
          color: '#77C4CA',
          smooth: true
        }
      ]
    }
    optionRef.value = option;
  }
  const ss = computed(() => [state5.type])
  watch(() => unref(ss),
    async (v) => {
      // console.log(state4.type)
      data.value = dats[state5.type].date
      dat.value = dats[state5.type].dates
      getDat()

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