<template>
  <div class="better-scroll wrapper" ref="wrapper">
    <ul>
      <li class="list" v-for="(item, index) in listData" :key="index">
        <div class="top-wrap">
          <div class="info-wrap">
            <div class="avatar">
              <img :src="item.partnerImgUrl" alt="">
            </div>
            <p class="name">
              <span>{{ item.partnerName }}</span>
              <span>{{ item.contractEndTime }}到期</span>
            </p>
          </div>
          <a class="contact-wrap" :href="'tel:' + item.partnerPhone">
            <span>{{ item.partnerPhone }}</span>
            <img src="../image/btn_phone@2x.png" alt="">
          </a>
        </div>
        <a class="bottom-wrap border-top-1px" href="javascript:;" @click="funGetGoodsDetail(item)">
          <span>他(她)的业绩</span>
          <img src="../image/btn_next@2x.png" alt="">
        </a>
      </li>
      <li class="load-status" v-if="listData.length && booFetchData">
        <p>{{ arrFetchStatus[numFetchStatus] }}</p>
      </li>
      <li class="bitmap" v-if="!listData.length && booFetchData">
        <p>暂无记录</p>
      </li>
    </ul>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import { Toast } from 'vant'
import { mapGetters } from 'vuex'
import { partnerList } from '../api'

const PAGESIZE = 20
export default {
  name: 'mains',
  data () {
    return {
      pager: {
        pagenum: 1,
        pagesize: PAGESIZE,
        pagecount: 1
      },
      listData: [],
      scroll: null,
      numFetchStatus: 0,
      arrFetchStatus: ['正在加载，请稍后～', '上拉加载更多', '没有更多了', '出错啦'],
      booFetchData: false
    }
  },
  activated () {
    if (!this.$route.meta.isUseCache) {
      this.pager = {
        pagenum: 1,
        pagesize: PAGESIZE,
        pagecount: 1
      }
      this.listData = []
      this.numFetchStatus = 0
      this.booFetchData = false
      this.funFetch()
    } else {
      this.$nextTick(() => {
        if (this.scroll) {
          this.scroll.refresh()
        }
      })
    }
    this.$route.meta.isUseCache = false
  },
  computed: {
    ...mapGetters({
      search: 'business/searchValueOfPartner',
      isSearchOfPartner: 'business/isSearchOfPartner'
    })
  },
  watch: {
    isSearchOfPartner: {
      handler: function (newVal) {
        if (!newVal) {
          return
        }
        this.pager = {
          pagenum: 1,
          pagesize: PAGESIZE,
          pagecount: 1
        }
        this.listData = []
        this.numFetchStatus = 0
        this.booFetchData = false
        this.funFetch()
      }
    }
  },
  methods: {
    funFetch () {
      const vm = this
      vm.numFetchStatus = 0
      // 搜索按钮置为默认状态
      if (this.isSearchOfPartner) {
        vm.$store.dispatch('business/setIsSearchOfPartner', 0)
      }
      partnerList(vm.pager.pagenum, vm.pager.pagesize, this.search).then(response => {
        if (response.status) {
          const data = response.data
          const temp = data.data
          vm.pager.pagecount = Math.ceil(data.count / PAGESIZE)
          vm.pager.pagenum++
          vm.booFetchData = true
          if (vm.pager.pagecount <= 1) {
            vm.numFetchStatus = 2
          } else {
            vm.numFetchStatus = 1
          }
          if (temp.length) {
            vm.listData = vm.listData.concat(temp)
            vm.$nextTick(() => {
              if (!vm.scroll) {
                vm.scroll = new BScroll(vm.$refs.wrapper, {
                  click: true,
                  pullUpLoad: {
                    threshold: -20
                  },
                  scrollbar: true
                })
                vm.scroll.on('pullingUp', () => {
                  if (vm.pager.pagenum > vm.pager.pagecount) {
                    vm.numFetchStatus = 2
                    return
                  }
                  vm.funFetch()
                })
              } else {
                vm.scroll.refresh()
                vm.scroll.finishPullUp()
              }
            })
          }
        } else {
          Toast(response.msg)
          vm.numFetchStatus = 3
        }
      }).catch(() => {
        Toast('出错啦')
        vm.numFetchStatus = 3
      })
    },
    funGetGoodsDetail (item) {
      this.$router.push({ path: `/partner/sale?id=${item.id}` })
    }
  },
  beforeDestroy () {
    if (this.scroll) {
      this.scroll.destroy()
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  position: relative;
  width: 100%;
  height: calc(100vh - 242px);
  overflow: hidden;

  ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-bottom: 200px;
  }
}

.list {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 343px;
  margin-bottom: 16px;
  background: #FFF;
  border-radius: 8px;

  &:nth-last-child(1) {
    margin-bottom: 0;
  }
}

.top-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 313px;
  padding: 16px 0 17px;
}

.info-wrap {
  display: flex;
  align-items: center;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;

  img {
    display: block;
    width: 100%;
  }
}

.name {
  display: flex;
  flex-direction: column;
  margin-left: 12px;

  span:nth-of-type(1) {
    line-height: 22px;
    font-size: 16px;
    font-weight: 500;
    color: #333;
  }

  span:nth-of-type(2) {
    margin-top: 8px;
    line-height: 17px;
    font-size: 12px;
    color: #666;
  }
}

.contact-wrap {
  display: flex;
  align-items: center;

  span {
    line-height: 17px;
    font-size: 12px;
    color: #999;
  }

  img {
    width: 24px;
    height: 24px;
    margin-left: 9px;
  }
}

.bottom-wrap {
  display: flex;
  justify-content: space-between;
  width: 313px;
  padding: 10px 0;
  @include border-top-1px(#E8E8E8);

  span {
    line-height: 17px;
    font-size: 12px;
    color: #333;
  }

  img {
    width: 22px;
    height: 22px;
  }
}

.load-status {
  margin-top: 12px;

  p {
    line-height: 20px;
    font-size: 14px;
    color: #666;
    text-align: center;
  }
}

.bitmap {
  p {
    line-height: 22px;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    color: #333;
  }
}
</style>
