<!-- 手控 -->
<template lang="html">
    <div class="crossControl">
      <div class="warp">
        <div style="display:flex;flex-flow: column;">
          <div class="crossControl_content">
  <!--          <div-->
  <!--            style="text-align: center;font-size: 16px;margin-bottom: 10px;"-->
  <!--          >-->
  <!--            {{ crossControlData.crossName }}-->
  <!--          </div>-->
            <div>
              <!-- 相位配时 -->
              <phaseTime
                ref="phaseTime"
                class="crossCont_item"
                :crossData="crossControlData"
                @setCrossrunMode="setCrossrunMode"
              ></phaseTime>
            </div>
          </div>
          <!-- 手动控制 -->
          <!-- <manualControl
            ref="manualControl"
            :crossData="crossControlData"
          ></manualControl> -->
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { mapMutations } from "vuex";
  export default {
    components: {
      phaseTime: (resolve) => require(["./phaseTime"], resolve), // 相位配时,
      // manualControl: (resolve) => require(["./manualControl"], resolve), // 手动控制,
    },
    props: {
      crossControlList: {
        type: Array,
        default() {
          return [];
        },
      },
      crossControlData: {
        type: Object,
        default() {
          return {
            crossName: "相城大道与青龙港路交叉口",
            // crossId: "14Q1409IRF0",
            crossId: "14Q0P09IP90",
          };
        },
      },
    },
    data() {
      return {
        controlActive: null,
        controlType: "",
        activeCrossId: "",
        activeCrossName: "",
        checkCrossMaps: {}, //正在控制的路口
      };
    },
    mounted() {
      this.changeCross(this.crossControlData);
    },
    methods: {
      ...mapMutations("crossControl", ["setCrossControlShow"]),
      changeCross(item) {
        this.activeCrossId = item.crossName || item.nodeName;
        this.activeCrossName = item.crossName || item.nodeName;
      },
      /**@argument
       * ws
       * @param {String} runMode 当前控制状态
       */
      setCrossrunMode(runMode, item) {
        // this.$refs.manualControl.setControlType(runMode);
        // var name = this.DCNY.planRealType[runMode];
        // this.checkCrossMaps[item.crossId] = name;
      },
    },
  };
  </script>
  
  <style lang="less">
  .control-btn-box {
    margin: 10px 30px;
    display: flex;
    justify-content: space-around;
    .control-btn {
      padding: 5px 8px;
      // color: #999;
      cursor: pointer;
      border: 1px solid #ddd;
    }
  }
  .crossControl {
    width: 100%;
    position: relative;
    overflow: hidden;
    z-index: 300;
    background-size: 10.0583rem 6.4109rem;
    background-position: center;
  }
  
  .crossControl .warp {
    .cross_title {
      height: 46px;
      line-height: 46px;
      background: #2c2c2c;
      color: #fff;
      padding-left: 20px;
      font-size: 20px;
      font-weight: bold;
    }
  }
  
  .crossControl_content {
    //margin: 10px 10px 0 10px;
    color: white;
    //width: 320px;
    background: transparent;
    //padding-top: 0.1326rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.25);
  }
  
  .crossControl_content_warp {
    height: 4.8rem;
    overflow: hidden;
  }
  
  .crossControl_content .crossCont_item {
    background: transparent;
    display: inline-block;
    width: 100%;
    margin-right: 0;
    position: relative;
    padding: 0px 0.19rem;
    overflow: hidden;
  }
  
  .crossControl_content .crossCont_item:nth-child(3n) {
    margin-right: 0;
  }
  
  .crossControl_content .crossCont_item .isNull {
    position: absolute;
    color: #383838;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 0.3458rem;
  }
  
  .crossControl_content .crossCont_item .crossCont_item_warp {
    position: relative;
    width: 100%;
    height: 100%;
  }
  </style>
  