<template>
    <view class="component-auth-agreement">
        <view @click="changeState">
            <widget-check-box :checked="state" />
        </view>
        <view class="description">
            <text class="text">我已阅读并同意</text>
            <text class="link">《服务协议》</text>
            <text class="link">《隐私政策》</text>
        </view>
    </view>
</template>

<script>
import WidgetCheckBox from "@/components/widgets/checkbox";
export default {
    name: "component-auth-agreement",
    data() {
        return {
            state: false,
        };
    },
    props: {
        agree: {
            type: Boolean,
            default: false,
        },
    },
    components: {
        WidgetCheckBox,
    },
    created() {
        this.state = this.agree;
    },
    mounted() {},
    destroyed() {},
    methods: {
        changeState() {
            this.state = !this.state;
            this.$emit("change", this.state);
            this.$emit("input", this.state);
        },
    },
};
</script>

<style lang="less" scoped>
.component-auth-agreement {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    line-height: 40rpx;
    .icon-box {
        .iconfont {
            color: #c7c7c7;
            font-size: 40rpx;
        }
    }
    .icon-box.active {
        .iconfont {
            color: #8194f2;
        }
    }
    .description {
        font-size: 22rpx;
        margin-left: 10rpx;
        .text {
            color: #333333;
        }
        .link {
            color: #8194f2;
        }
    }
}
</style>