<template>
  <div class="winners">
    <div class="winners__wrapper">
      <dl v-for="(item, index) in winnersList" :key="index" class="winners__list">
        <dt class="winners__title">
          {{ (item.startTime * 1000) | formatDate('YYYY-MM-DD') }} 第{{ NUMBER_LIST[item.play] }}场:
        </dt>
        <dd>
          <ul class="winners__detail">
            <li v-for="(row, rowIndex) in item.list" :key="rowIndex">
              <span>{{ row.userNick }}</span>
              <span>获得了</span>
              <span>{{ row.prizeName }}</span>
            </li>
          </ul>
        </dd>
      </dl>
    </div>
    <van-loading v-if="isLoading" class="winners__loading" color="#1989fa" />
    <p v-if="isError" class="winners__warning" @click="loadData">请求失败，点击重新加载</p>
    <p v-if="!isLoading && !isError && winnersList.length === 0" class="winners__warning">暂无数据</p>
  </div>
</template>

<script>
import { getWinnersList } from '@/api/modules/winners'
import { NUMBER_LIST } from '@/utils/constant'

export default {
  name: 'Winners',
  components: {},
  props: {},
  data() {
    return {
      NUMBER_LIST,
      winnersList: [],
      isLoading: false,
      isError: false
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      this.isLoading = true
      this.isError = false
      getWinnersList({ id: this.$route?.query?.id || '' })
        .then(res => {
          const { code, errorCode, errorMessage, data } = res
          this.isLoading = false
          if (code === 200 && errorCode === 0) {
            this.winnersList = data
          } else {
            this.isError = true
            this.$toast(errorMessage)
          }
        })
        .catch(() => {
          this.isError = true
          this.isLoading = false
        })
    }
  }
}
</script>

<style lang="less" scoped>
.winners {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  overflow-y: auto;
  position: relative;
  background-color: #fff;
  &__wrapper {
    padding: 15px 27px;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  &__list {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 15px;
    &:first-child {
      margin-top: 0;
    }
    dd {
      width: 100%;
    }
  }
  &__title {
    background-color: #f2f2f2;
    color: #333;
    font-size: 12px;
    text-align: center;
    padding: 0 5px;
    height: 22px;
    line-height: 22px;
    border-radius: 4px;
    font-weight: 500;
  }
  &__detail {
    width: 100%;
    height: auto;
    background-color: #fff7f7;
    margin-top: 12px;
    padding: 12px 0;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 300px;
    li {
      width: 100%;
      height: 18px;
      line-height: 18px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: flex;
      justify-content: center;
      margin-bottom: 9px;
      &:last-child {
        margin-bottom: 0;
      }
      span {
        color: #333;
        font-size: 12px;
        &:nth-child(2) {
          margin: 0 5px;
        }
        &:last-child {
          color: #ff2e2e;
        }
      }
    }
  }
  &__loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  &__warning {
    text-align: center;
    color: #666;
    font-size: 14px;
  }
}
</style>
