<template>
	<view class="container">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">时间设置</block>
		</cu-custom>

		<view class="base-info margin-sm text-lg text-bold" @click="selectAll">每天</view>
		<view class="base-info-all margin-sm text-lg">
			<u-checkbox-group @change="checkboxGroupChange" class="text-block-list">
				<!-- <u-checkbox  @change="checkboxChange"  v-model="item.checked" v-for="(item, index) in list" :key="index" :name="item.name">{{item.name}}</u-checkbox> -->
				<view v-for="(item,index) in weekOptions" :key="index">
					<view class="text-block">
						<view class=" text-item flex justify-between align-center">
							<view class="flex-sub" style="height:100rpx;line-height: 50px;" @tap="clickWeek(index)">{{ item.label }}</view>
							<u-checkbox @change="handleWeekClick" :icon-size="40" shape="circle" active-color="#fc6035" v-model="item.checked" :name="item.id"></u-checkbox>
						</view>
						<view class="line" style="width:100%;"></view>
					</view>
				</view>
			</u-checkbox-group>
		</view>

        <view class="flex justify-center align-center btn-box text-lg">
            <view class="btn active-bg" @click="confirm">确定</view>
        </view>
	</view>
</template>

<script>
import uniIconsAnother from '@/components/uni-icons/uni-icons-another.vue';

export default {
	data() {
		return {
			weeks: '',
			sectionId: '',
			preCheckList: [],
			weekOptions: [
				{
					id: '0',
					label: '周日',
					checked: false
				},
				{
					id: '1',
					label: '周一',
					checked: false
				},
				{
					id: '2',
					label: '周二',
					checked: false
				},
				{
					id: '3',
					label: '周三',
					checked: false
				},
				{
					id: '4',
					label: '周四',
					checked: false
				},
				{
					id: '5',
					label: '周五',
					checked: false
				},
				{
					id: '6',
					label: '周六',
					checked: false
				}
			]
		};
	},
	components: {
		uniIconsAnother
	},
	created() {
		this.initData();
	},
	// 接收 上个页面传递过来的参数
	onLoad: function(option) {
		this.weeks = option.weeks;
		this.sectionId = option.sectionId;
	},
	methods: {
		initData() {
			if (this.weeks != 'undefined') {
				let preCheckList = this.weeks.split(',');
				this.preCheckList = preCheckList;
				this.weekOptions.map(week=>{
					preCheckList.map(choose=>{
						if(week.id==choose) {
							week.checked = true;
						}
					})
				})
			}
		},
		selectAll() {
			// 判断是否已全选，若已全选则全部不选，否则全选
			if (this.preCheckList.length === 7) {
				this.preCheckList = [];
				this.weekOptions.map(week=>{
					week.checked = false;
				})
			} else {
				let preCheckList = [];
				this.preCheckList = preCheckList.concat(['0', '1', '2', '3', '4', '5', '6']);
				this.weekOptions.map(week=>{
					week.checked = true;
				})
			}
		},
		clickWeek(index) {
			this.weekOptions[index].checked = !this.weekOptions[index].checked
		},
		checkboxGroupChange() {},
		// 选中 周日-周一 触发
		handleWeekClick(item) {
			console.log(item);
			let { preCheckList } = this;
			// 选择中的时候如果有这个id，就删除这一条，木有就添加
			let idx = preCheckList.indexOf(item.id);
			if (idx > -1) {
				this.preCheckList.splice(idx, 1);
			} else {
				this.preCheckList.push(item.id);
			}
		},
        //保存
		confirm() {
			let arr = []
			this.weekOptions.map(week=>{
				if(week.checked==true) {
					arr.push(week.id)
				}
			})
			console.log(arr)
            uni.$emit('handClickWeeks', { data: arr.sort() });
            uni.navigateBack({
                // 这个属性表示返回1个页面
                delta: 1
            });
			// 验证 是否已选择过
			// this.$u.api.verificationWeeks({
			// 	weekList: arr,
			// 	sectionId: this.sectionId
			// }).then(res => {
			// 	if (res.code === 200 && res.result) {
			// 		this.$u.toast('您选择的周期有重复，请重新选择');
			// 		return;
			// 	} else {
			// 		uni.$emit('handClickWeeks', { data: arr.sort() });
			// 		uni.navigateBack({
			// 			// 这个属性表示返回1个页面
			// 			delta: 1
			// 		});
			// 	}
			// });
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	font-size: 27rpx;
	line-height: 24rpx;
}
.xbtn {
	border-radius: 30px;
	border: none;
}

.base-info {
	padding: 40rpx 40rpx 40rpx 60rpx;
	background-color: #fff;
	height: 100rpx;
	border-radius: 25upx;
	color: #3b4144;
}

.base-info-all {
	margin-top: 20rpx;
	background-color: #fff;
	border-radius: 25upx;
}
.text-block-list {
	display: block !important;
}
.text-block {
	padding-left: 40rpx;
}
.text-item {
	height: 100rpx;
	/deep/ .u-icon__icon {
		font-size: 26rpx !important;
	}
}


.u-cell {
	font-size: 32rpx;
	font-weight: bold;
	color: #111;
	height: 100rpx;
}
.btn {
        width: 250rpx;
        height: 82rpx;
        line-height: 82rpx;
        text-align: center;
        background: #FFFFFF;
        border-radius: 10rpx;
        border: 2rpx solid #ED6F44;
    }
	
	.btn-box {
        width: 100%;
        position: fixed;
        bottom: 90rpx;
        left: 0;
        padding: 0 75rpx;
    }
</style>
