<!--共通模块 操作弹框组件-->
<template>
  <div @click.stop>
    <el-dropdown placement="bottom-start" class="listdropdown" @command="handleCommand">
      <span @mouseenter="enter" @mouseout="out">
        <img class="cursor" :src="picture">
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item
          v-for="(lab,index) in lable"
          :key="index"
          :command="lab.click"
        >{{ lab.lab }}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
import picture1 from '../../static/images/components/tree/operaction1.png';
import picture2 from '../../static/images/components/tree/operaction2.png';

export default {
  name: 'Operaction',
  props: ['lable'],
  data() {
    return {
      picture: picture1
    };
  },
  methods: {
    /* 弹出框 */
    open2() {
      const ss = this;
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback(action) {
          if (action === 'confirm') {
            ss.$emit('del', 'delate');
          }
        }
      });
    },
    /* 鼠标移入移出效果 */
    enter() {
      this.picture = picture2;
    },
    out() {
      this.picture = picture1;
    },
    /* 下拉点击事件 */
    handleCommand(command) {
      const ss = this;
      if (command !== 'delate') {
        ss.$emit('skip', command);
      } else {
        this.open2();
      }
    }
  }
};
</script>
<style scoped lang="scss">
.img-tip span {
  display: block;
  width: 100%;
  height: 36px;
  line-height: 36px;
  text-align: center;
  cursor: pointer;
}
.img-tip span:hover {
  background-color: #ddeafd;
}
</style>
