<template>
  <u-popup
    :show="show"
    round="40rpx"
    @open="open"
  >
    <view class="content px-30">
      <view class="flex-row">
        <u--image
          :src="current.cover || ''"
          width="212rpx"
          height="300rpx"
          radius="24rpx"
        />
        <view
          class="ml-20"
          style="justify-content: center;"
        >
          <text
            class="fs-40"
            style="color: #fff;font-weight: bold;"
          >
            {{ current.title || '' }}
          </text>
          <text
            class="fs-28 mt-20"
            style="color: #DDDDDD;"
          >
            感谢您支持作者，购买后继续观看
          </text>
          <view
            class="flex-row mt-20 mb-20"
            style="align-items: center;"
          >
            <text
              class="fs-28"
              style="color: #DDDDDD;"
            >
              我的余额:
            </text><text
              class="fs-28 mx-10"
              style="color: #DDDDDD;"
            >
              {{ current.useregold }}
            </text>
            <text
              class="fs-28"
              style="color: #DDDDDD;"
            >
              K币
            </text>
          </view>
          <view
            class="flex-row"
            style="align-items: flex-end;"
          >
            <text
              class="fs-26"
              style="color: #dddddd;"
            >
              专享价
            </text>
            <text
              class="fs-48 mx-10"
              style="color: #ffffff;font-weight: bold;"
            >
              {{ current.allprice }}
            </text>
            <text
              class="fs-24"
              style="color: #ffffff;"
            >
              K币
            </text>
          </view>
        </view>
      </view>
      <view
        class="lock flex-center mt-50"
        @click="lockAll"
      >
        <text class="lock-text">
          解锁全集
        </text>
      </view>
    </view>
  </u-popup>
</template>
<script>
import { buyall } from '@/api/index.js';
export default {
	data() {
		return {
			show: false,
			reject: null,
			resolve: null,
			current: {
				id: '',
				cover: '',
				title: '',
				useregold: 0,
				allprice: 0
			},
			timer: null
		};
	},
	methods: {
		tabClick(e) {
			if (this.tabIndex !== e.index) {
				this.tabIndex = e.index;
			}
		},
		open(data) {
			if (data) {
				this.current = data || {
					cover: '',
					title: '',
					useregold: 0,
					allprice: 0
				};
				this.show = true;
			}
		},
		close() {
			this.reject();
			this.show = false;
		},
		lockAll() {
			const params = {
				sid: this.current.sid,
				id: this.current.id,
				allprice: this.current.allprice
			};
			buyall(params).then(res => {
				if (res.status === 2) {
					uni.navigateTo({
						url: '/pages/pay/pay?sid=' + this.current.sid,
						events: {
							paySuccess: data => {
								this.current.useregold = data.egold;
								this.show=false;
							}
						}
					});
				} else if (res.status === 1) {
					this.$emit('success');
					this.show = false;
				}
			});
		}
	}
};
</script>
<style lang="scss">
.content {
	width: 750rpx;
	height: 594rpx;
	background: #ffffff;
	border-radius: 40rpx 40rpx 0px 0px;
	padding-top: 50rpx;
	background: linear-gradient(205deg, #b95b17 0%, #1a1922 100%);
	.lock {
		height: 94rpx;
		background: linear-gradient(180deg, #fba676 0%, #e95e32 100%);
		border-radius: 24rpx;
		animation: rotate 0.7s infinite;
	}
	.lock-text {
		font-size: 36rpx;
		font-weight: bold;
		color: #ffffff;
	}

	@keyframes rotate {
		0% {
			transform: scale(1);
		}
		20% {
			transform: scale(0.95);
		}
		100% {
			transform: scale(1);
		}
	}
}
</style>
