<template>
  <div class="">
    <div class="from-Card">
      <el-form
        v-show="showSearch" ref="queryRef" :inline="true" :model="queryParams" label-position="top"
        size="small"
      >
        <el-row style="width: 100%;">
          
          <el-col :span="5">
            <el-form-item label="缴费编号" prop="examCode">
              <el-input
                v-model.trim="queryParams.examCode"
                clearable
                placeholder="请输入缴费编号"
                @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="名称" prop="name">
              <el-input
                v-model.trim="queryParams.name"
                clearable
                placeholder="请输入名称"
                @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="状态" prop="status">
              <el-select v-model="queryParams.status" clearable style="width: 100%;" @change="handleQuery">
                <el-option label="全部" value="" />
                <!--                <el-option label="审批中" value="0" />-->
                <el-option label="审批中" value="1" />
                <el-option label="审批通过" value="2" />
                <el-option label="审批拒绝" value="3" />
                <!--                <el-option label="审批撤回" value="3" />-->
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="上报单位" prop="applyName">
              <el-input
                v-model.trim="queryParams.applyName"
                clearable
                placeholder="请输入上报单位"
                @keyup.enter="handleQuery"
              />
            </el-form-item>
          </el-col>
          <!--          <el-col :span="4" :hidden="showCollect">-->
          <!--            <el-form-item label="缴费状态" prop="payStatus">-->
          <!--              <el-select v-model="queryParams.examPayStatus" style="width: 100%;" clearable @change="handleQuery">-->
          <!--                <el-option label="全部" value="" />-->
          <!--                <el-option label="已结算" value="3" />-->
          <!--                <el-option label="已上传凭证" value="5" />-->
          <!--                <el-option label="未上传凭证" value="4" />-->
          <!--              </el-select>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <!--          <el-col :span="8" :hidden="showCollect">-->
          <!--            <el-form-item label="审核日期" prop="handleTime">-->
          <!--              <el-date-picker-->
          <!--                v-model="queryParams.handleTime"-->
          <!--                clearable-->
          <!--                type="daterange"-->
          <!--                range-separator="至"-->
          <!--                start-placeholder="开始时间"-->
          <!--                end-placeholder="结束时间"-->
          <!--                value-format="YYYY-MM-DD"-->
          <!--                style="width: 100%;"-->
          <!--                @change="handleQuery"-->
          <!--              />-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          
          <el-col v-if="!showCollect" :span="8" style="display: flex">
            <el-form-item label="审核日期" prop="handleTime" style="width: 100%;">
              <el-date-picker
                v-model="queryParams.handleTime[0]" placeholder="开始时间" style="width: 100%;"
                type="date" value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
            <el-form-item label="审核日期" prop="handleTime" style="width: 100%;">
              <el-date-picker
                v-model="queryParams.handleTime[1]" placeholder="结束时间" style="width: 100%;"
                type="date" value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <div class="po-r-btns">
            <el-button size="small" type="primary" @click="handleQuery">搜索</el-button>
            <el-button size="small" @click="resetQuery">重置</el-button>
            <el-button
              v-if="showCollect" icon="ArrowDown" link size="small" type="primary"
              @click="showCollect=!showCollect"
            >展开
            </el-button>
            <el-button
              v-else icon="ArrowUp" link size="small" type="primary"
              @click="showCollect=!showCollect"
            >收起
            </el-button>
          </div>
        </el-row>
      </el-form>
      <el-row v-if="readonly==0" justify="space-between">
        <div>
          <el-button v-hasPermi="['exam:*']" icon="Download" type="warning" @click="handleExport">导出</el-button>
        </div>
      </el-row>
    </div>
    
    <div class="table">
      <el-table v-loading="loading" :data="infoList" :row-class-name="tableRowClassName" border>
        <el-table-column align="center" label="序号" type="index" width="55" />
        <el-table-column align="center" label="缴费编号" prop="examCode" show-overflow-tooltip width="140" />
        <el-table-column
          align="center" label="缴费名称" min-width="180" prop="name"
          show-overflow-tooltip
        />
        <el-table-column align="center" label="考试人数" prop="totalNum" width="90" />
        <el-table-column align="center" label="总金额" prop="price" width="120" />
        <el-table-column align="center" label="上报单位" min-width="120" prop="memberName" show-overflow-tooltip />
        <!--        <el-table-column label="支付方式" align="center" prop="memName" min-width="120" show-overflow-tooltip>-->
        <!--          民生付-->
        <!--        </el-table-column>-->
        <el-table-column align="center" label="提交日期" prop="mergeTime" width="140">
          <template #default="scope">
            <span>{{ parseTime(scope.row.commitTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="审核状态" prop="statusStr" width="120">
          <template #default="scope">
            <span
              :class="{
                'text-success':scope.row.status=='2',
                'text-danger':scope.row.status=='3',
                'text-warning':scope.row.status=='4'
              }"
            >{{ scope.row.statusStr ?? '待提交' }}</span>
          </template>
        </el-table-column>
        <!--        <el-table-column label="缴费状态" align="center" prop="examPayStatusStr" min-width="120">-->
        <!--          <template #default="scope">-->
        <!--            <div-->
        <!--              :class="{-->
        <!--                ' text-success s':scope.row.examPayStatusStr=='已上传凭证',-->
        <!--                'text-danger':scope.row.examPayStatusStr=='未上传凭证',-->
        <!--                'text-warning s':scope.row.examPayStatusStr=='已结算'-->
        <!--              }"-->
        <!--              @click="downloadPayment(scope.row)"-->
        <!--            >-->
        <!--              {{ scope.row.examPayStatusStr }}-->
        <!--            </div>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <!--        <el-table-column-->
        <!--          label="审核进度"-->
        <!--          align="center"-->
        <!--          prop=""-->
        <!--          min-width="120"-->
        <!--        >-->
        <!--          <template #default="scope">-->
        <!--            <schedule v-if="scope.row.status == 1||scope.row.status == 0" :audit-process="scope.row.auditProcess" />-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column align="center" label="审核日期" min-width="120" prop="overDate" show-overflow-tooltip>
          <template #default="scope">
            <span>{{ parseTime(scope.row.handleDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <!--        <el-table-column label="原因" align="center" prop="reason" width="200" show-overflow-tooltip />-->
        <el-table-column
          v-if="readonly==0" align="center" class-name="small-padding fixed-width" fixed="right" label="操作"
          width="200"
        >
          <template #default="scope">
            <el-button type="primary" @click="handleView(scope.row)">查看</el-button>
            <el-button
              :disabled="!(scope.row.status=='1')" color="#13B5B1" style="--el-color-black:#fff;"
              type="primary" @click="handleApproval(scope.row)"
            >审批
            </el-button>
            <!--            <el-button-->
            <!--              :disabled="!(scope.row.isView=='1' && scope.row.status=='1') || scope.row.payStatus=='3'"-->
            <!--              type="danger" @click="handleBack(scope.row)"-->
            <!--            >撤回-->
            <!--            </el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <div v-show="total>0" class="totalCost">
        费用合计：<span>{{ statistical.totalCost?.toFixed(2) }} 元</span>
        考试人数合计：<span>{{ statistical.totalPerson }} 人</span>
      </div>
      <pagination
        v-show="total>0"
        v-model:limit="queryParams.pageSize"
        v-model:page="queryParams.pageNum"
        :total="total"
        @pagination="getList"
      />
    </div>
    <el-link
      v-show="false" ref="payCertRef" :download="currPayCert.name" :href="fillImgUrl(currPayCert.url)"
      target="_blank"
    >{{ currPayCert.name }}
    </el-link>
    
    <doAudit ref="doAuditRef" @approval="handleAudit" />
  </div>
</template>

<script setup>
import { getVerityMergeList, auditList, auditJi } from '@/api/exam/info'
import { nextTick, onMounted, ref, toRefs, getCurrentInstance, reactive } from 'vue'
import { dateEnd, parseTime } from '@/utils/ruoyi'
import doAudit from '@/views/exam/components/do.vue'
// import _ from 'lodash'
// import jsonlint from '@/utils/jsonlint/jsonlint'

const props = defineProps({
  readonly: {
    type: String,
    default: '0'
  }
})

const { proxy } = getCurrentInstance()
const emit = defineEmits(['viewExam', 'doApproval', 'doBack', 'viewMerge'])

const infoList = ref([])
const loading = ref(false)
const showSearch = ref(true)
const total = ref(0)
const showCollect = ref(true)
const statistical = ref({})
const currPayCert = ref({})
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    flowCode: undefined,
    name: undefined,
    applyName: undefined,
    status: '1',
    examCode: undefined,
    // type: '1',
    examPayStatus: undefined,
    handleTime: [null, null],
    auditSelectType: '1'
  }
})
const { queryParams } = toRefs(data)

onMounted(() => {
  getList()
})

// // 背景色
const tableRowClassName = (row) => {
  if (row.status == 2) {
    return 'success-row'
  }
}

/** 查询考级信息列表 */
function getList() {
  // if (queryParams.value.handleTime.length == 2&&) proxy.$modal.msgError('请完善审核日期范围')
  if ((queryParams.value.handleTime[0] == null && queryParams.value.handleTime[1] != null) || (queryParams.value.handleTime[1] == null && queryParams.value.handleTime[0] != null)) return proxy.$modal.msgError('请完善审核日期')
  if (queryParams.value.handleTime[1]) queryParams.value.handleTime[1] = dateEnd(queryParams.value.handleTime[1])
  queryParams.value.handleDateRange = queryParams.value.handleTime[0] && queryParams.value.handleTime[1] ? queryParams.value.handleTime.toString() : ''
  queryParams.value.auditFlag = props.readonly == '0' ? '1' : '0'
  loading.value = true
  auditList(queryParams.value).then(response => {
    statistical.value = {
      totalCost: 0,
      totalPerson: 0
    }
    // const list = []
    // _.each(response.rows, r => {
    //   const item = jsonlint.parse(r.remark)
    //   item.recordId = r.recordId
    //   item.status = r.auditStatus
    //   item.statusStr = statusArr[r.auditStatus]
    //   item.isView = r.isView
    //   item.payStatus = r.payStatus
    //   item.examPayStatusStr = r.examPayStatusStr
    //   item.sourceData = r
    //   item.auditProcess = r.auditProcess
    //   item.overDate = r.overDate
    //   list.push(item)
    //
    //   statistical.value.totalCost += (item.totalAmount * 1)
    //   statistical.value.totalPerson += (item.totalNum * 1)
    // })
    infoList.value = response.rows
    for (const val of infoList.value) {
      if (val.price) statistical.value.totalCost += (val.price * 1)
      if (val.totalNum) statistical.value.totalPerson += (val.totalNum * 1)
    }
    total.value = response.total
    loading.value = false
  })
}

function downloadPayment(row) {
  if (row.examPayStatusStr == '未上传凭证') return
  try {
    const payCert = JSON.parse(row.sourceData.examPayCert)
    currPayCert.value = payCert[0]
    nextTick(() => {
      proxy.$refs['payCertRef'].$el.click()
    })
  } catch (e) {
    currPayCert.value = {}
    proxy.$modal.msgError('下载失败')
  }
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm('queryRef')
  handleQuery()
}

function handleView(row) {
  emit('viewMerge', row)
}

function handleApproval(row) {
  // emit('doApproval', row.recordId, { isZtx: true })
  proxy.$refs['doAuditRef'].open(row.examId)
}

async function handleAudit(row) {
  await auditJi(row)
  await getList()
  proxy.$modal.msgSuccess('操作成功')
}

function handleBack(row) {
  emit('doBack', row)
}

function handleExport() {
  proxy.download('/exam/info/export/verityMergeList', {
    ...queryParams.value
  }, `级位考试审核_${new Date().getTime()}.xlsx`)
}


defineExpose({
  getList
})
</script>