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

<script>
export default {
  name: "TableOperation",
  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",
        view3D: "three",
      },
    };
  },
  methods: {
    clickOperation(operation) {
      this.$emit("handleOperation", operation, this.rawData);
    },
  },
};
</script>
<style lang="scss" scoped>
.view-3d {
  color: #409eff;
  margin-right: 16px;
}
</style>
