<template>
  <el-dialog
    v-if="show" v-model="show" title="查看信息" :close-on-click-modal="true" width="80%"
    draggable align-center
  >
    <el-collapse v-model="activeNames">
      <el-collapse-item title="基本信息" name="1">
        <el-row>
          <el-col class="col-4 first" :span="4">结算编号</el-col>
          <el-col class="col-4 " :span="8">{{ form.flowCode }}</el-col>
          <el-col class="col-4 first" :span="4">{{ type=='1'?'考级名称':'考段名称' }}  </el-col>
          <el-col class="col-4 " :span="8">{{ form.mergeName }}</el-col>
          <el-col class="col-4 first" :span="4">申请单位</el-col>
          <el-col class="col-4" :span="8">{{ form.memName }}</el-col>
          <el-col class="col-4 first" :span="4">申请日期</el-col>
          <el-col class="col-4" :span="8">{{ parseTime(form.mergeTime, '{y}-{m}-{d}') }}</el-col>
          <el-col class="col-4 first" :span="4">{{ type=='1'?'考级人数':'考段人数' }} </el-col>
          <el-col class="col-4 " :span="8">{{ form.totalNum }}</el-col>
          <el-col class="col-4 first" :span="4">总金额</el-col>
          <el-col class="col-4 " :span="8">{{ (form.totalAmount*1).toFixed(2) }}</el-col>
        </el-row>
      </el-collapse-item>
      <el-collapse-item title="考试信息" name="2">
        <el-table v-loading="loading" border :data="infoList">
          <el-table-column type="index" width="55" align="center" label="序号" />
          <el-table-column label="缴费编号" align="center" prop="examCode" min-width="140" :show-overflow-tooltip="true" />
          <el-table-column :label="type=='1'?'考级名称':'考段名称'" align="center" prop="name" min-width="140" :show-overflow-tooltip="true" />
          <el-table-column label="上报单位" align="center" prop="memberName" min-width="120" :show-overflow-tooltip="true" />
          <el-table-column label="上报日期" align="center" prop="applyTime" min-width="100">
            <template #default="scope">
              <span>{{ parseTime(scope.row.applyTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="type=='1'?'考级时间':'考段时间'" align="center" prop="startTime" min-width="160" :show-overflow-tooltip="true">
            <template #default="scope">
              <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d} {h}:{i}') }} ~ {{ parseTime(scope.row.endTime, '{y}-{m}-{d} {h}:{i}') }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="type=='1'?'考级地点':'考段地点'" align="center" prop="memberName" min-width="120" :show-overflow-tooltip="true" />
          <el-table-column :label="type=='1'?'考级考官':'考段考官'" align="center" prop="examinerNames" min-width="100" :show-overflow-tooltip="true" />
          <el-table-column :label="type=='1'?'考级考生数':'考段考生数'" align="center" prop="totalNum" min-width="90" />
          <el-table-column label="金额" align="center" prop="totalAmount" min-width="90">
            <template #default="scope">
              <span>{{ (scope.row.totalAmount*1).toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column width="180" label="操作" fixed="right" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-button link type="primary" @click="handleView(scope.row)">查看</el-button>
              <el-button v-if="type!=1" link type="primary" @click="viewTranscript(scope.row)">{{ type == '1' ? '成绩单' :'资料' }}</el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-collapse-item>
    </el-collapse>

  </el-dialog>

  <exam-view ref="examViewRef" />
  <files-view ref="filesViewRef" />
</template>

<script setup>
import { getCurrentInstance, reactive } from '@vue/runtime-core'
import { defineAsyncComponent, onMounted, ref, toRefs } from 'vue'
import { getMergePaymentInfo, getPaymentDetailsByPayId } from '@/api/exam/info'
import _ from 'lodash'
import jsonlint from '@/utils/jsonlint/jsonlint'
import { useRoute } from 'vue-router'


const { proxy } = getCurrentInstance()
const route = useRoute()

const data = reactive({
  show: false,
  loading: true,
  form: {},
  infoList: [],
  activeNames: '1',
  recordList: [],
  recordId: ''
})
const { show, form, infoList, loading, activeNames, recordList, recordId } = toRefs(data)

const type = ref(null)
let ExamView
let FilesView
onMounted(() => {
  if (route.path.indexOf('level') > -1) {
    type.value = '1'
    ExamView = defineAsyncComponent(() => import('@/views/exam/level/apply/components/examView'))
    FilesView = defineAsyncComponent(() => import('@/views/exam/components/viewFiles'))
  } else if (route.path.indexOf('rank') > -1) {
    type.value = '2'
    ExamView = defineAsyncComponent(() => import('@/views/exam/rank/apply/components/examView'))
    FilesView = defineAsyncComponent(() => import('@/views/exam/components/viewRankFiles'))
  } else if (route.path.indexOf('beyond') > -1) {
    type.value = '3'
    ExamView = defineAsyncComponent(() => import('@/views/exam/rank/apply/components/examView'))
    FilesView = defineAsyncComponent(() => import('@/views/exam/components/viewRankFiles'))
  }
})

function open(row, param) {
  show.value = true
  activeNames.value = ['1', '2', '3']
  infoList.value = []

  if (row != null) {
    recordId.value = row.sourceData.recordId
    recordList.value = []
    form.value = row

    loading.value = true
    getMergePaymentInfo(row.recordId).then(res => {
      _.each(res.rows, (r) => {
        const item = jsonlint.parse(r.content)
        item.recordId = r.recordId
        infoList.value.push(item)
        console.log(infoList.value)
      })

      form.value.totalNum = Math.floor(_.sumBy(infoList.value, (o) => parseFloat(o.totalNum || 0)))
      form.value.totalAmount = Math.floor(_.sumBy(infoList.value, (o) => parseFloat(o.totalAmount || 0)))

      loading.value = false
    })
  } else {
    form.value.flowCode = param.payCode
    form.value.mergeName = param.name
    form.value.memName = param.memberName
    form.value.mergeTime = param.submitTime
    form.value.totalNum = Math.floor(param.totalNum)
    form.value.totalAmount = Math.floor(param.totalAmount)
    loading.value = true
    getPaymentDetailsByPayId(param.payId).then(res => {
      infoList.value = res.data
    })
    loading.value = false
  }
}

function handleView(row) {
  proxy.$refs['examViewRef'].open(row, { hasApproval: true })
}

function viewTranscript(row) {
  proxy.$refs['filesViewRef'].open(row.transcript)
}
defineExpose({
  open
})

</script>

<style scoped>
.col-4{
  padding: 10px;
  border:1px solid #ebeef5;
  font-size: 14px;
  text-align: center;
}
.first{
  font-weight: 600;
  background-color: #f8f8f9;
}
.flex{
  display: flex;
}
.flex-1{
  flex:1;
  padding: 10px;
  font-size: 16px;
  background-color: #f8f8f9;
  border:1px solid #ebeef5;
}
.flex-1>span{
  font-weight: 600;
  margin-left: 10px;
  margin-right: 10px;
}
</style>