<template>
  <div :id="'amongBox'+boxId" class="amongBox"></div>
</template>

<script>
import * as echarts from 'echarts';
let amongBox = null

export default {
  props:{
    amongTimeData:{
      type:Object,
      default:null,
    },
    boxId:{
      type:String,
      default:'1',
    },
  },
  data() {
    return {
      maxNum:100000,
      filedOptions:{
        "发单量":'cntOrderCallIncr',
        "出车中司机数":'cntDriWorking',
        "匹配量":'cntOrderDspIncr',
        "应答量":'cntOrderAnswerIncr',
        "完单量":'cntOrderDoneIncr',
        // "实际里程费":'priceGMVIncr',
        "累计发单量":'cntOrderCall',
        "累计匹配量":'cntOrderDsp',
        "累计应答量":'cntOrderAnswer',
        "累计完单量":'cntOrderDone',
        // "累计实际里程费":'priceGMV',
        "听单中司机数":'cntDriReady',
        "累计出车司机数":'cntDriWork',
        "累计匹配司机数":'cntDriDsp',
        "累计应答司机数":'累计应答司机数',
        "累计完单司机数":'cntDriDone'
      },
      names:['发单量','匹配量','应答量','完单量','累计发单量','累计匹配量','累计应答量','累计完单量']
    }
  },
  watch:{
    amongTimeData:{
      handler( nval , oval ) {
        if(JSON.parse(JSON.stringify(nval))!== JSON.parse(JSON.stringify(oval))){
          this. getOptions()
        }
      },
      deep:true
    }
  },
  mounted() {
    this.getOptions();
  },
  beforeDestroy() {
    amongBox.clear()
  },
  methods: {
    getOptions() {
      amongBox && echarts.dispose(amongBox)
      amongBox = echarts.init(document.getElementById("amongBox"+this.boxId));
      const _this = this
      amongBox.on('legendselectchanged', function (params) {
          const option = this.getOption()
          option.legend[0].selected = params.selected
          let arr  = []
          Object.keys(params.selected).filter(item => _this.names.includes(item)).forEach(item=>{
            if(params.selected[item] === true){
              arr = arr.concat(_this.amongTimeData[_this.filedOptions[item]])
            }
          })
          let maxNum = Math.max(...arr)
          if(maxNum === 0){
            option.yAxis[0] = {
              type: "value",
              name: "订单量",
              max:1,
              min:0,
              axisLine: {
                show: false
              },
              nameTextStyle: {
              fontSize: 12,
              color: "#fff",
              padding: [30,10,0,-35]
            },
              axisLabel: {
                textStyle: {
                  fontSize: "10",
                  color: "#fff"
                },
                formatter:function(value){
                  let txt=[]
                  if(value>=100000){
                    txt.push(((value/100000)*10)+'万');
                  }else{
                    value = _this.numFormat(value)
                    txt.push(value);
                  }
                  return txt;
                }
              },
              splitLine: { show: false }
            }
            this.setOption(option);
          } else {
            option.yAxis[0] = {
              type: "value",
              name: "订单量",
              dataMax:maxNum,
              min:0,
              axisLine: {
                show: false
              },
              nameTextStyle: {
              fontSize: 12,
              color: "#fff",
              padding: [30,10,0,-35]
            },
              axisLabel: {
                textStyle: {
                  fontSize: "10",
                  color: "#fff"
                },
                formatter:function(value){
                  var txt=[];
                  if(value>=100000){
                    txt.push((value/100000)*10+'万');
                  }else{
                    value = _this.numFormat(value)
                    txt.push(value);
                  }
                  return txt;
                }
              },
              splitLine: { show: false }
            }
            this.setOption(option)
          }
          _this.$nextTick(() => {
           this.setOption(option)
         })
       })
      
      let option = {
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 0,
            end: 100,
            borderColor: "#407BF2",
            height: 24, //组件高度
            handleStyle: {
              color: "#407BF2"
            },
            fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
                //给第一个设置0，第四个设置1，就是垂直渐变
                offset: 0,
                color: "rgba(64,123,242,0.3)"
              },
              {
                offset: 1,
                color: "rgba(64,123,242,0.3)"
              }
            ]),
            backgroundColor: "rgba(37, 46, 100, 0.45)", //两边未选中的滑动条区域的颜色
            showDataShadow: true //是否显示数据阴影 默认auto
          },

          {
            type: "inside",
            realtime: true,
            zoomLock: true,
            preventDefaultMouseMove:true,
            start: 65,
            end: 85
          }
        ],
        color: ["#52C8F9", "#32E749", "#E8692F","#3080E8","#892FE8","#FFA22A","#E72E8C","#C67D54","#BD1210","#E8E22F","#FFA4A4","#A4E82F","#3B27FF","#E83A30"],
        tooltip: {
          trigger: "axis",
          backgroundColor:'rgba(0,0,0,0.88)',//通过设置rgba调节背景颜色与透明度
          borderWidth:'0',
          textStyle : {
            color: '#fff',
            fontSize:14,
           },
          formatter:(params) => {
            let ul='<ul style="padding: 0;margin:0;">'
            let li = '<li style="list-style: none;display:flex;justify-content:space-between;margin:5px;"><span style="margin-right:10px">时间</span><span>'+params[0].axisValue+'</span> </li>'
            ul+=li
            for(let i=0;i<params.length;i++){
              ul+='<li style="list-style: none;display:flex;justify-content: space-between;margin:5px;"><span style="margin-right:10px">'+params[i].seriesName+'</span><span>'+params[i].value+'</span></li>';
            }
            ul+='</ul>'
            return ul
          },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow",// 默认为直线，可选为：'line' | 'shadow'
            crossStyle: { color: '#468DF0' } 
          }
        },
        legend: {
          type: "scroll",
          data: [
            "发单量",
            "出车中司机数",
            "匹配量",
            "应答量",
            "完单量",
            // "实际里程费",
            "累计发单量",
            "累计匹配量",
            "累计应答量",
            "累计完单量",
            // "累计实际里程费",
            "听单中司机数",
            "累计出车司机数",
            "累计匹配司机数",
            "累计应答司机数",
            "累计完单司机数"
          ],
          pageIconColor: "#407BF2",
          pageIconInactiveColor: "#407BF2",
          selected:{
            '发单量': true,
            '出车中司机数': true,
            '匹配量': false,
            '应答量': false,
            '完单量': false,
            // '实际里程费': false,
            '累计发单量': false,
            '累计匹配量': false,
            '累计应答量': false,
            '累计完单量': false,
            // '累计实际里程费': false,
            '听单中司机数': false,
            '累计出车司机数': false,
            '累计匹配司机数': false,
            '累计应答司机数': false,
            '累计完单司机数': false
          },
          pageIcons: {
            horizontal: [
              "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAASCAYAAAHK/gXCAAAABGdBTUEAALGPC/xhBQAAAZ1JREFUOBGNU81OAkEM7sCChIs31ihXo28Az4IXzx5NFAgxcjBmjRdfwEQTfBZ9CC8qiQl3A+outd+wHWd/iE6y22n79Zt22iHy19aAj1p9Zt+W22fcrQEfOH844A/xxjBU8GNmI1xNMjSBnlmCHlnD9pibShpgE8+tPcG/MrsyRuRUvioMmSXH38FbWOGQO7ykp7qh3Wlknh0o7POjVNfVCAVAtyABPAigpwDINAdrckwK2Blz+3tOr6IbBRZACkattS/aVD0jkZveX+B7pMxzYhqjLUgYvlWyaZkeOJEcbHCAdsgdND0nbdRoT/VK0LBKptmfMZ0pwFVhu8y/PdQyFeikHDlBB9EXZ8xvMBUCesvb/9QRKHfUQ7B/gstzHQNaFC8okllEX1d4Q/ezyBxqTIHEnjaUAKZIQG0FOpkjgN2SlJ7morxNCQG8AR6hpHttn46HL9kmdaKLEntaY+oJR9ylhG6EsFMGFlsic7WPl+L7C3eiTozxckGnMjonuSwLRGtJlExlLssM0b9JlAwSWSZzOm5U6fbl0rz/AAM3uJDrWJPhAAAAAElFTkSuQmCC",
              "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAASCAYAAAHK/gXCAAAABGdBTUEAALGPC/xhBQAAAZRJREFUOBGNVL1OAkEQ/gbQAL1cjGDlO2h8CSsrSSy1tOOIhWeiEfUlJBEKX0R9AWNiexqhFxKiGWeW22WPO8Qt2G9mvvnmZwHAO6S41mKuVrDu+eehUrARcd0F1BO0+NE6Cgn4YWDHOhG0edsZFhixxHAN2KDVARF6w2v5FPrERvWepoR8J2C/WMbaR0Qjn+BICmpCBOPQEQjRsEPnartaq8CFIyhgRJJ4oNCUq4e8NWG8iR0POtgkIpnTO7U2H3lmPtTBRfYsLzrthdA1tXW5c6szfWhman2EkV2Bm0Za7toS8mzV7zG+9KlmBEbTEpI7/uxg1xB0VHEWkwCvVNCQd2joyCV1yh5eTZDQlE32EuL00uwg5PuU0zP8bb7I4z6UygjfI4o9zlLoVpE8i7Zj+41l+nBwhX7mieZknYj6c4QsnaXL/qIuUyJLhKyg3qkuMyLKyHxv1ZlzpLtnLmAvI/KXgCSNJOG2UMaN/+tJieQJaDVZ9cngkp5ymjEuJ2IFFlVbJOD8InAcnPLs78RF/gd+AWkEoXJX5PZqAAAAAElFTkSuQmCC"
            ]
          },
          pageTextStyle: {
            color: "#407BF2"
          },
          textStyle: {
            fontSize: "12",
            color: "#fff"
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              fontSize: "12",
              color: "#fff"
            },
            interval: 11,
            formatter: (item) => {
                return Number(item.split(':')[0])
            }
          },
          data:this.amongTimeData.time,
        },
        yAxis: [
          {
            type: "value",
            name: "订单量",
            axisLine: {
              show: false
            },
            nameTextStyle: {
              fontSize: 12,
              color: "#fff",
              padding: [30,10,0,-35]
            },
            axisLabel: {
              textStyle: {
                fontSize: "10",
                color: "#fff"
              },
              formatter:function(value){
                var txt=[];
                if(value>=100000){
                  txt.push((value/100000)*10+'万');
                }else{
                  value = value.toString().replace(/\d+/, function(n) { // 先提取整数部分
                    return n.replace(/(\d)(?=(\d{3})+$)/g, function($1) {
                      return $1 + ','
                    })
                  })
                  txt.push(value);
                }
                return txt;
              }
            },
            splitLine: { show: false }
          },
          {
            type: "value",
            name: "司机数",
            // axisLine: {
            //   show: false
            // },
            nameTextStyle: {
              fontSize: 12,
              color: "#fff",
              padding: [30,-35,0,10]
            },
            axisLabel: {
              textStyle: {
                fontSize: "10",
                color: "#fff"
              },
              formatter:function(value){
                var txt=[];
                if(value>=100000){
                  txt.push((value/100000)*10+'万');
                }else{
                  value = value.toString().replace(/\d+/, function(n) { // 先提取整数部分
                    return n.replace(/(\d)(?=(\d{3})+$)/g, function($1) {
                      return $1 + ','
                    })
                  })
                  txt.push(value);
                }
                return txt;
              }
            },
            splitLine: { show: false }
          }
        ],
        series: [
          {
            name: "发单量",
            smooth: true,
            symbol: "none",
            data:this.amongTimeData.cntOrderCallIncr,
            type: "line",
            lineStyle: {
              color: "#52C8F9"
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#52C8F9"
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0,.1)"
                }
              ])
            }
          },
          {
            name: "出车中司机数",
            smooth: true,
            symbol: "none",
            data:this.amongTimeData.cntDriWorking,
            type: "line",
            lineStyle: {
              color: "#32E749"
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#32E749"
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0,.1)"
                }
              ])
            },
            yAxisIndex: 1
          },
          {
            name: "匹配量",
            smooth: true,
            symbol: "none",
            data:this.amongTimeData.cntOrderDspIncr,
            type: "line",
            lineStyle: {
              color: "#E8692F"
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#E8692F"
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0,.1)"
                }
              ])
            },
            yAxisIndex: 0
          },
          {
            name: "应答量",
            smooth: true,
            symbol: "none",
            data:this.amongTimeData.cntOrderAnswerIncr,
            type: "line",
            lineStyle: {
              color: "#3080E8"
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#3080E8"
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0,.1)"
                }
              ])
            },
            yAxisIndex: 0
          },
          {
            name: "完单量",
            smooth: true,
            symbol: "none",
            data:this.amongTimeData.cntOrderDoneIncr,
            type: "line",
            lineStyle: {
              color: "#892FE8"
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#892FE8"
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0,.1)"
                }
              ])
            },
            yAxisIndex: 0
          },
          // {
          //   name: "实际里程费",
          //   smooth: true,
          //   symbol: "none",
          //   lineStyle: {
          //     color: "#FE4F4F"
          //   },
          //   areaStyle: {
          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //       {
          //         offset: 0,
          //         color: "#FE4F4F"
          //       },
          //       {
          //         offset: 1,
          //         color: "rgba(0,0,0,.1)"
          //       }
          //     ])
          //   },
          //   data:this.amongTimeData.priceGMVIncr,
          //   type: "line",
          //   yAxisIndex: 1
          // },
          {
            name: "累计发单量",
            smooth: true,
            symbol: "none",
            lineStyle: {
              color: "#FFA22A"
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#FFA22A"
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0,.1)"
                }
              ])
            },
            data:this.amongTimeData.cntOrderCall,
            type: "line",
            yAxisIndex: 0
          },
          {
            name: "累计匹配量",
            smooth: true,
            symbol: "none",
            lineStyle: {
              color: "#E72E8C"
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#E72E8C"
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0,.1)"
                }
              ])
            },
            data:this.amongTimeData.cntOrderDsp,
            type: "line",
            yAxisIndex: 0
          },
          {
            name: "累计应答量",
            smooth: true,
            symbol: "none",
            lineStyle: {
              color: "#C67D54"
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#C67D54"
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0,.1)"
                }
              ])
            },
            data:this.amongTimeData.cntOrderAnswer,
            type: "line",
            yAxisIndex: 0
          },
          {
            name: "累计完单量",
            smooth: true,
            symbol: "none",
            lineStyle: {
              color: "#BD1210"
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#BD1210"
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0,.1)"
                }
              ])
            },
            data:this.amongTimeData.cntOrderDone,
            type: "line",
            yAxisIndex: 0
          },
          // {
          //   name: "累计实际里程费",
          //   smooth: true,
          //   symbol: "none",
          //   lineStyle: {
          //     color: "#5AD8A6"
          //   },
          //   areaStyle: {
          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //       {
          //         offset: 0,
          //         color: "#5AD8A6"
          //       },
          //       {
          //         offset: 1,
          //         color: "rgba(0,0,0,.1)"
          //       }
          //     ])
          //   },
          //   data:this.amongTimeData.priceGMVIncr,
          //   type: "line",
          //   yAxisIndex: 1
          // },

          {
            name: "听单中司机数",
            smooth: true,
            symbol: "none",
            lineStyle: {
              color: "#E8E22F"
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#E8E22F"
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0,.1)"
                }
              ])
            },
            
            data:this.amongTimeData.cntDriReady,
            type: "line",
            yAxisIndex: 1
          },
          {
            name: "累计出车司机数",
            smooth: true,
            symbol: "none",
            lineStyle: {
              color: "#FFA4A4"
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#FFA4A4"
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0,.1)"
                }
              ])
            },
            data:this.amongTimeData.cntDriWork,
            type: "line",
            yAxisIndex: 1
          },
          {
            name: "累计匹配司机数",
            smooth: true,
            symbol: "none",
            lineStyle: {
              color: "#A4E82F"
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#A4E82F"
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0,.1)"
                }
              ])
            },
            data:this.amongTimeData.cntDriDsp,
            type: "line",
            yAxisIndex: 1
          },
          {
            name: "累计应答司机数",
            smooth: true,
            symbol: "none",
            lineStyle: {
              color: "#3B27FF"
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#3B27FF"
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0,.1)"
                }
              ])
            },
            data:this.amongTimeData.cntDriAnswer,
            type: "line",
            yAxisIndex: 1
          },
          {
            name: "累计完单司机数",
            smooth: true,
            symbol: "none",
            lineStyle: {
              color: "#E83A30"
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#E83A30"
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0,.1)"
                }
              ])
            },
            data:this.amongTimeData.cntDriDone,
            type: "line",
            yAxisIndex: 1
          }
        ]
      }
      amongBox.setOption(option);
    },
    // 千位符号
    numFormat(num) {
      if(num){
        var res = num.toString().replace(/\d+/, function(n) { // 先提取整数部分
          return n.replace(/(\d)(?=(\d{3})+$)/g, function($1) {
            return $1 + ','
          })
        })
        return res
      }
    },
    init(){
      setTimeout(function(){
        if(amongBox){
           amongBox.resize()
        }
      },400)
    }
  }
};
</script>

<style scoped>
.amongBox {
  width: 100%;
  height: 100%;
}
</style>
