<template>
    <view class="goods-receive-buy-pupup">
        <uni-popup ref="popup" type="bottom">
            <view class="close iconfont icon-iconfontguanbi" @click="close"></view>
            <view class="popup-content" :style="{ paddingBottom: safeArea ? 0: '40rpx' }">
                <view class="content">
                    <!-- 商品图片 -->
                    <image src="https://picsum.photos/180/180" class="cover"></image>
                    <view class="info">
                        <!-- 数量 -->
                        <view class="row">
                            <view class="count">
                                <view class="label">数量</view>
                                <cm-number-box class="number-box" v-model="count"></cm-number-box>
                            </view>
                            <view class="clickable" @click="$emit('detail')">查看活动价</view>
                        </view>
                        <!-- 单价 -->
                        <view class="row"> <view class="label">单价</view> <view class="amount">5000.00</view> </view>
                        <!-- 券后价 -->
                        <view class="row"> <view class="tag-qh">券后价￥6000.00</view> </view>
                    </view>
                </view>
                <view class="tip">当前商品可使用<text>满199元减20</text>优惠券</view>
                <tui-button type="base" width="600rpx" height="90rpx" shape="circle">领券购买</tui-button>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    name: 'goods-receive-buy-pupup',
    data() { 
        return {
            count: 1
        }
    },
    computed: {
        ...mapGetters(['safeArea'])
    },
    watch: {
        count() {
            console.log(this.count, typeof this.count)
        }
    },
    methods: {
        open() {
            this.$refs.popup.open()
            this.$emit('open')
        },
        close() {
            this.$refs.popup.close()
            this.$emit('close')
        }
    }
}
</script>

<style>
.vue-ref {
    border-radius: 16rpx 16rpx 0 0;
    overflow: hidden;
}
</style>

<style lang="scss" scoped>
.goods-receive-buy-pupup {
    position: relative;
    .close {
        position: absolute;
        right: 24rpx;
        top: 24rpx;
        color: #999;
        font-size: 32rpx;
    }

    .popup-content {
        @extend .cm-flex-center;
        flex-direction: column;
        padding: 40rpx 32rpx;
        background-color: #fff;
        border-radius: 16rpx 16rpx 0 0;

        &::after {
            position: absolute;
            content: '';
            width: 100%;
            height: 80rpx;
            bottom: -80rpx;
            left: 0;
            background-color: #fff;
        }

        .content {
            width: 100%;
            @extend .cm-flex-between;
            justify-content: flex-start;
            .cover {
                width: 180rpx;
                height: 180rpx;
            }

            .info {
                margin-left: 24rpx;

                .row {
                    @extend .cm-flex-center;
                    justify-content: flex-start;

                    &:first-child {
                        margin-bottom: 40rpx;
                    }
                }

                .count {
                    @extend .cm-flex-center;
                    justify-content: flex-start;

                    .number-box {
                        margin: 0 24rpx;
                    }
                }

                .label {
                    font-size: 24rpx;
                    color: #666666;

                    &::after {
                        content: '：';
                    }
                }

                .clickable {
                    font-size: 26rpx;
                    color: #ff457b;
                }

                .amount {
                    font-size: 26rpx;
                    color: #ff457b;
                    font-weight: bold;

                    &::before {
                        content: '￥';
                    }
                }

                .tag-qh {
                    display: inline-block;
                    line-height: 40rpx;
                    height: 40rpx;
                    margin-top: 14rpx;
                    background: #ff457b;
                    border-radius: 25rpx;
                    padding: 0 15rpx;
                    font-size: 24rpx;
                    font-weight: bold;
                    color: #ffffff;
                }
            }
        }

        .tip {
            margin: 70rpx 0 24rpx;
            font-size: 24rpx;
            color: #666;

            text {
                color: #ff457b;
            }
        }
    }
}
</style>
