<template>
  <el-container>
    <el-main>
      <el-form :model="form.model" ref="formRef" label-width="100px">
        <el-form-item label="用户信息">
          <div>
            <p><strong>用户名：</strong>{{ form.model.username || '-' }}</p>
            <p><strong>手机号：</strong>{{ form.model.mobile || '-' }}</p>
            <p><strong>邮箱：</strong>{{ form.model.email || '-' }}</p>
          </div>
        </el-form-item>
        <el-form-item label="提款金额">
          <span>৳{{ form.model.amount || 0 }}</span>
        </el-form-item>
        <el-form-item label="手续费">
          <span>৳{{ form.model.fee || 0 }}</span>
        </el-form-item>
        <el-form-item label="实际到账">
          <span>৳{{ form.model.actual_amount || 0 }}</span>
        </el-form-item>
        <el-form-item label="提款方式">
          <el-tag :type="form.model.withdraw_method === 'bank' ? 'primary' : 'success'">
            {{ form.model.withdraw_method_text || '-' }}
          </el-tag>
        </el-form-item>
        <el-form-item label="收款信息">
          <div v-if="form.model.withdraw_method === 'bank'">
            <p><strong>银行名称：</strong>{{ form.model.bank_name || '-' }}</p>
            <p><strong>银行卡号：</strong>{{ form.model.bank_account || '-' }}</p>
            <p><strong>开户姓名：</strong>{{ form.model.account_name || '-' }}</p>
          </div>
          <div v-else-if="form.model.withdraw_method === 'alipay'">
            <p><strong>支付宝账号：</strong>{{ form.model.alipay_account || '-' }}</p>
            <p><strong>真实姓名：</strong>{{ form.model.real_name || '-' }}</p>
          </div>
          <div v-else>
            <p>{{ form.model.account_info || '-' }}</p>
          </div>
        </el-form-item>
        <el-form-item label="申请时间">
          <span>{{ form.model.create_time || '-' }}</span>
        </el-form-item>
        <el-form-item label="状态">
          <el-tag :type="getStatusType(form.model.status)">
            {{ form.model.status_text || '-' }}
          </el-tag>
        </el-form-item>
        <el-form-item label="处理时间" v-if="form.model.process_time">
          <span>{{ form.model.process_time || '-' }}</span>
        </el-form-item>
        <el-form-item label="处理备注" v-if="form.model.process_remark">
          <span>{{ form.model.process_remark || '-' }}</span>
        </el-form-item>
        <el-form-item label="用户备注" v-if="form.model.remark">
          <span>{{ form.model.remark || '-' }}</span>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
</template>
<script setup>
  import { onMounted, reactive, ref } from 'vue';
  import { api } from '../finance.service';
  const props = defineProps({
    modal: {
      type: Object,
    },
  });

  // 表单数据
  const form = reactive({
    model: {
      username: '',
      mobile: '',
      email: '',
      amount: 0,
      fee: 0,
      actual_amount: 0,
      withdraw_method: '',
      withdraw_method_text: '',
      bank_name: '',
      bank_account: '',
      account_name: '',
      alipay_account: '',
      real_name: '',
      account_info: '',
      create_time: '',
      status: '',
      status_text: '',
      process_time: '',
      process_remark: '',
      remark: '',
    },
  });

  const loading = ref(false);

  // 获取状态类型
  function getStatusType(status) {
    const statusMap = {
      pending: 'warning',
      approved: 'primary',
      rejected: 'danger',
      completed: 'success',
    };
    return statusMap[status] || 'info';
  }

  // 获取详情
  async function getDetail(id) {
    loading.value = true;
    const { code, data } = await api.withdraw.detail(id);
    code == '200' && (form.model = data);
    loading.value = false;
  }

  async function init() {
    if (props.modal.params.id) {
      await getDetail(props.modal.params.id);
    }
  }

  onMounted(() => {
    init();
  });
</script>
