<template>
  <el-container>
    <el-main>
      <el-form :model="form" label-width="110px" :rules="rules" ref="formRef">
        <el-form-item label="订单ID" prop="id">
          <el-input v-model="form.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="外部订单号" prop="out_order_id">
          <el-input v-model="form.out_order_id" placeholder="请输入外部订单号"></el-input>
        </el-form-item>
        <el-form-item label="外部子订单号" prop="out_order_item_id">
          <el-input v-model="form.out_order_item_id" placeholder="请输入外部子订单号"></el-input>
        </el-form-item>
        <el-form-item label="下单渠道" prop="order_source">
          <el-input v-model="form.order_source" placeholder="请输入下单渠道"></el-input>
        </el-form-item>
      </el-form>
    </el-main>
    <el-footer class="sa-footer--submit">
      <el-button @click="onCancel">取消</el-button>
      <el-button
        v-auth="'shop.admin.order.order.dispatch'"
        type="primary"
        @click="submit"
        :loading="loading"
        >确定</el-button
      >
    </el-footer>
  </el-container>
</template>

<script setup>
  import { reactive, ref, onMounted } from 'vue';
  import { api } from '../order.service';
  import { ElMessage } from 'element-plus';

  const props = defineProps({
    modal: {
      type: Object,
      default: () => {},
    },
  });

  const emit = defineEmits(['modalCallBack']);

  const formRef = ref(null);
  const loading = ref(false);

  const form = reactive({
    id: '',
    out_order_id: '',
    out_order_item_id: '',
    order_source: '',
  });

  const rules = {
    out_order_id: [{ required: true, message: '请输入外部订单号', trigger: 'blur' }],
    out_order_item_id: [{ required: true, message: '请输入外部子订单号', trigger: 'blur' }],
    order_source: [{ required: true, message: '请输入下单渠道', trigger: 'blur' }],
  };

  onMounted(() => {
    console.log(props.modal);
    // 从传入的参数中获取订单ID
    if (props.modal?.params?.id) {
      form.id = props.modal.params.id;
    } else if (props.modal?.data?.id) {
      // 兼容另一种传参方式
      form.id = props.modal.data.id;
    }

    // 如果有旧的表单数据，则回显
    if (props.modal?.data?.out_order_id) {
      form.out_order_id = props.modal.data.out_order_id;
    }

    if (props.modal?.data?.out_order_item_id) {
      form.out_order_item_id = props.modal.data.out_order_item_id;
    }

    if (props.modal?.data?.order_source) {
      form.order_source = props.modal.data.order_source;
    }
  });

  // 取消操作
  function onCancel() {
    emit('modalCallBack', { event: 'close' });
  }

  // 提交表单
  async function submit() {
    if (!formRef.value) return;

    await formRef.value.validate(async (valid) => {
      if (valid) {
        loading.value = true;
        try {
          const { error } = await api.order.manualOrderSubmit(form.id, {
            out_order_id: form.out_order_id,
            out_order_item_id: form.out_order_item_id,
            order_source: form.order_source,
          });

          if (error === 0) {
            ElMessage({
              message: '手动下单成功',
              type: 'success',
            });
            emit('modalCallBack', { event: 'confirm' });
          }
        } finally {
          loading.value = false;
        }
      }
    });
  }

  // 暴露方法给父组件调用
  defineExpose({
    submit,
  });
</script>
