<template>
  <Module style="width:50%">
    <template #title>里程增长(km)</template>
    <div>
      <el-dropdown class="dropdown"
                   trigger="click"
                   size="mini">
        <el-button type="primary"
                   size="mini">
          {{yearData? yearData: '2020-2025' }}<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item v-for="index of 6"
                              :key="index"
                              @click="changeDate(index - 1)">202{{index - 1}}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
    <div class="main-box">
      <!-- <div class="bgc">
        <div class="bar">
          <div v-for="index of 6"
               :key="index"
               class="bar_items"
               @click="changeDate(index - 1)">
            <span>{{'202' + index -1}}</span>
          </div>
        </div>
      </div> -->
      <Ect :options="ectOpts" />
    </div>
  </Module>
</template>
<script>
import * as echarts from 'echarts'
import { mileageIncreaseChild, mileageIncrease } from '@/api/businessOverview'
import { mapState } from 'vuex'
import { values } from 'lodash'
export default {
  data() {
    return {
      myChart: null,
      level: null,
      id: '',
      xAxisData: [],
      roadId: [],
      ectOpts: {},
      defaultOpts: {},
      shouMenu: false,
      yearDate: '202',
      openedData: [],
      increasedData: [],
      // 页面上的年份展示
      yearData: 0,
    }
  },
  computed: {
    ...mapState({
      selectLevel: (state) => state.road.selectLevel,
      selectRoadId: (state) => state.road.selectRoadId,
    }),
  },
  watch: {
    selectLevel(newVal) {
      if (!newVal) {
        this.getmileageIncrease({ level: newVal })
      }
    },
    // 监听切换省份/管理中心/路段
    selectRoadId(newVal) {
      this.roadId = newVal
      // 如果切换到全国则不调用该接口
      if (!this.selectLevel) return
      this.getmileageIncreaseChild({
        level: newVal.length,
        dimension: newVal[newVal.length - 1],
        timeVal: '2022',
      })
    },
    // 监听切换年份
    yearDate(newVal) {
      this.getmileageIncreaseChild({
        level: this.roadId.length,
        dimension: this.roadId[this.roadId.length - 1],
        timeVal: newVal,
      })
    },
  },
  mounted() {
    this.getmileageIncrease({ level: 0 })
    // this.getmileageIncreaseChild({ level: 0 })
  },
  methods: {
    changeDate(num) {
      this.yearDate = '202'
      this.yearDate += num
      this.yearData = this.yearDate
    },
    // 全国默认数据
    async getmileageIncrease(params) {
      this.openedData = []
      this.xAxisData = []
      this.increasedData = []
      const { msgContent } = await mileageIncrease(params)
      let year = 2020
      msgContent.forEach((item, index) => {
        for (const key in item) {
          if (Object.hasOwnProperty.call(item, key)) {
            // 新增运营里程
            if (key.includes('Incre')) {
              this.increasedData.push(item[key])
            }
            if (key !== 'varSum' && key.includes('Sum')) {
              this.xAxisData.push(year)
              year++
              // 已开通里程
              this.openedData.push(item[key])
            }
          }
        }
      })
      this.initEcharts()
    },
    async getmileageIncreaseChild(params) {
      this.openedData = []
      this.xAxisData = []
      this.increasedData = []
      const { msgContent } = await mileageIncreaseChild(params)
      msgContent.forEach((item) => {
        if (item.orgName) {
          // 图表x轴名称
          this.xAxisData.push(item.orgName)
        }
        for (const key in item) {
          if (Object.hasOwnProperty.call(item, key)) {
            if (typeof item[key] === 'number') {
              if (key === 'varSum') {
                // 各个省份年度总里程
                this.openedData.push(item[key])
              }
              const year = params.timeVal.substring(2)
              if(key.includes('Incre') && key.includes(year)){
              this.increasedData.push(item[key])
              }
              
            }
          }
        }
      })
      this.initEcharts()
    },
    initEcharts() {
      let dataAxis = this.xAxisData
      // prettier-ignore
      // const ecData = this
      const newArr = []
      let openedData = this.openedData
      let increasedData = this.increasedData
      dataAxis.forEach((item,index)=>{
        // newArr.push(increasedData[index] + openedData[index] )
        const data = Number(
          (Number(increasedData[index]) + Number(openedData[index])).toFixed(2)
        )
        newArr.push(data)

      })

      let yMax = 500
      let dataShadow = []
      for (let i = 0; i < openedData.length; i++) {
        dataShadow.push(yMax)
      }
      this.ectOpts = {
        legend: {
          data: ['已开通运营', '新增运营里程'],
          textStyle: {
            fontSize: 11, //字体大小
            color: '#CBE7FF', //字体颜色
          },
          borderRadius: 0,
          selectedMode: true,
          // top: '50px',
          // right: '20px',
        },
        tooltip: {
          show: true,
        },
        // legend: {
        //   // data: this.msgContent[6]
        //   //   ? [this.msgContent[6]]
        //   //   : ['重庆', '贵州', '云南', '四川', '安徽'],
        //   data: ['重庆', '贵州', '云南', '四川', '安徽']
        // },
        xAxis: [
          {
            data: dataAxis,
            axisLabel: {
              // inside: true,
              color: '#fff',
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            z: 10,
            position: 'bottom'
          },
          // {
          //   data: newArr,
          //   axisLabel: {
          //     color: '#00E3FF',
          //     margin: 0,
          //     interval: 0
          //   },
          //   axisTick: {
          //     show: false,
          //   },
          //   axisLine: {
          //     show: false,
          //   },
          //   z: 10,
          //   position: 'top'
          // }
        ],
        yAxis: {
          name: '运营里程数(km)',
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: '#909FAC',
            },
          },
          nameTextStyle: {
            color: '#909FAC',
            fontSize: 12,
            fontWeight: 'bold',
          },
        },
        series: [
          {
            name: '已开通运营',
            type: 'bar',
            stack: 'total',
            showBackground: true,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(60, 174, 255, 1)',
                },
                {
                  offset: 0.5,
                  color: 'rgba(60, 174, 255, 1)',
                },
                {
                  offset: 1,
                  color: 'rgba(60, 174, 255, 0)',
                },
              ]),
            },
            label: {
              show: false,
              color: '#fff',
              position: 'insideBottom'
            },
            barWidth: '10',
            data: openedData,
            emphasis: {
              focus: 'series',
            },
            backgroundStyle: {
              color: 'rgba(59, 152, 219, 0)',
              borderWidth: 20,
              borderColor: 'rgba(59, 152, 219, 0.1)',
            },
            barWidth: 8,
          },

          {
            name: '新增运营里程',
            type: 'bar',
            stack: 'total',
            data: increasedData,
            label: {
              show: false,
              color: '#fff',
              position: 'top'
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#6AEFFB',
                },
                {
                  offset: 0.5,
                  color: '#6AEFFB',
                },
                {
                  offset: 1,
                  color: '#1D5666',
                },
              ]),
            },
               backgroundStyle: {
              color: 'rgba(59, 152, 219, 0)',
              borderWidth: 20,
              borderColor: 'rgba(59, 152, 219, 0.1)',
            },
            barWidth: 8,
          },
          {
            name: '',
            type: 'bar',
            stack: 'total',
            data: [0, 0, 0, 0, 0, 0],
            itemStyle: {
              normal: {
                color: '#fff',
                borderWidth: 4,
                borderColor: '#fff',
              },
            },
            barWidth: 20,
            tooltip: {
              show: false
            }
          },
          {
            name: '总运营里程',
            type: 'line',
            smooth: true,
            cursor: 'pointer',
            symbol: 'emptyCircle',
            lineStyle: {
              color: '#00E3FF',
            },
            itemStyle: {
              width: 2,
              borderColor: '#00E3FF',
              color: '#00E3FF',
            },
            label: {
              show: true,
              position: 'top'
            },
            data: newArr,
            emphasis: {
              focus: 'series',
            },
          },
        ],
      }
      this.defaultOpts = this.ectOpts
    },
    // 里程总数放在最上边的方案, 暂不用
    ectLegendChange(val) {
      const isShowTopAxis = val.selected['新增运营里程']
      if (isShowTopAxis) {
        this.ectOpts = {
          ...this.defaultOpts,
          legend: {
            ...this.defaultOpts.legend,
            selected: val.selected
          }
        }
      } else {
        this.ectOpts = {
          ...this.defaultOpts,
          legend: {
            ...this.defaultOpts.legend,
            selected: val.selected
          },
          xAxis: this.defaultOpts.xAxis[0]
        }
      }
    }
  },
}
</script>

<style lang="scss" scoped >
.man-box {
  display: flex;
  flex-direction: column;
}
#main {
  widows: 100%;
  height: 100%;
}
.bar {
  margin: 0 20px;

  display: flex;
  justify-content: space-around;
  background: url('@/assets/images/scale.png') no-repeat;
  background-size: contain;
  /* background-position-x: 10%; */
}
.bar_items {
  cursor: pointer;
  padding-top: 20px;
}
.main-box {
  width: 100%;
}

::v-deep .dropdown {
  vertical-align: top;
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  z-index: 999;
}
::v-deep .el-button--primary {
  color: rgba(61, 165, 255, 1);
  background: rgba(73, 153, 255, 0.1);
  border-color: transparent;
}
::v-deep .el-dropdown-menu__item {
  text-shadow: none;
}
</style>
