<template>
  <el-dialog
    v-model="show"
    title="查看详情"
    class="dialog"
    :close-on-click-modal="true"
    width="80%"
    draggable
    destroy-on-close
  >
    <div>
      <!-- 搜索区域 -->
      <div>
        <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="type">
                <el-select v-model.trim="queryParams.idcType" style="width: 100%" @change="searchFN">
                  <el-option v-for="item in idcTypeList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </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="groupMemberName">
                  <el-input
                    v-model="queryParams.groupMemberName"
                    placeholder="注册单位会员名称"
                    clearable
                    style="width: 100%"
                    @keyup.enter="searchFN"
                  />
                </el-form-item>       
              </el-col> -->
            
            <el-col :span="7" style="display: flex">
              <el-form-item style="width: 100%" label="过期时间" prop="validityDateRange" label-width="">
                <el-date-picker
                  v-model="validityDateRange[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="validityDateRange" label-width="">
                <el-date-picker
                  v-model="validityDateRange[1]"
                  type="date"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="结束时间"
                  style="width: 100%;"
                  :default-time="defaultTime"
                />
              </el-form-item>
            </el-col>
            
            <!--            <el-col :span="7">-->
            <!--              <el-form-item label="到期时间" prop="validityDate">-->
            <!--                <el-date-picker-->
            <!--                  v-model="validityDateRange"-->
            <!--                  type="datetimerange"-->
            <!--                  value-format="YYYY-MM-DD HH:mm:ss"-->
            <!--                  range-separator="至"-->
            <!--                  start-placeholder="开始时间"-->
            <!--                  end-placeholder="结束时间"-->
            <!--                  style="width: 100%;"-->
            <!--                  @change="searchFN"-->
            <!--                />-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
            <!--            <el-col :span="8" :hidden="showCollect">-->
            <!--              <el-form-item label="注册时间" prop="name">-->
            <!--                <el-date-picker-->
            <!--                  v-model="regDateRange"-->
            <!--                  type="datetimerange"-->
            <!--                  value-format="YYYY-MM-DD HH:mm:ss"-->
            <!--                  range-separator="至"-->
            <!--                  start-placeholder="开始时间"-->
            <!--                  end-placeholder="结束时间"-->
            <!--                  style="width: 100%;"-->
            <!--                  @change="searchFN"-->
            <!--                />-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
            <div class="po-r-btns" style="bottom: 10px">
              <el-button size="small" type="primary" icon="Search" @click="searchFN">查询</el-button>
              <el-button size="small" icon="Refresh" @click="resetQuery">重置</el-button>
              <el-button icon="download" type="warning" @click="handelDownload">导出</el-button>
            
            </div>
          
          </el-row>
        
        </el-form>
      </div>
      <br>
      
      <!-- 表格数据 -->
      <el-table v-loading="loading" :data="list" style="width: 100%" border>
        <el-table-column type="index" label="序号" width="55" />
        <el-table-column
          label="会员名称"
          align="center"
          prop="name"
          min-width="120"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="性别"
          align="center"
          prop="sex"
          min-width="80"
        >
          <template #default="props">
            <div v-if="props.row.sex == 1">女</div>
            <div v-else>男</div>
          </template>
        </el-table-column>
        
        <el-table-column
          label="会员类型"
          align="center"
          prop="perType"
          min-width="90"
        >
          <template #default="props">
            <div v-if="props.row.perType==1"> 个人</div>
            <div v-if="props.row.perType==2"> 教练</div>
            <div v-if="props.row.perType==3"> 考官</div>
            <div v-if="props.row.perType==4"> 裁判</div>
            <div v-if="props.row.perType==5"> 临时</div>
          </template>
        </el-table-column>
        <el-table-column label="出生日期" align="center" prop="birth" width="100">
          <template #default="scope">
            <span>{{ parseTime(scope.row.birth, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="证件类型"
          align="center"
          prop="matchTimeStr"
          :show-overflow-tooltip="true"
          min-width="120"
        >
          <template #default="props">
            <div>{{ idcFilter(props.row.idcType) }}</div>
          </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=""
          min-width="140"
          :show-overflow-tooltip="true"
        >
          <template #default="props">
            <div v-if="props.row?.ancestorNameList">
              <div v-if="props.row?.ancestorNameList[0]">{{ props.row?.ancestorNameList[0] }}</div>
              <div v-else>/</div>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column
          label="二级单位"
          align="center"
          prop="costCounts"
          min-width="140"
          :show-overflow-tooltip="true"
        >
          <template #default="props">
            <div v-if="props.row?.ancestorNameList">
              <div v-if="props.row?.ancestorNameList[1]">{{ props.row?.ancestorNameList[1] }}</div>
              <div v-else>/</div>
            </div>
          </template>
        </el-table-column>
        <!--        <el-table-column-->
        <!--          label="三级单位"-->
        <!--          align="center"-->
        <!--          prop="balance"-->
        <!--          min-width="140"-->
        <!--          :show-overflow-tooltip="true"-->
        <!--        >-->
        <!--          <template #default="props">-->
        <!--            <div v-if="props.row?.ancestorNameList">-->
        <!--              <div v-if="props.row?.ancestorNameList[2]">{{ props.row?.ancestorNameList[2] }}</div>-->
        <!--              <div v-else>/</div>-->
        <!--            </div>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        
        <el-table-column
          label="到期时间"
          align="center"
          prop="createTime"
          min-width="100"
        >
          <template #default="scope">
            <span>{{ scope.row.idcType == 3 ? '--' : parseTime(scope.row.validityDate, '{y}-{m}-{d}') }}</span>
          </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"
      />
    </div>
  </el-dialog>
</template>

<script setup>
import { idcTypeList, idcFilter, dateEnd } from '@/utils/ruoyi'
import { reactive } from '@vue/runtime-core'
import { getCurrentInstance, ref, toRefs } from 'vue'
import { selectPageList } from '@/api/person/info'

const total = ref(0)
const list = ref([])
const regDateRange = ref([])
const validityDateRange = ref([null, null])
const payDateRange = ref([])
const show = ref(false)
const sonDeptId = ref()
const loading = ref(false)
const data = reactive({
  queryParams: {}
})
const defaultTime = ref(new Date(0, 0, 0, 23, 59, 59))
const { queryParams } = toRefs(data)
const { proxy } = getCurrentInstance()
const type = ref()
const memId = ref()

function open(params, typeVal, memIdVal) {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    sonDeptId: 1,
    perType: '1'
  }
  list.value = []
  total.value = 0
  type.value = typeVal
  memId.value = memIdVal
  queryParams.value.sonDeptId = params
  sonDeptId.value = params
  initData()
  show.value = true
}

// 获取赛会列表
async function initData() {
  if (validityDateRange.value[0] && validityDateRange.value[1] == null) return proxy.$modal.msgError('请选择过期时间范围')
  if (validityDateRange.value[0] == null && validityDateRange.value[1]) return proxy.$modal.msgError('请选择过期时间范围')
  if (validityDateRange.value[1]) validityDateRange.value[1] = dateEnd(validityDateRange.value[1])
  queryParams.value.validityDateRange = validityDateRange.value.length > 1 && validityDateRange.value[0] != null ? validityDateRange.value.toString() : null
  loading.value = true
  if (payDateRange.value.length > 0) queryParams.value.payDateRange = payDateRange.value.toString()
  if (regDateRange.value.length > 0) queryParams.value.regDateRange = regDateRange.value.toString()
  const res = await selectPageList(queryParams.value)
  list.value = res.rows
  total.value = res.total
  loading.value = false
}

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

// 重置
function resetQuery() {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    sonDeptId: sonDeptId.value,
    perType: '1'
    
  }
  payDateRange.value = []
  regDateRange.value = []
  validityDateRange.value = [null, null]
  initData()
}

function handelDownload() {
  const obj = {}
  if (type.value == 1) {
    obj.shenMemId = memId.value
  }
  if (type.value == 2) {
    obj.shiMemId = memId.value
  }
  if (type.value == 4) {
    obj.memId = memId.value
  }
  proxy.download(
    `/person/info/exportPageList`, { ...obj }, `机构人员.xlsx`
  )
}

defineExpose({
  open
  
})

</script>

<style lang="scss" scoped>
// .app-containers
.end {
  width: 200px;
}

:deep(.el-form-item) {
  margin-bottom: 10px;
}
</style>