<template>
  <a-form :form="form">
		<a-descriptions bordered size="small" :column="2" class="data_view">
      <a-descriptions-item label="UUID">{{ modalData.uuid }}</a-descriptions-item>
      <a-descriptions-item label="第三方支付ID">{{ modalData.third_party_pay_id }}</a-descriptions-item>
      <a-descriptions-item label="订单号">{{ modalData.order_id }}</a-descriptions-item>
      <a-descriptions-item label="商品名称">{{ modalData.product_content }}</a-descriptions-item>
      <a-descriptions-item label="资产类型">{{ propertyTypeText }}</a-descriptions-item>
      <a-descriptions-item label="用户ID">{{ modalData.login_id }}</a-descriptions-item>
      <a-descriptions-item label="用户名">{{ modalData.real_name }}</a-descriptions-item>
      <a-descriptions-item label="手机号">{{ modalData.phone }}</a-descriptions-item>
      <a-descriptions-item label="邮箱号">{{ modalData.email }}</a-descriptions-item>
      <a-descriptions-item label="收款人">{{ modalData.receiver_payee }}</a-descriptions-item>
      <a-descriptions-item label="开户行">{{ modalData.receiver_open_bank_name }}</a-descriptions-item>
      <a-descriptions-item label="银行编码">{{ modalData.receiver_bank_info_code }}</a-descriptions-item>
      <a-descriptions-item label="收款账号">{{ modalData.receiver_account }}</a-descriptions-item>
      <a-descriptions-item label="创建/更新时间">
				<div class="multi_line">
					<span>{{ modalData.created_date | moment }}</span>
					<span>{{ modalData.updated_date | moment }}</span>
				</div>
			</a-descriptions-item>
      <a-descriptions-item label="充值金额">{{ modalData.amount }}</a-descriptions-item>
      <a-descriptions-item label="充值类型">{{ modalData.type | apply_type }}</a-descriptions-item>
      <a-descriptions-item label="充值方式">{{ modalData.bank_type | bank_type }}</a-descriptions-item>
      <a-descriptions-item label="充值业务">{{ modalData.recharge_business | recharge_business }}</a-descriptions-item>
      <a-descriptions-item label="支付币种">{{ modalData.post_currency }}</a-descriptions-item>
      <a-descriptions-item label="支付汇率">{{ modalData.post_rate }}</a-descriptions-item>
      <a-descriptions-item label="支付总金额">{{ modalData.post_total_amount }}</a-descriptions-item>
      <a-descriptions-item label="审核状态">
				<a-form-item v-if="isEdit" class="m_0">
          <a-select
            placeholder="请设置状态"
						style="max-width: 300px"
						dropdownClassName="hide_disabled_option"
						v-model="isReview"
            v-decorator="[
              'status',
              { initialValue: modalData.status }
            ]"
            :options="review_status_modal_options"
          />
				</a-form-item>
				<template v-else>{{ modalData.status | review_status_modal }}</template>
			</a-descriptions-item>
      <a-descriptions-item label="打款人信息" :span="2">
				<a-form-item v-if="isEdit" class="m_0">
          <a-input
            placeholder="请输入打款人信息"
						:maxLength="10"
            v-decorator="[
              'sender_bank_info',
              {
								initialValue: modalData.sender_bank_info,
								rules: [{ required: isReview === 2, message: '请输入打款人信息' }]
							}
            ]"
          />
				</a-form-item>
				<template v-else>{{ modalData.sender_bank_info }}</template>
			</a-descriptions-item>
      <a-descriptions-item label="系统备注" :span="2">
				<a-form-item class="m_0" v-if="isEdit">
	      	<a-textarea v-decorator="[
						'system_memo',
						{
							initialValue: modalData.system_memo,
							rules: [{ required: isReview === 1, message: '请输入系统备注' }]
						}
					]" :maxLength="36" />
				</a-form-item>
				<template v-else>{{ modalData.system_memo }}</template>
			</a-descriptions-item>
      <a-descriptions-item label="备注">{{ modalData.memo }}</a-descriptions-item>
    </a-descriptions>
  </a-form>
</template>
<script>
import mix from './mixins'
import mixProperty from './mixin.property'
import finance from '../mixins/finance'
import common from '../mixins/common'
export default {
  mixins: [mix, finance(), common, mixProperty],
  data() {
    return {
			isReview: this.modalData.status,
			isCheckSenderInfo: false
    }
  },
  computed: {
    // 是否可编辑
    isEdit() {
      return this.allow.includes('financeRechargeReview') && [3, 4].includes(this.modalData.status)
    },
    successMessage() {
			switch (this.isReview) {
				case 1: return '审核不通过'
				case 2: return '审核通过'
				default: return '操作成功'
			}
    }
  },
  methods: {
		async beforeOk(next, done) {
			const status = this.form.getFieldValue('status')
			if (![1, 2].includes(status) || !this.isEdit) return done()
			if (status === 2) this.form.validateFields(['sender_bank_info'])
			next()
		},
    async submit(values) {
			const res = await this.request_api.finance_recharge.review({
				uuid: this.modalData.uuid,
				version: this.modalData.version,
				status: values.status,
				system_memo: values.system_memo || '',
				...(values.status === 2 && { sender_bank_info: values.sender_bank_info || '' })
			})
      return res
    }
  }
}
</script>