<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="24">
          <a-form-item
            label="订单金额"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 21 }"
          >
            <span>{{costInfo.totalAmount}} 元
              <span class="spanCss">
                = 起步费用：{{costInfo.startupCost}} 元 + 时长费用：{{costInfo.durationCost}} 元
                + 调度费：{{costInfo.dispatchFee}} 元
              </span>
            </span>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-item
            label="调度费用"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 21 }"
          >
            <span>{{costInfo.dispatchFee}} 元
              <span class="spanCss">
                = 运营区外调度费用：{{costInfo.dispatchFeeOutOperateArea}} 元 + 禁停区调度费：{{costInfo.dispatchFeeBanArea}} 元
                + 停车区外调度费：{{costInfo.parkingAreaOutDispatchFee}} 元 + 头盔管理费：{{costInfo.helmetManagementFee}} 元
                + 不规范停车费：{{costInfo.improperParkFee}} 元
              </span>
            </span>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-item
            label="实付金额"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 21 }"
          >
            <span>{{costInfo.actualAmount}} 元
              <span class="spanCss">
                = 订单金额：{{costInfo.totalAmount}} 元 - 优惠金额：{{costInfo.discountAmount}} 元
                - 优惠券抵扣金额：{{costInfo.couponAmount}} 元 - 骑行卡抵扣金额：{{costInfo.cyclingCardAmount}} 元
              </span>
            </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.payMethod}}</span>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
            label="用户"
            :label-col="{ span: 6 }"
            :wrapper-col="{ span: 21 }"
          >
            <span>{{costInfo.phoneAndUser}}</span>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-item
            label="申请退款原因"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 21 }"
          >
            <span>{{costInfo.applyReason}}</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: 21 }"
          >
            <span>{{costInfo.applyRefundAmount}} 元 </span>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
          <a-form-item
            label="操作"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 21 }"
            name="operate"
            required
            :rules="[{ required: true, message: '请选择审核结果' }]"
          >
            <a-radio-group
              v-model:value="form.operate"
              name="radioGroup"
              @change="changeProcessState"
            >
              <a-radio value="3">驳回</a-radio>
              <a-radio value="1">通过审核</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row v-if="form.operate == '3'">
        <a-col :span="24">
          <a-form-item
            label="驳回原因"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 12 }"
            name="reason"
          >
            <a-input
              v-model:value="form.reason"
              placeholder="请输入驳回原因"
            />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row v-if="form.operate == '1'">
        <a-col :xs="24">
          <a-form-item
            label="退款方式"
            :label-col="{ span: 3 }"
            :wrapper-col="{ span: 12 }"
            name="method"
          >
            <a-select
              v-model:value="form.method"
              placeholder="请选择退款方式"
            >
              <a-select-option value="0">原路返回</a-select-option>
              <a-select-option value="1">余额</a-select-option>
              <a-select-option value="2">线下退款</a-select-option>
            </a-select>
          </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: "",
  operate: "3",
  reason: "",
  method: ""
});
const spinning = ref(false);
const tipContent = ref("加载中...");
const costInfo = ref({
  totalAmount: 0,
  startupCost: 0,
  durationCost: 0,
  dispatchFee: 0,
  dispatchFeeOutOperateArea: 0,
  dispatchFeeBanArea: 0,
  parkingAreaOutDispatchFee: 0,
  helmetManagementFee: 0,
  improperParkFee: 0,
  actualAmount: 0,
  discountAmount: 0,
  couponAmount: 0,
  cyclingCardAmount: 0,
  payMethod: "",
  applyReason: "",
  applyRefundAmount: 0,
  phoneAndUser: ""
})
const form = ref(formData());

const openForm = (params = {}) => {
  if (params['refundId']) {
    form.value.refundId = params['refundId']
    callPayment("/wxPayment/refundOrderDetail/" + params['refundId'], {}, "get").then(res => {
      if (res.code == 200) {
        costInfo.value = res.data
        costInfo.value.phoneAndUser = res.data['phone'] + (res.data['user'] ? "(" + res.data['user'] + ")" : "");
      } else {
        message.error(res.message)
      }
    })
  }
};

const changeProcessState = (e) => {
  const value = e.target.value;
  if (value == '3') {
    form.value.refundMethod = ""
  } else if (value == '1') {
    form.value.processResult = ""
  }
}

const formSave = (callBack) => {
  spinning.value = true;
  tipContent.value = "审核提交中..."
  formRef.value.validate().then((res) => {
    const data = _.cloneDeep(form.value);
    callPayment("/wxPayment/reviewRefund", 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>
