<template>
  <el-dialog v-model="showDialog" align-center destroy-on-close title="查看详情" width="80%">
    
    <div>
      <el-descriptions :column="4" border title="">
        <el-descriptions-item label="结算编号">
          {{ form.code }}
        </el-descriptions-item>
        <el-descriptions-item label="缴费名称">
          {{ form.name }}
        </el-descriptions-item>
        <el-descriptions-item label="缴费单位">
          {{ form.memName }}
        </el-descriptions-item>
        <el-descriptions-item label="考试人数">
          {{ form.personCount }}
        </el-descriptions-item>
        <el-descriptions-item label="费用合计">
          {{ form.originPrice }}
        </el-descriptions-item>
        <el-descriptions-item label="结算金额">
          {{ form.price }}
        </el-descriptions-item>
        <!--        <el-descriptions-item label="支付方式">-->
        <!--          民生付-->
        <!--        </el-descriptions-item>-->
        <el-descriptions-item label="提交日期">
          {{ parseTime(form.commitTime, '{y}-{m}-{d}') }}
        </el-descriptions-item>
        <el-descriptions-item label="结算日期">
          {{ parseTime(form.auditTime, '{y}-{m}-{d}') }}
        </el-descriptions-item>
        <el-descriptions-item label="下载发票">
          <el-button link type="primary" @click="handelInvoice">下载发票</el-button>
        </el-descriptions-item>
      </el-descriptions>
      <br>
      <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="4">
              <el-form-item label="缴费编号" prop="payCode">
                <el-input
                  v-model.trim="queryParams.payCode"
                  clearable
                  placeholder="请输入缴费编号"
                  style="width: 100%;"
                  @keyup.enter="handleQuery"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="缴费名称" prop="name">
                <el-input
                  v-model.trim="queryParams.name"
                  clearable
                  placeholder="请输入缴费名称"
                  style="width: 100%;"
                  @keyup.enter="handleQuery"
                />
              </el-form-item>
            </el-col>
            
            <el-col :span="4">
              <el-form-item label="缴费单位" prop="memName">
                <el-input
                  v-model.trim="queryParams.memName"
                  clearable
                  placeholder="请输入缴费单位"
                  style="width: 100%;"
                  @keyup.enter="handleQuery"
                />
              </el-form-item>
            </el-col>
            <!--            <el-col :span="4">-->
            <!--              <el-form-item label="结算状态" prop="submitFlag">-->
            <!--                <el-select v-model="queryParams.submitFlag" clearable style="width: 100%;" @change="handleQuery">-->
            <!--                  <el-option label="全部" value="" />-->
            <!--                  <el-option label="已结算" value="1" />-->
            <!--                  <el-option label="未结算" value="0" />-->
            <!--                </el-select>-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
            <!--            -->
            <el-col v-if="!showCollect" :span="8" style="display: flex;">
              <el-form-item label="缴费日期" prop="payTimeRange" style="width: 100%;">
                <el-date-picker
                  v-model="queryParams.payTimeRange[0]" placeholder="开始时间" style="width: 100%;"
                  type="date" value-format="YYYY-MM-DD"
                />
              </el-form-item>
              <el-form-item label="缴费日期" prop="payTimeRange" style="width: 100%;">
                <el-date-picker
                  v-model="queryParams.payTimeRange[1]" placeholder="结束时间" style="width: 100%;"
                  type="date" value-format="YYYY-MM-DD"
                />
              </el-form-item>
            </el-col>
            <el-col v-if="!showCollect" :span="8" style="display: flex;">
              <el-form-item label="审核日期" prop="verityTimeRange" style="width: 100%;">
                <el-date-picker
                  v-model="queryParams.verityTimeRange[0]" placeholder="开始时间" style="width: 100%;"
                  type="date" value-format="YYYY-MM-DD"
                />
              </el-form-item>
              <el-form-item label="审核日期" prop="verityTimeRange" style="width: 100%;">
                <el-date-picker
                  v-model="queryParams.verityTimeRange[1]" placeholder="结束时间" style="width: 100%;"
                  type="date" value-format="YYYY-MM-DD"
                />
              </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>
      
      </div>
      <div class="table">
        <el-table
          v-loading="loading" :data="infoList" :row-class-name="tableRowClassName" border
          @selection-change="handleSelectionChange"
        >
          <!--          <el-table-column type="selection" width="40" align="center" :selectable="selectable" />-->
          <el-table-column align="center" label="序号" type="index" width="55" />
          <el-table-column align="center" label="缴费编号" min-width="120" prop="payCode">
            <template #default="{row}">
              <el-button :disabled="(row.verityStatus === '2' ||row.verityStatus === '3')" link type="primary" @click="handleView(row)">{{ row.payCode }}</el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" label="缴费名称" min-width="230" prop="name" show-overflow-tooltip />
          <el-table-column
            align="center" label="缴费单位" min-width="140" prop="memberName"
            show-overflow-tooltip
          />
          <el-table-column align="center" label="考试人数" min-width="100" prop="totalNum">
            <template #default="{row}">
              <el-button
                :disabled="(row.verityStatus === '2' ||row.verityStatus === '3')" link type="primary"
                @click="handleView(row)"
              >
                {{ row.totalNum }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" label="总金额" min-width="100" prop="totalAmount" />
          <!--          <el-table-column align="center" label="上报单位" min-width="100" prop="totalAmount" />-->
          <!--          <el-table-column label="支付方式" align="center" min-width="100">-->
          <!--            民生付-->
          <!--          </el-table-column>-->
          <el-table-column align="center" label="审核状态" min-width="120" prop="verityStatusStr">
            <template #default="{row}">
              <span
                :class="{
                  'text-success':row.verityStatus==='1',
                  'text-danger':row.verityStatus==='2',
                  'text-warning':row.verityStatus==='3'
                }"
              >{{ row.verityStatusStr }}</span>
            </template>
          </el-table-column>
          <!--          <el-table-column align="center" label="结算状态" min-width="120" prop="verityStatusStr">-->
          <!--            <template #default="{row}">-->
          <!--              <span-->
          <!--                :class="{-->
          <!--                  'text-warning':row.submitId,-->
          <!--                  'text-danger':!row.submitId,-->
          <!--                }"-->
          <!--              >{{ row.submitId ? '已结算' : '未结算' }}</span>-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column align="center" label="提交日期" min-width="120" prop="submitTime">
            <template #default="{row}">
              <span>{{ parseTime(row.submitTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="审核日期" min-width="100" prop="payTime">
            <template #default="{row}">
              <span>{{ parseTime(row.verityDate, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
        </el-table>
        <div v-show="total>0" class="totalCost">
          费用合计：<span>{{ statistical.totalCost?.toFixed(2) }} 元</span>
          人数合计：<span>{{ statistical.totalNum }} 人</span>
        </div>
        
        <pagination
          v-show="total>0"
          v-model:limit="queryParams.pageSize"
          v-model:page="queryParams.pageNum"
          :total="total"
          @pagination="getList"
        />
      </div>
      
      <exam-view ref="examViewRef" />
      <settlementDialog ref="settlementDialogRef" @handelSuccess="handelSuccess" />
      
      <el-link
        v-show="false" ref="payCertRef" :download="currPayCert.name" :href="fillImgUrl(currPayCert.url)"
        target="_blank"
      >{{ currPayCert.name }}
      </el-link>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, toRefs, getCurrentInstance, reactive, nextTick } from 'vue'
import { parseTime } from '@/utils/ruoyi'
import { paymentList } from '@/api/exam/payment'
import settlementDialog from './settlementDialog'
import ExamView from '@/views/exam/level/apply/components/examView'
import _ from 'lodash'

const emit = defineEmits(['handelSuccess'])

const showDialog = ref(false)
const { proxy } = getCurrentInstance()
const showCollect = ref(true)
const infoList = ref([])
const loading = ref(false)
const showSearch = ref(true)
const multiple = ref(true)
const total = ref(0)
const batchList = ref([])
const statistical = ref({})
const form = ref({})

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: undefined,
    payCode: undefined,
    memName: undefined,
    submitTimeRange: undefined,
    settleTimeRange: undefined,
    verityTimeRange: [null, null],
    payTimeRange: [null, null],
    status: undefined,
    type: 1
    // submitFlag: '0'
  },
  transcript: [],
  payId: undefined
})
const { queryParams } = toRefs(data)
const ids = ref([])
const currPayCert = ref({})

function open(row) {
  showDialog.value = true
  form.value = { ...row }
  // queryParams.value.submitId = row.id
  queryParams.value.payIds = row.payids
  getList()
}

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

function handelInvoice() {
  if (!form.value.fileUrl) return
  try {
    const invoice = JSON.parse(form.value.fileUrl)
    currPayCert.value = invoice[0]
    nextTick(() => {
      proxy.$refs['payCertRef'].$el.click()
    })
  } catch (e) {
    currPayCert.value = {}
    proxy.$modal.msgError('下载失败')
  }
}

/** 查询考级信息列表 */
async function getList() {
  if ((queryParams.value.verityTimeRange[0] == null && queryParams.value.verityTimeRange[1] != null) || (queryParams.value.verityTimeRange[1] == null && queryParams.value.verityTimeRange[0] != null)) return proxy.$modal.msgError('请完善审核日期')
  if ((queryParams.value.payTimeRange[0] == null && queryParams.value.payTimeRange[1] != null) || (queryParams.value.payTimeRange[1] == null && queryParams.value.payTimeRange[0] != null)) return proxy.$modal.msgError('请完善缴费日期')
  loading.value = true
  
  const res = await paymentList(queryParams.value)
  statistical.value = {
    totalCost: 0,
    totalNum: 0
  }
  infoList.value = res.rows
  total.value = res.total
  loading.value = false
  
  _.each(infoList.value, (info) => {
    statistical.value.totalCost += (info.totalAmount * 1)
    statistical.value.totalNum += (info.totalNum * 1)
  })
}

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

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.payId)
  batchList.value = [...selection]
  multiple.value = !selection.length
}

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

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

function handelSuccess() {
  showDialog.value = false
  emit('handelSuccess')
}

defineExpose({
  open
})

</script>