<template>
  <div class="records">
    <van-nav-bar fixed title="抽奖记录" left-arrow @click-left="onClickLeft" />
    <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-top">
            <div class="records__item-toptitle">{{ item.title }}</div>
            <div v-if="+item.prizeId !== 0" class="records__item-topstatus" :class="{ yet: +item.status === 0 }">{{ WRITEOFF_STATUS_TXT[+item.status] }}</div>
          </div>
          <div class="records__item-middle">
            <div class="records__item-middleimg">
              <img v-lazy="item.banner" alt="" />
            </div>
            <div class="records__item-middleinfo">
              <div class="title">{{ item.prizeName }}</div>
              <div class="time">{{ (item.drawTime * 1000) | formatDate('YYYY/MM/DD') }} 第{{ item.drawPlay }}场抽奖</div>
            </div>
          </div>
          <div class="records__item-operate">
            <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>
  </div>
</template>

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

export default {
  name: 'Records',
  components: {},
  data() {
    return {
      WRITEOFF_STATUS_TXT,
      recordList: [],
      isLoading: false,
      isRefreshing: false,
      isError: false,
      hasMore: true,
      page: 1,
      pageSize: 10
    }
  },
  computed: {
    isShowEmpty() {
      return !this.isLoading && !this.hasMore && this.recordList.length === 0
    }
  },
  watch: {
    // isShowDetail(val) {
    //   if (val) {
    //     const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    //     this.scrollTop = scrollTop
    //     return
    //   }
    //   if (!val && this.scrollTop) {
    //     this.$nextTick(() => {
    //       document.documentElement.scrollTop = document.body.scrollTop = this.scrollTop
    //       this.scrollTop = null
    //     })
    //   }
    // }
  },
  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.$router.push({
        path: '/recordDetail',
        query: {
          uin: this.$route?.query?.uin || '',
          detailId: item.id
        }
      })
    },
    onClickLeft() {
      window.history.back()
    }
  }
}
</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);
  // }
  .van-nav-bar {
    background: url('https://static-production.guangdianyun.tv/my/2.2.0/img/top-bg.bc50fdc.png');
    background-size: 100% auto;
  }
  ::v-deep .van-nav-bar__title {
    color: #fff;
  }
  ::v-deep .van-icon-arrow-left {
    color: #fff;
  }
  &__refresh {
    padding-top: 46px;
  }
  &__list {
    padding: 0 16px;
    background-color: #fff;
    &--hide-text {
      /deep/ .van-list__finished-text {
        display: none;
      }
    }
  }
  .yet {
    color: #FF753A;
  }
  &__list-item {
    display: flex;
    flex-direction: column;
    padding: 12px 0;
    box-shadow: 0px 1px 8px 1px rgba(200, 200, 200, 0.5);
    margin-top: 8px;
    border-radius: 8px;
    padding: 10px 12px;
    &:first-child {
      margin-top: 12px;
    }
  }
  &__item-middle {
    display: flex;
    overflow: hidden;
    &img {
      width: 55px;
      height: 55px;
      // border: 1px solid #dddddd;
      border-radius: 6px;
      overflow: hidden;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
    &info {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-left: 10px;
      .title {
        width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        margin-bottom: 8px;
      }
      .time {
        line-height: 18.5px;
        font-size: 13px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
      }
    }
  }
  &__item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    &title {
      width: 85%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
    }
    &status {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
    }
  }
  &__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;
    margin-bottom: 2px
  }
  &__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 {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  &__item-write-off {
    font-size: 12px;
    color: #666;
  }
  &__btn {
    height: 24px;
    color: #2e7ff9;
    .van-button__text {
      font-size: 12px;
    }
  }
  &__empty {
    width: 100%;
    height: calc(100% - 46px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #999;
    font-weight: 500;
    img {
      width: 20%;
      margin-bottom: 10px;
    }
  }
}
</style>
