<template>
  <msg-card class="item-keyCross" :title="`${crossName}监测`">
    <div class="full-w-h" v-loading="loading"
      element-loading-spinner="el-icon-loading"
      element-loading-text="数据加载中..."
      element-loading-background="rgba(3, 11, 25, 0.8)" style="position: relative">
      <div class="keyCrossTitle">排队长度(m)</div>
      <v-chart autoresize :option="option"/>
    </div>
  </msg-card>
</template>

<script>
import {getFontSize} from "../../../../config/holo/fontSize";
import msgCard from "../../../../components/Standard/msg-card.vue";
import {getKeyCross} from "@/dao/optApi";
import {noDataTitle} from "@/utils/chartStyle";

let timer = null;

export default {
  name: "keyCross",
  components: {
    msgCard
  },
  data() {
    return {
      loading: true,
      charts: {},
      xData:[],
      chartResult:{},
      crossId:'',
    };
  },
  computed:{
    option(){
      let title = {
        show: false
      }
      if(!this.xData.length){
        title = noDataTitle
      }
      let colors = [
        "rgba(24, 144, 255, 1)",
        "rgba(0, 189, 208, 1)",
        "rgba(79, 210, 125, 1)",
        "rgba(255, 209, 69, 1)",
      ]
      let series = [];
      for(let key in this.chartResult){
        console.log('push')
        let nameReal = this.$store.state.dicts.Direction.find((item) => {
          return item.code == key;
        }).name
        let index = Object.keys(this.chartResult).indexOf(key)
        series.push({
          name: nameReal,
          type: "bar",
          barWidth: getFontSize(8),
          label: {
            show: false,
          },
          itemStyle:{
            borderRadius: 4,
            color: new echarts.graphic.LinearGradient(
                0,
                1,
                0,
                0,
                [
                  {
                    offset: 0,
                    color: colors[index].replace('1)','0.2)'), // 100% 处的颜色
                  },

                  {
                    offset: 1,
                    color: colors[index] , // 0% 处的颜色
                  },
                ],
                false
            ),
          },
          emphasis: {
            focus: "series",
          },
          data: this.chartResult[key],
        })
      }
      return {
        title,
        dataZoom: {
          type: "inside",
          startValue: this.xData.length - 6,
          endValue:this.xData.length-1,
        },
        tooltip: {
          enterable: true,
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          backgroundColor: 'rgba(0,0,0,0.8)',
          borderWidth: 0,
          textStyle: {
            fontSize: getFontSize(12),
            color: 'white',
          },
          confine: true,
        },
        legend: {
          inactiveColor:'rgba(255,255,255,0.7)',
          right: 0,
          itemGap: getFontSize(16),
          itemWidth: getFontSize(12),
          itemHeight: getFontSize(12),
          textStyle: {
            color: "rgba(255,255,255,0.9)",
            fontSize: getFontSize(12),
            lineHeight: 16,
          },
          pageTextStyle: {
            color: "rgba(255,255,255,0.9)",
            fontSize: getFontSize(12),
          },
          pageIconColor: "white",
          pageIconSize: getFontSize(12),
          pageIconInactiveColor: "rgba(255,255,255,0.7)",
          type: "scroll",
        },
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top: "22%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.xData,
          axisLabel: {
            fontSize: getFontSize(12),
            color: "rgba(126, 139, 166, 1)",
          },
        },
        yAxis: {
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "rgba(255, 255, 255, 0.2)",
            },
          },
          type: "value",
          axisLabel: {
            fontSize: getFontSize(12),
            color: "rgba(126, 139, 166, 1)",
          },
        },
        series: series,
      }
    },
    crossName(){
      let matchObj = this.$store.state.dicts.CrossInfo.find(cross => {
        return cross.code == this.crossId
      })
      if(matchObj){
        return matchObj.name
      }else{
        return  '重点路口'
      }
    }
  },
  methods: {
    getData(){
      // 13NF80B5QN0
      getKeyCross({crossId:''}).then(res=>{
        this.loading = false
        console.log('key cross...',res)
        if(res.content){
          if(res.content.length){
            this.crossId = res.content[0].crossId
          }
          this.xData = res.content.map(item=>{
            return new Date(item.timeStamp).toLocaleString().slice(-8).slice(0,5)
          })
          let maxDirList = res.content.reduce((a,b)=>{
            for(let item of b.detailList){
              if(!a.includes(item.dir)){
                a.push(item.dir)
              }
            }
            return a
          },[])
          this.chartResult = res.content.reduce((a,b)=>{
            let flags = {}
            for(let item of maxDirList){
              flags[item] = false
            }
            for(let item of b.detailList){
              flags[item.dir] = true
              if(a[item.dir]){
                a[item.dir].push(item.queueLength)
              }else{
                a[item.dir] = [item.queueLength]
              }
            }
            for(let key in flags){
              if(!flags[key]){
                if(a[key]){
                  a[key].push(0)
                }else{
                  a[key] = [0]
                }
              }
            }
            return a
          },{})
        }
      })
    },
  },
  mounted() {
    let queue = [];
    let needDicts = [
        'Direction','CrossInfo'
    ];
    for (let item of needDicts) {
      queue.push(
          this.$store.dispatch("QUERY_DICT", {
            type: item,
          })
      );
    }
    Promise.all(queue).then(() => {
      this.getData()
    });
  },
  beforeDestroy() {
    timer && clearInterval(timer);
  },
};
</script>

<style lang="less" scoped>
.item-keyCross {
  position: relative;

  .keyCrossTitle {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    font-size: 14px;
    line-height: 25px;
    color: rgba(126, 139, 166, 1);
  }
}
</style>
