<!-- eslint-disable vue/no-dupe-keys -->
<template>
  <div>
    <div class="search-box">
      <div class="search">
        <el-input placeholder="搜索" prefix-icon="el-icon-search" v-model="input2">
        </el-input>
      </div>
    </div>
    <div @contextmenu.prevent="showMenu" class="card-box">
      <el-card class="card" v-for="(item, index) in DataMergin" :key="index">
        <img :src="item.image" class="image" />
        <div class="card-txt">
          <span>{{ item.title }}</span>
          <div class="bottom clearfix">
            <span>更新时间：{{ item.time }}</span>
          </div>
        </div>
      </el-card>
    </div>
    <div class="fixed-box" :style="{ 'left': menuLeft + 'px', 'top': menuTop + 'px' }" ref="fixedBoxRef" @blur="handle"
      v-show="isShowMenu">
      <div :class="index == currentItmeIndex ? 'current-color' : ''" @mouseenter="handleMouseEnter(item, index)"
        class="menu-item" v-for="(item, index) in menusItme">
        <i class="icon-position" :class="index == currentItmeIndex ? 'el-icon-check' : ''"></i>
        {{ item }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      input2: "",
      isShowMenu: false,
      menuLeft: '',
      menuTop: '',
      iconShow: false,
      fixedBoxRef: '',
      menusItme: ['模型详情', '重命名', '分享', '移动到', '更新', '简略图', '模型对比', '删除', '插入', '切换'],
      currentItmeIndex: '',
      DataMergin: [
        {
          title: "Revit",
          image: require("../../assets/DataMerging_img/Revit.png"),
          time: "2021.01.31",
        },
        {
          title: "Navisworks",
          image: require("../../assets/DataMerging_img/Navisworks.png"),
          time: "2021.01.31",
        },
        {
          title: "MicroStation",
          image: require("../../assets/DataMerging_img/MicroStation.png"),
          time: "2021.01.31",
        },
        {
          title: "PDMS",
          image: require("../../assets/DataMerging_img/PDMS.png"),
          time: "2021.01.31",
        },
        {
          title: "Sketchup",
          image: require("../../assets/DataMerging_img/Sketchup.png"),
          time: "2021.01.31",
        },
        {
          title: "Inventor",
          image: require("../../assets/DataMerging_img/Inventor.png"),
          time: "2021.01.31",
        },
        {
          title: "3Ds MAX",
          image: require("../../assets/DataMerging_img/3Ds MAX.png"),
          time: "2021.01.31",
        },
        {
          title: "AUTOCAD",
          image: require("../../assets/DataMerging_img/AUTOCAD.png"),
          time: "2021.01.31",
        },
      ],
    };
  },
  mounted() {
    //失去焦点时关闭右击菜单
    document.addEventListener("click", (e) => {
      if (!this.$refs.fixedBoxRef.contains(e.target)) { this.isShowMenu = false; }
    });
  },

  methods: {
    handleMouseEnter(item, index) {
      // console.log('鼠标移入', item, index);

      this.currentItmeIndex = index;
      if (this.currentItmeIndex === index) {
        // console.log("相同");
        this.iconShow = true
      };
    },
    showMenu(e) {
      // console.log('ssssssssssssssss', e);
      e.preventDefault()
      this.isShowMenu = true
      this.menuLeft = e.pageX
      this.menuTop = e.pageY
    },
    handle() {
      // console.log("失去焦点");
    }


  }
};
</script>
<style lang="scss" scope>
.search-box {
  padding: 15px 55px 50px 0px;
  background-color: #fff;
  box-shadow: 0 3px 10px rgba(202, 196, 196, 0.3);
}

.search {
  width: 15%;
  float: right;
}

.card-box {
  margin: 20px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  color: #c1c1c1;
  font-size: 14px;
}

.image {
  width: 100%;
  height: 250px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.card {
  text-align: center;
  width: 23.5%;
  height: 350px;
  margin: 0.7%;
}

.card-txt {
  padding: 14px;
  text-align: center;
  font-size: 20px;
}

.fixed-box {
  background-color: red;
  // position: absolute;
  position: fixed;
  z-index: 1004;
  background-color: #dadada;
  border-radius: 5px;
  width: 100px;
  padding-bottom: 8px;
  // height: 200px;
}

.menu-item {
  // position: absolute;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  padding-left: 30%;
  cursor: pointer;
  margin-top: 8px;
  position: relative;
}

.current-color {
  background-color: grey;
}


.icon-position {
  position: absolute;
  left: 5px;
  top: 2px
}
</style>