<!--折线图 -->
<template>
  <div class="content-bottom mutLineChart">
    <div class="head">
      <div class="second-title">详细指标查询
      </div>
      <div class="form-line">
        <div class="select-box">
          <label>范围：</label>
          <el-cascader
              size="mini"
            v-model="treeModel"
            :options="treeData"
            :props="defaultProps"
            @change="initLineData"
          ></el-cascader>
        </div>
        <div class="select-box">
          <label>时间粒度：</label>
          <el-select
            v-model="timeModel"
            placeholder="请选择"
            @change="initLineData"
          >
            <el-option
              v-for="item in timeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="select-box">
          <label>指标选择：</label>
          <el-select size="mini"
            style="width: 280px;"
            v-model="indexModel"
            multiple
            collapse-tags
            placeholder="请选择"
            @change="initLineData"
            @remove-tag="initLineData"
          >
            <el-option
              v-for="item in detailApiData.overallMetricsList"
              :key="item.metricCode"
              :label="item.metricName"
              :value="item.metricCode"
            >
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="line-chart" ref="chartLine"></div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import {
  scopeTree,
  sceneMetricsDetail,
} from "@/common/api/signalEvaluation.js";
import {getFontSize} from "@/config/holo/fontSize";
export default {
  data() {
    return {
      xData: [],
      treeModel: "",
      dateOptionsDay: [],
      dateModel: "",
      timeModel: 5,
      indexModel: ["1"],
      timeOptions: [
        { label: "5min", value: 5 },
        { label: "15min", value: 15 },
        { label: "30min", value: 30 },
      ],
      indexOptions: [
        { code: "1", name: "不停车通过率" },
        { code: "2", name: "n次停车通过率" },
        { code: "3", name: "平均延误" },
        { code: "4", name: "最大排队长度" },
        { code: "5", name: "停车次数" },
      ],
      defaultProps: {
        children: "child",
        label: "name",
        checkStrictly: true,
      },
      treeData: [
        {
          value: "路口",
          name: "路口",
          children: [
            {
              value: "进口道",
              name: "进口道",
              children: [
                { value: "东", name: "东" },
                { value: "北", name: "北", children: [] },
              ],
            },
          ],
        },
      ],
      dirObj: {
        "1": "北进口",
        "2": "东北进口",
        "3": "东进口",
        "4": "东南进口",
        "5": "南进口",
        "6": "西南进口",
        "7": "西进口",
        "8": "西北进口",
      },
      turnObj: {
        u: "掉头",
        l: "左转",
        s: "直行",
        r: "右转",
      },
    };
  },
  mounted() {
    this.indexModel = [this.detailApiData.overallMetricsList[0].metricCode];
    this.getOption();
  },
  props: ["type", "date", "detailApiData",'activeCross'],
  computed: {
  },
  methods: {
    getOption() {
      scopeTree({
        crossId: this.activeCross.crossId,
      }).then((res) => {
        if (res && res.data) {
          const data = res.data.content;
          const treeData = [data];
          this.treeData = this.setTreeData(treeData);
          this.treeModel = [this.treeData[0].value];
          this.initLineData();
        }
      });
    },
    setTreeData(data) {
      data.forEach((item) => {
        if (item.crossId) {
          item.name = "路口";
        } else if (item.dir) {
          item.name = this.dirObj[item.dir];
        } else if (item.turn) {
          item.name = this.turnObj[item.turn];
        } else if (item.laneSort) {
          item.name = item.laneSort;
        }
        item.value = item.crossId || item.dir || item.turn || item.laneSort;
        if (item.child) {
          this.setTreeData(item.child);
        }
      });
      return data;
    },
    initLineData() {
      sceneMetricsDetail({
        crossId: this.treeModel[0],
        dir: this.treeModel[1],
        laneSort: this.treeModel[3],
        minutes: this.timeModel,
        turn: this.treeModel[2],
        date: this.date,
        metricCodes: this.indexModel,
      }).then((res) => {
        if (res && res.data) {
          const data = res.data.content;
          this.getChart(data);
        }
      });
    },
    getChart(data) {
      const xData = [...new Set(data.map((item) => item.metricTime))];
      // const xData = metricsList.map((item) => item.metricTime);
      const legendData = [...new Set(data.map((item) => item.metricName))];
      const objData = {};
      data.forEach((item) => {
        if (!objData[item.metricName]) {
          objData[item.metricName] = [];
        }
        let value = item.metricValue;
        if (item.metricName === "绿灯有效利用率") {
          if (value < 0) {
            value = 0;
          }
        }
        objData[item.metricName].push(value || 0);
        // objData[item.metricName].push(item.metricValue || 0);
      });
      const seriesData = [];
      legendData.forEach((item) => {
        seriesData.push({
          yAxisIndex: 0,
          name: item,
          type: "line",
          xAxisIndex: 0,
          smooth: false,
          showSymbol: false,
          lineStyle: {
            width: 2,
            // color: obj[item].color,
          },
          data: objData[item],
        });
      });
      let myChart = echarts.init(this.$refs.chartLine);
      let option = {
        // color: colorList,
        legend: {
          inactiveColor:'rgba(255,255,255,0.7)',
          right: 70,
          textStyle: {
            color: "rgba(255,255,255,0.9)",
          },
          data: legendData,
        },
        grid: {
          right: 0,
          bottom: 0,
          left: 0,
          top: 28,
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: 'rgba(0,0,0,0.8)',
          borderWidth: 0,
          textStyle: {
            fontSize: getFontSize(12),
            color: 'white',
          },
          confine:true
          // axisPointer: {
          //   type: "cross",
          // },
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            // prettier-ignore
            data: xData
          },
          {
            type: "category",
            boundaryGap: false,
            // prettier-ignore
            data: this.xData,
            show: false,
          },
        ],
        yAxis: [
          {
            type: "value",
            axisPointer: {
              snap: true,
            },

            splitLine:{
              lineStyle:{
                color: 'rgba(255,255,255,0.2)'
              }
            }
          },
          {
            type: "value",
            axisPointer: {
              snap: true,
            },
          },
        ],
        series: seriesData,
      };
      myChart.setOption(option, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style lang="less" scoped>
::v-deep{
  .el-input__inner{
    background-color: transparent;
    border: 1px solid rgba(90,144,238,0.34);
    color: white;
  }
}
.mutLineChart {
  display: flex;
  flex-direction: column;
  padding: 0 10px 10px 10px;
  .second-title{
    height: 36px;
    width: 100%;
    background: linear-gradient( 90deg, rgba(17,88,158,0.45) 0%, rgba(17,88,158,0) 100%);
    display: flex;
    align-items: center;
    font-size: 15px;
    padding-left: 18px;
  }
  .form-line{
    height: 50px;
    display: flex;
    align-items: center;
    padding-left: 50px;
    .select-box{
      margin-right: 16px;
    }
  }
  .line-chart {
    flex: 1;
    width: 100%;
    //height: 250px;
  }
  .select-box {
    margin-right: 10px;
  }
}
</style>
