<template>
  <div :class="$style.wrapHeight">
    <a-card :bordered="false">
      <a-tabs v-model="activeKey" type="line" @change="toggleTabs">
        <a-tab-pane key="1" tab="指标趋势图表展示">
          <span class="header_sd-header_common"
            ><span :class="['toptitle', $style.toptitle]"
              >{{ monitorDeptName }}的{{ indiName }}趋势图表展示</span
            ></span
          >
          <template>
            <div><sd-echart :class="$style.echarts" :options="chartData" autoresize/></div>
          </template>
          <sd-table
            :class="$style.levelTable"
            :columns="columns"
            :data-source="data"
            :pagination="false"
            :bordered="true"
          ></sd-table>
        </a-tab-pane>
        <a-tab-pane key="2" tab="环比图表展示">
          <template>
            <div><sd-echart :class="$style.echarts" :options="chartZzData" autoresize/></div>
          </template>
        </a-tab-pane>
        <a-tab-pane key="3" tab="同比图表展示">
          <template>
            <div><sd-echart :class="$style.echarts" :options="chartTbZzData" autoresize/></div>
          </template>
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </div>
</template>

<script>
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/toolbox'
import kpiService from '../../kpi-service'
import components from './_import-components/kpi-trend-analysis-import'

export default {
  name: 'KpiTrendAnalysis',
  metaInfo: {
    title: '趋势分析',
  },
  components,
  data() {
    return {
      activeKey: '1',
      data: [],
      columns: [
        {
          title: '期次',
          dataIndex: 'qc',
        },
        {
          title: '指标值',
          dataIndex: 'zbz',
        },
        {
          title: '上期指标值',
          dataIndex: 'sqzbz',
        },
        {
          title: '环比增长率',
          dataIndex: 'hbzzl',
        },
        {
          title: '上年同期指标值',
          dataIndex: 'sntqzbz',
        },
        {
          title: '同比增长率',
          dataIndex: 'tbzzl',
        },
      ],
      chartData: {
        title: {
          left: 'center',
          text: null,
        },
        tooltip: {},
        legend: {
          data: [],
          bottom: 0,
        },
        grid: {},
        toolbox: {
          feature: {
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { title: '刷新', show: true },
            saveAsImage: { show: true },
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [],
        },
        yAxis: {
          type: 'value',
        },
        series: [],
      },
      chartZzData: {
        title: {
          left: 'center',
          text: null,
        },
        tooltip: {},
        legend: {
          data: [],
          bottom: 0,
        },
        grid: {},
        xAxis: {
          type: 'category',
          data: [],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [],
            type: 'bar',
            barWidth: '40px',
          },
        ],
        toolbox: {
          feature: {
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { title: '刷新', show: true },
            saveAsImage: { show: true },
          },
        },
      },
      chartTbZzData: {
        title: {
          left: 'center',
          text: null,
        },
        tooltip: {},
        legend: {
          data: [],
          bottom: 0,
        },
        grid: {},
        xAxis: {
          type: 'category',
          data: [],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [],
            type: 'bar',
            barWidth: '40px',
          },
        ],
        toolbox: {
          feature: {
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { title: '刷新', show: true },
            saveAsImage: { show: true },
          },
        },
      },
      tbdata: null,
      ldata: null,
      monitorDeptName: '部门',
      indiName: '指标',
    }
  },
  created() {
    const id = this.$route.query.id
    kpiService.getKpiMonitorlist(id).then((data) => {
      this.ldata = data
      this.chartData.xAxis.data = []
      const sds = []
      const sdm = []
      data.forEach((i) => {
        if (i.dataPeriod) {
          sdm.push(i.dataPeriod)
          sds.push(i.indiVal)
        }
      })
      this.chartData.xAxis.data = [...sdm.reverse()]
      this.chartData.series = [
        {
          data: [...sds.reverse()],
          type: 'line',
          barWidth: '40px',
          lineStyle: {
            color: '#c55b57', // 颜色生效
          },
          itemStyle: {
            color: '#89b63a',
          },
        },
      ]
    })
    kpiService.getKpiMonitortblist(id).then((data) => {
      this.tbdata = data
      this.monitorDeptName = this.tbdata.current.monitorDeptName
      this.indiName = this.tbdata.current.indiName
      const bq = this.tbdata.current.indiVal ? this.tbdata.current.indiVal : 0
      const soneq = this.tbdata.one.indiVal ? this.tbdata.one.indiVal : 0
      const ssq = this.tbdata.two.indiVal ? this.tbdata.two.indiVal : 0
      const stq = this.tbdata.three.indiVal ? this.tbdata.three.indiVal : 0
      const sfq = this.tbdata.fou.indiVal ? this.tbdata.fou.indiVal : 0
      const blyq = this.tbdata.current.lastYearIndiVal ? this.tbdata.current.lastYearIndiVal : 0
      const sonelyq = this.tbdata.one.lastYearIndiVal ? this.tbdata.one.lastYearIndiVal : 0
      const sslyq = this.tbdata.two.lastYearIndiVal ? this.tbdata.two.lastYearIndiVal : 0
      const stlyq = this.tbdata.three.lastYearIndiVal ? this.tbdata.three.lastYearIndiVal : 0
      const sflyq = this.tbdata.fou.lastYearIndiVal ? this.tbdata.fou.lastYearIndiVal : 0
      this.data = [
        {
          qc: '本期',
          zbz: bq,
          sqzbz: soneq,
          hbzzl: soneq === 0 ? 0 : Math.round(((bq - soneq) / soneq) * 10000) / 100 + '%',
          sntqzbz: blyq,
          tbzzl: blyq === 0 ? 0 : Math.round(((bq - blyq) / blyq) * 10000) / 100 + '%',
        },
      ]
      if (this.tbdata.one.indiVal) {
        this.data.push({
          qc: '上一期',
          zbz: soneq,
          sqzbz: ssq,
          hbzzl: ssq === 0 ? 0 : Math.round(((soneq - ssq) / ssq) * 10000) / 100 + '%',
          sntqzbz: sonelyq,
          tbzzl: sonelyq === 0 ? 0 : Math.round(((soneq - sonelyq) / sonelyq) * 10000) / 100 + '%',
        })
      }
      if (this.tbdata.two.indiVal) {
        this.data.push({
          qc: '上二期',
          zbz: ssq,
          sqzbz: stq,
          hbzzl: stq === 0 ? 0 : Math.round(((ssq - stq) / stq) * 10000) / 100 + '%',
          sntqzbz: sslyq,
          tbzzl: sslyq === 0 ? 0 : Math.round(((ssq - sslyq) / sslyq) * 10000) / 100 + '%',
        })
      }
      if (this.tbdata.three.indiVal) {
        this.data.push({
          qc: '上三期',
          zbz: stq,
          sqzbz: sfq,
          hbzzl: sfq === 0 ? 0 : Math.round(((stq - sfq) / sfq) * 10000) / 100 + '%',
          sntqzbz: stlyq,
          tbzzl: stlyq === 0 ? 0 : Math.round(((stq - stlyq) / stlyq) * 10000) / 100 + '%',
        })
      }
      if (this.tbdata.fou.indiVal) {
        this.data.push({
          qc: '上四期',
          zbz: sfq,
          sqzbz: 0,
          hbzzl: 0,
          sntqzbz: sflyq,
          tbzzl: sflyq === 0 ? 0 : Math.round(((sfq - sflyq) / sflyq) * 10000) / 100 + '%',
        })
      }
      // 同比 chartZzData
      this.chartZzData.xAxis.data = []
      if (this.tbdata.one.dataPeriod) {
        this.chartZzData.xAxis.data.push(this.tbdata.one.dataPeriod)
      }
      this.chartZzData.xAxis.data.push(this.tbdata.current.dataPeriod)
      const chartZzDatasd = []
      if (this.tbdata.one.dataPeriod) {
        chartZzDatasd.push(this.tbdata.one.indiVal)
      }
      chartZzDatasd.push(this.tbdata.current.indiVal)
      this.chartZzData.series = [
        {
          data: chartZzDatasd,
          type: 'bar',
          barWidth: '40px',
          lineStyle: {
            color: '#c55b57', // 颜色生效
          },
          itemStyle: {
            color: '#89b63a',
          },
        },
      ]
      // 环比 chartTbZzData
      this.chartTbZzData.xAxis.data = []
      if (this.tbdata.current.lastYearDataPeriod) {
        this.chartTbZzData.xAxis.data.push(this.tbdata.current.lastYearDataPeriod)
      }
      this.chartTbZzData.xAxis.data.push(this.tbdata.current.dataPeriod)
      const chartTbZzDatasd = []
      if (this.tbdata.current.lastYearDataPeriod) {
        chartTbZzDatasd.push(this.tbdata.current.lastYearIndiVal)
      }
      chartTbZzDatasd.push(this.tbdata.current.indiVal)
      this.chartTbZzData.series = [
        {
          data: chartTbZzDatasd,
          type: 'bar',
          barWidth: '40px',
          lineStyle: {
            color: '#c55b57', // 颜色生效
          },
          itemStyle: {
            color: '#89b63a',
          },
        },
      ]
    })
  },
  methods: {
    toggleTabs(key) {
      this.activeKey = key
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.echarts {
  width: 100%;
  height: 400px;
  margin: auto auto;
  text-align: center;
}
.toptitle {
  color: #404040;
  font-weight: bold;
  font-size: 22px;
  margin-left: calc(50% - 150px);
}
</style>
