<template>
  <div>
    <div class="label">安检员任务情况</div>
    <div id="taskstatistics"></div>
    <div id="taskundone"></div>
  </div>
</template>

<script>
  import * as DataSql from '../../../stores/DataSql'
  import co from 'co'

  export default {
    name: "TaskStatistics",
    data() {
      return {
        checkerdata: [],
        resdata: [],
      }
    },
    methods: {
      setBar(id, data, flag) {
        this.xc = this.$echarts.init(document.getElementById(id))
        var scale = 0.8;
        var xAxisData = []  //列名
        var metaDate = []   //完成或未完成数
        var metaDate1 = []  //总数

        data.forEach(function (s) {
          xAxisData.push(s.name)
          metaDate1.push(eval(s.undone + '+' + s.complete))
          if (flag == '安检完成') {
            metaDate.push(s.complete)
          }
          if (flag == '安检未完成') {
            metaDate.push(s.undone)
          }
        })
        xAxisData.push("")
        var legendData = []
        var color = ''
        if (flag == '安检完成') {
          legendData = ['完成数', '总数']
          color = '#69d8d2'
        }
        if (flag == '安检未完成') {
          legendData = ['未完成数', '总数']
          color = '#e7c83c'
        }

        var metaDate2 = []
        for (var i = 0; i < metaDate.length; i++) {
          var s = metaDate1[i] - metaDate[i]
          metaDate2.push(s)
        }

        var yname = '安检员'
        var serieData = [
          {
            name: legendData[0],
            type: "bar",
            stack: "1",
            barWidth: '40%',
            barGap: "20%",
            xAxisIndex: 0,
            z: 2,
            itemStyle: {
              normal: {
                color: color,
                label: {
                  show: false,
                }
              }
            },
            data: metaDate,
          },
          {
            name: legendData[1],
            type: "bar",
            stack: "1",
            barWidth: '40%',
            barGap: "-100%",
            xAxisIndex: 0,
            z: 2,
            itemStyle: {
              normal: {
                color: '#053850',
                label: {
                  show: true,
                  textStyle: {
                    color: "#f7cb32"
                  },
                  position: "top",
                  formatter: function (p) {
                    return metaDate[p.dataIndex] != '' ? metaDate[p.dataIndex] : '';
                  }
                }
              }
            },
            data: metaDate2
          }
        ];
        var colors = ["#036BC8", "#4A95FF", "#5EBEFC", "#2EF7F3", "#FFFFFF"]
        this.xc.setOption({
          title: {
            text: flag + 'top5',
            left: '40%',
            bottom: '1%',
            textStyle: {color: "#fff", fontSize: 14 * scale, fontWeight: "normal"}
          },
          color: colors,
          grid: {left: '2%', top: "18%", bottom: "3%", right: "2%", height: '70%', containLabel: true},
          tooltip: {
            formatter: function (params) {
              if (params[0].axisValue == '') {
                return ''
              }
              var result = ''
              for (var i = 0; i < params.length; i++) {
                let item = params[i].value

                if (params[i].seriesName == '总数') {
                  item = metaDate1[params[i].dataIndex]
                }
                result = result + params[i].seriesName + ':' + DataSql.dataunit(item) + '<br/>'
              }
              return params[0].axisValue + ' <br/> ' + result
            },
            axisPointer: {type: 'line', lineStyle: {width: 0}},
            trigger: 'axis',
            extraCssText: 'width: auto;height: auto;'
          },
          xAxis: [
            {
              name: yname,
              type: 'category',
              nameTextStyle: {
                fontSize: 14 * scale,
                color: '#15dce2',
                padding: [40 * scale, 0, 0, -60 * scale],
              },
              axisLine: {show: true, lineStyle: {color: '#04669e', width: 1}},
              axisLabel: {interval: 0, textStyle: {color: '#ffffff', fontSize: 14 * scale}},
              axisTick: {show: false},
              data: xAxisData,
            }, {
              type: 'category',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
              splitArea: {
                show: false
              },
              splitLine: {
                show: false
              },
              data: xAxisData
            }, {
              type: 'category',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
              splitArea: {
                show: false
              },
              splitLine: {
                show: false
              },
              data: xAxisData
            }
          ],
          yAxis: [
            {
              name: '数量',
              type: 'value',

              nameTextStyle: {
                fontSize: 14 * scale,
                padding: [-10 * scale, 35 * scale, 0, 0],
              },
              axisTick: {show: false},
              splitLine: {show: true, lineStyle: {type: 'dashed', color: '#004371'}},
              axisLabel: {
                interval: 0,
                show: true,
                textStyle: {
                  color: '#15dce2',
                  fontSize: 14 * scale,
                },
                formatter: function (value) {
                  var index = value.toString().length
                  if (index > 9) {
                    return value.toString().substring(0, index - 9) + '亿'
                  } else if (index > 4) {
                    return value.toString().substring(0, index - 4) + '万'
                  } else {
                    return value
                  }
                }
              },
              axisLine: {show: false, lineStyle: {color: '#15dce2', fontSize: 14 * scale}},
            },
          ],
          series: serieData
        }, true)
      }
    },
    watch: {
      'checkerdata': {
        deep: true,
        handler(val) {
          var value = 0
          var checkertop = []
          var checkerbottom = []
          for (var i = 0; i < this.checkerdata.length; i++) {
            //选择完成量最多的5个安检员
            if (i < 6) {
              let item = {}
              item.name = this.checkerdata[i].name
              item.complete = this.checkerdata[i].value
              item.undone = 0
              checkertop.push(item)
            }
            if (i > this.checkerdata.length - 6) {
              //选择完成量最少的5个安检员
              let item = {}
              item.name = this.checkerdata[i].name
              item.complete = this.checkerdata[i].value
              item.undone = 0
              checkerbottom.push(item)
            }
          }
          this.setBar('taskstatistics', checkertop, '安检完成')
          this.setBar('taskundone', checkerbottom, '安检未完成')
          this.$parent.loaddata++
        }
      },
      'resdata': {
        deep: true,
        handler(val) {
          console.log(this.resdata, '测试安检状态据')
          console.log(this.checkerdata)
          this.checkerdata = this.resdata
          console.log(this.checkerdata)
        },
      },
    },
    ready() {
      // var data = [
      //   {name: '小明', complete: '500', undone: '100'},
      //   {name: '小李', complete: '400', undone: '100'},
      //   {name: '小王', complete: '300', undone: '100'},
      //   {name: '小张', complete: '300', undone: '100'},
      //   {name: '小红', complete: '100', undone: '100'}
      // ]
      // this.setBar('taskstatistics', data, '安检完成')
      // var data1 = [
      //   {name: '老王', complete: '10', undone: '500'},
      //   {name: '老明', complete: '30', undone: '400'},
      //   {name: '老红', complete: '20', undone: '350'},
      //   {name: '老李', complete: '20', undone: '300'},
      //   {name: '老张', complete: '40', undone: '200'}
      // ]
      // this.setBar('taskundone', data1, '安检未完成')

      let getData = DataSql.getData(this, 'checkertask',{}, 'resdata')
      co(getData)
    }
  }
</script>

<style scoped>
  .label {
    font-size: 0.85em;
    color: #fff;
    height: 8%;
    width: 100%;
    margin-left: 6%;
  }

  #taskstatistics {
    margin-top: 4%;
    height: 45%;
    width: 100%;
  }

  #taskundone {
    height: 45%;
    width: 100%;
  }
</style>
