<template>
  <div class="page-div">
    <back-button />
    <div class="header">
        <div class="header-content">
          <h1 class="title">{{ economyName }}</h1>
      </div>
    </div>
    <div class="info-card" v-for="item in chartList" :key="item.id">
      <div class="card-title">{{ item.name }}</div>
      <div class="chart-container">
        <van-loading v-show="item.loading" type="spinner" color="#1989fa" class="loading" />
        <div :id="`${item.id}`" class="chartDiv"></div>
      </div>
      <div class="value-list-container">
        <div v-for="(res, index) in item.valueList" :key="index" class="value-item">
          <span class="value-name">{{ res.name }}:</span>
          <span class="value-value">{{ res.value }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang='ts'>
import BackButton from '@/components/back-button.vue'
import moment from 'moment'

import { ref, onMounted, nextTick } from 'vue'

import { useRoute } from 'vue-router'
const route = useRoute()
const economyName = ref('')
let chartList = ref<any[]>([])
import { chartMixins } from '@/mixins/chart-mixins'
const { charts, destroyedFlag } = chartMixins()

const init = async () => {
  const id = route.params.id + ''
  if (id === '1') {
    economyName.value = '储蓄专题'
    charts.value = [null, null, null, null, null, null, null]
    chartList.value = [{
      id: 'yoyReduce',
      loading: true,
      name: '储蓄增速VSM2 Spread(%)',
      valueList: []
    }, {
      id: 'deposit1',
      loading: true,
      name: '沪深市值/住户存款(%)',
      valueList: []
    }, {
      id: 'deposit2',
      loading: true,
      name: '(沪深京市值+港股通南向余额)/住户存款(%)',
      valueList: []
    }, {
      id: 'deposit',
      loading: true,
      name: '住户存款(万亿)',
      valueList: []
    }, {
      id: 'depositYoy',
      loading: true,
      name: '居民存储同比增速(%)',

      valueList: []
    }, {
      id: 'm2',
      loading: true,
      name: '货币和准货币(M2)(万亿)',
      valueList: []
    }, {
      id: 'm2Yoy',
      loading: true,
      name: '货币和准货币(M2)增速Yoy(%)',
      valueList: []
    }]
  } else if (id === '2') {
    economyName.value = '两融专题'
    charts.value = [null, null, null]
    chartList.value = [{
      id: 'twoFinancingData',
      loading: true,
      name: '两融数据',
      valueList: []
    }, {
      id: 'twoFinancingRatiosHs',
      loading: true,
      name: '两融比沪深(%)',
      valueList: []
    }, {
      id: 'twoFinancingInflow',
      loading: true,
      name: '两融净流入(亿)',
      valueList: []
    }]
  } else if (id === '3') {
    economyName.value = 'A股专题'
    charts.value = [null, null, null, null, null, null]
    chartList.value = [{
      id: 'totalShares',
      loading: true,
      name: '发行总股本(万亿)',
      valueList: []
    }, {
      id: 'totalMarket',
      loading: true,
      name: '总市值(万亿)',
      valueList: []
    }, {
      id: 'dealAmount',
      loading: true,
      name: '月成交金额(万亿)',
      valueList: []
    }, {
      id: 'turnoverRate',
      loading: true,
      name: '换手率(%)',
      valueList: []
    }, {
      id: 'volume',
      loading: true,
      name: '月成交量(万亿)',
      valueList: []
    }, {
      id: 'szNum',
      loading: true,
      name: '月开户数量(万)',
      valueList: []
    }]
  } else if (id === '4') {
    economyName.value = '指数专题'
    charts.value = [null, null, null, null]
    chartList.value = [{
      id: 'hsIndex',
      loading: true,
      name: 'Hang Seng Index and Sub-indexes (HSI)(派息率)',
      valueList: []
    }, {
      id: 'hs300',
      loading: true,
      name: '沪深300',
      valueList: []
    }, {
      id: 'zz500',
      loading: true,
      name: '中证500',
      valueList: []
    }, {
      id: 'zz1000',
      loading: true,
      name: '中证1000',
      valueList: []
    }]
  }
  if (id === '1' || id === '2' || id === '3' || id === '4') {
    nextTick(() => {
      getChartData()
    })
  }
}

import * as echarts from 'echarts'
import { getLineSeries, getBarSeries, getBaseOption, getXAxis, getYAxis } from '@/utils/chart'
import {
  reportEconomyMonthDepositVsM2, reportEconomyMonthMarketHSVsDeposit, reportEconomyMonthMarketHSJVsDeposit,
  reportEconomyMonthListByItem, stockStockrzrqQueryRzrq, stockStockrzrqQueryRzToTotalMarket, stockStockrzrqQueryRzjme,
  reportEconomyMonthStockShares, reportEconomyMonthStockMarket, reportEconomyMonthStockAmount,
  reportEconomyMonthStockTurnoverRate, reportEconomyMonthStockVolume, reportEconomyMonthNewAccountNum, stockStockHsList
} from '@/utils/api'
const getChartData = async () => {
  const id = route.params.id + ''
  if (id === '1') {
    const { data: data0 } = await reportEconomyMonthDepositVsM2()
    const sysDate0: any = []
    const seriesList0: any = [getLineSeries({ name: '储蓄增速VSM2 Spread' }), getLineSeries({ name: '储蓄增速VSM2 Spread前三月均值' }), getLineSeries({ name: '储蓄增速VSM2 Spread后三月均值' })]
    data0.map((ele: any) => {
      sysDate0.push(ele.sysDate)
      seriesList0[0].data.push({ value: ele.depositYoy && ele.m2Yoy ? Math.round((ele.depositYoy - ele.m2Yoy) * 10000) / 100 : null })
      seriesList0[1].data.push({ value: ele.before3 ? Math.round(ele.before3 * 100) / 100 : null })
      seriesList0[2].data.push({ value: ele.after3 ? Math.round(ele.after3 * 100) / 100 : null })
    })
    const tooltipFormatter0 = function (data: any) {
      let backText = `日期：${data[0].name}<br/>`
      data.forEach((ele: any) => {
        backText += `<span style='color: ${ele.color}'>${ele.seriesName}</span>：`
        if (ele.value > 0) {
          backText += `<span style='color: red'>${ele.value ? ele.value + '%' : ''}</span><br/>`
        } else if (ele.value < 0) {
          backText += `<span style='color: green'>${ele.value ? ele.value + '%' : ''}</span><br/>`
        } else {
          backText += `<span>${ele.value ? ele.value + '%' : ''}</span><br/>`
        }
      })
      return backText
    }
    chartList.value[0].valueList = [
      { name: '日期', value: sysDate0[sysDate0.length - 1] },
      { name: '储蓄增速VSM2 Spread', value: seriesList0[0].data[seriesList0[0].data.length - 1].value + '%' },
      { name: '储蓄增速VSM2 Spread前三月均值', value: seriesList0[1].data[seriesList0[1].data.length - 1].value + '%' },
      { name: '储蓄增速VSM2 Spread后三月均值', value: seriesList0[2].data[seriesList0[2].data.length - 1].value ? seriesList0[2].data[seriesList0[2].data.length - 1].value + '%' : '' }
    ]
    setChartOption(
      0,
      [getYAxis({ })],
      sysDate0,
      seriesList0,
      tooltipFormatter0,
      { data: ['储蓄增速VSM2 Spread', '储蓄增速VSM2 Spread前三月均值', '储蓄增速VSM2 Spread后三月均值'], top: '10px' },
      [{ top: '80px', bottom: '20px', left: '40px', right: '40px' }]
    )
    const { data: data1 } = await reportEconomyMonthMarketHSVsDeposit()
    const chartData1 = getChartData2(data1, 1)
    chartList.value[1].valueList = [
      { name: '日期', value: chartData1.sysDate[chartData1.sysDate.length - 1] },
      { name: '总市值', value: chartData1.seriesList[0].data[chartData1.seriesList[0].data.length - 1].totalMarket + '万亿' },
      { name: '住房存款', value: chartData1.seriesList[0].data[chartData1.seriesList[0].data.length - 1].deposit + '万亿' },
      { name: '比例', value: chartData1.seriesList[0].data[chartData1.seriesList[0].data.length - 1].value + '%' }
    ]
    setChartOption(1, [getYAxis({ })], chartData1.sysDate, chartData1.seriesList, chartData1.tooltipFormatter)
    const { data: data2 } = await reportEconomyMonthMarketHSJVsDeposit()
    const chartData2 = getChartData2(data2, 2)
    chartList.value[2].valueList = [
      { name: '日期', value: chartData2.sysDate[chartData2.sysDate.length - 1] },
      { name: '总市值', value: chartData2.seriesList[0].data[chartData2.seriesList[0].data.length - 1].totalMarket + '万亿' },
      { name: '住房存款', value: chartData2.seriesList[0].data[chartData2.seriesList[0].data.length - 1].deposit + '万亿' },
      { name: '南方余额', value: chartData2.seriesList[0].data[chartData2.seriesList[0].data.length - 1].southBalance + '亿' },
      { name: '比例', value: chartData2.seriesList[0].data[chartData2.seriesList[0].data.length - 1].value + '%' }
    ]
    setChartOption(2, [getYAxis({ })], chartData2.sysDate, chartData2.seriesList, chartData2.tooltipFormatter)
    const chartData3: any = await getChartData3('deposit', '万亿', 10000)
    chartList.value[3].valueList = [
      { name: '日期', value: chartData3.sysDate[chartData3.sysDate.length - 1] },
      { name: '住户存款', value: chartData3.seriesList[0].data[chartData3.seriesList[0].data.length - 1].value + '万亿' }
    ]
    setChartOption(3, [getYAxis({ })], chartData3.sysDate, chartData3.seriesList, chartData3.tooltipFormatter)
    const chartData4: any = await getChartData3('deposit_yoy', '%', 100)
    chartList.value[4].valueList = [
      { name: '日期', value: chartData4.sysDate[chartData4.sysDate.length - 1] },
      { name: '居民存储同比增速', value: chartData4.seriesList[0].data[chartData4.seriesList[0].data.length - 1].value + '%' }
    ]
    setChartOption(4, [getYAxis({ })], chartData4.sysDate, chartData4.seriesList, chartData4.tooltipFormatter)
    const chartData5: any = await getChartData3('m2', '万亿', 10000)
    chartList.value[5].valueList = [
      { name: '日期', value: chartData5.sysDate[chartData5.sysDate.length - 1] },
      { name: '货币和准货币(M2)', value: chartData5.seriesList[0].data[chartData5.seriesList[0].data.length - 1].value + '万亿' }
    ]
    setChartOption(5, [getYAxis({ })], chartData5.sysDate, chartData5.seriesList, chartData5.tooltipFormatter)
    const chartData6: any = await getChartData3('m2_yoy', '%', 100)
    chartList.value[6].valueList = [
      { name: '日期', value: chartData6.sysDate[chartData6.sysDate.length - 1] },
      { name: '货币和准货币(M2)增速Yoy', value: chartData6.seriesList[0].data[chartData6.seriesList[0].data.length - 1].value + '%' }
    ]
    setChartOption(6, [getYAxis({ })], chartData6.sysDate, chartData6.seriesList, chartData6.tooltipFormatter)
  } else if (id === '2') {
    const { data: data0 } = await stockStockrzrqQueryRzrq()
    const sysDate0: any = []
    const seriesList0: any = [
      getLineSeries({ name: '沪深300', yAxisIndex: 2 }),
      getLineSeries({ name: '中证100', yAxisIndex: 2 }),
      getLineSeries({ name: '中证500', yAxisIndex: 2 }),
      getLineSeries({ name: '中证1000', yAxisIndex: 2 }),
      getLineSeries({ name: '沪深股票数', yAxisIndex: 2 }),
      getLineSeries({ name: '沪深总市值', yAxisIndex: 1 }),
      getLineSeries({ name: '沪深总股数', yAxisIndex: 1 }),
      getLineSeries({ name: '融资余额' }),
      getLineSeries({ name: '较去年融资增长率', yAxisIndex: 3 }),
      getLineSeries({ name: '去年平均融资额' })
    ]
    data0.map((ele: any) => {
      sysDate0.push(ele.sysDate)
      seriesList0[0].data.push({ value: ele.hs300 ? Math.round(ele.hs300 * 100) / 100 : null })
      seriesList0[1].data.push({ value: ele.zz100 ? Math.round(ele.zz100 * 100) / 100 : null })
      seriesList0[2].data.push({ value: ele.zz500 ? Math.round(ele.zz500 * 100) / 100 : null })
      seriesList0[3].data.push({ value: ele.zz1000 ? Math.round(ele.zz1000 * 100) / 100 : null })
      seriesList0[4].data.push({ value: ele.totalStock ? Math.round(ele.totalStock * 100) / 100 : null })
      seriesList0[5].data.push({ value: ele.totalMarket ? Math.round(ele.totalMarket / 1000000) / 100 : null })
      seriesList0[6].data.push({ value: ele.totalShares ? Math.round(ele.totalShares / 100000) / 100 : null })
      seriesList0[7].data.push({ value: ele.rzye ? Math.round(ele.rzye / 100) / 100 : null })
      seriesList0[8].data.push({ value: ele.rzyeLastYearAvg ? Math.round((ele.rzye - ele.rzyeLastYearAvg) / ele.rzyeLastYearAvg * 10000) / 100 : null })
      seriesList0[9].data.push({ value: ele.rzyeLastYearAvg ? Math.round(ele.rzyeLastYearAvg / 100) / 100 : null })
    })
    const tooltipFormatter0 = function (data: any) {
      let backText = `日期：${data[0].name}<br/>`
      data.forEach((ele: any) => {
        let value = ele.value
        if (ele.seriesName === '沪深总股数') {
          value = ele.value ? Math.round(ele.value * 10) / 100 + '万亿' : ''
        } else if (ele.seriesName === '沪深总市值' || ele.seriesName === '融资余额' || ele.seriesName === '去年平均融资额') {
          value = ele.value ? ele.value + '万亿' : ''
        } else if (ele.seriesName === '较去年融资增长率') {
          value = ele.value ? ele.value + '%' : ''
        }
        backText += `<div><span style="color: ${ele.color}">${ele.seriesName}</span>:${value}</div>`
      })
      return backText
    }
    chartList.value[0].valueList = [
      { name: '日期', value: sysDate0[sysDate0.length - 1] },
      { name: '沪深300', value: seriesList0[0].data[seriesList0[0].data.length - 1].value },
      { name: '中证100', value: seriesList0[1].data[seriesList0[1].data.length - 1].value },
      { name: '中证500', value: seriesList0[2].data[seriesList0[2].data.length - 1].value },
      { name: '中证1000', value: seriesList0[3].data[seriesList0[3].data.length - 1].value },
      { name: '沪深股票数', value: seriesList0[4].data[seriesList0[4].data.length - 1].value },
      { name: '沪深总市值', value: seriesList0[5].data[seriesList0[5].data.length - 1].value + '万亿' },
      { name: '沪深总股数', value: seriesList0[6].data[seriesList0[6].data.length - 1].value ? Math.round(seriesList0[6].data[seriesList0[6].data.length - 1].value * 10) / 100 + '万亿' : '' },
      { name: '融资余额', value: seriesList0[7].data[seriesList0[7].data.length - 1].value + '万亿' },
      { name: '较去年融资增长率', value: seriesList0[8].data[seriesList0[8].data.length - 1].value + '%' },
      { name: '去年平均融资额', value: seriesList0[9].data[seriesList0[9].data.length - 1].value + '万亿' }
    ]
    setChartOption(
      0,
      [getYAxis({ }), getYAxis({ showFlag: false, position: 'right' }), getYAxis({ showFlag: false, position: 'right' }), getYAxis({ showFlag: false, position: 'right' })],
      sysDate0,
      seriesList0,
      tooltipFormatter0,
      { 
        data: ['沪深300', '中证100', '中证500', '中证1000', '沪深股票数', '沪深总市值', '沪深总股数', '融资余额', '较去年融资增长率', '去年平均融资额'],
        top: '10px',
        selected: {
          沪深300: false,
          中证100: false,
          中证500: false,
          中证1000: false,
          沪深股票数: false,
          沪深总市值: false,
          沪深总股数: false,
          融资余额: true,
          较去年融资增长率: true,
          去年平均融资额: true
        }
      },
      [{ top: '100px', bottom: '20px', left: '40px', right: '40px' }]
    )
    const { data: data1 } = await stockStockrzrqQueryRzToTotalMarket()
    const sysDate1: any = []
    const seriesList1: any = [
      getLineSeries({ name: '比重' }),
      getLineSeries({ name: '创业板指数', yAxisIndex: 1 }),
      getLineSeries({ name: '沪深300', yAxisIndex: 1 }),
      getLineSeries({ name: '融资融券余额', yAxisIndex: 2 })
    ]
    data1.map((ele: any) => {
      sysDate1.push(ele.sysDate)
      seriesList1[0].data.push({
        value: Math.round(ele.per * 100) / 100,
        totalMarket: Math.round(ele.totalMarket / 1000000) / 100
      })
      seriesList1[1].data.push({ value: Math.round(ele.cybNav * 100) / 100 })
      seriesList1[2].data.push({ value: Math.round(ele.hs300Nav * 100) / 100 })
      seriesList1[3].data.push({ value: Math.round(ele.rzrqye / 100) / 100 })
    })
    const tooltipFormatter1 = function (data: any) {
      let backText = `日期：${data[0].name}<br/>`
      data.forEach((ele: any) => {
        if (ele.value) {
          if (ele.seriesName === '比重') {
            backText += `<br/><span style="color: blue">比重</span>:<span style="color: red">${ele.value}%</span><br/>`
            backText += `<span style="color: blue">沪深市值</span>:<span style="color: red">${ele.data.totalMarket ? ele.data.totalMarket + '万亿' : ''}</span><br/>`
          } else if (ele.seriesName === '融资融券余额') {
            backText += `<span style="color: blue">${ele.seriesName}</span>:<span style="color: red">${ele.value + '万亿'}</span><br/>`
          } else {
            backText += `<span style="color: blue">${ele.seriesName}</span>:<span style="color: red">${ele.value}</span><br/>`
          }
        }
      })
      return backText
    }
    chartList.value[1].valueList = [
      { name: '日期', value: sysDate1[sysDate1.length - 1] },
      { name: '沪深市值', value: seriesList1[0].data[seriesList1[0].data.length - 1].totalMarket + '万亿' },
      { name: '比重', value: seriesList1[0].data[seriesList1[0].data.length - 1].value + '%' },
      { name: '创业板指数', value: seriesList1[1].data[seriesList1[1].data.length - 1].value },
      { name: '沪深300', value: seriesList1[2].data[seriesList1[2].data.length - 1].value },
      { name: '融资融券余额', value: seriesList1[3].data[seriesList1[3].data.length - 1].value + '万亿' }
    ]
    setChartOption(
      1,
      [getYAxis({ }), getYAxis({ position: 'right', showFlag: false }), getYAxis({ position: 'right', showFlag: false })],
      sysDate1,
      seriesList1,
      tooltipFormatter1
    )
    const { data: data2 } = await stockStockrzrqQueryRzjme({
      beginDate: moment().subtract(1, 'years').format('YYYY-MM-DD'),
      endDate: moment().format('YYYY-MM-DD')
    })
    const sysDate2: any = []
    const seriesList2: any = [
      getBarSeries({ name: '两融净流入', labelFlag: false }),
      getLineSeries({ name: '沪深300', yAxisIndex: 1 }),
    ]
    let yMin1 = 0
    let yMax1 = 0
    let yMin2 = 0
    let yMax2 = 0
    let min = null
    data2.map((ele: any, index: number) => {
      sysDate2.push(ele.sys_date)
      seriesList2[0].data.push({ value: ele.rzjme })
      seriesList2[1].data.push({ value: ele.hs300 })
      if (index === 0) {
        yMin1 = ele.rzjme
        yMax1 = ele.rzjme
      } else {
        if (ele.rzjme < yMin1) {
          yMin1 = ele.rzjme
        }
        if (ele.rzjme > yMax1) {
          yMax1 = ele.rzjme
        }
      }
      if (index === 0) {
        yMin2 = ele.hs300
        yMax2 = ele.hs300
      } else {
        if (ele.hs300 < yMin2) {
          yMin2 = ele.hs300
        }
        if (ele.hs300 > yMax2) {
          yMax2 = ele.hs300
        }
      }
    })
    if (yMin1 < 0) {
      yMax1 = Math.ceil(yMax1 / 100) * 100
      yMax2 = Math.ceil(yMax2 / 100) * 100
      yMin1 = Math.floor(yMin1 / 100) * 100
      yMin2 = Math.floor(yMin2 / 100) * 100
      min = yMin2 - (yMax2 - yMin2) * ((0 - yMin1) / (yMax1 - yMin1) + 0.1)
      min = Math.floor(min / 100) * 100
    }
    const tooltipFormatter2 = function (data: any) {
      let backText = `日期：${data[0].name}<br/>`
      data.forEach((ele: any) => {
        if (ele.value) {
          backText += `<span style="color: blue">${ele.seriesName}：</span><span style="color: red">${ele.value}${ele.seriesName === '两融净流入' ? '亿' : ''}</span><br/>`
        }
      })
      return backText
    }
    chartList.value[2].valueList = [
      { name: '日期', value: sysDate2[sysDate2.length - 1] },
      { name: '两融净流入', value: seriesList2[0].data[seriesList2[0].data.length - 1].value + '亿' },
      { name: '沪深300', value: seriesList2[1].data[seriesList2[1].data.length - 1].value },
    ]
    setChartOption(
      2,
      yMin1 < 0 ?
      [getYAxis({ }), getYAxis({ position: 'right', showFlag: false, min: min, max: yMax2 })]:
      [getYAxis({ }), getYAxis({ position: 'right', showFlag: false })],
      sysDate2,
      seriesList2,
      tooltipFormatter2,
      { data: ['两融净流入', '沪深300'], top: '10px' },
      [{ top: '40px', bottom: '20px', left: '40px', right: '40px' }]
    )
  } else if (id === '3') {
    const { data: data0 } = await reportEconomyMonthStockShares()
    const chartData0: any = getChartData4(data0, '万亿', ['totalShares'], 10000)
    chartList.value[0].valueList = [
      { name: '日期', value: chartData0.sysDate[chartData0.sysDate.length - 1] },
      { name: '发行总股本', value: chartData0.seriesList[0].data[chartData0.seriesList[0].data.length - 1].value + '万亿' }
    ]
    setChartOption(0, [getYAxis({ })], chartData0.sysDate, chartData0.seriesList, chartData0.tooltipFormatter)
    const { data: data1 } = await reportEconomyMonthStockMarket()
    const chartData1: any = getChartData4(data1, '万亿', ['totalMarket'], 10000)
    chartList.value[1].valueList = [
      { name: '日期', value: chartData1.sysDate[chartData1.sysDate.length - 1] },
      { name: '总市值', value: chartData1.seriesList[0].data[chartData1.seriesList[0].data.length - 1].value + '万亿' }
    ]
    setChartOption(1, [getYAxis({ })], chartData1.sysDate, chartData1.seriesList, chartData1.tooltipFormatter)
    const { data: data2 } = await reportEconomyMonthStockAmount()
    const chartData2: any = getChartData4(data2, '', ['dealAmount'], 10000)
    chartList.value[2].valueList = [
      { name: '日期', value: chartData2.sysDate[chartData2.sysDate.length - 1] },
      { name: '月成交金额', value: chartData2.seriesList[0].data[chartData2.seriesList[0].data.length - 1].value + '万亿' }
    ]
    setChartOption(2, [getYAxis({ })], chartData2.sysDate, chartData2.seriesList, chartData2.tooltipFormatter)
    const { data: data3 } = await reportEconomyMonthStockTurnoverRate()
    const chartData3: any = getChartData4(data3, '%', ['turnoverRate'])
    chartList.value[3].valueList = [
      { name: '日期', value: chartData3.sysDate[chartData3.sysDate.length - 1] },
      { name: '换手率', value: chartData3.seriesList[0].data[chartData3.seriesList[0].data.length - 1].value + '%' }
    ]
    setChartOption(3, [getYAxis({ })], chartData3.sysDate, chartData3.seriesList, chartData3.tooltipFormatter)
    const { data: data4 } = await reportEconomyMonthStockVolume()
    const chartData4: any = getChartData4(data4, '万亿', ['volume'], 10000)
    chartList.value[4].valueList = [
      { name: '日期', value: chartData4.sysDate[chartData4.sysDate.length - 1] },
      { name: '月成交量', value: chartData4.seriesList[0].data[chartData4.seriesList[0].data.length - 1].value + '万亿' }
    ]
    setChartOption(4, [getYAxis({ })], chartData4.sysDate, chartData4.seriesList, chartData4.tooltipFormatter)
    const { data: data5 } = await reportEconomyMonthNewAccountNum()
    const chartData5: any = getChartData4(data5,  '万', ['totalNewAccountNum', 'shNewAccountNum'], 10000)
    chartList.value[5].valueList = [
      { name: '日期', value: chartData5.sysDate[chartData5.sysDate.length - 1] },
      { name: '总开户数', value: chartData5.seriesList[0].data[chartData5.seriesList[0].data.length - 1].value + '万' },
      { name: '上证开户数', value: chartData5.seriesList[1].data[chartData5.seriesList[1].data.length - 1].value + '万' }
    ]
    setChartOption(
      5,
      [getYAxis({ })],
      chartData5.sysDate,
      chartData5.seriesList,
      chartData5.tooltipFormatter,
      { data: ['总开户数', '上证开户数'], top: '10px' },
      [{ top: '40px', bottom: '20px', left: '40px', right: '40px' }]
    )
  } else if (id === '4') {
    const { data: data0 } = await stockStockHsList()
    const sysDate0: any = []
    const seriesList0: any = [
      getLineSeries({ name: 'Hang Seng Index(%)' }),
      getLineSeries({ name: 'HSI-Finance' }),
      getLineSeries({ name: 'HSI-Utilities' }),
      getLineSeries({ name: 'HSI-Properties' }),
      getLineSeries({ name: 'HSI-Com & Ind' }),
      getLineSeries({ name: 'Hang Seng Index', yAxisIndex: 1 })
    ]
    data0.monthList.forEach((ele: any) => {
      sysDate0.push(ele.hsMonth)
      seriesList0[0].data.push({ value: ele.hsi })
      seriesList0[1].data.push({ value: ele.hsiFinance })
      seriesList0[2].data.push({ value: ele.hsiUtilities })
      seriesList0[3].data.push({ value: ele.hsiProperties })
      seriesList0[4].data.push({ value: ele.hsiComInd })
      seriesList0[5].data.push({ value: ele.hsNav })
    })
    data0.dayList.forEach((ele: any) => {
      sysDate0.push(ele.sysDate)
      seriesList0[0].data.push({ value: ele.hsi })
      seriesList0[1].data.push({ value: ele.hsiFinance })
      seriesList0[2].data.push({ value: ele.hsiUtilities })
      seriesList0[3].data.push({ value: ele.hsiProperties })
      seriesList0[4].data.push({ value: ele.hsiComInd })
      seriesList0[5].data.push({ value: ele.hsNav })
    })
    if (data0.monthList.length > 0 && data0.dayList.length > 0) {
      seriesList0[5].markArea = {
        itemStyle: {
          color: '#afdfe4'
        },
        data: [
          [
            { name: '本月', xAxis: data0.monthList[data0.monthList.length - 1].hsMonth },
            { xAxis: data0.dayList[data0.dayList.length - 1].sysDate }
          ]
        ]
      }
    }
    const tooltipFormatter0 = function (data: any) {
      let backText = `日期：${data[0].name}<br/>`
      data.forEach((ele: any) => {
        backText += `<span style="color: ${ele.color}">${ele.seriesName}</span>:${ele.value ? ele.value : '暂无数据'}<br/>`
      })
      return backText
    }
    chartList.value[0].valueList = [
      { name: '日期', value: sysDate0[sysDate0.length - 1] },
      { name: 'Hang Seng Index(%)', value: seriesList0[0].data[seriesList0[0].data.length - 1].value },
      { name: 'HSI-Finance', value: seriesList0[1].data[seriesList0[1].data.length - 1].value },
      { name: 'HSI-Utilities', value: seriesList0[2].data[seriesList0[2].data.length - 1].value },
      { name: 'HSI-Properties', value: seriesList0[3].data[seriesList0[3].data.length - 1].value },
      { name: 'HSI-Com & Ind', value: seriesList0[4].data[seriesList0[4].data.length - 1].value },
      { name: 'Hang Seng Index', value: seriesList0[5].data[seriesList0[5].data.length - 1].value }
    ]
    setChartOption(
      0,
      [getYAxis({ }), getYAxis({ position: 'right', showFlag: false })],
      sysDate0,
      seriesList0,
      tooltipFormatter0,
      { data: ['Hang Seng Index(%)', 'HSI-Finance', 'HSI-Utilities', 'HSI-Properties', 'HSI-Com & Ind', 'Hang Seng Index'], top: '10px' },
      [{ top: '100px', bottom: '20px', left: '40px', right: '40px' }]
    )
    const chartData1: any = await getChartData3('hs300', '')
    chartList.value[1].valueList = [
      { name: '日期', value: chartData1.sysDate[chartData1.sysDate.length - 1] },
      { name: '中证300', value: chartData1.seriesList[0].data[chartData1.seriesList[0].data.length - 1].value }
    ]
    setChartOption(1, [getYAxis({ })], chartData1.sysDate, chartData1.seriesList, chartData1.tooltipFormatter)
    const chartData2: any = await getChartData3('zz500', '')
    chartList.value[2].valueList = [
      { name: '日期', value: chartData2.sysDate[chartData2.sysDate.length - 1] },
      { name: '中证500', value: chartData2.seriesList[0].data[chartData2.seriesList[0].data.length - 1].value }
    ]
    setChartOption(2, [getYAxis({ })], chartData2.sysDate, chartData2.seriesList, chartData2.tooltipFormatter)
    const chartData3: any = await getChartData3('zz1000', '')
    chartList.value[3].valueList = [
      { name: '日期', value: chartData3.sysDate[chartData3.sysDate.length - 1] },
      { name: '中证1000', value: chartData3.seriesList[0].data[chartData3.seriesList[0].data.length - 1].value }
    ]
    setChartOption(3, [getYAxis({ })], chartData3.sysDate, chartData3.seriesList, chartData3.tooltipFormatter)
  }
}

const getChartData2 = (data: any, index: number) => {
  const sysDate: any = []
  const seriesList: any = [getLineSeries({ })]
  data.map((ele: any) => {
    sysDate.push(ele.sysDate)
    const item: any = {
      value: Math.round(ele.rateValue * 100) / 100,
      deposit: Math.round(ele.deposit * 100) / 100,
      totalMarket: Math.round(ele.totalMarket * 100) / 100
    }
    if (index === 2) {
      item.southBalance = Math.round(ele.southBalance * 100) / 100
    }
    seriesList[0].data.push(item)
  })
  const tooltipFormatter = function (data: any) {
    let backText = `日期：${data[0].name}<br/>`
    data.forEach((ele: any) => {
      backText += `<span style="color: blue">总市值：</span><span style="color: red">${ele.data.totalMarket}万亿</span><br/>`
      backText += `<span style="color: blue">住房存款：</span><span style="color: red">${ele.data.deposit}万亿</span><br/>`
      if (index === 2 && ele.data.southBalance) {
        backText += `<span style="color: blue">南方余额：</span><span style="color: red">${ele.data.southBalance}亿</span><br/>`
      }
      backText += `<span style="color: blue">比例：</span><span style="color: red">${ele.data.value}%</span>`
    })
    return backText
  }
  return { sysDate: sysDate, seriesList: seriesList, tooltipFormatter: tooltipFormatter }
}

const getChartData3 = async(type: string, unit: string, scale?: number) => {
  const { data } = await reportEconomyMonthListByItem({ items: type })
  const sysDate: any = []
  const seriesList: any = [getLineSeries({ })]
  data.map((ele: any) => {
    sysDate.push(ele.sysDate)
    if (scale === 10000) {
      seriesList[0].data.push({ value: Math.round(ele[type] / 100) / 100 })
    } else if (scale === 100) {
      seriesList[0].data.push({ value: Math.round(ele[type] * 10000) / 100 })
    } else {
      seriesList[0].data.push({ value: Math.round(ele[type] * 100) / 100 })
    }
  })
  const tooltipFormatter = function (data: any) {
    let backText = `日期：${data[0].name}<br/>`
    data.forEach((ele: any) => {
      backText += `<span style='color: ${ele.color}'>${ele.value ? ele.value + unit : '暂无数据'}</span>`
    })
    return backText
  }
  return { sysDate: sysDate, seriesList: seriesList, tooltipFormatter: tooltipFormatter }
}

const getChartData4 = (data: any, unit: string, type: string[], scale?: number) => {
  const sysDate: any = []
  let seriesList: any = []
  if (type.length === 2) {
    seriesList = [getLineSeries({ name: '总开户数' }), getLineSeries({ name: '上证开户数' })]
  } else {
    seriesList = [getLineSeries({ })]
  }
  data.map((ele: any) => {
    sysDate.push(ele.sysDate)
    type.forEach((res, index) => {
      if (scale === 10000) {
        seriesList[index].data.push({ value: ele[res] ? Math.round(ele[res] / 100) / 100 : null })
      } else {
        seriesList[index].data.push({ value: Math.round(ele[res] * 100) / 100 })
      }
    })
  })
  const tooltipFormatter = function (data: any) {
    let backText = `日期：${data[0].name}<br/>`
    data.forEach((ele: any) => {
      if (type.length === 2) {
        backText += `<span style="color: ${ele.color}">${ele.seriesName}</span>:${ele.value ? ele.value + unit : '暂无数据'}<br/>`
      } else {
        backText += `<span style='color: ${ele.color}'>${ele.value ? ele.value + unit : '暂无数据'}</span><br/>`
      }
    })
    return backText
  }
  return { sysDate: sysDate, seriesList: seriesList, tooltipFormatter: tooltipFormatter }
}

const setChartOption = (index: number, yAxis: any, sysDate: any, series: any, tooltipFormatter: any, legend?: any, grid?: any) => {
  const option = getBaseOption({
    yAxis: yAxis,
    xAxis: [getXAxis({ data: sysDate })],
    series: series,
    legend: legend,
    tooltipFormatter: tooltipFormatter,
    grid: grid ? grid : [{ top: '20px', bottom: '20px', left: '40px', right: '40px' }]
  })
  if (!destroyedFlag.value && document.getElementById(chartList.value[index].id)) {
    const chart = echarts.init(document.getElementById(chartList.value[index].id))
    chart.setOption(option)
    charts.value[index] = chart
    chartList.value[index].loading = false
  }
}

onMounted (() =>{
  init()
})
</script>

<style lang='scss' scoped>
.page-div {
  padding-top: 86px;
  height: auto;

  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;

    @media screen and (min-width: 992px) {
      left: calc(50vw - 496px);
      right: calc(50vw - 496px);
    }
  }

  .chart-container {
    height: 30vh;

    @media screen and (min-width: 768px) {
      height: 40vh;
    }
  }
}

.value-list-container {
  padding: 12px 15px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  margin-top: 10px;
}

.value-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed #eee;
  transition: background-color 0.2s;
}

.value-item:last-child {
  border-bottom: none;
}

.value-item:hover {
  background-color: #f9f9f9;
}

.value-name {
  color: #666;
  font-weight: 500;
  flex: 1;
}

.value-value {
  color: #333;
  font-weight: bold;
  text-align: right;
  min-width: 80px;
}
</style>
