<template>
  <div class="app-container">
    <div>
      
      <div class="from-Card">
        <el-form
          ref="queryRef" :inline="true" :model="queryParams" label-position="top" label-width="auto"
          size="small"
        >
          <el-row style="width: 100%;">
            <el-col :span="4">
              <el-form-item label="姓名" prop="perName">
                <el-input
                  v-model.trim="queryParams.perName"
                  clearable
                  placeholder="姓名"
                  style="width: 100%;"
                  @keyup.enter="searchFN"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="证件号码" prop="perIdcCode">
                <el-input
                  v-model.trim="queryParams.perIdcCode"
                  clearable
                  placeholder="证件号码"
                  style="width: 100%;"
                  @keyup.enter="searchFN"
                />
              </el-form-item>
            </el-col>
            <!--            <el-col :span="8" style="display: flex;">-->
            <!--              <el-form-item style="width: 100%;" label="有效截止时间" prop="validTimeRange">-->
            <!--                <el-date-picker-->
            <!--                  v-model="queryParams.validTimeRange[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="validTimeRange">-->
            <!--                <el-date-picker-->
            <!--                  v-model="queryParams.validTimeRange[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 icon="Search" size="small" type="primary" @click="searchFN">查询</el-button>
              <el-button icon="Refresh" size="small" @click="resetQuery">重置</el-button>
            </div>
          </el-row>
          
          <el-button icon="Plus" size="default" type="primary" @click="handleAdd">新增
          </el-button>
        </el-form>
      </div>
      <!-- 表格数据 -->
      <div class="table">
        <br>
        <el-table v-loading="showLoading" :data="list" border style="width: 100%;">
          <el-table-column align="center" label="序号" type="index" width="55" />
          <el-table-column align="center" label="姓名" prop="perName" show-overflow-tooltip />
          <el-table-column align="center" label="证件号" prop="perIdcCode" show-overflow-tooltip />
          <el-table-column align="center" label="会员号" prop="perCode" />
          <el-table-column align="center" label="有效日期" min-width="100">
            <template #default="scope">
              <span>{{ parseTime(scope.row?.roleInfo?.validTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="注册地" prop="memName" show-overflow-tooltip />
          <el-table-column align="center" fixed="right" label="操作" width="200">
            <template #default="scope">
              <el-button type="danger" @click="handelDel(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <pagination
          v-show="total > 0"
          v-model:limit="queryParams.pageSize"
          v-model:page="queryParams.pageNum"
          :total="total"
          @pagination="initData"
        />
      </div>
    </div>
    <!--    <ChooseExaminer ref="ChooseExaminerRef" is-validity="0" @chosen="chosenExaminer" />-->
    <ChooseRankExaminer ref="ChooseRankExaminerRef" is-validity="0" @chosen="chosenExaminer" />
  </div>
</template>

<script setup>
import { onMounted, getCurrentInstance, computed, reactive } from 'vue'
import { ref, toRefs } from 'vue'
// import { dateEnd } from '/@/utils/ruoyi'
import { examinerDel, listApi, selfAdd } from '@/api/exam/examinationAudit'
import useUserStore from '/@/store/modules/user'
// import ChooseExaminer from '@/views/exam/components/chooseExaminer'
import ChooseRankExaminer from '/@/views/exam/components/chooseRankExaminer.vue'


const memId = computed(() => useUserStore().memId)
const { proxy } = getCurrentInstance()

// const defaultTime = ref(new Date(0, 0, 0, 23, 59, 59))
const showLoading = ref(false)
const total = ref(0)
const list = ref([])
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    validTimeRange: [null, null],
    memId: memId.value
  }
})
const { queryParams } = toRefs(data)

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

// 获取赛会列表
async function initData() {
  // if ((queryParams.value.validTimeRange[0] == null && queryParams.value.validTimeRange[1] != null) || (queryParams.value.validTimeRange[1] == null && queryParams.value.validTimeRange[0] != null)) return proxy.$modal.msgError('请完善有效截止时间')
  // if (queryParams.value.validTimeRange[1]) queryParams.value.validTimeRange[1] = dateEnd(queryParams.value.validTimeRange[1])
  // showLoading.value = true
  
  const res = await listApi(queryParams.value)
  list.value = res.rows
  for (const val of list.value) {
    if (val.roleInfo) val.roleInfo = JSON.parse(val.roleInfo)
  }
  total.value = res.total
  showLoading.value = false
}

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

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

async function handelDel(row) {
  await proxy.$modal.confirm('确定删除该考官吗？')
  await examinerDel(row.id)
  await proxy.$modal.msgSuccess('删除成功')
  await initData()
}

function handleAdd() {
  // 选择考官
  // proxy.$refs['ChooseExaminerRef'].open(list.value)


  proxy.$refs['ChooseRankExaminerRef'].open({
    ec: memId.value,
    type: '1',
    chosen: list.value
  })
}

async function chosenExaminer(row) {
  await selfAdd(memId.value, row.perId)
  await proxy.$modal.msgSuccess('操作成功！')
  await initData()
}

</script>

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

</style>