<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="memCode"
          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 { getCurrentInstance } from '@vue/runtime-core'
import { infoList } from '@/api/groupMember/addAlteration'

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 infoList(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>