<template>
  <div>
    <div class="modul1">
      <ul class="tap-btn">
        <li :class="showIndex === 1 ? 'active' : ''" @click="tap(1)">持证人展示</li>
        <li :class="showIndex === 2 ? 'active' : ''" @click="tap(2)">头像上传</li>
      </ul>
    </div>
    <div class="tap-item-box" style="padding:40px 0">
      <div v-show="showIndex === 1">
        <div class="avatar-list">
          <div class="avatar-item" v-for="item in list" :key="item.id">
            <div class="content">
              <p>中国PRP持证人</p>
              <h2>{{ item.name }}</h2>
              <p>证书编号</p>
              <p style="color:#cfb181">{{ item.number }}</p>
            </div>
            <img :src="item.avatar + '?x-oss-process=image/resize,m_fill,h_360,w_300'" class="pic" />
          </div>
        </div>
        <infinite-loading @infinite="infiniteHandler"></infinite-loading>
      </div>
      <app-upload-avatar v-if="showIndex === 2"></app-upload-avatar>
    </div>
  </div>
</template>

<script>
import InfiniteLoading from 'vue-infinite-loading'
import AppUploadAvatar from './uploadAvatar.vue'
import { getAvatarList } from '@/api/my.js'
export default {
  components: { InfiniteLoading, AppUploadAvatar },
  data() {
    return {
      showIndex: 1,
      list: [],
      page: 1,
      busy: false
    }
  },
  watch: {
    '$route.query': {
      immediate: true,
      handler(query) {
        if (query.index) {
          this.showIndex = parseInt(query.index) || 1
        }
      }
    }
  },
  beforeMount() {
    // this.getAvatarList()
  },
  methods: {
    tap(n) {
      this.showIndex = n
    },
    infiniteHandler($state) {
      getAvatarList({ page: this.page, page_size: 18 }).then(response => {
        if (response.list.length) {
          this.page += 1
          this.list = this.list.concat(response.list)
          $state.loaded()
        } else {
          $state.complete()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.con970 {
  width: 970px;
  margin: 0 auto;
}
.modul1 {
  position: relative;
  width: 100%;
  height: 190px;
  background: url(https://zws-imgs-pub.ezijing.com/static/public/e5edeacd362ce7876f52c799f7e1a98d.png) center;
  background-size: cover;
  .tap-btn {
    width: 970px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    li {
      width: 128px;
      height: 36px;
      background: rgba(76, 129, 196, 1);
      margin-right: 2px;
      font-size: 16px;
      line-height: 36px;
      text-align: center;
      color: #fff;
      cursor: pointer;
      &.active {
        color: rgba(76, 129, 196, 1);
        background: #fff;
      }
    }
  }
}
.avatar-list {
  display: flex;
  flex-wrap: wrap;
  width: 970px;
  margin: 0 auto;
}
.avatar-item {
  display: flex;
  align-items: center;
  flex: 0 0 298px;
  width: 300px;
  height: 180px;
  margin-right: 20px;
  margin-bottom: 20px;
  background: url('../../assets/images/showcase_bg.png') no-repeat;
  .content {
    flex: 1;
    margin-right: 10px;
    overflow: hidden;
    color: #fff;
    padding: 10px;
    h2 {
      font-size: 20px;
      font-weight: 500;
      color: #cfb181;
      margin-bottom: 10px;
    }
    p {
      font-size: 14px;
      color: #ffffff;
    }
  }
  .pic {
    width: 150px;
    height: 100%;
    object-fit: cover;
  }
}
</style>
