<template>
  <div class="scene-detail">
    <div class="head-title">
      <span class="title">{{ activeObj.crossName }}</span>
      <div
        class="el-icon-close"
        style="color: white"
        @click="$emit('update:detailShow', false)"
      ></div>
    </div>
    <div class="scene-content">
      <div class="left-box">
        <div class="kip-bg">
          <p class="name">{{ typeObj[type] }}事件</p>
          <span class="date">{{ detailApiData.startTime }}</span>
        </div>
        <div class="kip-detail">
          <div v-if="type === 2" class="kip-detail-item">
            <div class="item-name">等级：</div>
            <div class="item-value">{{ levelObj[detailApiData.level] }}</div>
          </div>
          <div class="kip-detail-item">
            <div class="item-name">持续时长：</div>
            <div class="item-value">{{ detailApiData.duration }}min</div>
          </div>
          <div class="kip-detail-item">
            <div class="item-name">方向：</div>
            <div
              class="item-value"
              v-if="detailApiData.dirsName && detailApiData.dirsName.length"
            >
              {{ detailApiData.dirsName.join("、") }}
            </div>
          </div>
          <div class="kip-detail-item">
            <div class="item-name">配时方案：</div>
            <div
              class="item-value"
              v-if="
                detailApiData.patternNames && detailApiData.patternNames.length
              "
            >
              {{ detailApiData.patternNames.join("、") }}
            </div>
          </div>
          <div class="kip-detail-item">
            <div class="item-name">路口服务水平：</div>
            <div class="item-value">{{ detailApiData.serviceLevel }}</div>
          </div>
          <div
            class="kip-detail-item"
            v-for="(item, index) in detailApiData.overallMetricsList"
            :key="index"
          >
            <div class="item-name">{{ item.metricName }}：</div>
            <div class="item-value">
              {{ item.metricValue }}{{ item.metricUnit }}
            </div>
          </div>
        </div>
      </div>
      <div class="right-box">
        <div class="right-content">
          <div class="cross-detail-box">
            <div
              class="cross-detail"
              v-for="(item, index) in crossDetailData"
              :key="index"
            >
              <div class="title">
                <div
                  class="title-item"
                  :class="{
                    active: tableTabActive[index] === 1,
                  }"
                  @click="tableTabClick(1, index, item)"
                >
                  转向级
                </div>
                <div
                  class="title-item"
                  :class="{
                    active: tableTabActive[index] === 2,
                  }"
                  @click="tableTabClick(2, index, item)"
                >
                  车道级
                </div>
              </div>
              <table>
                <thead>
                  <tr>
                    <th>{{ dirObj[item.dir] }}</th>
                    <th
                      v-for="(head, headIndex) in item.headData"
                      :key="headIndex"
                    >
                      {{ head.name }}
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    v-for="(tbody, tbodyIndex) in item.tbodyData"
                    :key="tbodyIndex"
                  >
                    <th>
                      {{ tbody.name }}
                    </th>
                    <th
                      v-for="(head, headIndex) in item.headData"
                      :key="headIndex"
                    >
                      <!-- {{ head[tbody.key] }} -->
                      {{ tranverse(tbody, head[tbody.key]) }}
                    </th>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <crossHintHeat
            isSmall="isSmall"
            class="crossContent"
            ref="crossHint"
            :crossData="activeObj"
            type="heat"
            :isScene="true"
            :dateAll="dateAll"
            :dayModel="dayModel"
            :sceneType="type"
            :timeModel="timeModel"
            :key="timeModel"
          ></crossHintHeat>
          <!-- <crossHint
            v-else
            isSmall="isSmall"
            class="crossContent"
            ref="crossHint"
            :crossData="crossData"
          ></crossHint> -->
          <timeline
            class="time-line"
            :isScene="true"
            @time-selected="timeSelected"
            :selected="true"
            v-if="detailLineShow"
            :timeData="detailApiData.timeline"
          ></timeline>
        </div>
      </div>
    </div>
    <mutLineChart
      class="content-bottom"
      :type="type"
      :date="dayModel"
      :active-cross="activeObj"
      :detailApiData="detailApiData"
      v-if="detailLineShow"
    ></mutLineChart>
  </div>
</template>

<script>
import crossHintHeat from "./crossHintHeat.vue";
import crossHint from "../evaComponents/CrossHint.vue";
import { formatDate } from "@/common/js/utils.js";
import {
  scopeTree,
  abnormalDetail,
  metricsTurn,
  metricsLane,
} from "@/common/api/signalEvaluation.js";
import { api_getCrossData } from "@/common/api/crossControl.js";
import { api_getCrossData_opt } from "@/common/api/signalOp.js";
export default {
  props: ["detailShow", "type", "activeObj", "dateAll", "detailData"],
  data() {
    return {
      levelObj: {
        0: "正常",
        1: "轻度拥堵",
        2: "中度拥堵",
        3: "严重拥堵",
      },
      detailLineShow: false,
      tableTabActive: [],
      typeObj: {
        3: "溢出",
        1: "失衡",
        2: "拥堵",
      },
      bottomChartRefresh: false,
      tableSelect: [],
      timeModel: null,

      numberData: [
        { name: "东进口左转效率低，延误高" },
        { name: "其他方向运行效率良好" },
      ],
      strategyModel: "1001",
      strategyOption: [{ strategyCode: "1001", strategyName: "运行策略" }],
      // crossId: "",
      // crossData: {},
      intervalModel: "1",
      intervalOptions: [{ label: "2023/7/18周三7:00-9:00", value: "1" }],
      crossDetailData: [],
      dirObj: {
        1: "北进口",
        2: "东北进口",
        3: "东进口",
        4: "东南进口",
        5: "南进口",
        6: "西南进口",
        7: "西进口",
        8: "西北进口",
      },
      /**
       * UNKNOWN(0, "unknown", "未知"),
L(1, "l", "左转"),
S(2, "s", "直行"),
R(3, "r", "右转"),
U(4, "u", "掉头"),
L_S(5, "l_s", "直左"),
S_R(6, "s_r", "直右"),
L_S_R(7, "l_s_r", "左直右"),
L_R(8, "l_r", "左右"),
L_U(9, "l_u", "左转掉头"),
S_U(10, "s_u", "直行掉头"),
R_U(11, "r_u", "右转掉头"),
L_S_U(12, "l_s_u", "左直掉头"),
U_S_R(13, "u_s_r", "直右掉头"),
L_S_R_U(14, "l_s_r_u", "左直右掉头"),
L_R_U(15, "l_r_u", "左右掉头");
       */
      turnObj: {
        unknow: "未知",
        u: "掉头",
        l: "左转",
        s: "直行",
        r: "右转",
        l_s: "直左",
        s_r: "直右",
        l_s_r: "左直右",
        l_r: "左右",
        l_u: "左转掉头",
        s_u: "直行掉头",
        r_u: "右转掉头",
        l_s_u: "左直掉头",
        u_s_r: "直右掉头",
        l_s_r_u: "左直右掉头",
        l_r_u: "左右掉头",
      },
      headData: [],
      tbodyData: [
        { name: "流量(pcu/5min)", key: "flow" },
        // { name: "流量(pcu/5min)", key: "index1" },
        // { name: "平均速度(km/h)", key: "index2" },
        // { name: "平均拖延(s)", key: "index3" },
        // { name: "排队长度(m)", key: "index4" },
        // { name: "溢流率(%)", key: "index5" },
      ],
      defaultProps: {
        children: "child",
        label: "name",
        checkStrictly: true,
      },
      treeModel: "",
      treeData: [],
      dateModel: "",
      detailApiData: {},
      dayModel: "",
    };
  },
  components: {
    crossHint,
    crossHintHeat,

    mutLineChart: () =>
      import(/*webpackChunkName:"checkExpendTable" */ "./mutLineChart.vue"),
    timeline: (resolve) => require(["./timeline.vue"], resolve),
    lineChart: () =>
      import(/*webpackChunkName:"checkExpendTable" */ "./lineChart.vue"),
    checkExpendTable: () =>
      import(/*webpackChunkName:"checkExpendTable" */ "./checkExpendTable.vue"),
  },
  computed: {},
  mounted() {
    console.log("this.activeObj", this.activeObj);
    if (this.type === 2) {
      this.dateModel = this.detailData.name.split("isCongestion")[0];
    } else if (this.type === 1) {
      this.dateModel = this.detailData.name.split("isUnbalance")[0];
    } else if (this.type === 3) {
      this.dateModel = this.detailData.name.split("isSpillover")[0];
    }
    this.getOption();
    this.getDetailKip();
  },
  methods: {
    tranverse(tbody, value){
      if(tbody.key === '7'){
        if(value < 0){
          return '--'
        }
      }
      return value
    },
    getDetailKip() {
      console.log("getDetailKip hourMinute", this.detailData.xName);
      abnormalDetail({
        crossId: this.activeObj.crossId,
        hourMinute: this.detailData.xName,
        problemDate: this.dateModel,
        status: this.type,
      }).then((res) => {
        if (res && res.data) {
          const data = res.data.content;
          this.detailApiData = data;
          if (this.detailApiData.dirs) {
            this.detailApiData.dirsName = this.detailApiData.dirs.map(
              (item) => this.dirObj[item]
            );
          }
          const dateTime = new Date(this.detailApiData.startTime);
          // 获取日期部分
          this.dayModel = formatDate(dateTime);
          // this.dayModel = dateTime.toISOString().split("T")[0];
          this.detailApiData.overallMetricsList =
            this.detailApiData.overallMetricsList.map((item) => {
              // todo 绿灯有效利用率如果为负值 设置为 ‘--’
              if (item.metricCode === "7") {
                if (item.metricValue < 0) {
                  item.metricValue = "";
                  item.metricUnit = "--";
                }
              }
              return item;
            });
          this.tbodyData = this.detailApiData.overallMetricsList.map((item) => {
            return {
              name: item.metricName,
              key: item.metricCode,
            };
          });

          this.tbodyData.push({ name: "流量(pcu/5min)", key: "flow" });
          this.getCrossInfo();
          this.detailLineShow = true;
        }
      });
    },
    getCrossInfo() {
      var params = {
        crossId: this.activeObj.crossId,
      };
      let api = api_getCrossData_opt;
      // if (cur_system === "singalControl") {
      //   api = api_getCrossData;
      // } else if (cur_system === "singalOptimizat") {
      //   api = api_getCrossData_opt;
      // }
      api(params).then((res) => {
        if (!res || !res.data) {
          return;
        }
        this.crossDetailData = res.data.content.dirList;
        this.tableTabActive = this.crossDetailData.map(() => 1);
        this.crossDetailData.forEach((item, index) => {
          this.getTableData(item, item.dir, "turn");
        });
      });
    },
    getTableData(item, dir, type) {
      let api = null;
      if (type === "turn") {
        api = metricsTurn;
      } else if (type === "lane") {
        api = metricsLane;
      }
      console.log("api hourMinute", this.timeModel);
      api({
        crossId: this.activeObj.crossId,
        day: this.dayModel,
        dir: dir,
        hourMinute: this.timeModel,
        status: this.type,
      }).then((res) => {
        if (res && res.data) {
          let turnList = [];
          let laneList = [];
          if (type === "turn") {
            turnList = res.data.content.turnList.map((item) => {
              return { name: this.turnObj[item.turn], ...item };
            });
            this.$set(item, "headData", turnList);
          } else if (type === "lane") {
            laneList = res.data.content.laneList.map((item) => {
              return { name: item.sort, ...item };
            });
            this.$set(item, "headData", laneList);
          }
          if ((turnList && turnList.length) || (laneList && laneList.length)) {
            this.$set(
              item,
              "tbodyData",
              this.tbodyData.filter((item) => item.name !== "负载均衡度")
            );
          } else {
            this.$set(item, "tbodyData", []);
          }
        }
      });
      // if (index === 0) {
      //   this.$set(item, "headData", [
      //     { dirName: "左转", index1: 200, index2: 30, index3: 50 },
      //     { dirName: "直行", index1: 201, index2: 30, index3: 50 },
      //     { dirName: "右转", index1: 202, index2: 30, index3: 50 },
      //   ]);
      //   this.$set(item, "tbodyData", [
      //     { name: "流量(pcu/5min)", key: "index1" },
      //     { name: "平均速度(km/h)", key: "index2" },
      //     { name: "平均拖延(s)", key: "index3" },
      //     { name: "排队长度(m)", key: "index4" },
      //     { name: "溢流率(%)", key: "index5" },
      //   ]);
      // }
    },
    timeSelected(time) {
      this.timeModel = time;
      //切换表格
      this.tableTabActive = this.crossDetailData.map(() => 1);
      this.crossDetailData.forEach((item, index) => {
        this.getTableData(item, item.dir, "turn");
      });
    },
    tableTabClick(val, index, item) {
      this.tableTabActive[index] = val;
      this.$set(this.tableTabActive, index, val);
      //请求item.tbodyData
      this.getTableData(item, item.dir, val === 1 ? "turn" : "lane");
    },
    initBottomData() {
      // console.log(this.treeModel);
    },
    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;
    },
    getOption() {
      scopeTree({
        crossId: this.activeObj.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.initBottomData();
        }
      });
    },
    tableSelectChange(val) {
      this.tableSelect = val;
      //不刷新
      this.bottomChartRefresh = !this.bottomChartRefresh;
    },
    timeChange() {},
    strategyChange() {},
    indexChange() {
      this.bottomChartRefresh = !this.bottomChartRefresh;
    },
  },
};
</script>

<style lang="less" scoped>
.scene-detail {
  height: 100%;
  width: 100%;
  z-index: 999;
  color: white;
  position: absolute;
  right: 0;
  top: 0;
  background-color: #0f2645;
  .time-line {
    margin-top: 10px;
    height: 20px;
    z-index: 999;
    span {
      position: absolute;
      top: -50%;
      left: 50%;
      transform: translateX(-50%);
    }
  }
  .head-title {
    display: flex;
    align-items: center;
    height: 43px;
    padding: 0 20px;
    justify-content: space-between;
    background: linear-gradient(59deg, #0e8ded 0%, #044d85 100%);
    border-image: linear-gradient(
        140deg,
        rgba(64, 191, 255, 1),
        rgba(166, 221, 255, 1),
        rgba(0, 157, 255, 1),
        rgba(0, 146, 237, 1)
      )
      1 1;
    color: white;
    width: 100%;
    .el-icon-close {
      font-size: 20px;
      cursor: pointer;
    }
    .el-icon-close:hover {
      color: rgba(255, 255, 255, 0.7);
    }
    .title {
      font-size: 20px;
      font-weight: bold;
    }
  }
  .select-box {
    margin-left: 0;
    padding-left: 0;
    justify-content: left;
  }
  .right-content {
    position: relative;
    height: 100%;
    .crossContent {
      margin: 0 auto;
      width: 400px;
      height: calc(100% - 30px);
      background: transparent !important;
      /deep/.type-box {
        display: none;
      }
    }
    .cross-detail-box {
      position: absolute;
      z-index: 999;
      width: 100%;
      height: calc(100% - 30px);
      .cross-detail {
        width: 228px;
        height: 48%;
        overflow: auto;
        // width: 128px;
        position: absolute;
        border-radius: 4px;
        border: 1px solid rgba(31, 147, 255, 0.16);
        background: #0c3257;
        table {
          width: 100%;
          height: calc(100% - 25px);
          border-collapse: separate;
          border-spacing: 5px;
          tr {
            text-align: center;
            th,
            td {
              text-align: center;
              min-width: 30px;
              // padding-left: 10px;
              font-size: 12px;
              //color: black;
            }
            th:nth-child(1) {
              width: 110px;
            }
          }
        }
        &:nth-child(1) {
          top: 0;
          right: 0;
        }
        &:nth-child(2) {
          bottom: 0;
          right: 0;
        }
        &:nth-child(3) {
          bottom: 0;
          left: 0;
        }
        &:nth-child(4) {
          left: 0;
          top: 0;
        }

        .title {
          display: flex;
          background: rgba(46, 119, 255, 0.1);
          font-size: 14px;
          text-align: center;
          height: 24px;
          //color: #333;

          .title-item {
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50%;
            background: #114e89;
            &.active {
              background: #1f93ff;
              font-weight: bold;
            }
          }
        }
      }
    }
  }

  .scene-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: calc(100% - 43px - 300px);
    padding: 20px;

    .left-box {
      height: 100%;
      width: 373px;
      margin-right: 10px;
      .kip-bg {
        height: 72px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: linear-gradient(180deg, #0e8ded 0%, #044d85 100%);
        .name {
          margin-bottom: 5px;
          font-weight: bold;
          font-size: 20px;
          color: white;
        }
        .date {
          font-size: 14px;
          color: rgba(255, 255, 255, 0.7);
        }
      }
      .kip-detail {
        height: calc(100% - 72px);
        overflow: auto;
        padding: 10px;
        background-color: #0d2d51;

        .kip-detail-item {
          height: 36px;
          width: 100%;
          display: flex;
          align-items: center;
          .item-name {
            width: 50%;
            color: rgba(255, 255, 255, 0.7);
            text-align: right;
          }
          .item-value {
            width: 50%;
            color: white;
          }
        }
        .kip-detail-item:nth-child(odd) {
          background-color: #0c375d;
        }
        //margin: 30px 0 10px 30px;
        .select-box,
        p,
        li {
          //margin-top: 30px;
        }
        label {
          font-size: 16px;
          color: white;
        }
        ul {
          display: flex;
          flex-wrap: wrap;
          height: 100%;
          margin-bottom: 0;
          li {
            width: 50%;
            display: flex;

            align-items: center;
            justify-content: center;
            label {
              margin-bottom: 0;
            }
          }
        }
      }
    }
    .right-box {
      flex: 1;
      max-width: calc(100% - 373px);
      height: 100%;
      .number-data {
        font-size: 16px;
        color: white;
        margin-top: 18px;
        .circle-icon {
          display: inline-block;
          width: 0.22824rem;
          height: 0.22824rem;
          line-height: 0.22824rem;
          text-align: center;
          border-radius: 50%;
          background: #45a0f5;
          color: #fff;
          font-size: 0.1245rem;
          font-style: normal;
        }
      }
    }
  }
  .content-bottom {
    height: 300px;
    padding: 0 20px 20px 20px;
  }
}
</style>
