<template>
  <el-dialog
    v-model="show" :close-on-click-modal="true" :title="paymentTitle" align-center
    center width="1000px"
  >
    <div v-loading="loading">
      <el-row justify="end">
        <el-button link style="margin-right: 20px" type="primary" @click="handleDownloadPayment">下载</el-button>
      </el-row>
      <el-row justify="space-between">
        <el-form-item label="结算编号：">
          <span>
            {{ form.code }}
          </span>
        </el-form-item>
        <el-form-item label="">
          <!--        <span>-->
          <!--          {{ parseTime(form.payment?.payTime, '{y}/{m}/{d}') }}-->
          <!--        </span>-->
        </el-form-item>
      </el-row>
      <table border="1" cellpadding="0" cellspacing="0" width="100%">
        <tr>
          <td class=" bg " colspan="3">申请单位</td>
          <td colspan="2">{{ form.memberName }}</td>
          <td class=" bg" colspan="3">服务内容</td>
          <td colspan="2">{{ type === '1' ? '级位考试' : '段位考试' }}</td>
        </tr>
        <tr>
          <td rowspan="3" style="width: 10%;">申<br>请<br>人</td>
          <td colspan="2" style="width: 20%;">开户行</td>
          <th colspan="2" style="width: 20%;">{{ form.memBankName }}</th>
          <td rowspan="3" style="width: 10%;">付<br>款<br>人</td>
          <td colspan="2" style="width: 20%;">开户行</td>
          <th colspan="2" style="width: 20%;">{{ form.ztxBankName }}</th>
        </tr>
        <tr>
          <td colspan="2">账号</td>
          <th colspan="2">{{ form.memBankAccount }}</th>
          <td colspan="2">账号</td>
          <th colspan="2"> {{ form.ztxBankAccount }}</th>
        </tr>
        <tr>
          <td colspan="2">名称</td>
          <th colspan="2">{{ form.memBankAccountName }}</th>
          <td colspan="2">名称</td>
          <th colspan="2">{{ form.ztxBankAccountName }}</th>
        </tr>
        <tr>
          <td>金额</td>
          <td colspan="3">人民币</td>
          <th colspan="3"> {{ // digitUppercase(form.price)
            form.chinesePrice
          }}</th>
          <th colspan="3">{{ form.price }}</th>
        </tr>
        <tr>
          <td colspan="10">服务明细</td>
        </tr>
      </table>
      <table border="1" cellpadding="0" cellspacing="0" style="border-top: 0;" width="100%">
        <tr class="tr">
          <th style="width: 6%;">序号</th>
          <th style="width: 14%;">缴费编号</th>
          <th colspan="" style="width: 20%;">考试名称</th>
          <th colspan="2" style="width: 20%;">考试单位（单位）</th>
          <th style="width: 10%;">考试人数</th>
          <th style="width: 15%;">费用合计（元）</th>
          <th style="width: 5%;">操作</th>
        </tr>
        <tr v-for="(item,index) in form.items " :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.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.memberName }}
          </span>
        </el-form-item>
        <el-form-item label="经办时间：">
          <span>
            {{ parseTime(form.createTime, '{y}/{m}/{d}') }}
          </span>
        </el-form-item>
      </el-row>

      <component :is="ExamView" ref="viewExamRef" />
    </div>

  </el-dialog>
</template>

<script setup>
import { getCurrentInstance, reactive } from 'vue'
import { defineAsyncComponent, toRefs, ref } from 'vue'
import { notice } from '@/api/exam/payment'
import { digitUppercase } from '@/utils/ruoyi'
// import ExamView from '@/views/exam/level/apply/components/examView'

const paymentTitle = ref()

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

const type = ref('1')
let paymentId = null
let ExamView


function open(payId, val) {
  debugger
  type.value = val
  paymentId = payId
  form.value = {}
  examList.value = []
  handleViewAll()

  if (val === '1') {
    paymentTitle.value = '级位考试申请单'
    ExamView = defineAsyncComponent(() => import('@/views/exam/level/apply/components/examView'))
  } else {
    paymentTitle.value = '段位考试申请单'
    ExamView = defineAsyncComponent(() => import('@/views/exam/rank/apply/components/examView'))
  }
  show.value = true
}

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

async function handleViewAll() {
  loading.value = true
  const res = await notice(paymentId)
  loading.value = false
  form.value = res.data
}

function handleDownloadPayment() {
  proxy.download(
    `/exam/paymentSubmit/noticeExport/${paymentId}?type=${type.value}`, {}, `${paymentTitle.value}.pdf`
  )
}

defineExpose({
  open
})

</script>

<style lang="scss" scoped>
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>