<template>
  <div
    class="modal"
    v-show="obj.show"
    :class="{'modal1':obj.src=='room-layout'}"
  >

    <img :src="require(`../../assets/images/device/${src}.png`)" />
    <filterModel
      v-if="obj.src=='main-list'"
      @handleModal="handleModal"
      :type="src"
    />
    <div
      class="fileter-modal"
      v-show="isFilterModal"
    >
      <img
        src="../../assets/images/device/device-detail.png"
        alt=""
      >
      <div class="btn">
        <div
          class="close"
          @click="isFilterModal = false"
        ></div>
      </div>
    </div>
    <div class="btn">
      <div
        v-show="obj.src=='room-layout'"
        class="go"
        @click="handleGo"
        @mouseover="mouseover"
        @mouseleave="mouseleave"
      ></div>
      <div
        class="close"
        @click="handleClose"
      ></div>
      <div
        class="msg"
        v-show="(obj.src=='room-layout')&&isHover"
      >{{msg}}</div>
    </div>
    <div
      class="issue"
      :class="{'fire-left':src.includes('fire'),'fire-other':src=='fire-other'}"
      @click="handleIssue"
      v-show="isIssue"
    ></div>
    <div
      class="tabs"
      v-show="obj.istab"
    >
      <div
        class="tab "
        v-for="(item,index) in tabs"
        :key="index"
        :class="{'nav-active':index==isindex}"
        @click="handleTabs(item.name,index)"
      >
        {{item.text}}
      </div>
    </div>

  </div>
</template>
<script>
import filterModel from "../Device/FilterModal";
export default {
  name: "Dnav",
  props: {
    obj: {
      type: Object
    },
    routerName: {
      type: String
    }
  },
  data() {
    return {
      // src: require("../../assets/images/device/bg2.png")
      // src: this.$props.obj.src,
      // src: require("../../../static/device/bg3.png")
      // msg: "跳转到楼层功能查看",
      isFilterModal: false,
      isIssue: false,
      isHover: false,
      src: "",
      isindex: 1,
      tabs: [
        { name: "buesiness", text: "大商业系统原理图" },
        { name: "air-system", text: "超市空调系统原理图" }
        // { name: "maintenance-log", text: "冷热源机房内主要" }
      ]
    };
  },
  created() {
    this.src = this.$props.obj.src;
  },
  computed: {
    msg() {
      let data = "";
      this.routerName.includes("floor")
        ? (data = "跳转到设备功能查看")
        : (data = "跳转到楼层功能查看");
      return data;
    }
  },
  mounted() {},
  methods: {
    handleClose() {
      this.$props.obj.show = false;
    },

    handleTabs(name, index) {
      this.src = name;
      this.isindex = index;
    },
    handleGo() {
      if (this.routerName.includes("floor")) {
        this.$emit("handlerouterName", "device");
      }
      if (this.routerName.includes("device")) {
        this.$emit("handlerouterName", "floor");
      }
    },
    handleIssue() {
      this.src = this.src + "-issue";
      this.isIssue = false;
    },
    mouseover() {
      // console.log(1);
      this.isHover = true;
    },
    mouseleave() {
      // console.log(2);
      this.isHover = false;
    },
    handleModal(val) {
      this.isFilterModal = val;
    }
  },
  watch: {
    obj(val) {
      // console.log(val);
      if (
        val.src.includes("inner") ||
        val.src.includes("outer") ||
        val.src.includes("other")
      ) {
        this.isIssue = true;
      }
      if (val.src == "main-list") {
        this.tabs = [
          { name: "main-list", text: "冷热源机房内主要设备" },
          { name: "floor-main", text: "楼层末端主要设备清单" }
        ];
        this.isindex = 0;
      }
      if (val.src == "air-system") {
        this.tabs = [
          { name: "buesiness", text: "大商业系统原理图" },
          { name: "air-system", text: "超市空调系统原理图" }
        ];
        this.isindex = 1;
      }
      if (val.src == "fire-system") {
        this.tabs = [
          { name: "fire-system", text: "消防电原理示意图" },
          { name: "fire-water", text: "消防喷淋系统示意图" },
          { name: "fire-window", text: "消防窗喷系统示意图" },
          { name: "fire-box", text: "消防栓系统示意图" }
        ];
        this.isindex = 0;
      }
      if (val.src == "room-layout") {
        this.tabs = [
          { name: "room-main", text: "冷热源机房内主要设备清单" },
          { name: "room-layout", text: "冷热源机房内平面布置图" },
          { name: "room-maintain", text: "维修记录" },
          { name: "room-maintenance", text: "维保记录" }
        ];
        this.isindex = 1;
      }
      this.src = val.src;
    }
  },
  components: {
    filterModel
  }
};
</script>
<style lang="less" scoped>
.modal {
  z-index: 2000;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  // border: 1px solid red;

  .btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1200;
    display: flex;

    .close {
      width: 50px;
      height: 50px;
      margin-left: 5px;
      background: url("../../assets/images/close.png");
      cursor: pointer;
      &:hover {
        opacity: 0.7;
      }
    }
    .go {
      width: 50px;
      height: 50px;
      background: url("../../assets/images/device/go.png");
      cursor: pointer;
      &:hover {
        opacity: 0.7;
      }
    }
  }
  .msg {
    position: absolute;
    width: 140px;
    top: -30px;
    font-size: 14px;
    text-align: center;
    background: #000;
    padding: 6px 0;
    opacity: 0.7;
    right: -10px;
    color: #fff;
  }
  .tabs {
    position: absolute;
    display: flex;
    z-index: 1200;
    top: 44px;
    right: 118px;
    border-width: 1px;
    border-color: rgb(22, 73, 206);
    border-style: solid;
    border-radius: 4px;
    background-color: rgba(22, 73, 206, 0.22);
    opacity: 0.702;
    .tab {
      font-size: 18px;
      height: 56px;
      line-height: 56px;
      padding: 0 14px;
      // border: 1px solid red;
      color: #fff;
      cursor: pointer;
    }
  }
}
.modal1 {
  z-index: 11000;
}
.table {
  color: #fff;
}
.nav-active {
  border-width: 1px;
  border-color: rgb(0, 174, 232);
  border-style: solid;
  border-radius: 4px;
  background-color: rgba(0, 174, 232, 0.502);

  // background: url("../../assets/images/device/nav-active.png");
}

.issue {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 38px;
  left: 446px;
  cursor: pointer;
  // background: red;
}
.fire-left {
  left: 600px;
}
.fire-other {
  left: 310px;
}
/deep/ .el-select-dropdown {
  z-index: 10001 !important;
}
.fileter-modal {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  // border: 1px solid red;
  background: #000;
  z-index: 4000;
}
</style>