<template>
  <div>
    <!--    单位会员-->
    <el-row>
      <el-col v-for="(d,i) in listData" :key="i" :span="24">
        <div class="item">
          <div class="info">
            <h3>{{ d.name }}</h3>
            <p v-if="d.address">
              <el-icon color="#D2D7D9" size="16">
                <LocationFilled />
              </el-icon>
              {{ d.address }}
            </p>
            <div class="flexx">
              <div>
                <p>会员编码：{{ d.memCode }}</p>
                <p>所属省份：{{ d.provinceStr }}</p>
              </div>
              <div>
                <p>有效会员数：{{ d.personValiCount }}</p>
                <p>是否为考点：<span v-if="d.isPoints=='1'">是</span><span v-else>否</span></p>
              </div>
              <div>
                <p>有效期开始：{{ parseTime(d.createTime, '{y}-{m}-{d}') || '--' }}</p>
                <p>有效期结束：{{ parseTime(d.validityDate, '{y}-{m}-{d}') || '--' }}
                  <!--                  <span v-if="dayjs(d.validityDate).valueOf()>dayjs().valueOf()" class="green">(正常)</span>-->
                  <!--                  <span v-else class="gray">(已过期)</span>-->
                </p>
              </div>
              <div>
                <!--                <div class="vipDownLoad" @click="vipDownLoad(d.perId)">-->
                <!--                  <i />单位会员证-->
                <!--                </div>-->
              </div>
            
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div 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 { dayjs } from 'element-plus'


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

const listData = ref([])
const showMore = ref(false)

function handleQuery() {
  queryParams.pageNum++
  authentic.query(queryParams).then((res) => {
    _.each(res.data.memberInfoVoList.rows, (r) => {
      listData.value.push(r)
    })
    
    showMore.value = listData.value.length < res.data.memberInfoVoList.total
    console.log(listData.value)
  })
}

let queryParams = {}

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

defineExpose({
  init
})
</script>

<style scoped lang="scss">
.item {
  display: flex;
  padding: 30px 0 0;
  background: #f5f6f9;
  margin-bottom: 20px;
  
  .teamCarousel {
    width: 200px;
    
    .el-image {
      width: 200px;
      height: 120px;
    }
  }
  
  .info {
    margin-left: 20px;
    flex: 1;
    
    h3 {
      font-size: 20px;
      margin: 0 0 10px
    }
    
    p {
      display: flex;
      align-items: center;
      font-size: 15px;
      color: #99a4a9;
    }
    
    label {
      color: #95A1A6
    }
  }
  
  .flexx {
    display: flex;
    width: 100%;
    justify-content: space-between;
    
    p {
      margin-right: 50px;
    }
  }
  
  &:hover {
    box-shadow: 0 0 10px #ddd;
  }
}

.green {
  color: #009E96
}

.gray {
  color: #D2D7D9
}

@media (max-width: 500px) {
  .item {
    border: none;
    
    .teamCarousel {
      display: none
    }
    
    .info {
      h3 {
        font-size: 15px;
        margin: 0 0 10px;
      }
    }
    
    .flexx {
      display: block;
      
      p {
        margin: 5px 0 0;
      }
    }
  }
}
</style>