<template>
	<view class="pageInfo">
		<!-- 自定义导航栏 -->
		<u-navbar title-color="#fff" back-icon-size="30" back-icon-color="#fff" :border-bottom="false" :background="background">
			<view class="slot-wrap">
				<view class="left-icon">
					点检任务配置
				</view>
				<!-- 新增 -->
				<view class="right-icon" @click="openAddPage">
					<u-icon name="plus-circle" size="30" color="#fff" label="新增" label-color="#fff"></u-icon>
					<uni-font-icons type="icon-sousuo" size="16" color="#fff"></uni-font-icons> 
				</view>
			</view>
		</u-navbar>
		<!-- 任务列表 -->
		<view class="pageBody">
			<view v-for="item in listData" :key="item.id" class="itemInfo">
				<view class="itemName">
					<span class="name">{{item.name}}</span>
					<u-switch size="40" v-model="item.checked"></u-switch>
				</view>
				<view class="itemName">
					<span>{{item.time}}</span>
					<span>
						<u-button v-if="item.checked==false"type="warning" size="mini" style="margin-right: 15upx;">查看</u-button>
						<u-button type="primary" size="mini" style="margin-right: 15upx;">编辑</u-button>
						<u-button type="error" size="mini">删除</u-button>
					</span>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				background: {
					// 渐变色
					backgroundImage: 'linear-gradient(45deg, rgb(85, 170, 255), rgb(21, 102, 223))'
				},
				listData:[
					{name:'夏季活动',time:'2020-05-20',checked:true,controlStatus: false},
					{name:'夏季活动',time:'2020-05-20',checked:false},
					{name:'夏季活动',time:'2020-05-20',checked:true},
					{name:'夏季活动',time:'2020-05-20',checked:false},
					]
			}
		},
		watch: {
			checked(val) {
				// 等于false，意味着用户手动关闭了switch
				if (val == false) {
					if(this.controlStatus == true) {
						this.controlStatus = false;
						return ;
					}
					// 重新打开switch，并让它处于加载中的状态
					this.checked = true;
					this.loading = true;
					// 模拟向后端发起请求
					this.getRestultFromServer();
				}
			}
		},
		methods:{
			openAddPage(){
				console.log('-------------------')
				uni.navigateTo({
					url:'/pages/spotCheckConfigure/addSpotCheck'
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
		background-color: #eee;
	}
	.slot-wrap {
			display: flex;
			align-items: center;
			/* 如果您想让slot内容占满整个导航栏的宽度 */
			flex: 1;
			/* 如果您想让slot内容与导航栏左右有空隙 */
			padding: 0 30rpx 0 0;
			color: #fff;
			font-size: 28upx;
			.left-icon{
				flex-grow: 1;
				font-size: 32upx;
			}
			.right-icon{
				padding-left:50upx;
			}
			.uni-icons{
				margin-right: 10upx;
			}
		}
		.pageBody{
			.itemInfo{
				margin: 20upx;
				background-color: #fff;
				border-radius: 3px;
				.itemName{
					padding: 25upx 35upx;
					display: flex;
					justify-content: space-between;
				}
				.itemName:first-child{
					border-bottom: 1px solid #f8f8f8;
				}
			}
			
			
			
		}
</style>
