<!-- 场景评价 -->
<template>
  <div class="sceneOp">
    <template >
      <div class="sceneOp-content" :key="refresh">
        <div class="leftChart" >
<!--          <div class="second-title">-->
<!--            <img src="../../../../assets/images/signal/echarts-title-icon.png"/>-->
<!--            <span class="title-txt">时间分布</span>-->
<!--          </div>-->
          <signalControl
              ref="crossControl"
              @chartClick="toDetail"
              class="signalControl"
              :data="timeDateDistributionList"
          ></signalControl>
        </div>
        <div class="rightHeat" >
<!--          <div class="second-title">-->
<!--            <img alt="" src="../../../../assets/images/signal/echarts-title-icon.png"/>-->
<!--            <span class="title-txt">空间分布</span>-->
<!--          </div>-->
          <crossHintHeat
              isSmall="isSmall"
              class="crossContent"
              ref="crossHint"
              :crossData="cross"
              :dateAll="dateAll"
              type="heat"
              :congestionTimes="kipObj.congestionTimes"
              :spilloverTimes="kipObj.spilloverTimes"
              :unbalanceTimes="kipObj.unbalanceTimes"
          ></crossHintHeat>
        </div>
      </div>
    </template>
    <sceneDetail
        :dateAll="dateAll"
        :activeObj="cross"
        :type="type"
        :detailShow.sync="detailShow"
        :detailData="detailData"
        v-if="detailShow"
    ></sceneDetail>
  </div>
</template>

<script>
import {abnormalDistribute} from "@/common/api/signalEvaluation.js";
import crossHintHeat from "./sceComponents/crossHintHeat.vue";
import {formatDate} from "@/common/js/utils.js";

export default {
  name: 'scenarioEvaluation',
  data() {
    return {
      detailData: {},
      detailShow: false,
      kipData: [
        {key: "yongdu", time: "", num: ""},
        {key: "shiheng", time: "", num: ""},
        {key: "yichu", time: "", num: ""},
      ],
      refresh: false,
      kipObj: {},
      dateModel: '',
      dateAll: "",
      timeDateDistributionList: [], type: '',
    };
  },
  watch: {
    cross: {
      handler(val) {
        this.init();
      },
    },
  },
  props: ["cross"],
  components: {
    crossHintHeat,
    sceneDetail: (resolve) => require(["./sceComponents/sceneDetail.vue"], resolve), //异常事件详情
    signalControl: (resolve) => require(["./sceComponents/signalControl.vue"], resolve), // 路口,
  },
  mounted() {
    if (time_config.signalEvaluation_crossSceneTime) {
      this.dateModel = [
        new Date(time_config.signalEvaluation_crossSceneTime[0]),
        new Date(time_config.signalEvaluation_crossSceneTime[1])
      ];
    } else {
      this.dateModel = [
        new Date(
            new Date().setTime(new Date().getTime() - 3600 * 1000 * 24)
        ),
        new Date()
      ];
    }
    this.init();
  },
  methods: {
    init() {
      this.dateAll =
          formatDate(this.dateModel[0]) + "、" + formatDate(this.dateModel[1]);
      abnormalDistribute({
        crossId: this.cross.crossId,
        endDate: this.dateAll.split("、")[1],
        startDate: this.dateAll.split("、")[0],
      }).then((res) => {
        const data = res.data.content;
        this.kipObj = data;
        this.timeDateDistributionList = data.timeDateDistributionList;
        this.kipData = [
          {
            key: "yongdu",
            name: "拥堵",
            num: data.congestionTimes,
            time: data.congestionDuration,
          },
          {
            key: "shiheng",
            name: "失衡",
            num: data.unbalanceTimes,
            time: data.unbalanceDuration,
          },
          {
            key: "yichu",
            name: "溢出",
            num: data.spilloverDuration,
            time: data.spilloverTimes,
          },
        ];
        this.refresh = !this.refresh;
      });
    },
    /**
     * 跳转详情
     */
    toDetail(data) {
      const xName = data.xName;
      const name = data.name;
      this.type =
          name.indexOf("isCongestion") !== -1
              ? 2
              : name.indexOf("isUnbalance") !== -1
                  ? 1
                  : name.indexOf("isSpillover") !== -1
                      ? 3
                      : 0;
      this.detailData = data;
      this.$nextTick(() => {
        this.detailShow = true;
      })

    },
  },
};
</script>

<style scoped lang="less">
::v-deep .crossHintBox{
  background: transparent;
}
.sceneOp {
  margin-top: 10px;
  height: calc(100% - 10px);
  background-color: #061b33;
  .leftChart{
    padding: 0 20px;
    width: 50%;
    margin-right: 20px;
    background-color: #041f3c;
  }

  .rightHeat{
    background-color: #041f3c;
    width: calc(50% - 20px);
    display: flex;
    justify-content: center;
    align-items:center;
  }

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

    img {
      margin-right: 8px;
    }
  }

  .kip-box {
    margin: 30px 0 20px 0;
    display: flex;

    .kip-item {
      margin-left: 100px;
      padding: 0px 20px;
      text-align: center;
      position: relative;
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 220px;
      height: 84px;
      background: #eeeeee;
      border-radius: 3px;

      .icon-tag {
        position: absolute;
        top: -25px;
        left: -30px;
        display: inline-block;
        width: 88px;
        height: 48px;
        font-style: normal;
        text-align: center;
        line-height: 40px;
        color: #fff;
        letter-spacing: 1px;
      }

      .value {
        font-size: 18px;
        color: #333;
        font-weight: bold;
      }

      .line {
        height: 58%;
        border-right: 1px solid #fff;
      }

      p {
        margin-bottom: 6px;
      }

      &:nth-child(1) {
        .icon-tag {
          background: url("../../../../assets/images/icon/yongdu-icon.png") no-repeat;
          background-size: 100% 100%;
        }
      }

      &:nth-child(2) {
        .icon-tag {
          background: url("../../../../assets/images/icon/yichu-icon.png") no-repeat;
          background-size: 100% 100%;
        }
      }

      &:nth-child(3) {
        .icon-tag {
          background: url("../../../../assets/images/icon/shiheng-icon.png") no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }

  .sceneOp-content {
    display: flex;
    height: 100%;
    width: 100%;

    .signalControl {
      width: 100%;
      height: 100%;

      .chart {
        height: 100%;
      }

      //   width: calc(100% - 600px);
    }

    .crossContent {
      height: 100%;
      aspect-ratio: 1;
      width: auto;
      // width: 550px;
      //height: 550px;
    }
  }
}
</style>
