<template>
	<view class="user-agreement flex_center flex_cen">
		<u-checkbox-group>
			<u-checkbox name="userAuth" shape="circle" size="44" iconSize='44' @change="onChange" />
		</u-checkbox-group>
		<text>请您详细阅读并授权</text>
		<text class="special-text" @click="onVisible(true)">运匠用户协议</text>
		<text>和</text>
		<text class="special-text" @click="onVisible(true)">隐私政策</text>

		<!-- 协议详情 -->
		<view @touchmove.stop.prevent="onTouchMove">
			<u-popup :show="visible" mode="right" duration="300" :overlay="false">
				<view class="agreement-contentBox" style="width: 100%;">
					<view class="agreement-title flex_center">
						<u-icon name="arrow-left" size="48" style="margin-right: 25rpx;" @click="onVisible(false)" />
						<view class="flex_cen" style="flex-grow: 1;font-size: 38rpx; color: #2c3e50;">用户隐私协议</view>
					</view>
					<scroll-view scroll-y class="agreement-container">
						<view class="detail-title">一、位置及第三方授权</view>
						<view class="detail-content">
							您明确知悉并同意，您授权我平台通过中交兴路及关联方、第三方机构对您在平台认证的车辆进行当前位置、轨迹跟踪等定位信息查询并授权我平台及其关联方予以使用。授权时间为长期有效。
						</view>
						<view class="detail-title">二、其它</view>
						<view class="detail-content">本应用仅公司内部用户和POC演示使用</view>
					</scroll-view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'bs-userPrivacy',
		data() {
			return {
				userAuth: false, //用户是否授权
				visible: false,
			}
		},
		methods: {
			onTouchMove() {
				//防止滚动穿透
			},

			onVisible(value) {
				this.visible = value
			},

			onChange(value) {
				this.userAuth = value
				this.$emit('onAuthChange', value)
			}
		}
	}
</script>

<style lang="scss">
	.user-agreement {
		font-size: 26rpx;
		font-weight: 400;
		color: #8C8C8C;
		line-height: 37rpx;
		letter-spacing: 2rpx;
		margin: 40rpx 0 95rpx;

		.special-text {
			font-size: 28rpx;
			font-weight: bolder;
			color: #2E75E6;
			margin: 0 4rpx
		}

		.agreement-title {
			padding: 50rpx 25rpx;
		}

		.agreement-container {
			padding: 0 12rpx;
			height: calc(100vh - 148rpx);

			.detail-title {
				color: #2c3e50;
				font-weight: 400;
				padding: 10rpx 14rpx;
			}

			.detail-content {
				text-indent: 50rpx; //首行缩进
				letter-spacing: 4rpx; //字符间距
			}
		}
	}
</style>