<template>
  <div v-if="show">
    <el-dialog v-model="show" width="80%" title="查看详情" @close="close">
      <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=""
          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=""
          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=""
          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=""
          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=""
          min-width="120"
        >
          <template #default="scope">
            <el-button v-if="scope.row.fileUrl" size="small" type="text" @click="handleDownload(scope.row,'fileUrl')">下载</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="所属道馆"
          align="center"
          prop="memName"
          min-width="100"
          :show-overflow-tooltip="true"
        />
      </el-table>
      <el-link v-show="false" ref="linkRef" :href="fillImgUrl(url)" :underline="false" target="_blank" />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { addInfoModeList } from '@/api/member/dataAlteration/memberInfo'
import { getCurrentInstance } from '@vue/runtime-core'
const show = ref(false)
const rangeId = ref()
const list = ref([])
const queryParams = ref({})
const loading = ref(false)
const total = ref(0)
const url = ref()
const { proxy } = getCurrentInstance()
const cardType = ref([
  { label: '身份证', value: '0' },
  { label: '港澳台通行证 ', value: '1' },
  { label: '中国护照', value: '2' },
  { label: '外国护照', value: '3' },
  { label: '其它', value: '4' },
  { label: '户口本', value: '5' }
])

function open(row) {
  queryParams.value = {
    pageNum: 1,
    pageSize: 9999
  }
  show.value = true
  queryParams.value.rangeId = rangeId.value = row
  getList()
}

async function getList() {
  loading.value = true
  const res = await addInfoModeList(queryParams.value)
  if (res.code == 200) {
    list.value = res.rows
    list.value.forEach(item => {
      item.fileUrl = JSON.parse(item.fileUrl)
    })
    total.value = res.total
    loading.value = false
    console.log(list.value)
  }
}

function handleDownload(row) {
  url.value = row.fileUrl?.[0]?.url
  proxy.$refs['linkRef'].$el.click()
}

function close() {
  show.value = false
  list.value = []
}

defineExpose({
  open
})

</script>

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

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