<template>
  <div class="floor-container">
    <div class="png">
      <div
        class="f1"
        v-show="imgShow"
      >
        <div>
          <img
            src="../../assets/images/flooraction/one.png"
            alt=""
          />
        </div>
        <div>
          <img
            :class="{ 'is-lucency': stateStatus }"
            src="../../assets/images/flooraction/F1.png"
            alt=""
          />
        </div>
      </div>

      <div
        class="b2"
        v-show="!imgShow"
      >
        <div>
          <img
            src="../../assets/images/flooraction/undergroundtwo.png"
            alt=""
          />
        </div>
        <div>
          <img
            v-show="shebeifang"
            class="dashangye"
            src="../../assets/images/flooraction/dashangye.png"
            alt=""
          />
          <img
            v-show="shebeifang"
            class="caoshi"
            src="../../assets/images/flooraction/caoshi.png"
            alt=""
          />
          <img
            v-show="shebeifang"
            class="caoshishenghuo"
            src="../../assets/images/flooraction/caoshishenghuo.png"
            alt=""
          />
          <img
            v-show="shebeifang"
            class="xiaofang"
            src="../../assets/images/flooraction/xiaofang.png"
            alt=""
          />
          <img
            v-show="shebeifang"
            class="dashangyeshuiben"
            src="../../assets/images/flooraction/dashangyeshuiben.png"
            alt=""
          />
          <div
            class="tongdao"
            v-show="tongdao"
          >
            <div>
              <img
                src="../../assets/images/flooraction/tongdao.png"
                alt=""
              />
              X2
            </div>
            <div>
              <img
                src="../../assets/images/flooraction/tongdao.png"
                alt=""
              />
              X2
            </div>
            <div>
              <img
                src="../../assets/images/flooraction/tongdao.png"
                alt=""
              />
              X2
            </div>
            <div>
              <img
                src="../../assets/images/flooraction/tongdao.png"
                alt=""
              />
              X2
            </div>
            <div>
              <img
                src="../../assets/images/flooraction/tongdao.png"
                alt=""
              />
              X2
            </div>
            <div>
              <img
                src="../../assets/images/flooraction/tongdao.png"
                alt=""
              />
              X2
            </div>
            <div>
              <img
                src="../../assets/images/flooraction/tongdao.png"
                alt=""
              />
              X2
            </div>
            <div>
              <img
                src="../../assets/images/flooraction/tongdao.png"
                alt=""
              />
              X2
            </div>
            <div>
              <img
                src="../../assets/images/flooraction/tongdao.png"
                alt=""
              />
              X2
            </div>
          </div>
          <div
            class="futi"
            v-show="futi"
          >
            <div style="cursor: pointer; z-index: 9998;">
              <img
                src="../../assets/images/flooraction/zidongfuti.webp"
                alt=""
              />
              X2
            </div>
            <!-- @click="$emit('update:shebeisheshiShow', true)" -->
            <div style="cursor: pointer; z-index: 9998;">
              <img
                src="../../assets/images/flooraction/zidongfuti.webp"
                alt=""
              />
              X2
            </div>
          </div>
          <div
            class="huoti"
            v-show="huoti"
          >
            <div style="cursor: pointer; z-index: 9998;">
              <img
                src="../../assets/images/flooraction/zidongfutiescalator2.webp"
                alt=""
              />
              X2
            </div>
            <div style="cursor: pointer; z-index: 9998;">
              <img
                src="../../assets/images/flooraction/zidongfutiescalator2.webp"
                alt=""
              />
              X2
            </div>
            <div style="cursor: pointer; z-index: 9998;">
              <img
                src="../../assets/images/flooraction/zidongfutiescalator2.webp"
                alt=""
              />
              X2
            </div>
            <div style="cursor: pointer; z-index: 9998;">
              <img
                src="../../assets/images/flooraction/zidongfutiescalator2.webp"
                alt=""
              />
              X2
            </div>
            <div style="cursor: pointer; z-index: 9998;">
              <img
                src="../../assets/images/flooraction/zidongfutiescalator2.webp"
                alt=""
              />
              X2
            </div>
          </div>
          <div
            class="weishengjian"
            v-show="weishengjian"
          >
            <div>
              <img
                src="../../assets/images/flooraction/weishengjian.png"
                alt=""
              />
              X2
            </div>
          </div>
          <div
            class="keti"
            v-show="keti"
          >
            <div style="cursor: pointer; z-index: 9998;">
              <img
                src="../../assets/images/flooraction/diandongfuti.webp"
                alt=""
              />
              X2
            </div>
            <div style="cursor: pointer; z-index: 9998;">
              <img
                src="../../assets/images/flooraction/diandongfuti.webp"
                alt=""
              />
              X2
            </div>
          </div>
          <img
            :class="{ 'is-lucency': stateStatus }"
            src="../../assets/images/flooraction/B2.png"
            alt=""
          />
        </div>
        <div
          class="hover-img"
          @click="handleGoRoute"
        >
          <img
            src="../../assets/images/flooraction/hover.png"
            alt=""
          />
        </div>
      </div>
    </div>

    <div class="select">
      <selector-model
        ref="child"
        @childDataArrEvent="childDataArrEvent"
        :imgShow.sync="imgShow"
        :stateStatus.sync="stateStatus"
      ></selector-model>
    </div>
    <Modal
      :obj="obj"
      :routerName="routerName"
      @handlerouterName="handlerouterName"
    />
    <div
      class="mask"
      v-show="obj.show"
    ></div>
  </div>
</template>

<script>
import selectorModel from "./selector.vue";
import Modal from "../Device/Modal";
export default {
  props: ["routerName"],
  data() {
    return {
      imgShow: false,
      stateStatus: false,
      childDataArr: [],
      shebeifang: true,
      tongdao: true,
      weishengjian: true,
      huoti: true,
      keti: true,
      futi: true,
      obj: {
        show: false,
        src: "main-list"
      }
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {
    routerName: {
      immediate: true,
      handler: function(val) {
        if (val == "floor1") {
          this.handleModal();
        } else {
          this.obj = {
            show: false,
            src: "room-layout",
            istab: true
          };
        }
      }
    }
  },
  methods: {
    handleGoRoute() {
      this.$emit("handlerouterName", "floor1");
      this.handleModal();
    },
    childDataArrEvent(arr) {
      this.childDataArr = arr;
      // console.log(this.childDataArr)
      this.shebeifang =
        this.childDataArr.indexOf("主要设备房") == -1 ? false : true;
      this.tongdao = this.childDataArr.indexOf("疏散通道") == -1 ? false : true;
      this.weishengjian =
        this.childDataArr.indexOf("卫生间") == -1 ? false : true;
      this.futi = this.childDataArr.indexOf("扶梯/坡梯") == -1 ? false : true;
      this.keti = this.childDataArr.indexOf("客梯") == -1 ? false : true;
      this.huoti = this.childDataArr.indexOf("货梯") == -1 ? false : true;

      if (this.childDataArr.length == 0) {
        this.shebeifang = true;
        this.tongdao = true;
        this.weishengjian = true;
        this.futi = true;
        this.keti = true;
        this.huoti = true;
      }
    },
    handleModal() {
      this.obj = {
        show: true,
        src: "room-layout",
        istab: true
      };
    },
    handlerouterName(val) {
      this.$emit("handlerouterName", val);
      // console.log(val);
      // this.$emit("handlerouterName", val);
      // this.$set(this.obj, "show", false);
    }
  },
  components: { selectorModel, Modal }
};
</script>

<style scoped lang="less">
.floor-container {
  position: relative;
  height: 100%;
  color: #fff;

  .png {
    height: 100%;
    .is-lucency {
      opacity: 0.4;
      // position: relative;
      // z-index: 0;
    }
    & > div {
      height: 100%;
      position: relative;
      & > div:nth-child(1) {
        // height: 100%;
        position: absolute;
        left: 59px;
        top: 50px;
      }
      & > div:nth-child(2) {
        height: 100%;
        padding-top: 60px;
        box-sizing: border-box;
        text-align: center;
        position: relative;
        .dashangye {
          z-index: 100;
          position: absolute;
          top: 140px;
          left: 910px;
        }
        .caoshi {
          z-index: 99;
          position: absolute;
          top: 141px;
          left: 707px;
        }
        .caoshishenghuo {
          z-index: 99;
          position: absolute;
          top: 326px;
          left: 1547px;
        }
        .xiaofang {
          z-index: 99;
          position: absolute;
          top: 225px;
          left: 1437px;
        }
        .dashangyeshuiben {
          z-index: 99;
          position: absolute;
          top: 254px;
          left: 1503px;
        }
        .tongdao {
          // z-index: 100;
          width: 100%;
          height: ~"calc(100% - 60px)";
          position: absolute;
          left: 0;
          top: 0;
          & > div {
            position: absolute;
            font-size: 16px;
            z-index: 99;
            img {
              vertical-align: bottom;
            }
          }
          & > div:nth-of-type(1) {
            left: 491px;
            top: 156px;
          }
          & > div:nth-of-type(2) {
            left: 798px;
            top: 142px;
          }
          & > div:nth-of-type(3) {
            left: 1218px;
            top: 169px;
          }
          & > div:nth-of-type(4) {
            left: 595px;
            top: 323px;
          }
          & > div:nth-of-type(5) {
            left: 1006px;
            top: 376px;
          }
          & > div:nth-of-type(6) {
            left: 332px;
            top: 747px;
          }
          & > div:nth-of-type(7) {
            left: 790px;
            top: 730px;
          }
          & > div:nth-of-type(8) {
            left: 1286px;
            top: 667px;
          }
          & > div:nth-of-type(9) {
            left: 1520px;
            top: 467px;
          }
        }
        .futi {
          // z-index: 30;
          width: 100%;
          height: ~"calc(100% - 60px)";
          position: absolute;
          left: 0;
          top: 0;
          & > div {
            z-index: 99;
            position: absolute;
            font-size: 16px;
            img {
              vertical-align: bottom;
              width: 46px;
            }
          }
          & > div:nth-of-type(1) {
            left: 435px;
            top: 258px;
          }
          & > div:nth-of-type(2) {
            left: 1191px;
            top: 601px;
          }
        }
        .huoti {
          // z-index: 30;
          width: 100%;
          height: ~"calc(100% - 60px)";
          position: absolute;
          left: 0;
          top: 0;
          & > div {
            z-index: 99;
            position: absolute;
            font-size: 16px;
            img {
              vertical-align: bottom;
              width: 46px;
            }
          }
          & > div:nth-of-type(1) {
            left: 544px;
            top: 365px;
          }
          & > div:nth-of-type(2) {
            left: 600px;
            top: 350px;
          }
          & > div:nth-of-type(3) {
            left: 951px;
            top: 372px;
          }
          & > div:nth-of-type(4) {
            left: 295px;
            top: 713px;
          }
          & > div:nth-of-type(5) {
            left: 1494px;
            top: 496px;
          }
        }
        .weishengjian {
          // z-index: 30;
          width: 100%;
          height: ~"calc(100% - 60px)";
          position: absolute;
          left: 0;
          top: 0;
          & > div {
            z-index: 99;
            position: absolute;
            font-size: 16px;
            left: 1018px;
            top: 323px;
            img {
              vertical-align: bottom;
            }
          }
        }
        .keti {
          // z-index: 30;
          width: 100%;
          height: ~"calc(100% - 60px)";
          position: absolute;
          left: 0;
          top: 0;
          & > div {
            z-index: 99;
            position: absolute;
            font-size: 16px;
            img {
              vertical-align: bottom;
              width: 46px;
            }
          }
          & > div:nth-of-type(1) {
            top: 725px;
            left: 1046px;
          }
          & > div:nth-of-type(2) {
            top: 315px;
            left: 1335px;
          }
        }
      }
      .hover-img {
        position: absolute;
        top: 140px;
        left: 917px;
        width: 168px;
        height: 105px;
        z-index: 101;
        img {
          cursor: pointer;
          margin-left: -7px;
          display: none;
        }
      }

      .hover-img:hover {
        img {
          display: block;
        }
      }
    }
    .b2 {
      position: relative;
    }
  }
  .select {
    position: absolute;
    right: 20px;
    top: 35%;
    transform: translateY(-50%);
    z-index: 10000;
  }
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    width: 100%;
    height: 100%;
    z-index: 2000;
    opacity: 0.8;
  }
}
</style>
