<template>
  <div class="workplatform">
    <div class="district">
      <span class="district-name">行政区：</span>
      <el-radio-group v-model="xzq" size="medium">
        <el-radio label="632321">同仁县</el-radio>
        <el-radio label="632322">尖扎县</el-radio>
        <el-radio label="632323">泽库县</el-radio>
        <el-radio label="632324">河南县</el-radio>
      </el-radio-group>
    </div>
    <div class="data-statistics">
      <h3>数据统计</h3>
      <el-row type="flex" justify="space-between">
        <el-col :span="5" v-for="(item, index) in statisticsList" :key="index" class="sta-item">
          <h5>{{ item.title }}</h5>
          <p>{{ item.detail }}</p>
        </el-col>
      </el-row>
    </div>
    <div class="statistical-chart-content">
      <h3 style="margin-bottom:10px">统计图表</h3>
      <el-select v-model="dateTime" placeholder="请选择年度">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <div class="statistical-chart">
        <div id="myChart" class="chart"></div>
        <div id="myChart1" class="chart"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getNumber, getYearList, getByYear } from '@/api/user'
export default {
  name: "workplatform",
  data () {
    return {
      xzq: '',
      dateTime: null,
      options: [],
      statisticsList: [
        {
          title: '500',
          detail: '数据上报总数'
        },
        {
          title: '500',
          detail: '数据上报失败总数'
        },
        {
          title: '500',
          detail: '本年度上报总数'
        },
        {
          title: '500',
          detail: '本月上报总数'
        }
      ],
      qllxData: [],
      djlxLeable: [],
      djlxValue: []
    }
  },
  computed: {
    ...mapGetters(['dicData'])
  },
  watch: {
    dateTime: {
      handler (newName, oldName) {
        this._getByYear()
      },
      immediate: true
    },
    xzq: {
      handler (newName, oldName) {
        this._featchData()
        this._getYearList()
      },
      immediate: true
    },
  },
  created () {
    this._featchData()
    this._getYearList()
  },
  mounted () {
    this.drawLine()
    this.drawLine1()
  },
  methods: {
    async _featchData () {
      try {
        let { result } = await getNumber(this.xzq)
        this.statisticsList[0].title = result.allNumber
        this.statisticsList[1].title = result.failNumber
        this.statisticsList[2].title = result.thisYearNumber
        this.statisticsList[3].title = result.thisMonthNumber
      } catch (error) {
      }
    },
    async _getYearList () {
      try {
        let { result } = await getYearList()
        result = result.filter(x => !!x == true || x == 0)
        result.forEach((item, index) => {
          if (item) {
            this.$set(this.options, index, {
              value: item,
              label: item
            })
          }
        });
        this.dateTime = this.options[0].value
        this._getByYear()
      } catch (error) {
      }
    },
    async _getByYear () {
      try {
        let { result } = await getByYear(this.dateTime, this.xzq)
        this.qllxData.length = 0
        this.djlxLeable.length = 0
        this.djlxValue.length = 0
        result.qllx.forEach((item, index) => {
          this.$set(this.qllxData, index, [
            item.NUM, item.QLLX
          ])
        })
        result.djlx.forEach((item, index) => {
          this.$set(this.djlxLeable, index, item.DJLX)
          this.$set(this.djlxValue, index, item.NUM)
        })
        this.drawLine()
        this.drawLine1()
      } catch (error) {
      }
    },
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        color: ['rgb(68, 231, 177)'],
        dataset: {
          source: this.qllxData
        },
        grid: { containLabel: true },
        xAxis: {},
        yAxis: {
          type: 'category',
          axisLabel: {
            rotate: '30'
          },
        },
        series: [
          {
            type: 'bar',
            showBackground: true,
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'right', //在上方显示
                  textStyle: {
                    color: '#4A4A4A',
                    fontSize: 14
                  }
                }
              }
            },
            encode: {
              x: 'amount',
              y: 'product'
            }
          }
        ]
      })
    },
    drawLine1 () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart1'))
      // 绘制图表
      myChart.setOption({
        color: ['rgb(85, 133, 221)'],
        xAxis: {
          data: this.djlxLeable,
          axisLabel: {
            rotate: '45'
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.djlxValue,
            type: 'bar',
            itemStyle: {
              normal: {
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: {
                    color: '#4A4A4A',
                    fontSize: 14
                  }
                }
              }
            },
          }
        ]
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/styles/mixin.scss";
@import "./index.scss";
</style>