<template>
  <div>
    <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'" :src="d.sex=='0'?male:female" />
            </div>
            <div class="flex">
              <div>
                <el-form-item label="教练证号：">{{ d.perCode }}</el-form-item>
                <el-form-item label="所属省份：">{{ d.provinceName }}</el-form-item>
              </div>
              <div>
<!--                <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>
                <!--                <el-form-item label="教练类型：">{{ d.perTypeStr }}</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 v-if="!loading" class="text-center">
      <span v-if="showMore" @click="handleQuery">加载更多</span>
      <span v-else>没有更多了</span>
    </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: '4',
    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: 15px 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) {
  .person-item {
    margin: 15px 0;

    .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>