<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" :src="fillImgUrl(d.photo)" class="photo">
            <img v-else class="photo" src="@/assets/v1/default.png" style="object-fit: contain;background: #fff;">
            <div class="info">
              <div class="name">{{ d.name }}
                <el-image
                  v-if="d.sex=='0'||d.sex=='1'" :src="d.sex=='0'?male:female"
                  style="width: 20px;height: 20px;margin-left: 10px"
                />
              </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="&nbsp;&nbsp;注册时间：">{{
                    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" :src="fillImgUrl(d.photo)" class="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'" :src="d.sex=='0'?male:female"
                  style="width: 20px;height: 20px;margin-left: 10px"
                />
              </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', {}, 'application/pdf')
}

let queryParams = {}

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

defineExpose({
  init
})
</script>

<style lang="scss" scoped>
.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>