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