<template>
    <view class="goods-return-instructions">
        <view class="section">
            <view class="checkbox">
                <checkbox-group @change="onCheckBoxGroupChange">
                    <label>
                        <checkbox value="agreement" v-show="false" />
                        <view class="iconfont" :class="[isActive ? 'icon-xuanze' : 'icon-weixuanze']"></view>
                    </label>
                </checkbox-group>
            </view>
            <view class="label">
                提交订单前，请先阅读
                <text @click="popupShow = true">《特殊商品退货须知》</text>
            </view>
        </view>
        <view class="mask" v-if="popupShow"></view>
        <uni-transition :show="popupShow" ref="ani">
            <template>
                <view class="popup-content">
                    <view class="close iconfont icon-iconfontguanbi" @click="popupShow = false"></view>
                    <view class="title">特殊商品退货须知</view>
                    <scroll-view :scroll-y="true" class="content"><view v-html="content"></view></scroll-view>
                    <view class="confirm">
                        <tui-button type="base" width="420rpx" height="84rpx" shape="circle" @click="popupShow = false">
                            确定
                        </tui-button>
                    </view>
                </view>
            </template>
        </uni-transition>
    </view>
</template>

<script>
export default {
    props: {
        content: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            popupShow: false,
            checkedList: []
        }
    },
    computed: {
        isActive() {
            return this.checkedList.indexOf('agreement') > -1
        }
    },
    methods: {
        onShowDetail() {
            this.popupShow = true
        },
        close() {
            this.popupShow = false
        },
        onCheckBoxGroupChange(e) {
            this.checkedList = e.detail.value
            this.$emit('change', this.isActive)
        }
    }
}
</script>

<style lang="scss" scoped>
.goods-return-instructions {
    background-color: #fffaf8;
    .section {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        height: 64rpx;
        padding: 0 32rpx;
        color: #333333;
        border-bottom: 1px solid #eee;
        box-sizing: border-box;
        text {
            color: #1890f9;
        }
        .checkbox {
            margin-right: 16rpx;
        }
        .icon-weixuanze {
            color: #b2b2b2;
        }

        .icon-xuanze {
            color: #f83c6c;
        }
    }
}

.mask {
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 996;
}

.popup-content {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 580rpx;
    box-sizing: border-box;
    padding: 40rpx 50rpx 30rpx;
    background-color: #fff;
    border-radius: 16rpx;
    z-index: 997;

    .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;
        margin-top: 50rpx;
        max-height: 200rpx;
        color: #333333;
    }
    .confirm {
        display: flex;
        justify-content: center;
        margin: 50rpx auto 0;
    }
}
</style>
