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

import { Delete, InfoFilled, MessageBox, Operation, Timer } from '@element-plus/icons-vue';
import PermissionButton from '/@/components/PermissionButton/index.vue';
import MainAttr from '/@/views/sku-manage/product-category/component/MainAttr.vue';
import { hasPermission } from '/@/utils/hasPermission';


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

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

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

function handleAttribute() {
  emit('handle-attribute', 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('SkuKindUpdate')">
          <PermissionButton :disabled="row.status == '3'" circle plain type="warning" @click="handleEdit">
            <el-icon>
              <Operation />
            </el-icon>
          </PermissionButton>
        </div>
        <div v-if="hasPermission('SkuKindDelete')">
          <el-popconfirm
              :icon="InfoFilled"
              icon-color="#626AEF"
              title="你确定要删除此项吗?"
              width="220"
              @confirm="onConfirm"
          >
            <template #reference>
              <PermissionButton :disabled="row.status == '3'" 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>
          <el-tooltip :disabled="row.status == '3'" :enterable="false" :show-arrow="false" content="属性管理" hide-after="0"
                      placement="top" popper-class="custom-btn-tooltip-3">
            <PermissionButton :color="'#00A1D6'" :disabled="row.status == '3'" circle plain @click="handleAttribute">
              <el-icon>
                <MessageBox />
              </el-icon>
            </PermissionButton>
          </el-tooltip>
        </div>
      </div>
    </div>
    <div v-else-if="field === 'main'">
      <MainAttr :attrs="row.RelatedAttrs" />
    </div>
    <div v-else-if="field === 'status'">
      <el-tag :type="row.status === 3 ? 'primary' : row.status === 1 ? 'warning' : row.status === 2 ? 'info' : ''">
        {{ row.status === 3 ? '已发布' : row.status === 1 ? '草稿' : row.status === 2 ? '待审批' : row.status }}
      </el-tag>
    </div>
    <div v-else>
      {{ row[field] || '-' }}
    </div>
  </div>
</template>

<style scoped>

</style>

<style lang="scss">
.custom-btn-tooltip-3 {
  background-color: #E6F5FB !important;
  color: #606266 !important;
  border: 1px solid #00A1D6 !important;
  font-size: 14px;
}
</style>
