<template>
  <div class="records" :class="{ 'records--scale': isShowDetail }">
    <van-pull-refresh v-model="isRefreshing" class="records__refresh" @refresh="onRefresh">
      <van-list
        v-model="isLoading"
        class="records__list"
        :class="{ 'records__list--hide-text': isShowEmpty }"
        :finished="!hasMore"
        error-text="请求失败，点击重新加载"
        finished-text="没有更多了"
        :error.sync="isError"
        @load="loadData"
      >
        <div v-for="item in recordList" :key="item.id" class="records__list-item">
          <div class="records__item-img">
            <img v-lazy="item.banner" alt="" />
          </div>
          <div class="records__item-info">
            <div class="records__info-wrap">
              <div class="records__item-name">{{ item.title }}</div>
              <div class="records__item-subs">
                {{ (item.drawTime * 1000) | formatDate('YYYY/MM/DD') }} 第{{ item.drawPlay }}场抽奖
              </div>
            </div>
            <div class="records__item-prize">{{ item.prizeName }}</div>
          </div>
          <div class="records__item-operate">
            <span class="records__item-write-off">{{ WRITEOFF_STATUS_TXT[+item.status] }}</span>
            <van-button class="records__btn" round @click="openPopup(item)">查看详情</van-button>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
    <div v-if="isShowEmpty" class="records__empty">
      <img
        src="data:image/png;base64,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"
        alt=""
      />
      您还没有抽奖记录
    </div>
    <DetailPopup :id="detailId" v-model="isShowDetail"></DetailPopup>
  </div>
</template>

<script>
import { getRecordList } from '@/api/modules/records'
import { WRITEOFF_STATUS_TXT } from '@/utils/constant'

export default {
  name: 'Records',
  components: {
    DetailPopup: () => import('@/components/Records/DetailPopup')
  },
  data() {
    return {
      WRITEOFF_STATUS_TXT,
      recordList: [],
      isLoading: false,
      isRefreshing: false,
      isError: false,
      hasMore: true,
      page: 1,
      pageSize: 10,
      isShowDetail: false,
      detailId: null
    }
  },
  computed: {
    isShowEmpty() {
      return !this.isLoading && !this.hasMore && this.recordList.length === 0
    }
  },
  methods: {
    loadData() {
      const { page: currentPage, pageSize: num, recordList: currentList } = this
      if (!this.hasMore) {
        return
      }
      getRecordList({ uin: this.$route?.query?.uin || '', page: this.page, num })
        .then(res => {
          const { code, errorCode, errorMessage, data } = res
          this.isLoading = false
          this.isRefreshing = false
          this.isError = false
          if (code === 200 && errorCode === 0) {
            this.recordList = [...currentList, ...data]
            this.page = currentPage + 1
            if (!data?.length) {
              this.hasMore = false
            }
          } else {
            this.isLoading = false
            this.isError = true
            this.$toast(errorMessage)
          }
        })
        .catch(() => {
          this.isLoading = false
          this.isError = true
        })
    },
    onRefresh() {
      this.isError = false
      this.isRefreshing = true
      this.hasMore = true
      this.recordList = []
      this.page = 1
      this.loadData()
    },
    openPopup(item) {
      this.isShowDetail = true
      this.detailId = item.id
    }
  }
}
</script>

<style lang="less" scoped>
.records {
  width: 100%;
  height: 100%;
  transition: all 0.5s;
  background-color: #fff;

  &--scale {
    border-radius: 10px;
    overflow: hidden;
    transform: scale(0.96);
  }
  &__list {
    padding: 0 16px;
    background-color: #fff;
    &--hide-text {
      /deep/ .van-list__finished-text {
        display: none;
      }
    }
  }
  &__list-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
  }
  &__item-img {
    width: 55px;
    height: 55px;
    border: 1px solid #dddddd;
    border-radius: 6px;
    overflow: hidden;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  &__item-info {
    flex: 1;
    overflow: hidden;
    height: 55px;
    display: flex;
    flex-direction: column;
    padding: 0 10px;
  }
  &__info-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  &__item-name {
    width: 100%;
    color: #000;
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-height: 15px;
    line-height: 15px;
  }
  &__item-subs {
    flex: 1;
    color: #666;
    font-size: 12px;
    padding-top: 2px;
  }
  &__item-prize {
    color: #ff2a2a;
    font-size: 12px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 16px;
  }
  &__item-operate {
    height: 55px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }
  &__item-write-off {
    font-size: 12px;
    color: #666;
  }
  &__btn {
    height: 24px;
    color: #2e7ff9;
    .van-button__text {
      font-size: 12px;
    }
  }
  &__empty {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #999;
    font-weight: 500;
    img {
      width: 40%;
      margin-bottom: 10px;
    }
  }
}
</style>
