<template>
  <div v-loading="loading" class="app-container">
    <!-- 搜索区域 -->
    <div class="from-Card">
      <el-form ref="queryRef" size="small" :model="queryParams" :inline="true" label-position="top">
        <el-row style="width: 100%;">
          <el-col :span="5">
            <el-form-item label="缴费名称" prop="paymentName">
              <el-input
                v-model.trim="queryParams.paymentName"
                placeholder="缴费名称"
                clearable
                style="width: 100%"
                @keyup.enter="searchFN"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="缴费单位" prop="payDeptName">
              <el-input
                v-model.trim="queryParams.payDeptName"
                placeholder="缴费单位"
                clearable
                style="width: 100%"
                @keyup.enter="searchFN"
              />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="状态" prop="status">
              <el-select ref="select" v-model="queryParams.auditStatus" style="width: 100%;" @change="searchFN">
                <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-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="缴费编号" prop="flowCode">
              <el-input v-model.trim="queryParams.flowCode" style="width: 100%;" @keyup.enter="searchFN" />
            </el-form-item>
          </el-col>
          <el-col v-if="!showCollect" :span="8" style="display: flex">
            <el-form-item style="width: 100%;" label="提交日期" prop="commitTime">
              <el-date-picker
                v-model="commitTime[0]" type="date" value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="开始时间" style="width: 100%;"
              />
            </el-form-item>
            <el-form-item style="width: 100%;" label="提交日期" prop="commitTime">
              <el-date-picker
                v-model="commitTime[1]" type="date" value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="结束时间" style="width: 100%;"
                :default-time="defaultTime"
              />
            </el-form-item>
          </el-col>
          <div class="po-r-btns">
            <el-button size="small" type="primary" icon="Search" @click="searchFN">查询</el-button>
            <el-button size="small" icon="Refresh" @click="resetQuery">重置</el-button>
            <el-button
              v-if="showCollect" size="small" type="primary" link icon="ArrowDown"
              @click="showCollect=!showCollect"
            >展开
            </el-button>
            <el-button
              v-else size="small" type="primary" link icon="ArrowUp"
              @click="showCollect=!showCollect"
            >收起
            </el-button>
          </div>
        </el-row>

      </el-form>
      <el-row justify="space-between">
        <div>
          <!-- <el-button
            :icon="DocumentChecked" color="#13B5B1" style="--el-color-black:#fff;" :disabled="show" type="warning"
            @click="batchAudit"
          >批量审核</el-button> -->
          <el-button icon="CopyDocument" :disabled="show" type="primary" @click="mergeFeel"> 合并 </el-button>
        </div>

      </el-row>
    </div>

    <div class="table">
      <el-table
        :data="list" border style="width: 100%" :row-class-name="tableRowClassName" @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" :selectable="selectEnable" width="40" align="center" />
        <el-table-column type="index" label="序号" width="55" align="center" />
        <el-table-column
          label="缴费编号"
          align="center"
          prop="content.wfCode"
          min-width="150"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="缴费名称"
          align="center"
          prop="content.name"
          min-width="140"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="缴费单位"
          align="center"
          prop="content.memberName"
          min-width="300"
          :show-overflow-tooltip="true"
        />

        <el-table-column
          label="人数合计"
          align="center"
          prop="content.personCount"
          min-width="90"
          :show-overflow-tooltip="true"
        />

        <el-table-column
          label="新会员"
          align="center"
          prop="content.newPersonCount"
          min-width="80"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="续费"
          align="center"
          prop="content.oldPersonCount"
          min-width="80"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="年限"
          align="center"
          prop="content.totalYear"
          min-width="80"
          :show-overflow-tooltip="true"
        />

        <el-table-column
          label="提交日期"
          align="center"
          prop="content.commitTime"
          min-width="100"
        >
          <template #default="scope">
            <span>{{ parseTime(scope.row.content.commitTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="审核状态"
          align="center"
          prop="auditStatus"
          min-width="90"
        >
          <template #default="props">
            <div v-if="props.row.auditStatus==0">
              审核中
            </div>
            <div v-if="props.row.auditStatus==1" class="text-success">
              审核通过
            </div>
            <div v-if="props.row.auditStatus==2" class="text-danger">
              审核拒绝
            </div>
            <div v-if="props.row.auditStatus==3" class="text-warning">
              已撤回
            </div>
          </template>
        </el-table-column>
        <!--        <el-table-column-->
        <!--          label="审核进度"-->
        <!--          align="center"-->
        <!--          prop=""-->
        <!--          min-width="120"-->
        <!--        >-->
        <!--          <template #default="props">-->
        <!--            <schedule v-if="props.row.auditStatus == 1||props.row.auditStatus == 0" :audit-process="props.row.auditProcess" />-->
        <!--            &lt;!&ndash; <div v-if="props.row.auditStatus==0||props.row.auditStatus==1||props.row.auditStatus==3">-->
        <!--              <schedule :audit-process="props.row.auditProcess" />-->
        <!--            </div>-->

        <!--            <div v-if="props.row.auditStatus==2">-->
        <!--              <el-progress :percentage="0" />-->
        <!--            </div> &ndash;&gt;-->
        <!--          </template>-->
        <!--        </el-table-column>-->

        <el-table-column
          label="操作"
          align="center"
          fixed="right"
          class-name="small-padding"
          width="120"
        >
          <template #default="scope">
            <el-button type="primary" @click="handleInfo(scope.row)">查看</el-button>
            <!-- <el-button color="#13B5B1" style="--el-color-black:#fff;" :disabled="!(scope.row.auditStatus==0)" type="" @click="handleAudit(scope.row)">
              审核
            </el-button>
            <el-button
              :disabled="!(scope.row.auditStatus==1&&scope.row.isView==1)" type="danger"
              @click="handleDelete(scope.row)"
            >撤回
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>

      <div v-show="total>0" class="totalCost">
        人数合计：<span>{{ statistical.personCount }} 人</span>
        新会员合计：<span>{{ statistical.newPersonCount }} 人</span>
        续费合计：<span>{{ statistical.oldPersonCount }} 人</span>
        年限合计：<span>{{ statistical.totalYear }} 年</span>
      </div>

      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        :total="total"
        @pagination="initData"
      />
    </div>
    <!-- 表格数据 -->
    <DoDialog ref="DoAudit" @approval="initData" />
    <examView ref="examViewRef" @approval="initData" />
  </div>
</template>

<script setup>
import { getCurrentInstance } from 'vue'
import { reactive } from '@vue/runtime-core'
import { ref, toRefs, onMounted } from 'vue'
import { verifyList, mergeApi } from '@/api/member/audit.js'
import { useRouter } from 'vue-router'

import examView from '@/views/member/components/examView.vue'
import { dateEnd } from '/@/utils/ruoyi'
const { proxy } = getCurrentInstance()
const router = useRouter()
const loading = ref(false)
const showCollect = ref(true)
const total = ref(0)
const list = ref([])
const batchList = ref([])
const batch = ref([])
const show = ref(true)
const emit = defineEmits(['skip'])
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    mergeFlag: 0,
    auditStatus: '1'

  }
})
const defaultTime = ref(new Date(0, 0, 0, 23, 59, 59))

const commitTime = ref([null, null])
const { queryParams } = toRefs(data)
const statistical = ref({})

onMounted(() => {
  initData()
  emit('skip', 1)
})

// // 背景色
const tableRowClassName = ({
  row,
  rowIndex
}) => {
  if (row.auditStatus == 1) {
    return 'success-row'
  }
}

// 合并缴费单
async function mergeFeel() {
  try {
    loading.value = true
    await mergeApi({ recordIds: batch.value })
    loading.value = false
    await initData()
    await proxy.$modal.confirm('合并完成，是否进行审核数据提交？')
    await router.push({ path: '/member/memberSubmit' })
  } catch (e) {
    loading.value = false
    await initData()
  }
}

// 获取赛会列表
async function initData() {
  if ((commitTime.value[0] == null && commitTime.value[1] != null) || (commitTime.value[1] == null && commitTime.value[0] != null)) return proxy.$modal.msgError('请完善提交日期')
  if (commitTime.value[1])commitTime.value[1] = dateEnd(commitTime.value[1])
  queryParams.value.commitTimeRange = commitTime.value.length == 2 && commitTime.value[0] != null ? commitTime.value?.toString() : null

  loading.value = true
  const res = await verifyList(queryParams.value)
  statistical.value = {
    personCount: 0,
    newPersonCount: 0,
    oldPersonCount: 0,
    totalYear: 0
  }
  list.value = res.rows || []
  list.value.forEach(item => {
    item.content = JSON.parse(item.content)
    statistical.value.personCount += (item.content.personCount * 1)
    statistical.value.newPersonCount += (item.content.newPersonCount * 1)
    statistical.value.oldPersonCount += (item.content.oldPersonCount * 1)
    statistical.value.totalYear += (item.content.totalYear * 1)
  })
  total.value = res.total
  loading.value = false
}

// 查看
function handleInfo(row) {
  proxy.$refs['examViewRef'].open(row)
}
// 多选
function handleSelectionChange(e) {
  batch.value = e.map(item => { return item.recordId })
  show.value = !batch.value.length
  batchList.value = e
}

// 禁选
function selectEnable(row) {
  return row.auditStatus == 1
}

// 查询
function searchFN() {
  queryParams.value.pageNum = 1
  initData()
}

// 重置
function resetQuery() {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    mergeFlag: 0
  }
  commitTime.value = [null, null]
  initData()
}

</script>

<style lang="scss" scoped>
.router {
  margin-right: 20px;
}


</style>