<template>
  <el-dialog
    v-model="show" :title="paymentTitle" center :close-on-click-modal="true"
    width="1000px" align-center
  >
    <el-row justify="end">
      <el-button style="margin-right: 20px" link type="primary" @click="handleDownloadPayment">下载</el-button>
    </el-row>
    <el-row justify="space-between">
      <el-form-item label="结算编号：">
        <span>
          {{ form.payment?.payCode }}
        </span>
      </el-form-item>
      <el-form-item label="缴费日期：">
        <span>
          {{ parseTime(form.payment?.payTime,'{y}/{m}/{d}') }}
        </span>
      </el-form-item>
    </el-row>
    <table width="100%" border="1" cellpadding="0" cellspacing="0">
      <tr>
        <td class=" bg " colspan="3">缴费单位</td>
        <td colspan="2">{{ form.memberName }}</td>
        <td class=" bg" colspan="3">资金用途</td>
        <td colspan="2">{{ form.type == '1' ? '级位考试' : '段位考试' }}</td>
      </tr>
      <tr>
        <td style="width: 10%;" rowspan="3">缴<br>费<br>人</td>
        <td colspan="2" style="width: 20%;">开户行</td>
        <th colspan="2" style="width: 20%;">{{ form.memBankName }}</th>
        <td style="width: 10%;" rowspan="3">收<br>款<br>人</td>
        <td colspan="2" style="width: 20%;">开户行</td>
        <th style="width: 20%;" colspan="2">{{ form.ztxBankConfig?.accountBank }}</th>
      </tr>
      <tr>
        <td colspan="2">账号</td>
        <th colspan="2">{{ form.memBankAccount }}</th>
        <td colspan="2">账号</td>
        <th colspan="2"> {{ form.ztxBankConfig?.accountNum }}</th>
      </tr>
      <tr>
        <td colspan="2">名称</td>
        <th colspan="2">{{ form.memBankAccountName }}</th>
        <td colspan="2">名称</td>
        <th colspan="2">{{ form.ztxBankConfig?.accountName }}</th>
      </tr>
      <tr>
        <td>金额</td>
        <td colspan="3">人民币</td>
        <th colspan="3"> {{ digitUppercase(form.payment?.totalAmount) }}</th>
        <th colspan="3">{{ form.payment?.totalAmount }}</th>
      </tr>
      <tr>
        <td colspan="10">费用明细</td>
      </tr>

      <!-- <tr>
        <th>序号</th>
        <th>缴费编号</th>
        <th colspan="2">考试名称</th>
        <th colspan="2">考试单位（团体）</th>
        <th>考试人数</th>
        <th>通过人数</th>
        <th>费用合计（元）</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item,index) in examList " :key=" item.examId">
        <td>{{ index+1 }}</td>
        <td>{{ item.examCode }}</td>
        <td colspan="2">{{ item.name }}</td>
        <td colspan="2">{{ item.memberName }}</td>
        <td>{{ item.totalNum }}</td>
        <td>{{ item.pass }}</td>
        <td>{{ item.totalAmount }}</td>
        <td><el-button link type="primary" @click="handleView(item)">查看</el-button></td>
      </tr> -->
    </table>
    <table width="100%" border="1" style="border-top: 0;" cellpadding="0" cellspacing="0">
      <tr class="tr">
        <th style="width: 6%;">序号</th>
        <th style="width: 14%;">缴费编号</th>
        <th style="width: 20%;" colspan="">考试名称</th>
        <th style="width: 20%;" colspan="2">考试单位（团体）</th>
        <th style="width: 10%;">考试人数</th>
        <th style="width: 10%;">通过人数</th>
        <th style="width: 15%;">费用合计（元）</th>
        <th style="width: 5%;">操作</th>
      </tr>
      <tr v-for="(item,index) in examList " :key=" item.examId">
        <td>{{ index+1 }}</td>
        <td>{{ item.examCode }}</td>
        <td colspan="">{{ item.name }}</td>
        <td colspan="2">{{ item.memberName }}</td>
        <td>{{ item.totalNum }}</td>
        <td>{{ item.pass }}</td>
        <td>{{ item.totalAmount }}</td>
        <td><el-button link type="primary" @click="handleView(item)">查看</el-button></td>
      </tr>
    </table>

    <el-row justify="space-between">
      <el-form-item label="经办人：">
        <span>
          {{ form.payment?.createBy }}
        </span>
      </el-form-item>
      <el-form-item label="经办时间：">
        <span>
          {{ parseTime(form.payment?.submitTime,'{y}/{m}/{d}') }}
        </span>
      </el-form-item>
    </el-row>

    <component :is="ExamView" ref="viewExamRef" />
  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, reactive } from '@vue/runtime-core'
import { useRouter } from 'vue-router'
import { defineAsyncComponent, toRefs } from 'vue'
import { getPaymentInfo } from '@/api/exam/info'
import { digitUppercase } from '@/utils/ruoyi'

const { proxy } = getCurrentInstance()
const router = useRouter()
const data = reactive({
  show: false,
  form: {},
  examList: []
})
const {
  show,
  form,
  examList
} = toRefs(data)

function handleDownloadPayment() {
  proxy.download(
    `/exam/payment/exportPayment/${paymentId}`, {}, '缴费通知单.pdf'
  )
}

function handleView(row) {
  proxy.$refs['viewExamRef'].open(row.examId)
}

let paymentId = null
let ExamView


const paymentTitle = ref()
function open(payId) {
  paymentId = payId
  show.value = true
  form.value = {}
  examList.value = []
  getPaymentInfo(payId).then(res => {
    if (res.code == 200) {
      form.value = res.data
      examList.value = res.data.examList
      if (form.value.type == '1') {
        paymentTitle.value = '级位考试缴费通知单'
        ExamView = defineAsyncComponent(() => import('@/views/exam/level/apply/components/examView'))
      } else {
        if (form.value.type == '2') {
          paymentTitle.value = '段位考试缴费通知单'
        }
        if (form.value.type == '3') {
          paymentTitle.value = '越段考试缴费通知单'
        }
        ExamView = defineAsyncComponent(() => import('@/views/exam/rank/apply/components/examView'))
      }
    }
  })
}

defineExpose({
  open
})

</script>

<style scoped lang="scss">
th,td{
  text-align: center;
  padding: 10px;
}

span{
  font-weight: 600;
}
.neiBorder{
  th,td{border: solid #000;border-width: 0 1px 1px 0;
    &:last-of-type{border-width: 0 0 1px 0;}
  }
  tr:last-of-type{
    td{border-width: 0 1px 0 0;
      &:last-of-type{border-width: 0;}
    }
  }
}

.tr{
  th{
    border-top: 0;
  }
}
</style>