<!--共通模块 操作弹框组件-->
<template>
  <div>
    <el-dropdown placement="bottom-start" @command="handleCommand" trigger="click">
      <span class="el-dropdown-link">
        <img class="cursor" src="../../../assets/images/components/tree/operaction1.png" />
      </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>
export default {
  name: 'Operaction',
  props: ['lable'],
  methods: {
    /* 弹出框*/
    popDeleteConfirm() {
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: (action) => {
          if (action === 'confirm') {
            this.$emit('del', 'delete');
          }
        }
      });
    },
    /* 下拉点击事件*/
    handleCommand(command) {
      if (command !== 'delete') {
        this.$emit('skip', command);
      } else {
        this.popDeleteConfirm();
      }
    }
  }
};
</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>
