<template>
  <div class="crossDialog">
    <mainCross
      class="mainCross"
      ref="mainCrossRef"
      :propsData="propsData"
      type="crossDialog"
    ></mainCross>
    <!-- <div class="cross-content-box">
      <cross-content
        :crossData="propsData"
        :websocketData="websocketData"
        v-if="crossShow"
        type="lockNone"
      ></cross-content>
    </div> -->
    <div class="cross-index-chart">
      <div
        class="cross-chart-item"
        v-for="item in dirIndexData"
        :key="item.dir"
      >
        <span class="dir-name">{{ item.dirName }}</span>
        <div
          class="cross-chart-item-chunk"
          v-for="(chunk, index) in item.dirData"
          :key="index"
          :style="{ background: colorObj[chunk.status] }"
        >
          <!-- {{ chunk.status }} -->
        </div>
      </div>
    </div>
    <timeline :key="refresh" class="time-line"></timeline>
    <div class="radio-box">
      <p>优化策略：</p>
      <el-radio-group v-model="radio">
        <el-radio :label="1">均衡调控</el-radio>
        <el-radio :label="2">安全保障</el-radio>
        <el-radio :label="3">效果提升</el-radio>
        <el-radio :label="4">优先通行</el-radio>
      </el-radio-group>
    </div>
    <div class="data-push op-push-op">
      <i class="line line-top"></i>
      <p class="push-title">
        优化类型：<span class="value">{{ optTypeName }}</span
        ><el-button class="detail-btn" @click="opDialogClick">详情</el-button>
      </p>
      <i class="line line-bottom"></i>
    </div>
    <div class="data-push">
      <p class="push-title">
        数据推送：<el-button class="detail-btn" @click="dataPushDialogClick"
          >详情</el-button
        >
      </p>
      <p style="margin-top: 15px;">实时数据：{{ realTimeCount }}条</p>
      <p style="margin-top: 15px;">周期数据：{{ cycleCount }}条</p>
    </div>
  </div>
</template>

<script>
import wsMixins from "@/common/mixin/wsMixins.js";
import mainCross from "../../views/diagnosisEvaluate/mainCross.vue";
import {
  api_abnormalCrossDetail,
  countRealTime,
  optType,
} from "@/common/api/homepageSignal";
import { mapMutations } from "vuex";
import crossOpDialog from "../../components/dialog/crossOpDialog.vue";
import crossDataPushDialog from "../../components/dialog/crossDataPushDialog.vue";
export default {
  props: ["propsData"],
  mixins: [wsMixins],
  components: {
    timeline: (resolve) => require(["./timeline.vue"], resolve),
    mainCross,
    crossContent: (resolve) =>
      require(["../../views/homepage/components/crossContent.vue"], resolve),
  },
  data() {
    return {
      cycleCount: 0,
      realTimeCount: 0,
      colorObj: {
        1: "#50D11D", //畅通
        2: "#FFCE2B", //缓行
        3: "#FC2626", //拥堵
        4: "#900021", //严重拥堵
      },
      reminderTimer: null,
      radio: "",
      crossShow: false,
      crossId: "",
      wsType: "SituatiionMonitor",
      refresh: false,
      timeList: [],
      dirIndexData: [],
      countInterval: null,
      optTypeName: "",
      optTypeObj: {
        0: "手动优化",
        1: "自动优化",
        2: "恢复",
        3: "绿波优化",
        4: "区域优化",
        5: "高峰方案下发",
        6: "边缘优化",
      },
    };
  },
  mounted() {
    this.propsData.crossId = this.propsData.id;
    this.crossId = this.propsData.id;
    this.getCrossWs();
    this.crossShow = true;
    this.$nextTick(() => {
      this.$refs.mainCrossRef.init();
    });
    this.setTime();
    this.getData();
    this.getOpType();
    this.getCount();
    this.countInterval = setInterval(() => {
      this.getCount();
    }, 5000);
  },
  beforeDestroy() {
    this.clearCountInterval();
    if (this.reminderTimer) {
      clearTimeout(this.reminderTimer);
    }
  },
  methods: {
    ...mapMutations(["updateDialog"]),
    getOpType() {
      optType({
        crossId: this.propsData.id,
      }).then((res) => {
        if (res && res.data) {
          const optType = res.data.content.optType;
          this.optTypeName = this.optTypeObj[optType];
        }
      });
    },
    getCount() {
      countRealTime({
        crossId: this.propsData.id,
      }).then((res) => {
        if (res && res.data) {
          const data = res.data.content;
          this.cycleCount = data.cycleCount || 0;
          this.realTimeCount = data.realTimeCount || 0;
        }
      });
    },
    clearCountInterval() {
      if (this.countInterval) {
        clearInterval(this.countInterval);
        this.countInterval = null;
      }
    },
    dataPushDialogClick() {
      this.updateDialog({
        show: true,
        top: "20vh",
        title: this.propsData.name,
        props: this.propsData,
        _class: "cross-img-dialog",
        componentName: "crossDataPushDialog",
        bodyComponent: crossDataPushDialog,
        dialogMultiple: true,
      });
    },
    opDialogClick() {
      this.updateDialog({
        show: true,
        top: "20vh",
        title: this.propsData.name,
        props: { optTypeName: this.optTypeName, ...this.propsData },
        _class: "cross-img-dialog cross-img-dialog-op",
        componentName: "crossOpDialog",
        bodyComponent: crossOpDialog,
        dialogMultiple: true,
      });
    },
    getData() {
      api_abnormalCrossDetail({ crossId: this.crossId }).then((res) => {
        if (res && res.data) {
          const data = res.data.content.dirData;
          var result = [];
          var dirMap = {};
          const obj = {
            "1": "北",
            "2": "东北",
            "3": "东",
            "4": "东南",
            "5": "南",
            "6": "西南",
            "7": "西",
            "8": "西北",
          };
          var result = [];

          data.forEach(function(item) {
            var existingItem = result.find(function(obj) {
              return obj.dir === item.dir;
            });

            if (existingItem) {
              existingItem.dirData.push(item);
            } else {
              result.push({
                dir: item.dir,
                dirName: obj[item.dir] + "进口",
                dirData: [item],
              });
            }
          });
          this.dirIndexData = result;
        }
      });
    },
    setTime() {
      const currentTime = new Date();
      const targetTime = new Date(currentTime.getTime() + 1 * 60000);
      const delay = targetTime.getTime() - currentTime.getTime();
      this.reminderTimer = setTimeout(() => {
        this.refresh = !this.refresh;
        this.setTime();
        this.getData();
      }, delay);
    },
  },
};
</script>

<style lang="less">
.cross-img-dialog {
  .el-dialog {
    width: 1191px;
    height: 640px;
    .el-dialog__body {
      padding: 0 !important;
    }
  }
  .crossDialog {
    width: 100%;
    height: 100%;
    background: url("../../assets/images/dialogImg/crossDialog.png") no-repeat;
    background-size: 100% 100%;
    .mainCross {
      height: 350px;
    }
    .cross-index-chart {
      height: 170px;
      margin-left: 20px;
      width: 830px;
      background: #fff;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .cross-chart-item {
        display: flex;
        align-items: center;
        .dir-name {
          width: 70px;
          margin-right: 20px;
          text-align: right;
        }
        .cross-chart-item-chunk {
          width: 12px;
          height: 12px;
        }
      }
    }
    .cross-detail {
      width: 200px;
    }
    .detail-box {
      position: absolute;
      top: 98px;
      right: 25px;
      width: 315px;
      background: rgb(250, 250, 250);
      label {
        margin: 0;
      }
      div {
        min-width: 140px !important;
      }
    }
    .crossLaneWarpNotRoad {
      margin-top: -1px;
    }
    .cross-content-box {
      margin-left: -50px !important;
      margin-top: 10px !important;
    }
    .cross-detail.one {
      left: -220px !important;
      right: auto !important;
      top: 0 !important;
      bottom: auto !important;
    }
    .cross-detail.two {
      left: auto !important;
      right: -220px !important;
      top: 0 !important;
      bottom: auto !important;
    }
    .cross-detail.three {
      left: -220px !important;
      right: auto !important;
      top: auto !important;
      bottom: 0 !important;
    }
    .cross-detail.four {
      right: -220px !important;
      left: auto !important;
      bottom: 0 !important;
      // top: 0 !important;
    }
    .time-line {
      width: 740px;
      position: absolute;
      left: 100px;
      bottom: 10px;
    }
  }
  .cross-content-box {
    position: absolute;
    left: 325px;
    top: 80px;
    width: 305px;
    height: 295px;
  }
  .radio-box {
    font-size: 16px;
    position: absolute;
    right: 0;
    top: 210px;
    .el-radio-group {
      width: 300px;
      .el-radio {
        width: 100px;
        margin-top: 20px;
      }
    }
  }

  .data-push {
    width: 300px;
    position: absolute;
    right: 0;
    top: 440px;

    .push-title {
      font-size: 16px;
      margin-bottom: 5px;
      .value {
        color: #006fd6;
      }
    }
    .detail-btn {
      position: absolute;
      right: 30px;
      top: -8px;
      background: #006fd6 !important;
      height: 0.33199rem;
      line-height: 0.33199rem;
      padding: 0 0 !important;
      color: #fff;
      width: 60px;
    }
  }
  .op-push-op {
    top: 360px;
    .line {
      display: inline-block;
      border-bottom: 1px solid #ccc;
      position: absolute;
      left: -40px;

      width: 315px;
      &.line-bottom {
        bottom: -20px;
      }
      &.line-top {
        top: -30px;
      }
    }
  }
}
</style>
