<template>
  <div class="chart-wrap">
    <div class="child c-1" v-if="arrMap['一季度']">
      <div class="cr" >
        <div class="cr-1">
          {{ arrMap['一季度'].per }}%
        </div>
        <span class="label">第一季度</span>
      </div>
      <div class="cr">
        <div class="cr-2">
          {{ arrMap['二季度'].per }}%

        </div>
        <span class="label">第二季度</span>
      </div>
      <div class="cr">
        <div class="cr-3">
          {{ arrMap['三季度'].per }}%

        </div>
        <span class="label">第三季度</span>
      </div>
      <div class="cr">
        <div class="cr-4">
          {{ arrMap['四季度'].per }}%

        </div>
        <span class="label">第四季度</span>
      </div>
    </div>
    <div class="child c-2">
      <v-chart autoresize :option="option"/>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {chartDlsdxl} from '@/api/dashboard-json'

export default {
  name: 'Dlsdxl',
  data() {
    return {
      option: {},
      arrMap: {
        '一季度': 0,
        '二季度': 0,
        '三季度': 0,
        '四季度': 0
      }
    }
  },
  created() {
    this.getOption()
  },

  methods: {
    async getOption() {
      let keys = []
      const maxs = []
      const values = []
      const used = []
      const res = await chartDlsdxl()
      if (res?.code === 200) {
        keys = res?.info.xaxis
        res?.info.xaxis.forEach((key, index) => {
          maxs.push(res.info.series[0].data[index])
          values.push(res.info.series[1].data[index])
          used.push(res.info.series[1].data[index])
          const keyMap = {
            [res?.info.series[0].name]: res.info.series[0].data[index],
            [res?.info.series[1].name]: res.info.series[1].data[index],
            per: (res.info.series[1].data[index] * 100 / res.info.series[0].data[index]).toFixed(0)
          }

          this.arrMap[key] = keyMap
        })
      }
      // maxs.forEach((_, index) => {
      //   if (used[index] > maxs[index]) {
      //     used[index] = findMax
      //   }
      //   maxs[index] = findMax
      // })

      const labelList = ['第一季度', '第二季度', '第三季度', '第四季度']
      this.option = {
        textStyle: {
          fontFamily: 'hxb'
        },
        grid: {
          left: '8%',
          top: '8%',
          right: '10%',
          bottom: '8%',
          height: '100%',
          containLabel: true
        },
        xAxis: [
          {
            show: false
          }
        ],
        yAxis: [
          {
            axisTick: 'none',
            axisLine: 'none',
            offset: '2',
            axisLabel: {
              show: false,
              textStyle: {
                color: '#ffffff',
                fontSize: '12'
              }
            },
            data: labelList.reverse()
          },
          {
            axisTick: 'none',
            axisLine: 'none',
            axisLabel: {
              show: false,
              textStyle: {
                color: '#ffffff',
                fontSize: this.EchartfontSize(12)
              }
            },
            // data: values.reverse()
          },
          {
            nameTextStyle: {
              color: '#ffffff',
              fontSize: this.EchartfontSize(12)
            },
            axisLine: {
              lineStyle: {
                color: 'rgba(0,0,0,0)'
              }
            },
            data: []
          }
        ],
        series: [
          {
            name: 'front-bar',
            type: 'bar',
            yAxisIndex: 0,
            data: values.reverse(),
            label: {

              normal: {
                show: true,
                position: [this.EchartfontSize(240), -this.EchartfontSize(18)],
                textStyle: {
                  color: '#ffffff',
                  fontSize: this.EchartfontSize(14)
                },
                formatter: (a, b) => {
                  return values[a.dataIndex]
                },
              }
            },
            barWidth: this.EchartfontSize(10),
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0, color: '#205047'}, {
                offset: 1,
                color: '#28CABD'
              }], false)
            },
            animation: true,
            animationEasing: 'cubicOut'
          },
          {
            type: 'scatter',
            yAxisIndex: 0,
            symbol: 'rect',
            symbolSize: [4, 10],
            data: values.reverse(),
            itemStyle: {
              normal: {
                borderRadius: 10,
                borderColor: '#ffffff',
                color: '#24C8B8'
              }
            }
          },
          {
            name: 'back-bar',
            type: 'bar',
            yAxisIndex: 2,
            // barGap: '-100%',
            data: maxs.reverse(),
            barWidth: this.EchartfontSize(10),
            itemStyle: {
              normal: {
                color: 'rgb(31, 46, 55)'
              }
            },
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#ffffff',
                  fontSize: this.EchartfontSize(14)
                },
                position: [0, -this.EchartfontSize(18)],
                formatter: (a, b) => {
                  return labelList[a.dataIndex]
                }
              }
            },
            z: 0
          }

        ]
      }
    }
  }

}
</script>

<style scoped lang="scss">

$xHeight: 120px;
.chart-wrap {
  width: 100%;
  height: 100%;
  display: flex;

  .c-1 {
    flex: 1.5;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .cr {
      flex: 1;
      flex-shrink: 0;
      height: 75%;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      font-weight: 600;
      color: white;

      .label {
        height: 20px;
        flex-shrink: 0;
        width: 100%;
        text-align: center;
        margin-bottom: -10px;
        font-size: 16px;
        mso-font-width: 400;
      }

      .cr-1, .cr-3 {
        font: 400 1.2vw hxb;
        flex-grow: 1;
        font-size: 1.2vw;
        width: 100%;
        background-image: url("/static/images/shoudian_circular_1@2x.png");
        background-repeat: no-repeat;
        background-size: auto 100%;
        background-position: center center;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .cr-2, .cr-4 {
        font: 400 1.2vw hxb;
        flex-grow: 1;
        font-size: 1.2vw;
        width: 100%;
        background-image: url("/static/images/shoudian_circular_2@2x.png");
        background-repeat: no-repeat;
        background-size: auto 100%;
        background-position: center center;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .c-2 {
    flex: 1;
    height: 100%;
    width: 100%;
    flex-shrink: 0;
  }

}
</style>
