<template>
  <div>
    <div class="nav">
      <div
        v-for="(item,index) in navList"
        :key="index"
        class="nav-item"
        :class='{"icon-active":active[index]}'
        @click="handleClick(item,index)"
      >
        <img
          class="icon"
          :src="item.src"
        />
        <span class="nav-text">{{item.text}}</span>
        <div
          class="nav-sec"
          v-if="index==2 && isGeneralShow"
        >
          <div
            class="nav-item "
            v-for="(item,i) in generalList"
            :class='{"sec-active":secActive[i]}'
            :key="i"
            @click="handleOpen(item.name)"
            @mouseover="handSecMouseOver(i,2)"
            @mouseleave="handSecMouseLeave"
          >
            <span class="nav-radio"></span>
            <span class="nav-text">{{item.text}}</span>

          </div>

        </div>
        <div
          class="nav-sec"
          v-if="index==3 && isFireShow"
        >
          <div
            class="nav-item "
            v-for="(item,i) in fireList"
            :class='{"sec-active":secActive[i]}'
            :key="i"
            @click="handleOpen(item.name)"
            @mouseover="handSecMouseOver(i,1)"
            @mouseleave="handSecMouseLeave"
          >
            <span class="nav-radio"></span>
            <span class="nav-text">{{item.text}}</span>

          </div>

        </div>
      </div>

    </div>

    <img
      v-show="isFireShow||isGeneralShow"
      src="../../assets/images/device/nav-bg.png"
      alt="nav-bg"
      class="nav-bg"
    >
  </div>

</template>
<script>
export default {
  name: "Dnav",
  props: {
    routerName: {
      type: String
    }
  },
  data() {
    return {
      navList: [
        {
          text: "全部",
          src: require("../../assets/images/device/icon1.png")
        },
        {
          text: "供电系统",
          src: require("../../assets/images/device/icon2.png")
        },
        {
          text: "暖通系统",
          src: require("../../assets/images/device/icon3-active.png")
        },
        {
          text: "消防系统",
          src: require("../../assets/images/device/icon4.png")
        },
        {
          text: "弱电系统",
          src: require("../../assets/images/device/icon5.png")
        },
        {
          text: "给排水",
          src: require("../../assets/images/device/icon6.png")
        },
        {
          text: "电梯系统",
          src: require("../../assets/images/device/icon7.png")
        },
        {
          text: "燃气系统",
          src: require("../../assets/images/device/icon8.png")
        },
        {
          text: "土建系统",
          src: require("../../assets/images/device/icon9.png")
        }
      ],
      fireList: [
        {
          text: "消防系统原理图",
          name: "fire-system"
        },
        {
          text: "主要设备清单",
          name: "fire-mainlist"
        },
        {
          text: "维修维保事项(内)",
          name: "fire-inner"
        },
        {
          text: "维修维保事项(外)",
          name: "fire-outer"
        },
        {
          text: "专项维修及其他事项",
          name: "fire-other"
        }
      ],
      generalList: [
        {
          text: "空调系统原理图",
          name: "air-system"
        },
        {
          text: "分水器支路分布明细",
          name: "water-layout"
        },
        {
          text: "主要设备清单",
          name: "main-list"
        },
        {
          text: "维修维保事项(内)",
          name: "maintain-inner"
        },
        {
          text: "维修维保事项(外)",
          name: "maintain-outer"
        },
        {
          text: "专项维修及其他事项",
          name: "maintain-other"
        }
      ],
      active: [false, false, true, false, false, false, false, false],
      secActive: [],
      isFireShow: false,
      isGeneralShow: true
    };
  },
  mounted() {},
  methods: {
    handleOpen(name) {
      if (
        name == "air-system" ||
        name == "buseiness" ||
        name == "main-list" ||
        name == "buseiness" ||
        name == "fire-system" ||
        name == "buseiness" ||
        name == "buseiness"
      ) {
        this.$emit("handleEmit", { show: true, src: name, istab: true });
      } else {
        this.$emit("handleEmit", { show: true, src: name, istab: false });
      }
    },
    mouseOver(index) {
      this.navList = [
        {
          text: "全部",
          src: require("../../assets/images/device/icon1.png")
        },
        {
          text: "供电系统",
          src: require("../../assets/images/device/icon2.png")
        },
        {
          text: "暖通系统",
          src: require("../../assets/images/device/icon3.png")
        },
        {
          text: "消防系统",
          src: require("../../assets/images/device/icon4.png")
        },
        {
          text: "弱电系统",
          src: require("../../assets/images/device/icon5.png")
        },
        {
          text: "给排水",
          src: require("../../assets/images/device/icon6.png")
        },
        {
          text: "电梯系统",
          src: require("../../assets/images/device/icon7.png")
        },
        {
          text: "燃气系统",
          src: require("../../assets/images/device/icon8.png")
        },
        {
          text: "土建系统",
          src: require("../../assets/images/device/icon9.png")
        }
      ];
      this.isFireShow = false;
      this.isGeneralShow = false;
      this.active = [false, false, false, false, false, false, false, false];
      this.navList = this.navList.map((item, i) => {
        if (i == index) {
          item = {
            text: item.text,
            src: require("../../assets/images/device/icon" +
              (index + 1) +
              "-active.png")
          };
        }
        return item;
      });
      this.$set(this.active, index, true);
      if (index == 2) {
        this.isGeneralShow = true;
      }
      if (index == 3) {
        this.isFireShow = true;
      }
    },

    handSecMouseOver(i, type) {
      if (type == 2) {
        this.secActive = this.generalList.map((item, index) => {
          if (index == i) {
            return true;
          }
          return false;
        });
      }
      this.secActive = this.fireList.map((item, index) => {
        if (index == i) {
          return true;
        }
        return false;
      });
    },
    handSecMouseLeave() {
      this.secActive = [];
    },
    handleNav(index) {
      this.navList = this.navList.map((item, i) => {
        if (i == index) {
          item = {
            text: item.text,
            src: require("../../assets/images/device/icon" +
              (index + 1) +
              "-active.png")
          };
        }
        return item;
      });
      this.$set(this.active, index, true);
    },
    handleClick(item, index) {
      this.navList = [
        {
          text: "全部",
          src: require("../../assets/images/device/icon1.png")
        },
        {
          text: "供电系统",
          src: require("../../assets/images/device/icon2.png")
        },
        {
          text: "暖通系统",
          src: require("../../assets/images/device/icon3.png")
        },
        {
          text: "消防系统",
          src: require("../../assets/images/device/icon4.png")
        },
        {
          text: "弱电系统",
          src: require("../../assets/images/device/icon5.png")
        },
        {
          text: "给排水",
          src: require("../../assets/images/device/icon6.png")
        },
        {
          text: "电梯系统",
          src: require("../../assets/images/device/icon7.png")
        },
        {
          text: "燃气系统",
          src: require("../../assets/images/device/icon8.png")
        },
        {
          text: "土建系统",
          src: require("../../assets/images/device/icon9.png")
        }
      ];
      this.isFireShow = false;
      this.isGeneralShow = false;
      this.active = [false, false, false, false, false, false, false, false];
      this.navList = this.navList.map((item, i) => {
        if (i == index) {
          item = {
            text: item.text,
            src: require("../../assets/images/device/icon" +
              (index + 1) +
              "-active.png")
          };
        }
        return item;
      });
      this.$set(this.active, index, true);
      if (index == 2) {
        this.isGeneralShow = true;
      }
      if (index == 3) {
        this.isFireShow = true;
      }
      if (item.text == "消防系统") {
        this.$emit("handleEmit", { show: true, src: "Fire", istab: true });
      }
      if (item.text == "暖通系统") {
        this.$emit("handleEmit", { show: true, src: "General", istab: true });
      }
    }
  },
  watch: {
    routerName(val) {
      if (val == "device") {
        this.handleClick(
          {
            text: "暖通系统",
            src: require("../../assets/images/device/icon3-active.png")
          },
          2
        );
      }
    }
  }
};
</script>
<style lang="less" scoped>
.nav {
  position: absolute;
  top: 188px;
  left: 0;
  z-index: 1000;
  // border: 1px solid yellow;
  .nav-item {
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 50px;
    padding-right: 40px;
    font-size: 16px;
    color: #fff;

    .nav-text {
      margin-left: 22px;
    }
  }
}
.nav-bg {
  position: absolute;
  top: 62px;
  left: 0;
}
.nav-sec {
  position: absolute;
  width: 244px;
  z-index: 1000;
  // border: 1px solid red;
  top: 0;
  left: 100%;
  // display: none;
  // border: 1px solid blue;
  .nav-radio {
    width: 5px;
    height: 5px;
    background: red;
    border-radius: 50%;
  }
  .nav-item {
    font-size: 14px;
    margin-bottom: 25px;
    padding-right: 0;
    &:nth-child(1) {
      margin-left: 36px;
    }
    &:nth-child(2) {
      margin-left: 54px;
    }
    &:nth-child(3) {
      margin-left: 60px;
    }
    &:nth-child(4) {
      margin-left: 58px;
    }
    &:nth-child(5) {
      margin-left: 48px;
    }
    &:nth-child(6) {
      margin-left: 28px;
    }
    .nav-text {
      margin-left: 12px;
    }
  }
  .sec-active {
    font-size: 16px;
    color: #fff;
    .nav-radio {
      width: 8px;
      height: 8px;
    }
  }
}

.icon {
  width: 18px;
  height: 14px;
  margin-left: 30px;
}
.icon-active {
  background: url("../../assets/images/device/active.png");
}
</style>