<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { FEEDBACK_STATUS_DICT_CODE } from '@/constants/dict';
import { fetchUpdateFeedbackStatus } from '@/service/api';
import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
import DictSelect from '@/components/custom/dict-select.vue';

defineOptions({ name: 'FeedbackStatusDialog' });

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

interface Props {
  id?: string | null;
  currentStatus?: number | null;
}
const props = defineProps<Props>();

const emit = defineEmits<{
  submitted: [];
}>();

const submitting = ref(false);
const status = ref<string | number | null>(null);

const confirmDisabled = computed(() => status.value === null || status.value === undefined || status.value === '');

async function handleConfirm() {
  if (!props.id || confirmDisabled.value) {
    return;
  }
  submitting.value = true;
  // status 是字典编码（非 ID），DictSelect 选中为字符串，转 Integer 提交
  const { error } = await fetchUpdateFeedbackStatus(props.id, Number(status.value));
  submitting.value = false;

  if (error) {
    return;
  }

  window.$message?.success('状态已更新');
  visible.value = false;
  emit('submitted');
}

watch(visible, value => {
  if (value) {
    // 字典选项 value 为字符串，回显需转字符串才能与下拉项严格匹配（否则显示原始数字）
    const current = props.currentStatus;
    status.value = current === null || current === undefined ? null : String(current);
  }
});
</script>

<template>
  <BusinessFormDialog
    v-model="visible"
    title="修改处理状态"
    preset="sm"
    :confirm-loading="submitting"
    :confirm-disabled="confirmDisabled"
    @confirm="handleConfirm"
  >
    <ElForm label-position="top">
      <ElFormItem label="处理状态">
        <DictSelect
          v-model="status"
          :dict-code="FEEDBACK_STATUS_DICT_CODE"
          :clearable="false"
          placeholder="请选择处理状态"
        />
      </ElFormItem>
    </ElForm>
  </BusinessFormDialog>
</template>
