<template>
  <van-popup
    v-model="visible"
    class="records-popup"
    :class="`records-popup--${theme}`"
    closeable
    swipeable
    close-icon="close"
  >
    <van-tabs v-model="active" class="records-popup__tabs" :line-width="16" @change="onChange">
      <van-tab title="抽奖记录" name="personal">
        <div class="records-popup__content">
          <div class="records-popup__list-wrapper">
            <div class="records-popup__personal-record">
              <div class="records-popup__record-content">
                <!-- <div class="records-popup__phone">
                  领奖手机号：
                  <span v-if="isBindPhone">{{ userInfo.phone }}</span>
                  <span v-else class="records-popup__bind-phone" @click="bindMobile">绑定手机号</span>
                </div> -->
                <ul v-if="Object.keys(recordList).length !== 0" class="records-popup__record-list">
                  <li v-for="(session, key, index) in recordList" :key="index">
                    <div class="records-popup__session-info">
                      <div class="records-popup__info-wrap">
                        <div style="display: flex; align-items: center">
                          <div style="margin: 0" class="records-popup__time">
                            {{ (session.drawTime * 1000) | formatDate('MM-DD') }}
                          </div>
                          <div class="records-popup__session">
                            第{{ session.drawPlay }}场 <span v-if="session.showType === 6">直播福袋</span>
                            <span v-if="session.showType === 7">直播宝箱</span>
                          </div>
                        </div>
                        <div class="records-popup__prize-name">{{ session.prizeName }}</div>
                      </div>
                    </div>
                  </li>
                </ul>
                <div v-if="Object.keys(recordList).length === 0" class="records-popup__no-data">暂无记录</div>
              </div>
            </div>
          </div>
          <div class="records-popup__jump-detail">
            <span @click="jumpDetail">查看奖品详情</span>
          </div>
        </div>
      </van-tab>
      <van-tab v-if="isShowWinnersList" title="中奖名单" name="winners">
        <div class="records-popup__winners-record">
          <div class="records-popup__record-content">
            <div class="records-popup__winners-list">
              <div v-for="(item, index) in winnersList" :key="index" class="records-popup__item">
                <div class="records-popup__time">
                  {{ (item.startTime * 1000) | formatDate('MM-DD HH:mm') }}
                  <span v-if="item.showType === 6">福袋</span>
                  <span v-if="item.showType === 7">宝箱</span>
                </div>
                <div v-for="(i, ind) in item.data" :key="ind" class="records-popup__item-user">
                  <div style="margin-bottom: 13px; width: 84.5px">{{ i.userNick }}</div>
                  <div style="margin-bottom: 13px; margin-left: 16px">获得了</div>
                  <div style="margin-bottom: 13px; margin-left: 16px; color: #fe3924">{{ i.prizeName }}</div>
                </div>
              </div>
              <div v-if="winnersList.length === 0" class="records-popup__no-data">暂无数据</div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </van-popup>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { getLotteryRecordList, getWinnersList } from '@/api/modules/lottery'
import { NUMBER_LIST } from '@/utils/constant'

export default {
  name: 'RecordsPopup',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    isShowWinnersList: {
      type: Boolean,
      default: false
    },
    activeTab: {
      type: String,
      default: 'personal'
    },
    theme: {
      type: String,
      default: 'normal'
    }
  },
  data() {
    return {
      NUMBER_LIST,
      recordList: {},
      winnersList: [],
      active: ''
    }
  },
  computed: {
    ...mapGetters({
      uin: 'users/uin',
      userInfo: 'users/userInfo',
      isBindPhone: 'users/isBindPhone',
      lotteryInfo: 'lottery/lotteryInfo',
    }),
    visible: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('setIsShowRecordsPopup', val)
      }
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.active = this.activeTab
          this.dataInit()
        }
      },
      immediate: true
    }
  },
  methods: {
    ...mapActions({ jumpToBinding: 'users/jumpToBinding' }),

    dataInit() {
      if (this.active === 'personal') {
        getLotteryRecordList({
          id: this.$route.query.id,
          uin: this.uin,
          playId: this.$route.query.sessionId
        }).then(res => {
          const { code, errorCode, errorMessage, data } = res
          if (code === 200 && errorCode === 0) {
            this.recordList = data
          } else {
            this.$toast(errorMessage)
          }
        })
      }
      if (this.active === 'winners') {
        getWinnersList({
          id: this.$route.query.id,
          uin: this.$route.query.uin
        }).then(res => {
          const { code, errorCode, errorMessage, data } = res
          if (code === 200 && errorCode === 0) {
            this.winnersList = data
          } else {
            this.$toast(errorMessage)
          }
        })
      }
    },
    onChange() {
      if (!Object.keys(this.recordList).length || !this.winnersList.length) {
        this.dataInit()
      }
    },
    bindMobile() {
      this.$toast({
        message: '正在为您转跳，请完成绑定手机操作',
        duration: 1500,
        onClose: () => {
          this.jumpToBinding()
        }
      })
    },
    jumpDetail() {
      this.$router.push({
        path: '/records',
        query: {
          uin: this.uin
        }
      })
    }
  }
}
</script>

<style lang='less' scoped>
.records-popup {
  width: 251.5px;
  height: 292px;
  background: #ffe9d8;
  border-radius: 15px;
  overflow: visible;
  font-size: 12px;
  ::v-deep .van-popup__close-icon {
    right: -22px;
    top: -20px;
    font-size: 22px;
    color: #fff;
  }
  // &--blue {
  //   background: transparent;
  //   ::v-deep .van-tabs__content {
  //     background-image: url('~@/assets/images/lottery/records-new/bg-blue.png');
  //     background-size: 100% 100%;
  //     background-repeat: no-repeat;
  //   }
  //   ::v-deep .van-tab {
  //     border-radius: 16px 16px 0 0;
  //     background-image: radial-gradient(at center bottom, #9ed5fc 30%, #fefeff);
  //     &:first-child{
  //       margin-right: 6px;
  //     }
  //     &__text {
  //       color: #93b6df;
  //     }
  //     &--active {
  //       background: #fff;
  //       .van-tab__text {
  //         color: #4787d2 !important;
  //       }
  //     }
  //   }
  //   ::v-deep .van-tabs__line {
  //     display: none;
  //   }
  // }
  &__tabs {
    padding: 8px 0 0;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    ::v-deep .van-tabs__wrap {
      display: flex;
      justify-content: center;
      height: 34px;
    }
    ::v-deep .van-tabs__nav {
      background-color: transparent;
      justify-content: center;
      width: 160px;
      .van-tab--active {
        .van-tab__text {
          color: #333;
          font-weight: 500;
          font-size: 14px;
        }
      }
    }
    ::v-deep .van-tabs__line {
      background-color: #f57641;
      border-radius: 1px;
    }
    ::v-deep .van-tabs__content {
      flex: 1;
      overflow: hidden;
      .van-tab__pane {
        width: 100%;
        height: 100%;
        padding: 5px 0;
      }
    }
  }
  &__content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-content: center;
  }
  &__list-wrapper {
    flex: 1;
    overflow: hidden;
  }
  &__personal-record {
    width: 100%;
    height: 100%;
    overflow: hidden auto;
    padding: 0 15px;
  }
  &__jump-detail {
    width: 100%;
    height: 18px;
    line-height: 18px;
    text-align: center;
    color: #ff0024;
    font-size: 12px;
    margin-top: 10px;
    margin-bottom: 8px;
  }
  &__phone {
    color: #666;
    margin-bottom: 12px;
  }
  &__bind-phone {
    color: #f57641;
  }
  &__record-list {
    margin-top: 12px;
    li {
      margin-bottom: 15px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  &__session-info {
    display: flex;
    flex-direction: column;
    &:last-child {
      .records-popup__prize-name {
        margin-bottom: 0;
      }
    }
  }
  &__info-wrap {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 18.5px;
    justify-content: space-between;
  }
  &__session {
    margin-left: 20px;
    font-size: 13px;
    color: #333;
  }
  &__time {
    font-size: 13px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 18.5px;
    margin-bottom: 13px;
  }
  &__prize-name {
    margin: 0 0 15px;
    font-size: 13px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #fe3924;
    line-height: 18.5px;
  }
  &__item {
    margin-bottom: 8px;
    &-user {
      display: flex;
      font-size: 13px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      line-height: 18.5px;
    }
  }
  &__winners-record {
    width: 100%;
    height: 100%;
    overflow: hidden auto;
    padding: 0 15px;
    .records-popup__prize-name {
      color: #f57641;
    }
  }
  &__no-data {
    color: #999;
    text-align: center;
    padding-top: 100px;
  }
}
</style>
