<template>
  <el-dialog v-model="showDialog" align-center destroy-on-close title="新建结算" width="80%">
    
    <div style="height: 700px;">
      <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="examCode">
                <el-input
                  v-model.trim="queryParams.examCode"
                  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="applyName">
                <el-input
                  v-model.trim="queryParams.applyName"
                  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" style="width: 100%;" clearable @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>
        <el-row justify="space-between">
          <div>
            <el-button :disabled="multiple" icon="Wallet" type="primary" @click="handleSettlement">批量结算申请
            </el-button>
          </div>
        </el-row>
      </div>
      <div class="table">
        <el-table
          v-loading="loading" :data="infoList" :row-class-name="tableRowClassName" border
          @selection-change="handleSelectionChange"
        >
          <el-table-column :selectable="selectable" align="center" type="selection" width="40" />
          <el-table-column align="center" label="序号" type="index" width="55" />
          <el-table-column align="center" label="缴费编号" min-width="120" prop="payCode" />
          <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 label="上报单位" align="center" 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="100" prop="totalAmount">
            <template #default="{row}">
              <text
                :class="{
                  'text-success':row.orderPayStatus==='1',
                  'text-danger':row.orderPayStatus==='4',
                  'text-warning':row.orderPayStatus==='2',
                }"
              >
                {{ tagStatus(row.orderPayStatus) }}
              </text>
            </template>
          </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 label="结算状态" align="center" prop="verityStatusStr" min-width="120">-->
          <!--            <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" type="3" />
      <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 } from 'vue'
import { parseTime } from '@/utils/ruoyi'
import { paymentList } from '@/api/exam/payment'

import ExamView from '@/views/exam/rank/apply/components/examView'
import SettlementDialog from '@/views/exam/level/payment/components/settlementDialog.vue'
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 data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    notType: '1',
    submitFlag: '0'
  },
  transcript: [],
  payId: undefined
})
const { queryParams } = toRefs(data)
const ids = ref([])
const currPayCert = ref({})

function open(row) {
  showDialog.value = true
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    notType: '1',
    submitFlag: '0'
  }
  getList()
}

function tagStatus(val) {
  switch (val) {
    case '0':
      return '待支付'
    case '1':
      return '缴费成功'
    case '2':
      return '已取消'
    case '4':
      return '已退款'
    default:
      return '已取消'
  }
}

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

function selectable(row) {
  return row.orderPayStatus === '1'
}

/** 查询考级信息列表 */
async function getList() {
  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 handleSettlement() {
  proxy.$refs['settlementDialogRef'].open(ids.value, 2)
}

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

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

defineExpose({
  open
})

</script>