<script setup>
import {
  onMounted,
  inject,
  ref,
  nextTick,
  onBeforeUnmount,
  computed,
  watch,
} from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

import * as echarts from 'echarts'

import { storeToRefs } from 'pinia'
import usethemestore from '../store/usethemestore'
const themeStore = usethemestore()
const { theme } = storeToRefs(themeStore)

import {
  calculateMA,
  calculateStdDeviation,
  calculateMACD,
  calculateKDJ,
  calculateRSI,
  calculateVOL,
} from '../end/computedInfo'

// 图表
let chartBox = null
let chartlistnum = ref(4)

let charts1 = ref(null)
let initcharts1 = null
let charts1num = ref(0)
let charts2 = ref(null)
let initcharts2 = null
let charts2num = ref(0)
let charts3 = ref(null)
let initcharts3 = null
let charts3num = ref(0)
let charts4 = ref(null)
let initcharts4 = null
let charts4num = ref(0)

// 请求后端数据
let szdata = ref([])
let kdata = ref([])
let xdata = ref([])
let closedata = ref([])
let ma5 = ref(null)
// MACD
let dif = ref(null)
let dea = ref(null)
let macd = ref(null)

// 标准差
let StdDev = ref(null)
let topStdDev = ref(null)
let downStdDev = ref(null)
// KDJ
let kValues = ref(null)
let dValues = ref(null)
let jValues = ref(null)

let rsi1 = ref(null)
let rsi2 = ref(null)
let rsi3 = ref(null)

let vol = ref(null)
let interval = ref()

import axios from 'axios'
let baseURL = 'http://localhost:8012/akshare'
const requestINfo = async () => {
  let response = await axios({
    url: baseURL + '/kdata',
    method: 'get',
  })
  return response.data.message
}

//引入echarts
// let echarts = inject('echarts')

// 外层盒子容器，为了计算图形在内部的高度分配问题
const chartsInfo = ref(null)
// K线图的容器
const mKline = ref(null)

// 存储各个图形所分配的高度信息
let heightList = ref([])
// 计算高度、设置高度
const dynamicsHeight = () => {
  // 高度
  let domHeightList = chartsInfo.value.offsetHeight
  console.log(chartsInfo.value.children.length)
  // 子元素长度
  let childrenLength = chartsInfo.value.children.length - 1

  if (chartlistnum.value) {
    // 先清空数组，避免
    heightList.value = []
    // 将处理过后的数据加入数组
    heightList.value.push(domHeightList * (1 - chartlistnum.value * 0.15))
    // 设置最上面K线图的高度
    mKline.value.style.height = `${heightList.value[0] - 10}px`
    // 设置新添加图表的高度
    heightList.value.push(domHeightList * 0.15)

    console.log(heightList.value)
  } else {
    // 先清空数组，避免之前的数据没有被清空
    heightList.value = []

    // 设置只有K线图的高度的父容器的全部大小
    mKline.value.style.height = `${domHeightList}px`
  }
}

// 定义图表配置数组
let chartConfigs = ref([
  {
    id: 1,
    name: 'MACD',
    attId: 'charts1',
    status: false,
    options: {
      animation: false,
      tooltip: {
        trigger: 'axis', // 触发类型为坐标轴
        axisPointer: {
          // 坐标轴指示器
          type: 'cross', // 类型为交叉
          label: {
            backgroundColor: '#6a7985', // 标签背景色
          },
        },
      },
      dataZoom: [
        {
          type: 'inside',
        },
        {
          type: 'slider',
          show: false,
        },
      ],
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: 'DIF',
          type: 'line',
          itemStyle: {
            normal: {
              color: 'rgba(204,102,0,1)',
            },
          },
          symbol: 'none',
          data: [],
        },
        {
          name: 'DEA',
          type: 'line',
          itemStyle: {
            normal: {
              color: 'rgba(0,128,255,1)',
            },
          },
          symbol: 'none',
          data: [],
        },
        {
          name: 'MACD',
          type: 'bar',
          barWidth: '1',
          data: [],
        },
      ],
    },
  },
  {
    id: 2,
    name: 'VOL',
    attId: 'charts2',
    status: false,
    options: {
      animation: false,
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985',
          },
        },
      },
      dataZoom: [
        {
          type: 'inside',
        },
        {
          type: 'slider',
          show: false,
        },
      ],
      xAxis: {
        type: 'category',
        data: [],
      },
      yAxis: {
        type: 'value',
        interval: 10,
      },
      series: [
        {
          name: 'VOL',
          type: 'bar',
          data: [],
        },
      ],
    },
  },
  {
    id: 3,
    name: 'KDJ',
    attId: 'charts3',
    status: false,
    options: {
      animation: false,
      tooltip: {
        trigger: 'axis', 
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985',
          },
        },
      },
      dataZoom: [
        {
          type: 'inside',
          xAxisIndex: [0, 0],
          start: 20,
          end: 100,
        },
        {
          type: 'slider',
          show: false,
        },
      ],
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [],
      },
      series: [
        {
          name: 'K',
          type: 'line',
          data: [],
          symbol: 'none',
          smooth: true,
        },
        {
          name: 'D',
          type: 'line',
          data: [],
          symbol: 'none',
          smooth: true,
        },
        {
          name: 'J',
          type: 'line',
          data: [],
          symbol: 'none',
          smooth: true,
        },
      ],
    },
  },
  {
    id: 4,
    name: 'RSI',
    attId: 'charts4',
    status: false,
    options: {
      animation: false,
      tooltip: {
        trigger: 'axis', // 触发类型为坐标轴
        axisPointer: {
          // 坐标轴指示器
          type: 'cross', // 类型为交叉
          label: {
            backgroundColor: '#6a7985', // 标签背景色
          },
        },
      },
      dataZoom: [
        {
          type: 'inside',
          xAxisIndex: [0, 0],
          start: 20,
          end: 100,
        },
        {
          type: 'slider',
          show: false,
        },
      ],
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [],
      },
      series: [
        {
          name: 'rsi1',
          type: 'line',
          data: [],
          symbol: 'none',
          smooth: true,
        },
        {
          name: 'rsi2',
          type: 'line',
          data: [],
          symbol: 'none',
          smooth: true,
        },
        {
          name: 'rsi3',
          type: 'line',
          data: [],
          symbol: 'none',
          smooth: true,
        },
      ],
    },
  },
])

// 储存点击底部选项的状态的数据
const clicklist = ref([])

// 处理点击事件并添加图表
const addChart = (item) => {
  // 卸载图表
  if (item.attId == 'charts1') {
    if (!charts1num.value) {
      chartlistnum.value = chartlistnum.value - 1
      initcharts1.group = ''
      window.removeEventListener('resize', function () {
        initcharts1.resize()
      })
      initcharts1.dispose()
      initcharts1 = null

      charts1.value.style.display = 'none'

      charts1num.value = 1
    } else {
      chartlistnum.value = chartlistnum.value + 1
      charts1.value.style.height = `${heightList.value[1]}px`
      charts1.value.style.display = 'block'
      initcharts1 = echarts.init(charts1.value)
      // 图表的配置信息
      let option1 = {
        animation: false,
        tooltip: {
          trigger: 'axis', // 触发类型为坐标轴
          axisPointer: {
            // 坐标轴指示器
            type: 'cross', // 类型为交叉
            label: {
              backgroundColor: '#6a7985', // 标签背景色
            },
          },
        },
        grid: {
          top: '10%',
          left: '3%',
          right: '3%',
          bottom: '20%',
        },
        dataZoom: [
          {
            type: 'inside',
          },
          {
            type: 'slider',
            show: false,
          },
        ],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xdata.value,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            name: 'DIF',
            type: 'line',
            itemStyle: {
              normal: {
                color: 'rgba(204,102,0,1)',
              },
            },
            symbol: 'none',
            data: dif.value,
          },
          {
            name: 'DEA',
            type: 'line',
            itemStyle: {
              normal: {
                color: 'rgba(0,128,255,1)',
              },
            },
            symbol: 'none',
            data: dea.value,
          },
          {
            name: 'MACD',
            type: 'bar',
            barWidth: '1',
            // symbol: 'none',
            data: macd.value,
          },
        ],
      }
      // 设置图表实例的配置项
      initcharts1.setOption(option1)
      // 图表的分组，用于联动
      initcharts1.group = 'group1'

      // 根据页面大小自动响应图表大小
      // window.addEventListener('resize', function () {
      //   initcharts1.resize()
      // })
      charts1num.value = 0
    }
  }
  if (item.attId == 'charts2') {
    if (!charts2num.value) {
      chartlistnum.value = chartlistnum.value - 1
      initcharts2.group = ''
      window.removeEventListener('resize', function () {
        initcharts2.resize()
      })
      initcharts2.dispose()
      initcharts2 = null
      // chartsInfodom.removeChild(charts2.value)
      charts2.value.style.display = 'none'
      charts2num.value = 1
    } else {
      chartlistnum.value = chartlistnum.value + 1
      charts2.value.style.height = `${heightList.value[1]}px`
      charts2.value.style.display = 'block'
      initcharts2 = echarts.init(charts2.value)
      // 图表的配置信息
      let option2 = {
        animation: false,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        grid: {
          top: '10%',
          left: '3%',
          right: '3%',
          bottom: '20%',
        },
        dataZoom: [
          {
            type: 'inside',
          },
          {
            type: 'slider',
            show: false,
          },
        ],
        xAxis: {
          type: 'category',
          data: xdata.value,
        },
        yAxis: {
          type: 'value',
          // splitNumber: 3 ,
          interval: 10,
        },
        series: [
          {
            name: 'VOL',
            type: 'bar',
            data: vol.value,
          },
        ],
      }
      // 设置图表实例的配置项
      initcharts2.setOption(option2)
      // mergeOptions方法可以合并两个对象，并返回合并后的对象。
      // chart.setOption(options)

      // 图表的分组，用于联动
      initcharts2.group = 'group1'

      // 根据页面大小自动响应图表大小
      // window.addEventListener('resize', function () {
      //   initcharts2.resize()
      // })
      charts2num.value = 0
    }
  }
  if (item.attId == 'charts3') {
    if (!charts3num.value) {
      chartlistnum.value = chartlistnum.value - 1
      initcharts3.group = ''
      window.removeEventListener('resize', function () {
        initcharts3.resize()
      })
      initcharts3.dispose()
      initcharts3 = null
      // chartsInfodom.removeChild(charts3.value)
      charts3.value.style.display = 'none'
      charts3num.value = 1
    } else {
      chartlistnum.value = chartlistnum.value + 1
      charts3.value.style.height = `${heightList.value[1]}px`
      charts3.value.style.display = 'block'
      initcharts3 = echarts.init(charts3.value)
      // 图表的配置信息
      let option3 = {
        animation: false,
        tooltip: {
          trigger: 'axis', // 触发类型为坐标轴
          axisPointer: {
            // 坐标轴指示器
            type: 'cross', // 类型为交叉
            label: {
              backgroundColor: '#6a7985', // 标签背景色
            },
          },
        },
        grid: {
          top: '10%',
          left: '3%',
          right: '3%',
          bottom: '20%',
        },
        dataZoom: [
          {
            type: 'inside',
            xAxisIndex: [0, 0],
            start: 20,
            end: 100,
          },
          {
            type: 'slider',
            show: false,
          },
        ],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xdata.value,
        },
        yAxis: { type: 'value' },
        series: [
          {
            name: 'K',
            type: 'line',
            data: kValues.value,
            symbol: 'none',
            smooth: true,
          },
          {
            name: 'D',
            type: 'line',
            data: dValues.value,
            symbol: 'none',
            smooth: true,
          },
          {
            name: 'J',
            type: 'line',
            data: jValues.value,
            symbol: 'none',
            smooth: true,
          },
        ],
      }
      // 设置图表实例的配置项
      initcharts3.setOption(option3)

      // 图表的分组，用于联动
      initcharts3.group = 'group1'

      // 根据页面大小自动响应图表大小
      // window.addEventListener('resize', function () {
      //   initcharts3.resize()
      // })
      charts3num.value = 0
    }
  }
  if (item.attId == 'charts4') {
    // let chartsInfodom = chartsInfo.value
    if (!charts4num.value) {
      chartlistnum.value = chartlistnum.value - 1
      initcharts4.group = ''
      window.removeEventListener('resize', function () {
        initcharts4.resize()
      })
      initcharts4.dispose()
      initcharts4 = null
      // chartsInfodom.removeChild(charts4.value)
      charts4.value.style.display = 'none'
      charts4num.value = 1
    } else {
      chartlistnum.value = chartlistnum.value + 1
      charts4.value.style.height = `${heightList.value[1]}px`
      charts4.value.style.display = 'block'
      initcharts4 = echarts.init(charts4.value)
      // 图表的配置信息
      let option4 = {
        animation: false,
        tooltip: {
          trigger: 'axis', // 触发类型为坐标轴
          axisPointer: {
            // 坐标轴指示器
            type: 'cross', // 类型为交叉
            label: {
              backgroundColor: '#6a7985', // 标签背景色
            },
          },
        },
        grid: {
          top: '10%',
          left: '3%',
          right: '3%',
          bottom: '20%',
        },
        dataZoom: [
          {
            type: 'inside',
            xAxisIndex: [0, 0],
            start: 20,
            end: 100,
          },
          {
            type: 'slider',
            show: false,
          },
        ],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: xdata.value,
        },
        yAxis: { type: 'value' },
        series: [
          {
            name: 'rsi1',
            type: 'line',
            data: rsi1.value,
            symbol: 'none',
            smooth: true,
            // lineStyle: {
            //   width: 1,
            // },
            // areaStyle: {
            //   opacity: 0.5,
            // },
            // itemStyle: {
            //   color: 'rgba(0,128,255,1)',
            // },
          },
          {
            name: 'rsi2',
            type: 'line',
            data: rsi2.value,
            symbol: 'none',
            smooth: true,
            //   lineStyle: {
            //     width: 1,
            //   },
            //   areaStyle: {
            //     opacity: 0.5,
            //   },
            //   itemStyle: {
            //     color: 'rgba(0,128,255,1)',
            //  },
          },
          {
            name: 'rsi3',
            type: 'line',
            data: rsi3.value,
            symbol: 'none',
            smooth: true,
            //   lineStyle: {
            //     width: 1,
            //   },
            //   areaStyle: {
            //     opacity: 0.5,
            //   },
            //   itemStyle: {
            //     color: 'rgba(0,128,255,1)',
            //  },
          },
        ],
      }
      // 设置图表实例的配置项
      initcharts4.setOption(option4)
      // mergeOptions方法可以合并两个对象，并返回合并后的对象。
      // chart.setOption(options)

      // 图表的分组，用于联动
      initcharts4.group = 'group1'

      // 根据页面大小自动响应图表大小
      // window.addEventListener('resize', function () {
      //   initcharts4.resize()
      // })
      charts4num.value = 0
    }
  }

  // 计算高度
  // dynamicsHeight()
  // 绘制K线图
  // configecharts()
  chartBox.group = ''
  window.removeEventListener('resize', function () {
    chartBox.resize()
  })
  chartBox.dispose()
  chartBox = null
  // chartsInfodom.removeChild(mKline.value)

  chartBox = echarts.init(document.getElementById('main'))
  // 直接使用pinia中储存的option数据
  const option = {
    animation: false,
    tooltip: {
      trigger: 'axis', // 触发类型为坐标轴
      axisPointer: {
        // 坐标轴指示器
        type: 'cross', // 类型为交叉
        label: {
          backgroundColor: '#6a7985', // 标签背景色
        },
        animation: false,
      },
    },
    legend: {
      data: ['KLine', 'MA5', 'BOLL1', 'BOLL2'],
    },
    grid: [
      {
        left: '3%',
        right: '3%',
        bottom: '5%',
      },
    ],
    xAxis: [
      {
        type: 'category',
        data: xdata.value,
        gridIndex: 0,
        scale: true,
        boundaryGap: false,
        axisLine: { onZero: false },
        splitLine: { show: false },
        splitNumber: 20,
        min: 'dataMin',
        max: 'dataMax',
        sampling: 'lttb', // 最大程度保证采样后线条的趋势，形状和极值。
      },
    ],
    yAxis: [
      {
        gridIndex: 0,
        scale: true,
        splitArea: {
          show: false,
        },
      },
    ],
    dataZoom: [
      {
        type: 'slider',
      },
      {
        type: 'inside',
      },
    ],
    series: [
      {
        name: 'KLine',
        type: 'candlestick',
        xAxisIndex: 0,
        yAxisIndex: 0,
        data: kdata.value,
        itemStyle: {
          normal: {
            color: '#ef232a',
            color0: '#14b143',
            borderColor: '#ef232a',
            borderColor0: '#14b143',
          },
        },
      },
      {
        name: 'MA5',
        type: 'line',
        xAxisIndex: 0,
        yAxisIndex: 0,
        data: ma5.value,
        symbol: 'none',
        smooth: true,
        lineStyle: {
          normal: {
            opacity: 0.5,
          },
        },
      },
      {
        name: 'BOLL1',
        type: 'line',
        xAxisIndex: 0,
        yAxisIndex: 0,
        data: topStdDev.value,
        symbol: 'none',
        smooth: true,
        lineStyle: {
          normal: {
            opacity: 0.5,
            color: 'red',
          },
        },
      },
      {
        name: 'BOLL2',
        type: 'line',
        xAxisIndex: 0,
        yAxisIndex: 0,
        data: downStdDev.value,
        symbol: 'none',
        smooth: true,
        lineStyle: {
          normal: {
            opacity: 0.5,
            color: 'green',
          },
        },
      },
    ],
  }
  // 配置图表数据信息
  chartBox.setOption(option)

  // 图表的分组，用于联动
  chartBox.group = 'group1'
  // 根据页面大小自动响应图表大小
  window.addEventListener('resize', function () {
    chartBox.resize()
  })

  console.log(chartsInfo.value.children.length)
}

// 连接所有图表
echarts.connect('group1')

let res = ref({})

const fetchDataAndRenderChart = async () => {
  try {
    res.value = await requestINfo()
    // 判断数据是否为空
    if (Object.keys(res.value.date).length == 0) {
      console.log('没有数据')
      router.push('/thenew/nodata')
      return
    }

    kdata.value = []
    xdata.value = []
    closedata.value = []
    ma5.value = []
    // MACD
    dif.value = []
    dea.value = []
    macd.value = []
    // 标准差
    StdDev.value = []
    topStdDev.value = []
    downStdDev.value = []
    // KDJ
    kValues.value = []
    dValues.value = []
    jValues.value = []
    rsi1.value = []
    rsi2.value = []
    rsi3.value = []
    vol.value = []

    xdata.value = Object.values(res.value.date)

    let { open, close, low, high } = res.value
    for (let i = 0; i < Object.keys(open).length; i++) {
      kdata.value.push([open[i], close[i], low[i], high[i]])
      closedata.value.push(close[i])
    }

    // 计算5日移动平均线
    ma5.value = calculateMA(closedata.value, 5)

    StdDev.value = calculateStdDeviation(closedata.value)

    topStdDev.value = closedata.value.map((item) =>
      parseFloat((item + StdDev.value).toFixed(2))
    )
    downStdDev.value = closedata.value.map((item) =>
      parseFloat((item - StdDev.value).toFixed(2))
    )

    // MACD数据
    // let { dif, dea, macd } = calculateMACD(closedata.value)
    dif.value = calculateMACD(closedata.value).dif
    dea.value = calculateMACD(closedata.value).dea
    macd.value = calculateMACD(closedata.value).macd

    // 准备数据数组，同时设置颜色
    macd.value = macd.value.map(function (value) {
      return {
        value: value,
        itemStyle: {
          color: value >= 0 ? '#FF0000' : '#00FF00', // 根据值的正负设置颜色
        },
      }
    })

    chartConfigs.value[0].options.series[0].data = dif.value
    chartConfigs.value[0].options.series[1].data = dea.value
    chartConfigs.value[0].options.series[2].data = macd.value
    chartConfigs.value[0].options.xAxis.data = xdata.value

    // vol数据
    vol.value = calculateVOL(close, high, low)
    chartConfigs.value[1].options.xAxis.data = xdata.value
    chartConfigs.value[1].options.series[0].data = vol.value

    // KDJ数据
    // let { kValues, dValues, jValues } = calculateKDJ(res.value)
    kValues.value = calculateKDJ(res.value).kValues
    dValues.value = calculateKDJ(res.value).dValues
    jValues.value = calculateKDJ(res.value).jValues

    chartConfigs.value[2].options.series[0].data = kValues.value
    chartConfigs.value[2].options.series[1].data = dValues.value
    chartConfigs.value[2].options.series[2].data = jValues.value
    chartConfigs.value[2].options.xAxis.data = xdata.value

    // RSI数据
    rsi1.value = calculateRSI(closedata.value)
    rsi2.value = calculateRSI(closedata.value, 12)
    rsi3.value = calculateRSI(closedata.value, 24)
    chartConfigs.value[3].options.series[0].data = rsi1.value
    chartConfigs.value[3].options.series[1].data = rsi2.value
    chartConfigs.value[3].options.series[2].data = rsi3.value
    chartConfigs.value[3].options.xAxis.data = xdata.value

    // 计算高度
    // dynamicsHeight()
    // 绘制K线图
    // configecharts()
  } catch (error) {
    console.log(error)
  }
}




onMounted(async () => {
  // 初始数据请求
  await fetchDataAndRenderChart()
  
  // --------------------------初始化k线图图表---------------------
  // 先将容器中的_echarts_instance_清除，不处理会导致高度变化了但图表不刷新
  document.getElementById('main').removeAttribute('_echarts_instance_')
  chartBox = echarts.init(document.getElementById('main'))
  // 直接使用pinia中储存的option数据
  let option = {
    animation: false,
    tooltip: {
      trigger: 'axis', // 触发类型为坐标轴
      axisPointer: {
        // 坐标轴指示器
        type: 'cross', // 类型为交叉
        label: {
          backgroundColor: '#6a7985', // 标签背景色
        },
        animation: false,
      },
    },
    legend: {
      data: ['KLine', 'MA5', 'BOLL1', 'BOLL2'],
      textStyle: {
        color: '#fff',
        fontSize: 12,
      },
    },
    grid: [
      {
        left: '3%',
        right: '3%',
        bottom: '10%',
        top: '12%',
      },
    ],
    xAxis: [
      {
        type: 'category',
        data: xdata.value,
        gridIndex: 0,
        scale: true,
        boundaryGap: false,
        axisLine: { onZero: false },
        splitLine: { show: false },
        splitNumber: 20,
        min: 'dataMin',
        max: 'dataMax',
        sampling: 'lttb', // 最大程度保证采样后线条的趋势，形状和极值。
      },
    ],
    yAxis: [
      {
        gridIndex: 0,
        scale: true,
        splitArea: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            color: 'white',
            opacity: 0.1,
          },
        },
      },
    ],
    dataZoom: [
      {
        type: 'slider',
      },
      {
        type: 'inside',
      },
    ],
    series: [
      {
        name: 'KLine',
        type: 'candlestick',
        xAxisIndex: 0,
        yAxisIndex: 0,
        data: kdata.value,
        itemStyle: {
          normal: {
            color: '#ef232a',
            color0: '#14b143',
            borderColor: '#ef232a',
            borderColor0: '#14b143',
          },
        },
      },
      {
        name: 'MA5',
        type: 'line',
        xAxisIndex: 0,
        yAxisIndex: 0,
        data: ma5.value,
        symbol: 'none',
        smooth: true,
        lineStyle: {
          normal: {
            opacity: 0.8,
            width: 2,
          },
        },
      },
      {
        name: 'BOLL1',
        type: 'line',
        xAxisIndex: 0,
        yAxisIndex: 0,
        data: topStdDev.value,
        symbol: 'none',
        smooth: true,
        lineStyle: {
          normal: {
            opacity: 0.5,
            color: 'red',
          },
        },
      },
      {
        name: 'BOLL2',
        type: 'line',
        xAxisIndex: 0,
        yAxisIndex: 0,
        data: downStdDev.value,
        symbol: 'none',
        smooth: true,
        lineStyle: {
          normal: {
            opacity: 0.5,
            color: 'green',
          },
        },
      },
    ],
  }
  if(!theme.value){
    option.legend.textStyle.color = '#fff'
    option.yAxis[0].splitLine.lineStyle.color = '#fff'
    option.yAxis[0].splitLine.lineStyle.opacity = 0.1
  }
  if(theme.value){
    option.legend.textStyle.color = '#000'
    option.yAxis[0].splitLine.lineStyle.color = 'rgb(168, 168, 168)'
    option.yAxis[0].splitLine.lineStyle.opacity = 0.4
  }


  // 配置图表数据信息
  chartBox.setOption(option)

  // 图表的分组，用于联动
  chartBox.group = 'group1'
  // 根据页面大小自动响应图表大小
  window.addEventListener('resize', function(){
    chartBox.resize()
  })

  // -------------------------MACD-------------------------------
  charts1.value.style.height = `${heightList.value[1]}px`
  initcharts1 = echarts.init(charts1.value)
  // 图表的配置信息
  let option1 = {
    animation: false,
    tooltip: {
      trigger: 'axis', // 触发类型为坐标轴
      axisPointer: {
        // 坐标轴指示器
        type: 'cross', // 类型为交叉
        label: {
          backgroundColor: '#6a7985', // 标签背景色
        },
      },
    },
    grid: {
      top: '10%',
      left: '3%',
      right: '3%',
      bottom: '20%',
    },
    dataZoom: [
      {
        type: 'inside',
      },
      {
        type: 'slider',
        show: false,
      },
    ],
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xdata.value,
    },
    yAxis: [{
      type: 'value',
      splitLine: {
        lineStyle: {
          color: 'white',
          opacity: 0.1,
        },
      },
    }],
    series: [
      {
        name: 'DIF',
        type: 'line',
        itemStyle: {
          normal: {
            color: 'rgba(204,102,0,1)',
          },
        },
        symbol: 'none',
        data: dif.value,
      },
      {
        name: 'DEA',
        type: 'line',
        itemStyle: {
          normal: {
            color: 'rgba(0,128,255,1)',
          },
        },
        symbol: 'none',
        data: dea.value,
      },
      {
        name: 'MACD',
        type: 'bar',
        barWidth: '1',
        // symbol: 'none',
        data: macd.value,
      },
    ],
  }
  if(!theme.value){
    option1.yAxis[0].splitLine.lineStyle.color = '#fff'
    option1.yAxis[0].splitLine.lineStyle.opacity = 0.1
  }
  if(theme.value){
    option1.yAxis[0].splitLine.lineStyle.color = 'rgb(168, 168, 168)'
    option1.yAxis[0].splitLine.lineStyle.opacity = 0.4
  }


  // 设置图表实例的配置项
  initcharts1.setOption(option1)

  // 图表的分组，用于联动
  initcharts1.group = 'group1'

  // 根据页面大小自动响应图表大小
  window.addEventListener('resize', function(){
    initcharts1.resize()
  })
  // --------------------------------------------------------

  // ------------------------VOL--------------------------------
  charts2.value.style.height = `${heightList.value[1]}px`
  initcharts2 = echarts.init(charts2.value)
  // 图表的配置信息
  let option2 = {
    animation: false,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
        },
      },
    },
    grid: {
      top: '10%',
      left: '3%',
      right: '3%',
      bottom: '20%',
    },
    dataZoom: [
      {
        type: 'inside',
      },
      {
        type: 'slider',
        show: false,
      },
    ],
    xAxis: {
      type: 'category',
      data: xdata.value,
    },
    yAxis: [{
      type: 'value',
      // splitNumber: 3 ,
      interval: 10,
      splitLine: {
        lineStyle: {
          color: 'white',
          opacity: 0.1,
        },
      },
    }],
    series: [
      {
        name: 'VOL',
        type: 'bar',
        data: vol.value,
      },
    ],
  }

  if(!theme.value){
    option2.yAxis[0].splitLine.lineStyle.color = '#fff'
    option2.yAxis[0].splitLine.lineStyle.opacity = 0.1
  }
  if(theme.value){
    option2.yAxis[0].splitLine.lineStyle.color = 'rgb(168, 168, 168)'
    option2.yAxis[0].splitLine.lineStyle.opacity = 0.4
  }

  // 设置图表实例的配置项
  initcharts2.setOption(option2)
  // 图表的分组，用于联动
  initcharts2.group = 'group1'

  // 根据页面大小自动响应图表大小
  window.addEventListener('resize', function(){
    initcharts2.resize()
  })
  // --------------------------------------------------------

  // -----------------------KDJ---------------------------------
  charts3.value.style.height = `${heightList.value[1]}px`
  initcharts3 = echarts.init(charts3.value)
  // 图表的配置信息
  let option3 = {
    animation: false,
    tooltip: {
      trigger: 'axis', // 触发类型为坐标轴
      axisPointer: {
        // 坐标轴指示器
        type: 'cross', // 类型为交叉
        label: {
          backgroundColor: '#6a7985', // 标签背景色
        },
      },
    },
    grid: {
      top: '10%',
      left: '3%',
      right: '3%',
      bottom: '20%',
    },
    dataZoom: [
      {
        type: 'inside',
        xAxisIndex: [0, 0],
        start: 20,
        end: 100,
      },
      {
        type: 'slider',
        show: false,
      },
    ],
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xdata.value,
    },
    yAxis: [{
      type: 'value',
      splitLine: {
        lineStyle: {
          color: 'white',
          opacity: 0.1,
        },
      },
    }],
    series: [
      {
        name: 'K',
        type: 'line',
        data: kValues.value,
        symbol: 'none',
        smooth: true,
        lineStyle: {
          width: 1, // 设置线条宽度为5
        },
      },
      {
        name: 'D',
        type: 'line',
        data: dValues.value,
        symbol: 'none',
        smooth: true,
        lineStyle: {
          width: 1, // 设置线条宽度为5
        },
      },
      {
        name: 'J',
        type: 'line',
        data: jValues.value,
        symbol: 'none',
        smooth: true,
        lineStyle: {
          width: 1, // 设置线条宽度为5
        },
      },
    ],
  }

  if(!theme.value){
    option3.yAxis[0].splitLine.lineStyle.color = '#fff'
    option3.yAxis[0].splitLine.lineStyle.opacity = 0.1
  }
  if(theme.value){
    option3.yAxis[0].splitLine.lineStyle.color = 'rgb(168, 168, 168)'
    option3.yAxis[0].splitLine.lineStyle.opacity = 0.4
  }
  // 设置图表实例的配置项
  initcharts3.setOption(option3)

  // 图表的分组，用于联动
  initcharts3.group = 'group1'

  // 根据页面大小自动响应图表大小
  window.addEventListener('resize', function(){
    initcharts3.resize()
  })
  // --------------------------------------------------------

  // ----------------------RSI----------------------------------
  charts4.value.style.height = `${heightList.value[1]}px`
  initcharts4 = echarts.init(charts4.value)
  // 图表的配置信息
  let option4 = {
    animation: false,
    tooltip: {
      trigger: 'axis', // 触发类型为坐标轴
      axisPointer: {
        // 坐标轴指示器
        type: 'cross', // 类型为交叉
        label: {
          backgroundColor: '#6a7985', // 标签背景色
        },
      },
    },
    grid: {
      top: '10%',
      left: '3%',
      right: '3%',
      bottom: '20%',
    },
    dataZoom: [
      {
        type: 'inside',
        xAxisIndex: [0, 0],
        start: 20,
        end: 100,
      },
      {
        type: 'slider',
        show: false,
      },
    ],
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xdata.value,
    },
    yAxis: [{
      type: 'value',
      splitLine: {
        lineStyle: {
          color: 'white',
          opacity: 0.1,
        },
      },
    }],
    series: [
      {
        name: 'rsi1',
        type: 'line',
        data: rsi1.value,
        symbol: 'none',
        smooth: true,
        lineStyle: {
          width: 1, // 设置线条宽度为5
        },
      },
      {
        name: 'rsi2',
        type: 'line',
        data: rsi2.value,
        symbol: 'none',
        smooth: true,
        lineStyle: {
          width: 1, // 设置线条宽度为5
        },
      },
      {
        name: 'rsi3',
        type: 'line',
        data: rsi3.value,
        symbol: 'none',
        smooth: true,
        lineStyle: {
          width: 1, // 设置线条宽度为5
        },
      },
    ],
  }

  if(!theme.value){
    option4.yAxis[0].splitLine.lineStyle.color = '#fff'
    option4.yAxis[0].splitLine.lineStyle.opacity = 0.1
  }
  if(theme.value){
    option4.yAxis[0].splitLine.lineStyle.color = 'rgb(168, 168, 168)'
    option4.yAxis[0].splitLine.lineStyle.opacity = 0.4
  }
  // 设置图表实例的配置项
  initcharts4.setOption(option4)
  // 图表的分组，用于联动
  initcharts4.group = 'group1'

  // 根据页面大小自动响应图表大小
  window.addEventListener('resize', function(){
    initcharts4.resize()
  })

  watch(
    () => theme.value,
    async (news, old) => {
      await nextTick()
      console.log(news)

      if (news === false) {
        try{
          option.legend.textStyle.color = '#fff'
          option.yAxis[0].splitLine.lineStyle.color = '#fff'
          option.yAxis[0].splitLine.lineStyle.opacity = 0.1

          option1.yAxis[0].splitLine.lineStyle.color = '#fff'
          option1.yAxis[0].splitLine.lineStyle.opacity = 0.1

          option2.yAxis[0].splitLine.lineStyle.color = '#fff'
          option2.yAxis[0].splitLine.lineStyle.opacity = 0.1

          option3.yAxis[0].splitLine.lineStyle.color = '#fff'
          option3.yAxis[0].splitLine.lineStyle.opacity = 0.1

          option4.yAxis[0].splitLine.lineStyle.color = '#fff'
          option4.yAxis[0].splitLine.lineStyle.opacity = 0.1

          chartBox.setOption(option)
          initcharts1.setOption(option1)
          initcharts2.setOption(option2)
          initcharts3.setOption(option3)
          initcharts4.setOption(option4)
        }catch(err){}
      }
      if (news === true) {

        try{
          option.legend.textStyle.color = '#000'
        option.yAxis[0].splitLine.lineStyle.color = 'rgb(168, 168, 168)'
        option.yAxis[0].splitLine.lineStyle.opacity = 0.4

        option1.yAxis[0].splitLine.lineStyle.color = 'rgb(168, 168, 168)'
        option1.yAxis[0].splitLine.lineStyle.opacity = 0.4

        option2.yAxis[0].splitLine.lineStyle.color = 'rgb(168, 168, 168)'
        option2.yAxis[0].splitLine.lineStyle.opacity = 0.4

        option3.yAxis[0].splitLine.lineStyle.color = 'rgb(168, 168, 168)'
        option3.yAxis[0].splitLine.lineStyle.opacity = 0.4

        option4.yAxis[0].splitLine.lineStyle.color = 'rgb(168, 168, 168)'
        option4.yAxis[0].splitLine.lineStyle.opacity = 0.4

        chartBox.setOption(option)
        initcharts1.setOption(option1)
        initcharts2.setOption(option2)
        initcharts3.setOption(option3)
        initcharts4.setOption(option4)
        }catch(err){}
      }
    }
  )

  
})
// 在组件销毁时清除定时器
onBeforeUnmount(() => {
  if (chartBox) {
    window.removeEventListener('resize', function(){
      chartBox.resize()
    })
    chartBox.dispose() // 销毁 ECharts 实例
    chartBox = null // 手动释放引用
  }
  if (initcharts1) {
    window.removeEventListener('resize', function(){
      initcharts1.resize()
    })
    initcharts1.dispose()
    initcharts1 = null
  }
  if (initcharts2) {
    window.removeEventListener('resize', function(){
      initcharts2.resize()
    })
    initcharts2.dispose()
    initcharts2 = null
  }
  if (initcharts3) {
    window.removeEventListener('resize', function(){
      initcharts3.resize()
    })
    initcharts3.dispose()
    initcharts3 = null
  }
  if (initcharts4) {
    window.removeEventListener('resize', function(){
      initcharts4.resize()
    })
    initcharts4.dispose()
    initcharts4 = null
  }
})
</script>

<template>
  <div class="box">
    <div class="chartsinfo" ref="chartsInfo">
      <div class="newk">
        <!-- K线图 -->
        <div
          id="main"
          ref="mKline"
          class="flex-item"
          :style="{ height: `100%` }"
        ></div>
      </div>

      <div class="newd">
        <div
          id="charts1"
          ref="charts1"
        ></div>
        <div
          id="charts2"
          ref="charts2"
        ></div>
        <div
          id="charts3"
          ref="charts3"
        ></div>
        <div
          id="charts4"
          ref="charts4"
        ></div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--my-common-bgc-2) !important;
}
.chartsinfo {
  height: 100%;
  min-height: calc(100vh - 52px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

}
.newk{
  flex: 2;
  border-bottom: 1px solid rgb(190, 187, 187);
}
.newd{
  flex: 2;
  /* border: 1px solid rgb(240, 33, 147); */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.typelist {
  margin-top: auto;
  position: relative;
  z-index: 99;
  width: 100%;
  /* color: #414040; */
  background-color: var(--my-common-bgc-2) !important;
  color: var(--my-common-fc-1);
  font-size: 12px;
  display: flex;
  list-style: none;
  padding: 0;
}

.typelist > li {
  padding: 2px 8px;
  cursor: pointer;
}
.typelist > li:hover {
  color: gold;
}

.active {
  color: #2d98b9;
}
</style>
