<template>
	<view>
		<!-- 顶部操作条 -->
		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">服务规则</block>
		</cu-custom>
		<!-- 规则内容 -->
		<view class="padding bg-white">
			<checkbox-group class="block" @change="checkRule">
				<view class="flex justify-start align-start margin-top-xs" v-for="(item, index) in masterRules">
					<checkbox style="transform:scale(0.7)" class="main-color" :checked="hasCheckedRule" value='1'>
					</checkbox>
					<text>{{item}}</text>
				</view>
			</checkbox-group>
			<view class="margin-top-xl">总结【约单迅速，上门准时，友好客气，分清责任，不踩红线，流程沟通，验收评价，完单复查，前后确认】</view>
			<!-- 操作按钮 -->
			<view class="cu-bar tabbar border shop margin-top-lg">
				<button class="cu-btn bg-main-color long-btn margin-lr-sm" type="" :disabled="hasCheckedRule"
					@click="acceptRules">{{hasCheckedRule ? '已同意' : '同意'}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				masterRules: [],
				hasCheckedRule: false,
				checkRuleArr: [],
				navigate: false
			}
		},
		onLoad(options) {
			let paramObj = JSON.parse(decodeURIComponent(options.paramObj));
			this.navigate = Boolean(paramObj.navigate) ? true : false;
			this.hasCheckedRule = Boolean(paramObj.hasCheckedRule) ? true : false;
			this.loadData();
		},
		methods: {
			async loadData() {
				this.masterRules = await this.$api.data('masterRules');
			},
			checkRule(e) {
				this.checkRuleArr = e.detail.value;
			},
			acceptRules() {
				if (this.hasCheckedRule) {
					return;
				}
				
				let checkedTimes = 0;
				for (let checked of this.checkRuleArr) {
					if (checked === '1') {
						checkedTimes++;
					}
				}
				if (checkedTimes === this.masterRules.length) {
					uni.showToast({
						icon: 'success',
						mask: true
					})
					if (this.navigate) {
						uni.navigateTo({
							url: '/pages/demand-center/accept-demand-center'
						})
					}
				} else {
					uni.showToast({
						title: '请逐条阅读，并在框内打勾，完成规则学习',
						icon: 'none',
						mask: true
					})
				}
			}
		},
	}
</script>

<style>
</style>
