<template>
  <span>
    <span v-for="(op, index) in operations" :key="index">
      <span v-if="op.type == 'delete'">
        <el-popconfirm title="确定删除吗？" @onConfirm="clickOperation(op)">
          <el-button
            type="danger"
            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]"
        @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,
    },
  },
  data() {
    return {
      icons: {
        edit: "el-icon-edit",
        view: "el-icon-view",
        delete: "el-icon-delete",
        download:'el-icon-download'
      },
    };
  },
  methods: {
    clickOperation(operation) {
      this.$emit("handleOperation", operation, this.rawData);
    },
  },
};
</script>
