<template>
  <el-dialog
    v-if="show"
    v-model="show" title="查看详情" class="dialog" :close-on-click-modal="true"
    width="80%"
    draggable
    @close="close"
  >
    <h1 v-if="memCode" style="text-align: center;">{{ memCode }}</h1>
    <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="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="queryParams.idcType" style="width: 100%" @change="searchFN">
                  <!-- <el-option label="身份证" value="0" />
                    <el-option label="护照" value="1" /> -->
                  <el-option v-for="item in cardType" :key="item.value" :label="item.label" :value="item.value" :hidden="item.value==2" />
                </el-select>
              </el-form-item>       
            </el-col>
            <el-col :span="4">
              <el-form-item label="证件号码" prop="idcCode">
                <el-input
                  v-model="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">
              <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
                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>
      </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 v-if="props.row.idcType==0"> 身份证</div> -->
            <!-- <div v-if="props.row.idcType==1"> 护照</div> -->
            <div>{{ cardType[props.row.idcType]?.label }}</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>{{ 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 { reactive } from '@vue/runtime-core'
import { ref, toRefs } from 'vue'
import { selectPageList } from '@/api/person/info'
const total = ref(0)
const list = ref([])
const regDateRange = ref([])
const validityDateRange = ref([])
const payDateRange = ref([])
const show = ref(false)
const memCode = ref()
const showCollect = ref(true)
const sonDeptId = ref()
const loading = ref(false)
const data = reactive({
  queryParams: { }
})

const cardType = ref([
  { label: '身份证', value: '0' },
  { label: '港澳台通行证', value: '1' },
  { label: '中国护照', value: '2' },
  { label: '外国护照', value: '3' },
  { label: '其它', value: '4' }
])
const { queryParams } = toRefs(data)

function open(params) {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    sonDeptId: 1,
    perType: '1'
  }
  memCode.value = params.memCode
  queryParams.value.sonDeptId = params
  sonDeptId.value = params
  initData()
  show.value = true
}

// 获取赛会列表
async function initData() {
  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()
  if (validityDateRange.value.length > 0) queryParams.value.validityDateRange = validityDateRange.value.toString()
  console.log(queryParams.value)

  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 = []
  initData()
}
const close = () => {
  show.value = false
  queryParams.value = {}
  list.value = []
  total.value = 0
}

defineExpose({
  open
  
})

</script>

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

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