<template>
  <section class="main-timing" :style="{ backgroundPosition: isMini ? isShowBanner ? isIframe ?  '0 -190%' : '0 140px' : '0 30px' : '' }">
    <div v-if="isMini" class="main-link" @click="goRule">活动介绍</div>
    <Banner v-show="isShowBanner"></Banner>
    <TimingStatus class="timing-status-box"></TimingStatus>
    <JoinButton
      class="join-button-box"
      :style="{ bottom: isMini ? isShowBanner ? isIframe ? '22%' : '32%' : '26%' : '49%' }"
      @lottery="lotteryCallback"
    ></JoinButton>
    <Rewards v-if="!isMini" :style="{ height: isMini ? '65.5vh' : '46.5vh' }" class="reward-box"></Rewards>
    <BackButton v-if="backUrl" class="back-box" :url="backUrl"></BackButton>
    <Records v-if="isMini"></Records>
    <RulePopup :value="isShowIntro"></RulePopup>
    <WinPopup :value="isShowWin" :info="winInfo" type="treasure"></WinPopup>
    <OnlineTipPopup :value="isShowOnlineTip"></OnlineTipPopup>
    <BindPhoneDialog :value="isShowBindPhone"></BindPhoneDialog>
  </section>
</template>
<script>
import { mapGetters } from 'vuex'

// banner
// import TimingBanner from '@/components/Lottery/Timing/TimingBanner'
// 状态信息
import TimingStatus from '@/components/Lottery/Timing/TimingStatus'
// 参加按钮
import JoinButton from '@/components/Lottery/Timing/JoinButton'
// 奖品介绍
import Rewards from '@/components/Lottery/Timing/Rewards'
// 返回直播间按钮
import BackButton from '@/components/Lottery/Timing/BackButton'
// 中奖弹窗
import WinPopup from '@/components/Lottery/Timing/WinPopup'
// banner
import Banner from '../Banner.vue'
// 在线提示弹窗
import OnlineTipPopup from '@/components/Lottery/Timing/OnlineTipPopup'

export default {
  components: {
    // TimingBanner,
    TimingStatus,
    JoinButton,
    Rewards,
    BackButton,
    WinPopup,
    OnlineTipPopup,
    Banner,
    BindPhoneDialog: () => import('@/components/Common/BindPhoneDialog'),
    RulePopup: () => import('@/components/Lottery/Timing/RulePopup'),
    Records: () => import('@/components/Lottery/Instant/Records')
  },
  props: {
    isMini: {
      type: Boolean,
      default: false
    },
    isBtnLoading: {
      type: Boolean,
      default: false
    },
    isShowWin: {
      type: Boolean,
      default: false
    },
    isShowOnlineTip: {
      type: Boolean,
      default: false
    },
    isShowBindPhone: {
      type: Boolean,
      default: false
    },
    winInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
    isShowIntro: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
    }
  },
  computed: {
    ...mapGetters({
      uin: 'users/uin',
      isLogin: 'users/isLogin',
      lotteryInfo: 'lottery/lotteryInfo',
      isBindPhone: 'users/isBindPhone'
    }),
    isShowBanner() {
      const { isShowBanner } = this.lotteryInfo
      return !!isShowBanner
    },
    backUrl() {
      return this.$route.query.backUrl || ''
    },
    config() {
      const list =
        typeof this.lotteryInfo.prizeConfigs === 'object'
          ? Object.values(this.lotteryInfo.prizeConfigs)
          : this.lotteryInfo.prizeConfigs
      return list
    },
    isIframe() {
      return self !== top
    }
  },
  methods: {
    lotteryCallback() {
      this.$emit('lotteryCallback')
    },
    goRule() {
      this.$emit('goRule')
    }
  }
}
</script>
<style lang="less" scoped>
.main-timing {
  height: 100%;
  position: relative;
  padding: 20px 24px 0;
  background: url(../img/background-treasure.png) no-repeat center;
  background-size: cover;
  background-color: #FD2216;
  .main-link {
    width: 24px;
    height: 74px;
    font-size: 12px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #db0000;
    line-height: 13px;
    writing-mode: tb-rl;
    text-align: center;
    background: url(../img/link.png) no-repeat center;
    background-size: cover;
    position: absolute;
    right: 0;
    top: 20px;
    padding-right: 3px;
  }
  .timing-status-box {
    // padding-left: 16px;
    margin-top: 10px;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
  }
  .join-button-box {
    position: absolute;
    width: 92%;
    left: 50%;
    bottom: 49%;
    transform: translateX(-50%);
  }
  .back-box {
    position: absolute;
    bottom: 16px;
    left: 0;
    width: 100%;
    border-radius: 22px;
  }
  .reward-box {
    width: calc(100% - 48px);
    position: absolute;
    bottom: 3%;
  }
}
// 样式穿透
.main-timing {
  // records
  /deep/ .records {
    &__entry {
      width: 48px;
      height: 48px;
      background: #ffdccb;
      box-shadow: 0px 2px 8px 0px rgba(254, 35, 23, 0.5);
    }
    &__entry-wrap p {
      font-size: 13px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #db0000;
      line-height: 17px;
    }
  }
}
</style>
