<template>
  <div class="boxes">
    <div class="map-mask"></div>
    <div class="left_box aside" :class="[{ hide_left: !show }]">
      <trunk-line @showPolygon="showPolygon" @openGreenWaveDialog="openGreenWaveDialog" style="height: 65%"/>
      <Cross @showCrossStatus="showCrossStatus" @openCrossIndexDetail="openCrossIndexDetail" style="height: 35%"/>
    </div>
    <div class="right_box aside" :class="[{ hide_right: !show }]">
      <cross-detail :clickCrossData="clickCrossData" class="full-w-h" :key="detailKey" v-if="isCrossDetail"/>
      <div class="full-w-h" v-else>
        <key-cross style="height: 33%"/>
        <traffic-event-v2 style="height: 33%"/>
        <warning-msg style="height: 33%"/>
      </div>
    </div>
    <div class="button_flow" :class="[{ hide_bottom: !show }]">
      <traffic-flow @showEventPoint="showEventPoint" :crossData="clickCrossData" :key="bottomChartKey"
                    :isCrossDetail="isCrossDetail" style="height: 100%;"/>
    </div>
  </div>
</template>

<script>
import TrafficEvent from "@/views/signal/msgs/right/trafficEvent.vue";
import TrunkLine from "@/views/signal/msgs/left/trunkLine.vue";
import Cross from "@/views/signal/msgs/left/cross.vue";
import WarningMsg from "@/views/signal/msgs/right/warningMsg.vue";
import TrafficFlow from "@/views/signal/msgs/trafficFlow.vue";
import KeyCross from "@/views/signal/msgs/right/keyCross.vue";
import CrossDetail from "@/views/signal/msgs/right/crossDetail.vue";
import TrafficEventV2 from "@/views/signal/msgs/right/trafficEventV2.vue";

export default {
  props: ["show", 'isCrossDetail', 'clickCrossData'],
  components: {
    TrafficEventV2,
    CrossDetail,
    KeyCross,
    TrafficFlow,
    WarningMsg,
    TrunkLine,
    TrafficEvent,
    Cross,
  },
  data() {
    return {};
  },
  computed: {
    bottomChartKey() {
      return `bottomChart${this.isCrossDetail}${this.clickCrossData.id}`
    },
    detailKey() {
      return `detailKey${this.isCrossDetail}${this.clickCrossData.id}`
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    showEventPoint(events) {
      this.$emit('showEventPoint', events)
    },
    showCrossStatus(data) {
      this.$emit('showCrossStatus', data)
    },
    showPolygon(data) {
      this.$emit('showPolygon', data)
    },
    openGreenWaveDialog(data) {
      this.$emit('openGreenWaveDialog', data)
    },
    openCrossIndexDetail(crossData) {
      this.$emit('openCrossIndexDetail', crossData)
    },
    convertDict(code, type) {
      let match = this.$store.state.dicts[type].find((item) => {
        return item.code === code;
      });
      return match?.name || "未定义";
    },
  },
  beforeDestroy() {
  },
};
</script>

<style lang="less" scoped>
.boxes {
  font-size: 12px;

  .aside {
    z-index: 11;
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    width: 480px;
    flex-direction: column;
    justify-content: space-evenly;
    background-color: #030b19;

    .item {
      overflow: hidden;

      .emptyText {
        height: 100%;
        display: flex;
        flex-direction: column;
        font-size: 16px;
        color: rgba(255, 255, 255, 0.7);
        align-items: center;
        justify-content: center;

        img {
          margin-bottom: 10px;
          height: 80px;
        }
      }
    }
  }

  .left_box {
    left: 0;
    padding-left: 15px;
    padding-right: 10px;
    transition: 0.5s all ease;
    /* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
    box-shadow: 30px 0px 30px 0px #030b19;
  }

  .hide_left {
    left: -95%;
    transition: 0.5s all ease;
  }

  .right_box {
    right: 0;
    padding-right: 15px;
    padding-left: 10px;
    transition: 0.5s all ease;
    /* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
    box-shadow: -30px 0px 30px 0px #030b19;
  }

  .hide_right {
    right: -95%;
    transition: 0.5s all ease;
  }
}

.button_flow {
  box-shadow: 0 -30px 30px 0px #030b19;
  z-index: 12;
  position: absolute;
  background-color: #030b19;
  //background: linear-gradient(180deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.8) 100%);
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: calc(100% - 960px - 10px);
  height: 33.3%;
  transition: 0.5s all ease;
}

.hide_bottom {
  bottom: -100%;
  transition: 0.5s all ease;
}


.map-mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  pointer-events: none;
  background-image: linear-gradient(90deg,
  rgba(3, 11, 25, 1) 0%,
  rgba(3, 11, 25, 0.2) 8%,
  rgba(3, 11, 25, 0) 12%,
  rgba(3, 11, 25, 0) 50%,
  rgba(3, 11, 25, 0) 88%,
  rgba(3, 11, 25, 0.2) 92%,
  rgba(3, 11, 25, 1) 100%),
  linear-gradient(0deg,
  rgba(3, 11, 25, 1) 0%,
  rgba(3, 11, 25, 0.2) 8%,
  rgba(3, 11, 25, 0) 12%,
  rgba(3, 11, 25, 0) 80%,
  rgba(3, 11, 25, 0.5) 95%,
  rgba(3, 11, 25, 1) 100%);
}

::v-deep .el-input__inner {
  background-color: transparent;
  border: 1px solid #192C4A;
  font-size: 14px;
}
</style>
