<template>
  <msg-card class="item-crossDetail" title="路口监测">
    <simple-card style="height: 15%;" title="路口交通指标">
      <traffic-index :crossData="clickCrossData"/>
    </simple-card>
    <simple-card style="height: 25%" title="交通状态">
      <traffic-status :crossData="clickCrossData"/>
    </simple-card>
    <simple-card style="height: 30%" title="交通流量">
      <traffic-flow :crossData="clickCrossData"/>
    </simple-card>
    <simple-card style="height: 30%" title="排队长度">
      <queue-length :crossData="clickCrossData"/>
    </simple-card>
  </msg-card>
</template>

<script>
import {getFontSize} from "../../../../config/holo/fontSize";
import msgCard from "../../../../components/Standard/msg-card.vue";
import {getKeyCross, getSingalFlow} from "@/dao/optApi";
import SimpleCard from "@/components/Standard/simple-card.vue";
import TrafficFlow from "@/views/signal/msgs/right/detailComponents/trafficFlow.vue";
import TrafficStatus from "@/views/signal/msgs/right/detailComponents/trafficStatus.vue";
import TrafficIndex from "@/views/signal/msgs/right/detailComponents/trafficIndex.vue";
import QueueLength from "@/views/signal/msgs/right/detailComponents/queueLength.vue";

let timer = null;

export default {
  name: "crossDetailMsg",
  components: {
    QueueLength,
    TrafficIndex,
    TrafficStatus,
    TrafficFlow,
    SimpleCard,
    msgCard,
  },
  props:['clickCrossData'],
  watch:{
  },
  data() {
    return {
      tabsLoading: true,
      charts: {},
    };
  },
  methods: {
    getData(){
      // getKeyCross().then(res=>{
      //   console.log('key cross...',res)
      //   let 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
      //   },[])
      //   let results = 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
      //   },{})
      //   console.log('results',results)
      //   this.renderCharts(xData, results)
      // })
    },
    renderCharts(xData, lists){
      let option = {
        dataZoom: {
          type: "inside",
          startValue: Object.keys(lists).length - 6,
          endValue: Object.keys(lists).length - 1,
        },
        color: [
          "rgba(24, 144, 255, 1)",
          "rgba(0, 189, 208, 1)",
          "rgba(79, 210, 125, 1)",
          "rgba(255, 209, 69, 1)",
        ],
        tooltip: {
          enterable: true,
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          textStyle: {
            fontSize: getFontSize(12),
          },
          confine: true,
        },
        legend: {
          inactiveColor:'rgba(255,255,255,0.7)',
          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.9)",
          type: "scroll",
        },
        grid: {
          left: 0,
          right: 0,
          bottom: 0,
          top: "22%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: 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: (() => {
          let series = [];
          for(let key in lists){
            let nameReal = this.$store.state.dicts.Direction.find((item) => {
              return item.code == key;
            }).name
            series.push({
              name: nameReal,
              type: "bar",
              barWidth: getFontSize(6),
              label: {
                show: false,
              },
              emphasis: {
                focus: "series",
              },
              data: lists[key],
            })
          }
          console.log("series", series);
          return series;
        })(),
      };
      this.charts.cross = echarts.init(
          document.getElementById("keyCross")
      );
      this.charts.cross && this.charts.cross.setOption(option);
    }
  },
  mounted() {
    // console.log('c mounted', this.clickCrossData)
    // let queue = [];
    // let needDicts = [
    //   'Direction'
    // ];
    // 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-crossDetail {
  position: relative;
  display: flex;
  flex-direction: column;
  .title {
    position: absolute;
    top: 0;
    left: 6px;
    line-height: 25px;
    color: white;
  }
  ::v-deep .msg-card-content{
    overflow: hidden;
  }
}
</style>
