<template>
  <div>
    <div class="label" @click="drillclick">{{title}}</div>
    <div id="excep" class="d1"></div>
  </div>
</template>

<script>
  export default {
    name: "sale-proportion",
    data() {
      return {
        title: '异常情况汇报',
        xc: '',
        totaluser: [{name: '01', value: 2000}, {name: '02', value: 2000}, {name: '03', value: 2000}, {
          name: '04',
          value: 2000
        }],
        timer:'',
      }
    },
    beforeDestroy() {
      //清除定时器
      clearInterval(this.timer);
    },
    methods: {
      setBar(id) {
        this.xc = this.$echarts.init(document.getElementById(id))

        var scale=this.$parent.$parent.$parent.scale
        var xAxisData = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '', ''];
        var legendData = ['故障'];
        var colors = ['rgb(111,217,208,0.9)', 'rgb(111,217,208,0.2)', 'rgb(111,217,208,0.1)'];
        var serieData = [];
        var metaDate = [12.6, 25.9, 9.0, 62.4, 28.7, 70.7, 45.6, 82.2, 48.7, 18.8, 26.0, 22.3]
        var serie = {
          name: legendData[0],
          type: 'line',
          smooth: false,  // true: 光滑曲线  , false: 直线
          symbol: 'circle',
          symbolSize: 5 * scale,
          areaStyle: {
            normal: {
              color: new this.$echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: colors[0]},
                  {offset: 0.5, color: colors[1]},
                  {offset: 1, color: colors[2]}
                ]
              )
            }
          },
          label: {
            show: false,
            position: 'top',
            textStyle: { //数值样式
              color: '#f7cb32',
              fontSize: 14 * scale
            }
          },
          itemStyle: {
            normal: {
              lineStyle: {
                width: 1,
              }
            }
          },
          data: metaDate
        }
        serieData.push(serie)

        this.xc.setOption({
          title: {
            text: "",
            textAlign: 'left',
            textStyle: {color: "#FFFFFF", fontSize: 12 * scale, fontWeight: "normal"}
          },
          legend: {
            itemGap: 20,
            width: '90%',
            show: true,
            right:'5%',
            data: legendData,
            y: 'top',
            itemWidth: 12 * scale,
            itemHeight: 6 * scale,
            textStyle: {width: '20%', color: "#15dce2", fontSize: 12 * scale},
            formatter: function (params) {
              return params
            },
          },
          grid: {left: '5%', top: "14%", bottom: "5%", right: "5%", containLabel: true},
          color: ['#6fd9d0'],
          tooltip: {
            alwaysShowContent:true,
            backgroundColor:'rgba(2, 59, 63, 0.45)',
            // borderColor :'rgba(13, 109, 180)',
            borderWidth:0,
            hideDelay:100,
              padding:10*scale,
              textStyle:{
                  fontSize:16*scale
              },
            formatter: function (params) {
              if (params[0].data == '') {
                return ''
              }
              var result = ''
              params.forEach(function (item) {
                result += item.marker + " " + item.seriesName + "&nbsp;&nbsp;&nbsp;<sapn style='color:#e1e52a;font-weight: bolder'>" + item.value + "</sapn></br>";
              });
              return "<div style='text-align: center;height: 1px;font-weight: normal'>"+params[0].axisValue + '月</div><br/>' + result
            },
            trigger: 'axis',
            extraCssText: 'width: auto;height: auto;',
            axisPointer: {type: 'line', lineStyle: {width: 0}},
          },
          xAxis: [{
            name: '      月份\n(2018-2019)',
            type: 'category',
            nameTextStyle: {
              fontSize: 12 * scale,
              color: '#15dce2',
              padding: [38, 0, 0, -75 * scale],
            },
            axisLine: {show: true, lineStyle: {color: '#04669e', width: 1}},
            axisLabel: {interval: 0, textStyle: {color: '#ffffff', fontSize: 14 * scale}},
            axisTick: {show: false},
            data: xAxisData
          }],
          yAxis: [{
            name: '次数',
            nameTextStyle: {
              fontSize: 12 * scale,
              padding: [0, 35 * scale, 0, 0],
            },
            axisTick: {show: false},
            splitLine: {show: true, lineStyle: {type: 'dashed', color: '#004371'}},
            axisLabel: {
              textStyle: {color: '#15dce2', fontSize: 14 * scale}, formatter: function (params) {
                return params
              }
            },
            axisLine: {show: false, lineStyle: {color: '#15dce2', fontSize: 14 * scale}},
          }],
          series: serieData
        }, true)

        let idx = -1;
        var dataLen=metaDate.length
        var oroptionmapjsonr_charts1=this.xc
        this.timer= setInterval(()=>{
          idx = (idx+ 1) % dataLen;
          oroptionmapjsonr_charts1.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: idx
          });

        }, 3000)
      },
      drillclick() {
        var total = [{name: '01', value: 2000}, {name: '02', value: 2000}, {name: '03', value: 2000}, {
          name: '04',
          value: 2000
        }]
        var initdatatr = {
          startDate: eval(Util.toStandardDateString().toString().substring(0, 4) + '-4') + '-01-01 00:00:00',
          endDate: Util.toStandardDateString() + ' 00:00:00',
          param: '',
          param1: '',
          listparam: '',
        }
        this.$emit('drill', 'excep', 'excepcollect', this.title, initdatatr)
        this.$emit('drilldata', total)
      },
    },

    ready() {
      this.setBar('excep')
    }
  }
</script>

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

  #excep {
    height: 91%;
    width: 99%;
    padding: 1% 2% 3% 2%;

  }
</style>
