<template>
    <view class="policy_popup">
        <uni-popup ref="popupRef" :is-mask-click="false" animation type="center">
            <view class="popup_box">
                <view class="container">
                    <view class="title">一、保修政策</view>
                    1.自您签收次日起7日内，本产品出现质量回题，经由售后服务中心检测确定,可免费享受退货或换货服务;<br />
                    2.自您签收次日起8日-15日内,本产品出现质量问题,经由售后服务中心检测确定,可免费享受换货或者维修服务;<br />
                    3.自您签收次日起12个月内，本产品出现质量问题，经由售后服务中心检测确定,可免费享受维修服务。
                    <view class="title title_2">二、非保修条例</view>
                    1.未经授权的维修、错误使用、碰撞、进液、事故、改动,不正确地使用非本产品配件，或撕毁、涂改标贴、防伪标记；<br />
                    2.已超过三包有效期；<br />
                    3.因不可抗力造成的损坏。
                </view>
                <view class="btn" @tap="tapBack"> 关闭 </view>
            </view>
        </uni-popup>
    </view>
</template>

<script setup>
import { computed, nextTick, ref, watch } from 'vue';

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false,
    },
});
const emits = defineEmits(['update:modelValue']);
const OSS_URL = import.meta.env.VITE_OSS_HOST;
const Bg = `url(${OSS_URL}/policy_bg.png)`;
const popupRef = ref();
// 点击
function tapBack() {
    popupRef.value.close();
    emits('update:modelValue', false);
}
watch(
    () => props.modelValue,
    () => {
        if (props.modelValue) {
            nextTick(() => {
                popupRef.value?.open();
            });
        }
    },
    {
        immediate: true,
        deep: true,
    },
);
</script>

<style lang="scss" scoped>
.policy_popup {
    .popup_box {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 594rpx;
        height: 876rpx;
        background-color: #fff;
        border-radius: 20rpx;
        color: #333333;

        .container {
            padding: 30rpx 30rpx 0 30rpx;
            box-sizing: border-box;
            margin-bottom: 20rpx;
            background-image: v-bind(Bg);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            font-size: 28rpx;
            line-height: 42rpx;
            overflow: auto;
            color: rgba(102, 102, 102, 1);

            .title {
                margin-bottom: 4rpx;
                font-size: 32rpx;
                font-weight: 500;
                line-height: 48rpx;
                color: rgba(51, 51, 51, 1);
            }

            .title_2 {
                margin-top: 20rpx;
            }
        }

        .btn {
            width: 100%;
            height: 108rpx;
            line-height: 108rpx;
            border-top: 1px solid #eeeeee;
            font-size: 34rpx;
            text-align: center;
            font-weight: 500;
            color: rgba(97, 93, 255, 1);
        }
    }
}
</style>
