<template>
  <span>
    <span v-for="(op, index) in operations" :key="index">
      <span v-if="op.type == 'delete'">
        <el-popconfirm
          :title="deleteTitle ? deleteTitle : '确定删除吗？'"
          @confirm="clickOperation(op)"
        >
          <PermissionButton
            :perms="op.perms"
            type="danger"
            :disabled="op.disabled"
            size="mini"
            slot="reference"
            :icon="icons[op.type]"
            >{{ op.title }}</PermissionButton
          >
        </el-popconfirm>
      </span>
      <PermissionButton
        :perms="op.perms"
        size="mini"
        :icon="icons[op.type]"
        :disabled="op.disabled && op.type != 'view'"
        @click="clickOperation(op)"
        type="primary"
        style="margin-right: 16px"
        v-else
        >{{ op.title }}</PermissionButton
      >
    </span>
  </span>
</template>

<script>
export default {
  name: "TableOperation",
  props: {
    // 操作的按钮配置
    operations: {
      type: Array,
    },
    // 点击的行对应的数据
    rawData: {
      type: Object,
    },
    // 删除时提示的标题
    deleteTitle: {
      type: String,
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    // 是否隐藏
    hidden: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      icons: {
        edit: "el-icon-edit",
        view: "el-icon-view",
        delete: "el-icon-delete",
        download: "el-icon-download",
        dataPermission: "el-icon-key",
        editRole: "el-icon-user",
        editPassword: "el-icon-lock",
        approval: "el-icon-s-check",
        view3D: "three",
        reSubmit: "el-icon-upload2",
      },
    };
  },
  methods: {
    clickOperation(operation) {
      this.$emit("handleOperation", operation, this.rawData);
    },
  },
};
</script>
<style lang="scss" scoped>
.view-3d {
  color: #409eff;
  margin-right: 16px;
}
</style>
