<template>
  <div class="CommandDispatch" :style="{ '--row': row, height: '100%' }">
    <component
      :is="key"
      v-for="(_, key) in gridAreaMap"
      :key="key"
      :ref="key"
      :style="{ gridArea: gridAreaMap[key] }"
      @fullHeight="(opacityKey) => handleFullHeight(key, opacityKey)"
    />
  </div>
</template>

<script>
import request from "@/utils/request";

const files = require.context("./Cards", true, /[^/]+\/index\.vue$/);

const components = files.keys().reduce((components, key) => {
  components[key.match(/[^/]+/g)[1]] = files(key).default;

  return components;
}, {});

const originGridArea = {
  EventInformation: "1 / 1 / span 12 / 1", // 事件信息（左1）
  DispatchLiaison: "13 / 1 / span 8 / 2", // 调度联络（左2）13 / 1 / span 11 / 2
  TrafficControl: "21 / 1 / span 13 / 2", //交通管制（左3）24 / 1 / span 10 / 2
  CrowdnessIndicatorRankings: "1 / 2 / span 12 / 2", //地图 / 拥挤指数排名情况（中1）
  DisposalProcess: "13 / 2 / span 21 / 2", //处置过程（中2）
  RealTimeVideo: "1 / 3 / span 9 / 3", //实时视频（右1）
  ReleaseInformation: "10 / 3 / span 7 / 3", //信息发布（右2）
  DeviceControl: "17 / 3 / span 17 / 3", //设备管控（右3）
  // DisposalPlan: "17 / 1 / span 9 / 2", //处置预案（作废）
};

export default {
  name: "CommandDispatch",
  components: {
    ...components,
  },
  props: {
    detailId: {
      type: [String, Number],
      default: "96b9918efc01488cb22fa1d9d3236dfd",
    },
  },
  provide() {
    return {
      provideData: this.provideData,
    };
  },
  data() {
    return {
      gridAreaMap: {
        ...originGridArea,
      },
      row: 24,
      provideData: {
        detail: null,
      },
    };
  },
  created() {
    this.getDetail();
  },
  methods: {
    getDetail() {
      // 指挥调度 - 只有交通事件没有感知事件，感知事件完成后自动转为交通事件
      request({
        url: `/dc/system/event/${this.detailId}`,
        method: "GET",
      })
        .then((result) => {
          if (result.code != 200) return;
          console.log(result.data);
          this.provideData.detail = result.data;
          if (
            ["设备设施隐患", "非法上路", "施工建设", "服务区异常"].includes(
              result.data.eventName
            )
          ) {
            const gridArea = { ...originGridArea };
            // 第一列变化
            gridArea["DispatchLiaison"] = "10 / 1 / span 20 / 2";
            delete gridArea.TrafficControl;
            if (["设备设施隐患", "非法上路"].includes(result.data.eventName)) {
              // 第三列变化
              gridArea["RealTimeVideo"] = "1 / 3 / span 17 / 3";
              delete gridArea.ReleaseInformation;
            }

            this.gridAreaMap = gridArea;
          }
        })
        .catch((err) => {});
    },
    handleFullHeight(key, opacityKey) {
      if (this.gridAreaMap[key] !== originGridArea[key]) {
        this.gridAreaMap[key] = originGridArea[key];
        if (this.$refs[opacityKey]?.[0]) {
          this.$refs[opacityKey][0].$el.style.opacity = 1;
          this.$refs[opacityKey][0].$el.style.pointerEvents = "auto";
        }
      } else {
        let index = 0;
        if (this.$refs[opacityKey]?.[0]) {
          this.$refs[opacityKey][0].$el.style.opacity = 0;
          this.$refs[opacityKey][0].$el.style.pointerEvents = "none";
        }

        this.gridAreaMap[key] = originGridArea[key].replace(
          /[0-9]+/g,
          (num) => {
            try {
              return { 0: "1", 2: this.row + 1 }[index] || num;
            } catch (error) {
            } finally {
              index++;
            }
          }
        );
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.CommandDispatch {
  padding: 24px 12px 21px 12px;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: repeat(var(--row), 1fr);
  gap: 18px;

  > div {
    transition: all 0.18s linear;
  }

  ::v-deep {
    .title-button {
      border-radius: 65px;
      font-size: 12px;
    }

    .special-button {
      border-radius: 3px !important;
      padding: 3px;
      height: 26px;
    }
  }
}
</style>