<script lang="ts" setup>
/**
 * @Name: DataTableSlot.vue
 * @Description: 产品属性-单元格插槽
 * @Author: Cheney
 */

import { Delete, InfoFilled, Operation } from '@element-plus/icons-vue';
import PermissionButton from '/@/components/PermissionButton/index.vue';
import { hasPermission } from '/@/utils/hasPermission';


const props = defineProps<{
  row: any,
  field: any
}>();
const { row, field } = props;

const emit = defineEmits([ 'edit-row', 'handle-delete' ]);

function handleEdit() {
  emit('edit-row', row);
}

function onConfirm() {
  emit('handle-delete', row);
}
</script>

<template>
  <div class="font-medium">
    <div v-if="field === 'operate'">
      <div class="flex justify-center gap-2">
        <div v-if="hasPermission('SkuBrandUpdate')">
          <PermissionButton circle plain type="warning" @click="handleEdit">
            <el-icon>
              <Operation />
            </el-icon>
          </PermissionButton>
        </div>
        <div v-if="hasPermission('SkuBrandDelete')">
          <el-popconfirm
              :icon="InfoFilled"
              icon-color="#626AEF"
              title="你确定要删除此项吗?"
              width="220"
              @confirm="onConfirm"
          >
            <template #reference>
              <PermissionButton circle plain type="danger">
                <el-icon>
                  <Delete />
                </el-icon>
              </PermissionButton>
            </template>
            <template #actions="{ confirm, cancel }">
              <el-button size="small" @click="cancel">No!</el-button>
              <el-button
                  size="small"
                  type="danger"
                  @click="confirm"
              >
                Yes?
              </el-button>
            </template>
          </el-popconfirm>
        </div>
        <div v-if="!hasPermission('SkuBrandUpdate') && !hasPermission('SkuBrandDelete')" class="italic">
          <el-tag type="warning">
            暂无权限
          </el-tag>
        </div>
      </div>
    </div>
    <div v-else>
      {{ row[field] || '-' }}
    </div>
  </div>
</template>

<style scoped>

</style>
