<template>
  <div class="full-w-h">
    <msg-card v-if="!isCrossDetail" :long="true" class="item-trafficflow" title="交通流量">
      <v-chart v-loading="loading"
               element-loading-text="数据加载中..."
               element-loading-spinner="el-icon-loading"
               element-loading-background="rgba(3, 11, 25, 0.8)" :option="option" autoresize></v-chart>
    </msg-card>
    <div v-else class="item-trafficflow" style="display: flex;flex-direction: column">
      <div class="custom-tab-header">
<!--        <div @click="activeTab=Object.keys(item)[0]" class="c-tab-item"-->
<!--             :class="`${activeTab===Object.keys(item)[0]?'active':''}`"-->
<!--             v-for="item of [{zb:'交通指标查询'},{sj:'事件查询'}]">{{ item[Object.keys(item)[0]] }}-->
<!--        </div>-->
        事件查询
      </div>
      <div class="custom-tab-content">
<!--        <div class="full-w-h" v-if="activeTab==='zb'">-->
<!--          <traffic-index-comp :crossData="crossData"/>-->
<!--        </div>-->
        <div class="full-w-h">
          <event-comp @showEventPoint="showEventPoint" :crossData="crossData"/>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import {
  crossFlow,
} from "../../../dao/situation";
import {getFontSize} from "../../../config/holo/fontSize";
import msgCard from "../../../components/Standard/msg-card.vue";
import {getFlows, getSingalFlow} from "@/dao/optApi";
import TrafficIndexComp from "@/views/signal/msgs/bottomComponents/trafficIndexComp.vue";
import EventComp from "@/views/signal/msgs/bottomComponents/eventComp.vue";
import {noDataTitle} from "@/utils/chartStyle";

let timer = null;
export default {
  name: "trafficFlow",
  components: {
    EventComp,
    TrafficIndexComp,
    msgCard,
  },
  props: ['isCrossDetail', 'crossData'],
  data() {
    return {
      activeTab: 'zb',
      tabsLoading: true,
      // 交通流量
      tabsActiveName: "cross",
      trafficFlowData: {},
      loading: false,
      listObj: {},
      xData: [],
    };
  },
  computed:{
    option(){
      let arr = []
      for (let key in this.listObj) {
        arr.push(key)
      }
      let colors = [
        "rgba(24, 144, 255, 0.6)",
        "rgba(0, 189, 208, 0.6)",
        "rgba(79, 210, 125, 0.6)",
        "rgba(255, 209, 69, 0.6)",
        "rgba(255, 111, 38, 0.6)",
      ]
      let title = {
        show: false
      }
      if (!this.xData.length) {
        title = noDataTitle
      }
      return {
        title,
        color: colors,
        tooltip: {
          enterable: true,
          trigger: "axis",
          axisPointer: {
            type: "line",
          },
          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)',
          itemGap: getFontSize(16),
          textStyle: {
            color: "rgba(255,255,255,0.9)",
            fontSize: getFontSize(12),
            lineHeight: 16,
          },
          pageTextStyle: {
            color: "rgba(255,255,255,0.9)",
            fontSize: getFontSize(12),
          },
          right: 10,
          pageIconColor: "white",
          pageIconSize: getFontSize(12),
          pageIconInactiveColor: "rgba(255,255,255,0.7)",
          type: "scroll",
        },
        grid: {
          left: 0,
          right: 15,
          bottom: 0,
          top: "18%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.xData,
          boundaryGap: false,
          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 this.listObj) {
            let nameReal = this.$store.state.dicts.CrossInfo.find((item) => {
              return item.code == key;
            })?.name || key
            series.push({
              name: nameReal,
              symbol: 'none',
              type: "line",
              label: {
                show: false,
              },
              smooth: true,
              areaStyle: {
                color: new echarts.graphic.LinearGradient(
                    0,
                    1,
                    0,
                    0,
                    [
                      {
                        offset: 0,
                        color: "rgba(62, 170, 247, 0)", // 100% 处的颜色
                      },
                      {
                        offset: 1,
                        color: colors[arr.indexOf(key)], // 0% 处的颜色
                      },
                    ],
                    false
                ),
              },
              data: this.listObj[key],
            });
          }
          console.log("series", series);
          return series;
        })(),
      };
    }
  },
  methods: {
    showEventPoint(events){
      this.$emit('showEventPoint',events)
    },
    // 宏观级别流量
    getData() {
      this.loading = true
      let queue = [];
      let needDicts = [
        'CrossInfo'
      ];
      for (let item of needDicts) {
        queue.push(
            this.$store.dispatch("QUERY_DICT", {
              type: item,
            })
        );
      }
      Promise.all([getFlows(), ...queue]).then(([res, ...res1]) => {
        this.loading = false
        console.log('flow...', res)
        for(let item of res.content){
          item.metricsList = item.metricsList.sort((a,b) => {
            let aTime = new Date(a.timeStamp).getTime()
            let bTime = new Date(b.timeStamp).getTime()
            return aTime - bTime
          })
        }
        this.xData = res.content[0].metricsList.map(item => {
          // return new Date(item.timeStamp).toLocaleString().replaceAll('/','-')
          return item.metricTime
        })
        this.listObj = {}
        for (let item of res.content) {
          if (item.metricsList) {
            this.listObj[item.crossId] = item.metricsList.map(flowObj => {
              return flowObj.flow || 0
            })
          }
        }
      })
    },
  },

  mounted() {
    if (this.isCrossDetail) {

    } else {
      this.getData()
    }
  },
  beforeDestroy() {
    timer && clearInterval(timer);
  },
};
</script>
<style lang="less" scoped>

.item-trafficflow {
  position: relative;
  height:100%;


  .title {
    position: absolute;
    top: 0;
    left: 6px;
    line-height: 25px;
    color: white;
  }

  .custom-tab-header {
    height: 45px;
    display: flex;font-weight: bold;

    width: 100%;
    font-size: 21px;
    line-height: 45px;
    color: white;
    background-image: url("../../../assets/images/holo/msgCardHead.png");
    background-size: 100% 100%;
    justify-content: flex-start;
    align-items: center;
    padding-left: 25px;

    .c-tab-item {
      font-size: 18px;
      font-weight: bold;
      width:150px;
      height: 30px;
      cursor: pointer;
      background-image: linear-gradient(to right, #054076, #025190,#054076);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .active {
      background-image: linear-gradient(to right, #0a5482, #0297f6,#0a5482);
    }
  }

  .custom-tab-content {
    flex: 1;
  }

}
</style>
