<template>
    <view class="goods-return-instructions">
        <view class="section" @click="onShowDetail">
            <view class="label">特殊商品退货须知</view>
            <view class="iconfont icon-chakangengduo more"></view>
        </view>
        <uni-popup ref="popup" type="bottom">
            <view class="popup-content">
                <view class="close iconfont icon-iconfontguanbi" @click="close"></view>
                <view class="title">特殊商品退货须知</view>
                <view class="content" v-html="content"></view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
export default {
    props: {
        content: {
            type: String,
            default: ''
        }
    },
    methods: {
        onShowDetail() {
            this.$refs.popup.open()
        },
        close() {
            this.$refs.popup.close()
        }
    }
}
</script>

<style lang="scss" scoped>
.goods-return-instructions {
    padding: 24rpx;
    background-color: #fff;
    .section {
        @extend .cm-flex-between;
        font-size: 28rpx;
        color: #666666;

        .iconfont {
            font-size: 28rpx;
            color: #666;
        }
    }
}

.popup-content {
    position: relative;
    padding: 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;
    }

    .close {
        position: absolute;
        right: 24rpx;
        top: 24rpx;
        color: #999;
        font-size: 32rpx;
    }
    .title {
        text-align: center;
        font-size: 34rpx;
        color: #333;
        font-weight: bold;
    }
    .content {
        line-height: 42rpx;
        font-size: 26rpx;
        padding: 24rpx 0;
    }
}
</style>
