<template>
  <div>
    <el-table v-loading="loading" border :data="list" style="width: 100%">
      <el-table-column label="序号" align="center" type="index" width="55" />
      <el-table-column
        label="会员编号"
        align="center"
        prop="personCode"
        min-width="130"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="姓名"
        align="center"
        prop=""
        min-width="170"
      >
        <template #default="scope">
          <div class="con" :class="{'bg':scope.row.oldName!==scope.row.newName}">
            <div class=""><span>{{ scope.row.oldName }}</span></div>
            <div v-if="scope.row.oldName!==scope.row.newName" class="">变更为 <span>{{ scope.row.newName }}</span></div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="性别"
        align="center"
        prop="examPersonData.handlerDate"
        min-width="130"
      >
        <template #default="scope">
          <div class="con" :class="{'bg':scope.row.oldSex!==scope.row.newSex}">
            <div><span>{{ scope.row.oldSex==0?'男':'女' }}</span></div>
            <div v-if="scope.row.oldSex!==scope.row.newSex">变更为 <span>{{ scope.row.newSex==0?'男':'女' }}</span></div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="证件类型"
        align="center"
        prop="examPersonData.handlerDate"
        min-width="180"
      >
        <template #default="scope">
          <div class="con" :class="{'bg':scope.row.oldIdcType!==scope.row.newIdcType}">
            <div><span>{{ cardType[scope.row.oldIdcType].label }}</span></div>
            <div v-if="scope.row.oldIdcType!==scope.row.newIdcType">变更为 <span>{{ cardType[scope.row.newIdcType].label }}</span></div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="证件号"
        align="center"
        prop=""
        min-width="260"
      >
        <template #default="scope">
          <div class="con" :class="{'bg':scope.row.oldIdcCode!==scope.row.newIdcCode}">
            <div><span>{{ scope.row.oldIdcCode }}</span></div>
            <div v-if="scope.row.oldIdcCode!==scope.row.newIdcCode">变更为 <span>{{ scope.row.newIdcCode }}</span></div>
          </div>
        </template>
      </el-table-column>
      <!--      <el-table-column-->
      <!--        label="会员状态"-->
      <!--        align="center"-->
      <!--        prop="personCertStage"-->
      <!--        min-width="100"-->
      <!--      >-->
      <!--        <template #default="props">-->
      <!--          <div v-if="props.row.personCertStage==0">-->
      <!--            新会员-->
      <!--          </div>-->
      <!--          <div v-if="props.row.personCertStage==1">-->
      <!--            待提交-->
      <!--          </div>-->
      <!--          <div v-if="props.row.personCertStage==2">-->
      <!--            缴费中-->
      <!--          </div>-->
      <!--          <div v-if="props.row.personCertStage==3">-->
      <!--            正常-->
      <!--          </div>-->
      <!--          <div v-if="props.row.personCertStage==4">-->
      <!--            过期-->
      <!--          </div>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <el-table-column
        label="出生日期"
        align="center"
        prop="examPersonData.handlerDate"
        min-width="220"
      >
        <template #default="scope">
          <div class="con" :class="{'bg':scope.row.oldBirth!==scope.row.newBirth}">
            <div><span>{{ parseTime(scope.row.oldBirth, '{y}-{m}-{d}') }}</span></div>
            <div v-if="scope.row.oldBirth!==scope.row.newBirth">变更为 <span>{{ parseTime(scope.row.newBirth, '{y}-{m}-{d}') }}</span></div>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        label="所属道馆"
        align="center"
        prop="memName"
        min-width="100"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="通过时间"
        align="center"
        prop="memName"
        min-width="100"
        :show-overflow-tooltip="true"
      >
        <template #default="scope">
          <div>{{ parseTime(scope.row.range.auditTime, '{y}-{m}-{d}') }}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { queryListByPerId } from '@/api/member/detail.js'
const list = ref([])
const queryParams = ref({})
const loading = ref(false)
const total = ref(0)
const cardType = ref([
  { label: '身份证', value: '0' },
  { label: '港澳台通行证 ', value: '1' },
  { label: '中国护照', value: '2' },
  { label: '外国护照', value: '3' },
  { label: '其它', value: '4' },
  { label: '户口本', value: '5' }
])

const props = defineProps({
  userId: {}
})
onMounted(() => {
  queryParams.value.perId = props.userId
  getList()
})
async function getList() {
  loading.value = true
  const res = await queryListByPerId(queryParams.value.perId)
  if (res.code == 200) {
    list.value = res.data
    total.value = res.total
    loading.value = false
    console.log(list.value)
  }
}

</script>

<style lang="scss" scoped>
.con{
  padding: 2px;
  border-radius: 2px;
  //text-align: center;
  span{
    margin-left: 5px;
  }
}

.bg{
  color: #d51515;
}
</style>