<template>
  <div class="menu">
    <div
      :class="showmenuSty(item)"
      v-for="(item, index) in menuList"
      :key="index"
      @click="handleChange(item.id)"
      @mouseleave="leave(item.id)"
      @mouseenter="hovers(item.id)"
    >
      <!-- :src="item.src" -->
      <el-tooltip
        class="box-item"
        effect="dark"
        placement="right"
        :content="showTitle(item.id)"
      >
        <img
          :class="item.id !== 8 ? 'muen-icon' : 'muen-lock'"
          :src="showIcon(item)"
          alt=""
        />
      </el-tooltip>

      <div v-if="item.id === 3" class="num">{{ temperatureNum }}</div>
    </div>
    <div
      v-if="display"
      class="menu-group"
      @mouseleave="leave()"
      @mouseenter="hovers(6)"
    >
      <div class="content" @click="handleSearch(6, 'fault')">报警/故障查询</div>
      <div class="content" @click="handleSearch(6, 'warning')">预警查询</div>
      <div class="content" @click="handleSearch(6, 'status')">状态时间查询</div>
      <div class="content" @click="handleSearch(6, 'action')">动作查询</div>
      <div class="content" @click="handleSearch(6, 'record')">推荐记录查询</div>
      <div class="content" @click="handleSearch(6, 'changeState')">
        状态变化查询
      </div>
      <!-- <div class="content-end" @click="handleSearch(6, 'calendar')">检修推荐</div> -->
    </div>
  </div>

  <!-- <el-menu
    default-active="1-4-1"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    :collapse="isCollapse"
  >
    <el-menu-item v-for="(item, index) in menuList" :key="index" :index="item.id">
      <img class="muen-icon" :src="item.src" alt="" />
    </el-menu-item>
  </el-menu> -->
</template>
<script>
import homePage from "../assets/img/menu/homePage.png";
import matrix from "../assets/img/menu/matrix.png";
import booster from "../assets/img/menu/booster.png";
import agc from "../assets/img/menu/agc.png";
import search from "../assets/img/menu/search.png";
import webMisc from "../assets/img/menu/webMisc.png";
import lock from "../assets/img/menu/lock.png";
import unlock from "../assets/img/menu/unlock.png";
import voice from "../assets/img/menu/voice.png";
import unvoice from "../assets/img/menu/unvoice.png";
import screenshot from "../assets/img/menu/screenshot.png";
import set from "../assets/img/menu/set.png";

export default {
  props: {
    temperatureNum: {
      type: Number,
      default: 0,
    },
    lockMaskDisplay: {
      type: Boolean,
      default: false,
    },
    voiceCV: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    // AGCDetails,
    // SYZDetails,
    // AllMatrices,
  },
  data() {
    return {
      display: false,
      current: 1,
      menuList: [
        {
          id: 1,
          src: homePage,
        },
        {
          id: 2,
          src: matrix,
        },
        {
          id: 3,
          src: matrix,
        },
        {
          id: 4,
          src: booster,
        },
        {
          id: 5,
          src: agc,
        },
        {
          id: 6,
          src: search,
        },
        {
          id: 7,
          src: webMisc,
        },
        {
          id: 8,
          src: lock,
          src1: unlock,
        },
        {
          id: 9,
          src: voice,
          src1: unvoice,
        },
        {
          id: 10,
          src: screenshot,
        },
        {
          id: 11,
          src: set,
        },
      ],
    };
  },
  methods: {
    showTitle(id) {
      let str = "";
      if (id === 1) {
        str = "首页";
      } else if (id === 2) {
        str = "矩阵";
      } else if (id === 3) {
        str = "温度矩阵";
      } else if (id === 4) {
        str = "升压站";
      } else if (id === 5) {
        str = "AGC";
      } else if (id === 7) {
        str = "大数据训练样本库";
      } else if (id === 8) {
        str = "锁屏";
      } else if (id === 9) {
        str = "声音";
      } else if (id === 10) {
        str = "截图";
      } else if (id === 11) {
        str = "设置";
      }
      return str;
    },
    showmenuSty(item) {
      let str = "";
      if (item.id === this.current) {
        str = "menu-onItem";
        if (item.id === 8) {
          if (!this.lockMaskDisplay) {
            str = "menu-item";
          } else {
            str = "menu-onItem";
          }
        }
        if (item.id === 9) {
          if (!this.voiceCV) {
            str = "menu-item";
          } else {
            str = "menu-onItem";
          }
        }
      } else {
        str = "menu-item";
      }
      // item.id === 8 ? !lockMaskDisplay?'menu-item' :'menu-onItem': item.id === current?'menu-onItem': 'menu-item'
      return str;
    },
    showIcon(item) {
      let show = null;
      if (item.id === this.current) {
        if (item.id === 8) {
          if (this.lockMaskDisplay) {
            show = item.src;
          } else {
            show = item.src1;
          }
        } else if (item.id === 9) {
          if (this.voiceCV) {
            show = item.src1;
          } else {
            show = item.src;
          }
        } else {
          show = item.src;
        }
      } else {
        if (item.id === 8) {
          show = item.src1;
        } else {
          show = item.src;
        }
      }
      return show;
    },
    handleChange(val) {
      if (!this.lockMaskDisplay || val === 8) {
        if (val === 10) {
          this.$emit("handleChange", val);
        } else if (val !== 6) {
          this.current = val;
          this.$emit("handleChange", val);
        }
      }
    },
    handleSearch(val, msg) {
      this.current = val;
      this.$emit("handleSearch", msg);
    },
    hovers(id) {
      if (!this.lockMaskDisplay || id === 8) {
        if (id === 6) {
          this.display = true;
        } else {
          this.display = false;
        }
      }
    },
    leave() {
      this.display = false;
    },
  },
};
</script>
<style lang="less" scoped>
.menu {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}
.menu-item {
  width: 33px;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
.menu-onItem {
  width: 33px;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000000;
  margin-top: 10px;
}
.muen-icon {
  width: 20px;
  height: 20px;
}
.muen-lock {
  width: 20px;
  height: 20px;
  z-index: 9999;
}
.num {
  background-color: #e4503f;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  color: #ffffff;
  right: 0px;
  margin-top: 17px;
}
.menu-group {
  z-index: 9999;
  width: 170px;
  //   height: 100px;
  background-color: #242424;
  position: absolute;
  top: 240px;
  left: 37px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.content {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #242424;
  color: #ffffff;
  width: 100%;
  height: 30px;
  margin-top: 5px;
}
.content-end {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #242424;
  color: #ffffff;
  width: 100%;
  height: 30px;
  margin-top: 5px;
  margin-bottom: 10px;
}
.content:hover {
  color: #2574db;
}
.content-end:hover {
  color: #2574db;
}
</style>