<!-- 绑定手机号 -->
<template>
  <PubModal :is-show="isOpen" @changeVisible="changeVisible">
    <template slot="title">中奖名单</template>
    <div slot="content" class="winner-info">
      <ul>
        <li v-for="(item, index) in winnersList" :key="index">
          <span>{{ item | omitPhone }}</span>
          <span class="prize-name">{{ item.prizeName }} x 1</span>
        </li>
      </ul>
    </div>
  </PubModal>
</template>

<script>
import PubModal from '@/components/Lottery/PubModal'
import { mapGetters } from 'vuex'
import { getWinnersList } from '@/api/modules/lottery'

export default {
  name: 'BindModal',
  components: {
    PubModal
  },
  filters: {
    omitPhone(item) {
      if (item.phone) {
        return item.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
      } else {
        return item.userNick
      }
    }
  },
  props: {
    isShow: {
      default: true,
      type: Boolean
    }
  },
  data() {
    return {
      winnersList: []
    }
  },
  computed: {
    ...mapGetters({ lotteryInfo: 'lottery/lotteryInfo' }),
    isOpen: {
      get () {
        return this.isShow
      },
      set (val) {
        this.$emit('changeVisible', val)
      }
    }
  },
  watch: {
    isOpen(nVal) {
      if (nVal) {
        this.dataInit()
      }
    }
  },
  methods: {
    changeVisible(val) {
      this.isOpen = val
    },
    dataInit() {
      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)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.winner-info {
  color: #eda431;
  overflow: hidden;
  ul {
    padding: 10px 5px;
    li {
      display: flex;
      justify-content: space-between;
      span {
        font-size: 12px;
        &.prize-name {
          padding-left: 6px;
        }
      }
    }
  }
}
</style>
