<template>
  <div>
    <div class="forPc">
      <el-row>
        <el-col v-for="(d,i) in listData" :key="i" :lg="24" :sm="24">
          <div class="person-item">
            <img v-if="d.photo" class="photo" :src="fillImgUrl(d.photo)">
            <img v-else class="photo" style="object-fit: contain;background: #fff;" src="@/assets/v1/default.png">
            <div class="info">
              <div class="name">{{ d.name }}
                <el-image v-if="d.sex=='0'||d.sex=='1'" style="width: 20px;height: 20px;margin-left: 10px" :src="d.sex=='0'?male:female" />
              </div>
              <div class="flex">
                <div>
                  <el-form-item label="会员编号：">{{ d.perCode }}</el-form-item>
                  <el-form-item label="出生日期：">{{ parseTime(d.birth,'{y}-{m}-{d}') }}</el-form-item>
                </div>
                <div>
                  <el-form-item label="&ensp;&ensp;注册时间：">{{ parseTime(d.createTime,'{y}-{m}-{d}') }}</el-form-item>
                  <el-form-item label="有效期截止：">{{ parseTime(d.validityDate,'{y}-{m}-{d}')||'--' }}</el-form-item>

                </div>
                <div style="width: 170px">
                  <!--                  <div v-if="d.canDownCert=='1'" class="vipDownLoad" @click="vipDownLoad(d.perId)">-->
                  <!--                    <i />会员证-->
                  <!--                  </div>-->
                </div>
              </div>

            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="forWei">
      <el-row>
        <el-col v-for="(d,i) in listData" :key="i" :lg="24" :sm="24">
          <div class="person-item">
            <img v-if="d.photo" class="photo" :src="fillImgUrl(d.photo)">
            <img v-else src="@/assets/v1/default.png">
            <div class="info">
              <div class="name">{{ d.name }}
                <el-image v-if="d.sex=='0'||d.sex=='1'" style="width: 20px;height: 20px;margin-left: 10px" :src="d.sex=='0'?male:female" />
              </div>

              <div>
                <el-form-item label="编号：">{{ d.perCode }}</el-form-item>
                <el-form-item label="出生日期：">{{ parseTime(d.birth,'{y}-{m}-{d}') }}</el-form-item>
                <el-form-item label="注册时间：">{{ parseTime(d.createTime,'{y}-{m}-{d}') }}</el-form-item>
                <el-form-item label="有效期截止：">{{ parseTime(d.validityDate,'{y}-{m}-{d}') }}</el-form-item>
              </div>
              <div v-if="d.canDownCert=='1'" class="vipDownLoad" @click="vipDownLoad(d.perId)">
                <i />会员证
              </div>
            </div>

          </div>
        </el-col>
      </el-row></div>
    <div v-if="!loading" class="text-center pd20">
      <el-divider>
        <span v-if="showMore" @click="handleQuery">加载更多</span>
        <span v-else>没有更多了</span>
      </el-divider>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import * as authentic from '@/apiPc/authentic'
import _ from 'lodash'
import male from '@/assets/images/male.png'
import female from '@/assets/images/female.png'
import { getCurrentInstance } from '@vue/runtime-core'

const { proxy } = getCurrentInstance()

const props = defineProps({
  query: {
    required: true,
    type: Object,
    default: () => {}
  }
})

const listData = ref([])
const showMore = ref(false)
const loading = ref(false)
function handleQuery() {
  loading.value = true
  queryParams.pageNum++

  authentic.query(queryParams).then((res) => {
    _.each(res.data.personalList.rows, (r) => {
      listData.value.push(r)
    })

    showMore.value = listData.value.length < res.data.personalList.total
    loading.value = false
  })
}

function vipDownLoad(perId) {
  proxy.download(`/person/info/downStuCert/${perId}`, {}, '会员证.pdf')
}

let queryParams = {}
function init() {
  queryParams = {
    pageNum: 0,
    pageSize: 10,
    label: '2',
    name: props.query.name
  }
  listData.value = []

  handleQuery()
}
defineExpose({
  init
})
</script>

<style scoped lang="scss">
.flex{display: flex;justify-content: space-between;}
  .person-item{position:relative;
    display: flex;margin: 30px 0;background: #F5F7F9;
    border-radius: 2px;padding: 10px 20px;
    .photo{width: 100px; height: 130px}
    .info{margin-left: 20px;width: 90%;
      .name{font-size: 24px;display: flex;align-items: center;
        margin: 10px 0;}
      .el-form-item--default{margin-bottom: 0;}
    }
    .el-form-item__content{
      font-size: 18px;
      color: #95A1A6;}
  }
  @media (max-width: 500px) {
    .forWei{background: #F7F8FA;}
    .person-item{margin: 15px 0;background: #fff;
      .photo{width: 120px;height: 140px;}
      .info{margin-left: 15px;
        .name{font-size: 18px}
      }
    }
    :deep(.el-form-item--default .el-form-item__label){
      padding: 0;
    }
  }
</style>