<template>
  <el-dialog
    v-if="show" v-model="show" title="查看信息" :close-on-click-modal="true" width="80%"
    draggable align-center
  >
    <div v-if="showExportSettlement" style="text-align: right">
      <el-button type="warning" @click="exportData">导出</el-button>
    </div>
    <br>
    <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">
              <div v-if="showExportSettlement">
                <el-button type="warning" @click="exportList(scope.row)">导出</el-button>
              </div>
              <div v-else>
                <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>
              </div>
            
            
            </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 payId = ref()
const showExportSettlement = ref(false)
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, exportSettlement) {
  showExportSettlement.value = exportSettlement
  if (param) payId.value = param.payId || null
  console.log(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)
}

function exportData() {
  proxy.download(`/exam/payment/exportPaymentDetailsByPayId/${payId.value} `, {}, `考试缴费单_${new Date().getTime()}.xlsx`)
}

function exportList(row) {
  proxy.download(`/exam/person/exportStudentList2`, {
    examId: row.examId,
    recordId: row.recordId
  }, `考试缴费单明细_${new Date().getTime()}.xlsx`)
}

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>