<template>
    <view>
        <view class="fp--left" :class="{ shake: isShake }">
            <view>
                <up-checkbox-group @change="changeAgree">
                    <label>
                        <up-checkbox
                            :checked="checkedFlag"
                            shape="circle"
                            :activeColor="activeColor"
                            :inactiveColor="inactiveColor"
                        ></up-checkbox>
                    </label>
                </up-checkbox-group>
            </view>
            <view
                class="fs--15 lh--15 c666"
                style="letter-spacing: 0.3px"
                @click="changeAgree"
                >我已阅读并同意<text
                    class="blue"
                    :style="{ color: protocolColor }"
                    @click.stop="toPrivate"
                    >{{ privateText }}</text
                >
                <text v-if="protocolText">
                    及<text
                        class="blue"
                        :style="{ color: protocolColor }"
                        @click.stop="toProtocol"
                        >{{ protocolText }}</text
                    >
                </text>
            </view>
        </view>
    </view>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
interface Props {
    checked?: boolean;
    activeColor?: string;
    inactiveColor?: string;
    privateText?: string;
    privatePage?: string;
    protocolText?: string;
    protocolPage?: string;
    protocolColor?: string;
}
const props = withDefaults(defineProps<Props>(), {
    checked: false,
    protocolColor: "#02A085",
    privateText: "《隐私政策》",
    privatePage: "/pages/my/protocol/private",
    protocolText: "《服务协议》",
    protocolPage: "/pages/my/protocol/protocol",
});

const emit = defineEmits(["doChecked"]);

//是否抖动
const isShake = ref(false);

//是否勾选
let checkedFlag = ref(false);

//勾选操作
const changeAgree = (e: any) => {
    checkedFlag.value = !checkedFlag.value;
    emit("doChecked", checkedFlag.value);
};

//抖动
const shake = () => {
    isShake.value = true;
    setTimeout(() => {
        isShake.value = false;
    }, 400);
    // 手机震动
    uni.vibrateLong({
        success: function () {},
    });
};
//跳转到隐私
const toPrivate = () => {
    uni.navigateTo({
        url: props.privatePage,
    });
};
//跳转到协议
const toProtocol = () => {
    if (props.protocolPage) {
        uni.navigateTo({
            url: props.protocolPage,
        });
    }
};
onMounted(() => {
    checkedFlag.value = props.checked;
});

defineExpose({
    shake,
});
</script>
<style lang="scss" scoped>
@keyframes shake {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-10px);
    }
    100% {
        transform: translateX(10px);
    }
}

.shake {
    animation: shake 0.2s;
    animation-iteration-count: 2;
    animation-timing-function: ease-in-out;
}
</style>
