<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>
		<!-- 任务列表 -->
		<scroll-view scroll-y class="scroll-view" @scrolltolower="onreachBottom">
			<view v-for="item in listData" :key="item.id" class="itemInfo">
				<view class="itemName">
					<span class="name">{{listData.name}}</span>
					<u-switch size="40" v-model="listData.status"></u-switch>
				</view>
				<view class="itemName">
					<span>{{listData.startDate}}- {{listData.endDate}}</span>
					<span>
						<u-button v-if="listData.status==1" type="warning" size="mini" style="margin-right: 15upx;" @click="handetail">查看</u-button>
						<u-button type="primary" size="mini" style="margin-right: 15upx;" @click="handedit">编辑</u-button>
						<u-button type="error" size="mini" @click="handelete(item)">删除</u-button>
					</span>
					
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {getCheckTaskConfigList,delCheckTaskConfig,enableCheckTaskConfig,saveBackLog} from '../../api/checkTaskConfig.js'
	export default{
		data(){
			return{
				background: {
					// 渐变色
					backgroundImage: 'linear-gradient(45deg, rgb(85, 170, 255), rgb(21, 102, 223))'
				},
				status: 'loadmore',
				noDataText: '暂无数据',
				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.listData.status == 0) {
						this.listData.status = 1;
						return ;
					}
					// 重新打开switch，并让它处于加载中的状态
					this.checked = true;
					this.loading = true;
					// 模拟向后端发起请求
					this.getRestultFromServer();
				}
			}
		},
		onLoad() {
			this.getListData()
		},
		methods:{
			// 列表数据
			getListData(){
				getCheckTaskConfigList({pageNo:1,pageSize:10}).then(res=>{
					console.log(res)
					if(res.status==200){
						this.listData=res.data[0].list[0]
						this.listData.startDate=this.listData.startDate.substring(0,11)
						this.listData.endDate=this.listData.endDate.substring(0,11)
						console.log(this.listData.startDate)
					}
				})
			},
			openAddPage(){
				console.log('-------------------')
				uni.navigateTo({
					url:'/pages/spotCheckConfigure/addSpotCheck'
				})
			},
			// 查看详情
			handetail(){
				uni.navigateTo({
					url:'/pages/spotCheckConfigure/spotCheckDetail/spotCheckDetail?id=${listData.id}'
				})
			},
			// 编辑
			handedit(){
				uni.navigateTo({
					url:'/pages/spotCheckConfigure/addSpotCheck'
				})
			},
			// 删除
			handelete(item){
				const _this=this
				clzConfirm({
					title: '提示',
					content: '确认删除，删除后数据将无法恢复？',
					// success: function(res) {
					// 	if (res.confirm || res.index == 0) {
					// 		_this.isClose = true
					// 		uni.navigateBack({
					// 			delta: 1
					// 		});
					// 	}
					// }
				});
			}
		}
	}
</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;
			}
		}
		.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>
