<template>
  <div class="full-w-h" style="display: flex;flex-direction: column; position: relative">
    <div class="custom-form">
      <label class="custom-form-label">指标选择： </label>
      <el-select @change="renderTargetIndex" style="width: 120px;margin-right: 10px" v-model="value" placeholder="请选择">
        <el-option
            v-for="item in options"
            :key="item.prop"
            :label="item.label"
            :value="item.prop">
        </el-option>
      </el-select>
      <label class="custom-form-label">时段选择： </label>
      <el-date-picker
          :clearable="false"
          style="width:360px"
          @change="getData"
          v-model="dateTimeRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
      </el-date-picker>
    </div>
    <v-chart :option="option" autoresize style="flex: 1"></v-chart>
  </div>
</template>

<script>
import {noDataTitle} from "@/utils/chartStyle";
import {getFontSize} from "@/config/holo/fontSize";
import {getLaneTrafficIndex, getSingalFlow} from "@/dao/optApi";

export default {
  name: 'trafficIndexComp',
  props: ['crossData'],
  data() {
    return {
      loading: true,
      options: [{label: '时间', prop: 'time'},
        {label: '方向', prop: 'dir'},
        {label: '车道号', prop: 'laneSort'},
        {label: '总流量', prop: 'allFlow'},
        {label: '行人流量', prop: 'pedFlow'},
        {label: '非机动车流量', prop: 'nonMotorFlow'},
        {label: '小车流量', prop: 'trafficFlowA'},
        {label: '中车流量', prop: 'trafficFlowB'},
        {label: '大车流量', prop: 'trafficFlowC'},
        {label: '平均速度', prop: 'speed'},
        {label: '时间占有率', prop: 'timeOccupancy'},
        {label: '平均车头时距', prop: 'vehheadTime'},
        {label: '平均车身间距', prop: 'vehheadDist'},
        {label: '85位速度', prop: 'v85'},
        {label: '车辆总和', prop: 'allVehiceleFlow'},
        {label: '平均空间占有率', prop: 'vehicleNumsRatioMean'},
        {label: '最大排队长度', prop: 'queueLength'},
        {label: '平均停车次数', prop: 'stopTimes'},
        {label: '平均延误', prop: 'delayTime'},],
      value: 'allFlow',
      dateTimeRange: [],
      xData: [],
      yDatas: [],
    }
  },
  computed: {
    option() {
      let title = {
        show: false
      }
      if (!this.xData.length) {
        title = noDataTitle
      }
      let series = []
      for (let [i, item] of this.yDatas.entries()) {
        // let nameReal = this.$store.state.dicts.Direction.find((item) => {
        //   return item.code == key;
        // }).name
        let nameReal = item.name;
        series.push({
          name: nameReal,
          type: "line",
          symbol: 'none',
          smooth: true,
          // areaStyle: {
          //   color: new echarts.graphic.LinearGradient(
          //       0,
          //       1,
          //       0,
          //       0,
          //       [
          //         {
          //           offset: 0,
          //           color: "rgba(62, 170, 247, 0)", // 100% 处的颜色
          //         },
          //         {
          //           offset: 1,
          //           color: this.colors[i], // 0% 处的颜色
          //         },
          //       ],
          //       false
          //   ),
          // },
          label: {
            show: false,
          },
          emphasis: {
            focus: "series",
          },
          data: item.list,
        })
      }
      return {
        title,
        // dataZoom: {
        //   type: "inside",
        //   startValue: this.xData.length - 6,
        //   endValue: this.xData.length - 1,
        // },
        // color: this.colors,
        tooltip: {
          enterable: true,
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          textStyle: {
            fontSize: getFontSize(12),
          },
          confine: true,
        },
        legend: {
          left: 0,
          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.7)",
          type: "scroll",
        },
        grid: {
          left: 0,
          right: getFontSize(15),
          bottom: 0,
          top: "22%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          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,
      }
    }
  },
  mounted() {
    this.dateTimeRange = [
      new Date(
          new Date().setTime(new Date().getTime() - 3600 * 1000 * 24)
      ),
      new Date()
    ];
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true;
      getLaneTrafficIndex({
        "crossId": this.crossData.id,
        "end": this.dateTimeRange[1].toLocaleString().replaceAll('/', '-'),
        "start": this.dateTimeRange[0].toLocaleString().replaceAll('/', '-'),
        "granularity": "1h"
      }).then(res => {
        this.allData = res.content
        this.renderTargetIndex()
      })
    },
    renderTargetIndex(){
      console.log('value',this.value)
      this.xData = this.allData.reduce((a, b) => {
        if(!a.includes(b.time)){
          a.push(b.time)
        }
        return a
      }, [])
      this.yDatas = []
      let yObj = this.allData.reduce((a, b) => {
        let dir = this.$store.state.dicts.Direction.find((item) => {
          return item.code == b.dir;
        })?.name
        if(a[`${dir}-${b.laneSort}`]){
          a[`${dir}-${b.laneSort}`].push(b[this.value])
        }else{
          a[`${dir}-${b.laneSort}`] = [b[this.value]]
        }
        return a
      }, {})
      for(let key in yObj){
        this.yDatas.push({name: key, list: yObj[key]})
      }
    }
  }
}
</script>

<style lang="less" scoped>
.custom-form {
  z-index: 2;
  //position: absolute;
  //right: 0;
  //top: 0;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
::v-deep .el-range-input, ::v-deep .el-input__inner{
  background-color: transparent;
  color: white;
}
</style>