<template>
    <div>
        <!-- 投币-币不够 -->
        <div class="pop-box flexflex flexcolumn" v-if="popState == 'coinNo'" @click="handlePopCancel()">
            <div class="coin-insufficient pop-box-box" @click.stop="">
                <div class="coin-close flexcenter" @click="handlePopCancel()">
                    <svg-icon icon-class="gray-cross" class-name="coin-close-icom"></svg-icon>
                </div>
                <div class="insufficient-header flexcenter">
                    <svg-icon icon-class="bi" class-name="coin-img"></svg-icon>
                    {{ coinConfig.strategy.tips }}
                </div>
                <div class="strategy-btn flexcenter" @click.stop="$skipUrl(coinConfig.strategy.url)">{{
                    coinConfig.strategy.button }}
                    <svg-icon icon-class="arrowsRoundLeft" class-name="strategy-icom"></svg-icon>
                </div>
            </div>
        </div>

        <!-- 投币解锁 -->
        <div class="pop-box flexflex flexcolumn" @click="handlePopCancel()" v-if="popState == 'coindisplayuser'">
            <div class="unlockCoin-box pop-box-box" @click.stop="">
                <div class="coin-close flexcenter" @click="handlePopCancel()">
                    <svg-icon icon-class="gray-cross" class-name="coin-close-icom"></svg-icon>
                </div>
                <div class="unlockCoin-header flexacenter">
                    <svg-icon icon-class="bi" class-name="coin-img"></svg-icon>
                    投币解锁
                </div>
                <div class="unlockCoin-hint flexacenter" style="font-size: .36rem;">作者设置了阅读限制，解锁所有内容仅需 <div
                        class="unlockCoin-hint-sum">{{ info.price }}</div> 寄托币</div>
                <div class="unlockCoin-btn flexcenter" @click="postCoin()">立即解锁
                </div>
                <div class="unlockCoin-hint flexcenter">你共有 {{ mybalance }} 个寄托币</div>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    name: 'Coins',
    props: ["popState", "coinConfig", "info", "mybalance"],
    data() {
        return {
        };
    },

    mounted() {


    },

    methods: {
        handlePopCancel() {
            this.$parent.popState = ""
        },

        // 点击投币解锁
        postCoin() {
            this.$parent.postCoin()
        }


    },
};
</script>

<style lang="scss" scoped>
.pop-box-box {
    width: 100vw;
    background-color: #fff;
    border-radius: .64rem .64rem 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
}

.coin-insufficient {


    .insufficient-header {
        height: 1.4rem;
        margin-top: 1.36rem;
        margin-bottom: .9333rem;
        color: #333;
        font-size: .4rem;
    }

    .coin-img {
        margin: 0;
        margin-right: .32rem;
        padding: 0;
    }

    .strategy-btn {
        margin: 0 auto;
        width: 6.4rem;
        height: 1.28rem;
        border-radius: 2rem;
        background-color: rgba(80, 227, 194, 1);
        font-size: .48rem;
        font-weight: 650;
        margin-bottom: 1.8133rem;
    }

    .strategy-icom {
        margin-left: .1867rem;
        width: .4rem;
        height: .4rem;
    }


}



.coin-close {
    position: absolute;
    top: 0;
    right: 0;
    padding: .4rem;

    .coin-close-icom {
        width: .32rem;
        height: .32rem;
    }
}

.coin-img {
    width: 1.3333rem;
    height: 1.4667rem;
    margin-right: .2667rem;
    // padding-left: .48rem;
    // padding-top: .48rem;
}

.unlockCoin-box {
    padding-bottom: 1.4667rem;


    .unlockCoin-header {
        font-size: .48rem;
        color: #000;
        font-weight: 650;
        padding: .48rem .48rem .9333rem;
    }

    .unlockCoin-icom {
        width: 1.3333rem;
        height: 1.4667rem;
        margin-right: .2667rem;
    }

    .unlockCoin-hint {
        font-size: .32rem;
        color: #555555;
        justify-content: center;
    }

    .unlockCoin-hint-sum {
        color: #000;
        font-weight: 650;
        font-size: .56rem;
        margin: 0 .2rem;
    }

    .unlockCoin-btn {
        width: 6.4rem;
        height: 1.28rem;
        border-radius: 2rem;
        font-size: .48rem;
        color: #000;
        font-weight: 650;
        background-color: rgb(80, 227, 194);
        margin: 1.1067rem auto .48rem;
    }

}
</style>