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

defineOptions({ name: 'StatusActionDialog' });

interface Props {
  action: Api.Product.ProductLifecycleAction | null;
}

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

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

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

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

const confirmDisabled = computed(() => Boolean(props.action?.needReason && !model.reason.trim()));

function handleConfirm() {
  if (!props.action) {
    return;
  }

  emit('submit', {
    id: '',
    actionCode: props.action.actionCode,
    reason: model.reason.trim() || null
  });
}

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

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

<template>
  <BusinessFormDialog
    v-model="visible"
    :title="action ? `${action.actionName}产品` : '生命周期动作'"
    preset="sm"
    :confirm-disabled="confirmDisabled"
    @confirm="handleConfirm"
  >
    <ElForm label-position="top">
      <ElFormItem :label="action?.needReason ? '动作原因（必填）' : '动作原因（选填）'">
        <ElInput
          v-model="model.reason"
          type="textarea"
          :rows="4"
          maxlength="500"
          show-word-limit
          placeholder="请输入动作原因"
        />
      </ElFormItem>
    </ElForm>
  </BusinessFormDialog>
</template>
