<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <el-card>
      <el-form ref="queryRef" size="small" :model="queryParams" :inline="true" label-position="top">
        <el-row style="width: 100%;">
          <el-col :span="4">
            <el-form-item label="姓名" prop="name">
              <el-input
                v-model.trim="queryParams.name" placeholder="姓名" clearable style="width: 100%"
                @keyup.enter="searchFN"
              />
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item label="证件号" prop="idcCode">
              <el-input
                v-model.trim="queryParams.idcCode" placeholder="证件号" clearable style="width: 100%"
                @keyup.enter="searchFN"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="状态" prop="approveStatus">
              <el-select ref="select" v-model="queryParams.approveStatus" style="width: 100%;" @change="searchFN">
                <el-option label="全部" value="" />
                <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="6" 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%;"
                :default-time="defaultTimeStater"
              />
            </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="defaultTimeEnd"
              />
            </el-form-item>


          </el-col>
          <el-col :span="6" style="display: flex">
            <el-form-item style="width: 100%;" label="审核日期" prop="overDateRange[0]">
              <el-date-picker
                v-model="overDateRange[0]" type="date" value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="开始时间" style="width: 100%;"
                :default-time="defaultTimeStater"
              />
            </el-form-item>
            <el-form-item style="width: 100%;" label="审核日期" prop="overDateRange[1]">
              <el-date-picker
                v-model="overDateRange [1]" type="date" value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="结束时间" style="width: 100%;"
                :default-time="defaultTimeEnd"
              />
            </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="restFN">重置</el-button>
          </div>
        </el-row>

      </el-form>
      <br>
      <br>
    </el-card>
    <br>
    <el-card>
      <el-table
        v-loading="loading" :data="list" border style="width: 100%" :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="40" align="center" />
        <el-table-column type="index" label="序号" width="55" align="center" />
        <el-table-column
          label="姓名" align="center" prop="name" min-width="100"
          :show-overflow-tooltip="true"
        />
        <el-table-column label="证件类型" align="center" prop="idcType" min-width="140" :show-overflow-tooltip="true">
          <template #default="{row}">
            {{ idcFilter(row.idcType) }}
          </template>
        </el-table-column>
        <el-table-column
          label="证件号" align="center" prop="idcCode" min-width="170"
          :show-overflow-tooltip="true"
        />

        <el-table-column
          label="附件" align="center" prop="" width="110"
        >
          <template #default="{row}">
            <el-image
              :src="fillImgUrl(row.fileUrl)"
              :preview-src-list="[fillImgUrl(row.fileUrl)]"
              :preview-teleported="true"
              style="width: 80px"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="提交单位" align="center" prop="memName" min-width="170"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="提交时间" align="center" prop="" min-width="80"
          :show-overflow-tooltip="true"
        >
          <template #default="{row}">
            <span>{{ parseTime(row.commitTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审核状态" align="center" prop="" min-width="90">
          <template #default="{row}">
            <div v-if="row.approveStatus == 1">
              审核中
            </div>
            <div v-if="row.approveStatus == 2" class="text-success">
              审核通过
            </div>
            <div v-if="row.approveStatus == 3" class="text-danger">
              审核拒绝
            </div>
          </template>
        </el-table-column>
        <el-table-column label="审核时间" align="center" prop="" min-width="80" :show-overflow-tooltip="true">
          <template #default="{row}">
            <span>{{ parseTime(row.approveTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="msg" min-width="100" />


        <!--        <el-table-column label="操作" align="center" fixed="right" class-name="small-padding" width="100">-->
        <!--          <template #default="{row}">-->
        <!--            <el-button-->
        <!--              :disabled="!(row.approveStatus == 1)" color="#13B5B1" style="&#45;&#45;el-color-black:#fff;"-->
        <!--              @click="handleAudit(row)"-->
        <!--            >审核</el-button>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
      </el-table>

      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        :total="total"
        @pagination="initData"
      />
    </el-card>

  </div>
</template>

<script setup>
import { getCurrentInstance } from 'vue'
import { reactive } from '@vue/runtime-core'
import { ref, toRefs, onMounted } from 'vue'
import { dateEnd, idcFilter } from '@/utils/ruoyi'
import { listApi } from '@/api/member/addMember'

const defaultTimeStater = ref(new Date(0, 0, 0, 0, 0, 0))
const defaultTimeEnd = ref(new Date(0, 0, 0, 23, 59, 59))
const { proxy } = getCurrentInstance()
const total = ref(0)
const list = ref([])
const batch = ref([])
const show = ref(true)
const loading = ref(false)
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    approveStatus: ''
  }
})
const overDateRange = ref([null, null])
const commitTime = ref([null, null])
const { queryParams } = toRefs(data)

onMounted(() => {
  initData()
})

function searchFN() {
  queryParams.value.pageNum = 1
  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 ((overDateRange.value[0] == null && overDateRange.value[1] != null) || (overDateRange.value[1] == null && overDateRange.value[0] != null)) return proxy.$modal.msgError('请完善审核日期')
  if (commitTime.value[1])commitTime.value[1] = dateEnd(commitTime.value[1])
  if (overDateRange.value[1])overDateRange.value[1] = dateEnd(overDateRange.value[1])
  queryParams.value.commitTimeRange = commitTime.value.length == 2 && commitTime.value[0] != null ? commitTime.value?.toString() : null
  queryParams.value.approveTimeRange = overDateRange.value.length == 2 && overDateRange.value[0] != null ? overDateRange.value?.toString() : null

  loading.value = true
  const res = await listApi(queryParams.value)
  list.value = res.rows || []
  total.value = res.total
  loading.value = false
}


// 多选
function handleSelectionChange(e) {
  batch.value = e.map(item => item.id)
  show.value = !batch.value.length
}

// 重置
function restFN() {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    approveStatus: '1'
  }
  commitTime.value = [null, null]
  overDateRange.value = [null, null]
  initData()
}

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

</script>

<style lang="scss" scoped>

.po-r-btns{
  bottom: -30px;
  z-index: 99;
}
</style>