<template>
  <a-spin
    :spinning="spinning"
    :tip="tipContent"
  >
    <a-divider></a-divider>
    <a-form
      label-align="left"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }"
    >
      <a-row>
        <a-col :span="12">
          <a-form-item
            label="订单编号"
            :label-col="{ span: 6 }"
            :wrapper-col="{ span: 21 }"
          >
            <span>{{costInfo.orderNumber}}</span>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="用户手机"
            :label-col="{ span: 6 }"
            :wrapper-col="{ span: 21 }"
          >
            <span>{{costInfo.phone}}</span>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="12">
          <a-form-item
            label="退款金额"
            :label-col="{ span: 6 }"
            :wrapper-col="{ span: 21 }"
          >
            <span>{{costInfo.applyRefundAmount}} 元</span>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="退款方式"
            :label-col="{ span: 6 }"
            :wrapper-col="{ span: 21 }"
          >
            <span>{{costInfo.refundMethod}}</span>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <a-divider></a-divider>
    <a-form
      :model="form"
      ref="formRef"
      label-align="left"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }"
    >
      <a-row>
        <a-col :span="24">
          <a-form-item
            label="退款密码"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 12 }"
            name="password"
            required
            :rules="[{ required: true, message: '请输入退款密码' }]"
          >
            <a-input
              v-model:value="form.password"
              placeholder="请输入退款密码"
              type="password"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-item
            label="退款备注"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 12 }"
            name="remark"
            required
            :rules="[{ required: true, message: '请输入退款备注' }]"
          >
            <a-textarea
              v-model:value="form.remark"
              placeholder="请输入退款备注"
              :rows="4"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-spin>
</template>

<script setup>
import { ref } from 'vue'
import { callPayment } from '@/apis/call.js'
import { message } from 'ant-design-vue'
import _ from 'lodash'

const formRef = ref();
const formData = () => ({
  refundId: "",
  password: "",
  remark: ""
});
const costInfo = ref({
  orderNumber: "",
  phone: "",
  applyRefundAmount: 0,
  refundMethod: ""
})
const form = ref(formData());
const spinning = ref(false);
const tipContent = ref("加载中...");

const openForm = (params = {}) => {
  if (params['refundId']) {
    form.value.refundId = params['refundId']
    costInfo.value = params;
  }
};

const formSave = (callBack) => {
  formRef.value.validate().then((res) => {
    spinning.value = true;
    tipContent.value = "确认退款中..."
    const data = _.cloneDeep(form.value);
    callPayment("/wxPayment/refund", data).then(res => {
      spinning.value = false;
      if (res.code == 200) {
        if (callBack) {
          res.data = data;
          callBack(res);
        }
      } else {
        message.error(res.message)
      }
    })
  });
};

const resetAll = (callBack) => {
  Object.assign(form.value, formData());
  formRef.value.resetFields();
  if (callBack) {
    callBack(true, form.value);
  }
}

defineExpose({ openForm, formSave, resetAll });
</script>

<style scoped>
.spanCss {
  height: 32px;
  margin-left: 8px;
  padding: 0 4px;
  font-size: 12px;
  line-height: 32px;
  background: #f2f6fc;
  border-radius: 4px;
}
</style>
