<script setup lang="ts">
import { computed, reactive, watch } from 'vue';
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';

defineOptions({ name: 'ProductDeleteDialog' });

interface Props {
  productId: string;
  productName: string;
}

interface Emits {
  (e: 'submit', payload: Api.Product.DeleteProductParams): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const visible = defineModel<boolean>('visible', {
  default: false
});

const model = reactive({
  confirmName: '',
  reason: ''
});

const confirmDisabled = computed(() => {
  return !model.reason.trim() || model.confirmName.trim() !== props.productName;
});

function handleConfirm() {
  emit('submit', {
    id: props.productId,
    productName: model.confirmName.trim(),
    reason: model.reason.trim()
  });
}

watch(
  () => visible.value,
  value => {
    if (!value) {
      return;
    }

    model.confirmName = '';
    model.reason = '';
  }
);
</script>

<template>
  <BusinessFormDialog
    v-model="visible"
    title="删除产品"
    preset="sm"
    :confirm-disabled="confirmDisabled"
    confirm-text="确认删除"
    @confirm="handleConfirm"
  >
    <ElAlert
      :title="`请输入当前产品名称 ${productName || '--'} 完成二次确认，删除后将退出当前对象上下文。`"
      type="error"
      :closable="false"
      class="mb-16px"
    />
    <ElForm label-position="top">
      <ElFormItem label="删除确认名称">
        <ElInput v-model="model.confirmName" placeholder="请输入当前产品名称" />
      </ElFormItem>
      <ElFormItem label="删除原因">
        <ElInput
          v-model="model.reason"
          type="textarea"
          :rows="4"
          maxlength="500"
          show-word-limit
          placeholder="请输入删除原因"
        />
      </ElFormItem>
    </ElForm>
  </BusinessFormDialog>
</template>
