<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="personInfo.name"
          min-width="130"
        >
          <template #default="scope">
            <div>
              {{ scope.row.personInfo.name }}
            </div>
            <div v-if="scope.row.oldPersonInfo" class="bg">
              <span>{{ scope.row.oldPersonInfo.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="会员编号"
          align="center"
          prop="personInfo.perCode"
          min-width="130"
          :show-overflow-tooltip="true"
        >
          <template #default="scope">
            <div>
              {{ scope.row.personInfo.perCode }}
            </div>
            <div v-if="scope.row.oldPersonInfo" class="bg">
              <span>{{ scope.row.oldPersonInfo.perCode }}</span>
            </div>
          </template>
        </el-table-column>、
        <el-table-column
          label="证件号"
          align="center"
          prop="personInfo.perCode"
          min-width="160"
          :show-overflow-tooltip="true"
        >
          <template #default="scope">
            <div>
              {{ scope.row.originIdcCode }}
            </div>
            <div v-if="scope.row.oldIdcCode" class="bg">
              <span>{{ scope.row.oldIdcCode }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="有效期"
          align="center"
          prop=""
          min-width="200"
        >
          <template #default="props">
            <div v-if="props.row.personInfo.valiDateTime&&props.row.idcType!=3">
              {{ parseTime(props.row.personInfo.beginTime, '{y}-{m}-{d}') +'~'+ parseTime(props.row.personInfo.valiDateTime, '{y}-{m}-{d}') }}
            </div>
            <div v-else>--</div>
            <div
              v-if="props.row.oldPersonInfo "
            >
              <div
                v-if="props.row.oldPersonInfo.beginTime "
                style="color: #d51515"
              >
                {{ parseTime(props.row.oldPersonInfo.beginTime, '{y}-{m}-{d}') +'~'+ parseTime(props.row.oldPersonInfo.valiDateTime, '{y}-{m}-{d}') }}
              </div>
              <div v-else>--</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="级位详情"
          align="center"
          prop=""
          min-width="140"
        >
          <template #default="scope">
            <div>
              <el-button class="btn" size="small" type="text" @click="handView(scope.row,'level')">查看</el-button>
            </div>
            <div v-if="scope.row.oldPersonInfo">
              <el-button style="color: #d51515" class="btn" size="small" type="text" @click="handView(scope.row,'olLevel')">查看</el-button>
            </div>

          </template>
        </el-table-column>
        <el-table-column
          label="段位详情"
          align="center"
          prop=""
          min-width="230"
        >
          <template #default="scope">
            <div>
              <el-button class="btn" size="small" type="text" @click="handView(scope.row,'duan')">查看</el-button>
            </div>
            <div v-if="scope.row.oldPersonInfo">
              <el-button style="color: #d51515" class="btn" size="small" type="text" @click="handView(scope.row,'olDuan')">查看</el-button>
            </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)">下载</el-button>
            <span v-else style="color: #d51515;font-size: 12px">需上传证件照等有效资料</span>
          </template>
        </el-table-column>


      </el-table>
      <el-link v-show="false" ref="linkRef" :href="fillImgUrl(url)" :underline="false" target="_blank" />
      <!--      <LeveView ref="leveView" />-->
    </el-dialog>


    <el-dialog v-model="showDialog" width="600" :title="type=='olLevel'||type=='level'?'级位详情':'段位详情'" @close="closeView">
      <el-table v-loading="loading" border :data="listView" style="width: 100%">
        <el-table-column label="序号" align="center" type="index" width="55" />
        <el-table-column
          :label="type=='olLevel'||type=='level'?'级位':'段位'"
          align="center"
          prop="level"
          min-width="100"
          :show-overflow-tooltip="true"
        >
          <template #default="scope">
            <div>{{ szToHz(scope.row.level) }}{{ type=='olLevel'||type=='level'?'级':'段' }}</div>
          </template>
        </el-table-column>
        <el-table-column
          label="证书编号"
          align="center"
          prop="certCode"
          min-width="170"
        />
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getCurrentInstance } from '@vue/runtime-core'
import { infoMergeList } from '@/api/member/mergeInfo'
// import leveView from './leveView.vue'
import { szToHz } from '/@/utils/ruoyi'
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 showDialog = ref(false)
const type = ref()
const listView = ref([])
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 infoMergeList(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
  nextTick(() => {
    proxy.$refs['linkRef'].$el.click()
  })
}


function handView(row, val) {
  type.value = val
  if (val == 'level')listView.value = row.personInfo.jiList
  if (val == 'olLevel')listView.value = row.oldPersonInfo.jiList
  if (val == 'duan')listView.value = row.personInfo.duanList
  if (val == 'olDuan')listView.value = row.oldPersonInfo.duanList
  showDialog.value = true
}

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

function closeView() {
  showDialog.value = false
  listView.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>