<!--折线图 -->
<template>
  <div
    class="content-bottom mutLineChart"
    v-loading="detailedIndexLoading"
    element-loading-text="数据加载中..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0,0,0, 0.4)"
  >
    <div class="item-txt">详细指标查询</div>
    <div
      class="content-container"
      style="flex: 1; display: flex; flex-direction: column"
    >
      <div class="forms" style="display: flex">
        <div class="select-box">
          <label class="custom-form-label">路口名称：</label>
          <el-select
            style="margin-right: 10px"
            v-model="crossModel"
            placeholder="请选择路口"
            class="custom-form-input"
            @change="initLineData"
          >
            <el-option
              v-for="item in crossOption"
              :key="item.crossId"
              :label="item.crossName"
              :value="item.crossId"
            >
            </el-option>
          </el-select>
          <label class="custom-form-label">范围：</label>
          <el-select
            class="custom-form-input"
            v-model="scopeModel"
            placeholder="请选择"
            @change="scopeChange"
          >
            <el-option
              v-for="item in scopeOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            style="margin-left: 10px"
            multiple
            collapse-tags
            v-model="scopeListModel"
            placeholder="路口"
            @change="initLineData"
          >
            <el-option
              v-for="item in scopeListOption"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </div>
        <div class="select-box">
          <label class="custom-form-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 class="custom-form-label">指标选择：</label>
          <el-select
            v-model="indexModel"
            placeholder="请选择"
            @change="initLineData"
            @remove-tag="initLineData"
          >
            <el-option
              v-for="item in indexOption"
              :key="item.metricName"
              :label="item.metricName"
              :value="item.metricName"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="line-chart noDataMsg" v-if="!indexModel">暂无数据</div>
      <div class="line-chart" ref="chartLine" v-else></div>
    </div>
  </div>
</template>

<script>
import { bottomMenu, bottomCurve } from "@/common/api/signalEvaluation.js";
import { formatDateTime } from "@/common/js/utils.js";
import { getFontSize } from "@/config/holo/fontSize";

export default {
  data() {
    return {
      detailedIndexLoading: false,
      crossOption: [],
      crossModel: "",
      scopeModel: 0,
      scopeListModel: [],
      scopeListOption: [],
      scopeOption: [
        { label: "路口", value: 0 },
        { label: "进口道", value: 1 },
        { label: "方向", value: 2 },
        { label: "车道", value: 3 },
      ],
      xData: [],
      treeModel: "",
      dateOptionsDay: [],
      dateModel: "",
      timeModel: 5,
      indexModel: "",
      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,
        multiple: true,
      },
      dirObj: {
        1: "北进口",
        2: "东北进口",
        3: "东进口",
        4: "东南进口",
        5: "南进口",
        6: "西南进口",
        7: "西进口",
        8: "西北进口",
      },
      turnObj: {
        u: "掉头",
        l: "左转",
        s: "直行",
        r: "右转",
      },
      dateAll: [],
    };
  },
  props: ["date", "detailApiData", "areaObj", "indexOption"],
  mounted() {},
  watch: {
    date(val) {
      this.dateAll = [
        formatDateTime(this.date[0]),
        formatDateTime(this.date[1]),
      ];
      // this.initLineData();
    },
  },

  computed: {},
  methods: {
    init() {
      // this.indexModel = this.indexOption?.[
      // this.indexOption.length - 1
      //     ].metricName;
      this.indexModel = "平均速度";
      this.crossOption = this.areaObj.crossList;
      if (this.crossOption.length) {
        this.crossModel = this.crossOption[0].crossId;
        this.dateAll = [
          formatDateTime(this.date[0]),
          formatDateTime(this.date[1]),
        ];
        this.initLineData();
      }
    },
    scopeChange() {
      this.scopeListModel = [];
      bottomMenu({
        crossId: this.crossModel,
        scope: this.scopeModel,
      }).then((res) => {
        if (res && res.data) {
          this.scopeListOption = res.data.content;
          this.scopeListModel = [this.scopeListOption[0]];
          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() {
      if (!this.indexModel) return;
      this.detailedIndexLoading = true;
      bottomCurve({
        crossId: this.crossModel,
        metricCode: this.indexModel,
        minutes: this.timeModel,
        scope: this.scopeModel,
        scopeList: this.scopeListModel,
        startTime: this.dateAll[0],
        endTime: this.dateAll[1],
      }).then((res) => {
        console.log("bottom data", res.data);
        this.detailedIndexLoading = false;
        if (res && res.data) {
          const data = res.data.content.map((item) => {
            item.scopeName = item.scopeName || "路口";
            return item;
          });
          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.scopeName))];
      const objData = {};
      data.forEach((item) => {
        if (!objData[item.scopeName]) {
          objData[item.scopeName] = [];
        }
        let value = item.value;
        if (this.indexModel === "绿灯有效利用率") {
          if (value < 0) {
            value = 0;
          }
        }
        objData[item.scopeName].push(value || 0);
      });
      const seriesData = [];
      let colors = [
        "#00933a",
        "#ff8200",
        "#c0cfc5",
        "#f5da3e",
        "#5b45ff",
        "#ed4438",
        "#aceb2d",
        "#5e6c52",
        "#458fff",
        "#c3b5f0",
        "#9a5b67",
      ];
      legendData.forEach((item, index) => {
        seriesData.push({
          yAxisIndex: 0,
          name: item,
          type: "line",
          xAxisIndex: 0,
          smooth: true,
          showSymbol: false,
          lineStyle: {
            width: 2,
            color: colors[index],
            // color: obj[item].color,
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(
              0,
              1,
              0,
              0,
              [
                {
                  offset: 0,
                  color: "rgba(62, 170, 247, 0)", // 100% 处的颜色
                },
                {
                  offset: 1,
                  color: colors[index], // 0% 处的颜色
                },
              ],
              false
            ),
          },
          data: objData[item],
        });
      });
      let myChart = echarts.init(this.$refs.chartLine);
      let option = {
        // color: colors,
        // color: colorList,
        legend: {
          inactiveColor: "rgba(255,255,255,0.7)",
          right: 0,
          textStyle: {
            color: "rgba(255,255,255,0.9)",
          },
          data: legendData,
        },
        grid: {
          right: 15,
          bottom: 0,
          left: 0,
          top: 40,
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,0.8)",
          borderWidth: 0,
          textStyle: {
            fontSize: getFontSize(12),
            color: "white",
          },
          confine: true,
          // formatter: (params) => {
          //   return `${this.indexModel} : ${params[0].value}`;
          // },
          // 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,
            },
            splitLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.2)",
              },
            },
          },
        ],
        series: seriesData,
      };
      myChart.setOption(option, true);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.mutLineChart {
  //margin-top: 20px;
  display: flex;
  flex-direction: column;

  .second-title {
    margin-bottom: 10px;
    display: flex;
    align-items: center;

    img {
      margin-right: 10px;
    }
  }

  .forms {
    margin-bottom: 5px;
    background-color: #0e2b4c;
  }

  .line-chart {
    flex: 1;
  }

  .select-box {
    margin-right: 10px;
  }

  .content-container {
    background-color: #0e2b4c;
    padding: 10px;
  }

  .item-txt {
    height: 35px;
    line-height: 35px;
    padding-left: 10px;
    font-weight: bold;
    background: linear-gradient(to right, #0e3e70, transparent);
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    letter-spacing: 0.2px;
  }
}
</style>
