<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)">
          <el-button type="danger" :disabled="disabled" size="mini" slot="reference" :icon="icons[op.type]" style="margin-right: 4px">
            {{ op.title }}</el-button>
        </el-popconfirm>
      </span>
      <el-button size="mini" :icon="icons[op.type]" :disabled="(disabled &&op.type!='view')" @click="clickOperation(op)" type="primary" style="margin-right: 4px"
        v-else>{{ op.title }}
      </el-button>
    </span>
  </span>
</template>

<script>
export default {
  name: "TableComponent",
  props: {
    operations: {
      type: Array,
    },
    rawData: {
      type: Object,
    },
    deleteTitle: {
      type: String,
    },
    disabled:{
      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',
      },
    };
  },
  methods: {
    clickOperation(operation) {
      this.$emit("handleOperation", operation, this.rawData);
    },
  },
};
</script>
