<template>
	<view class="pageInfo">
		<!-- 任务列表 -->
		<view v-for="item in list" :key="item.id" class="itemInfo">
			<view class="itemName">
				<view class="name">{{ item.name }}</view>
				<view>
					<switch style="transform:scale(0.9)" v-if="$hasPermissions('B_spotConfig_enable_mobile')" :checked="item.status == 1" @change="changeItem(item)" />
				</view>
			</view>
			<view class="itemName">
				<view class="date">{{ item.startDate }} 至 {{ item.endDate }}</view>
				<view>
					<u-button v-if="$hasPermissions('B_spotConfig_view_mobile')" type="success" size="mini" @click="handetail(item)">查看</u-button>
					<u-button v-if="item.status == 0 && item.taskGenerateFlag == 0 && $hasPermissions('B_spotConfig_edit_mobile')" type="primary" size="mini" style="margin-left: 15upx;" @click="handedit(item)">编辑</u-button>
					<u-button v-if="item.status == 0 && item.taskGenerateFlag == 0 && $hasPermissions('B_spotConfig_del_mobile')" type="error" size="mini" style="margin-left: 15upx;" @click="handelete(item)">删除</u-button>
				</view>
			</view>
		</view>
		<u-empty style="padding-top: 10vh;" :text="noDataText" v-if="list.length == 0 && status != 'loading'" mode="list"></u-empty>
		<view style="padding: 20upx;" v-if="pageSize < total || status == 'loading'">
			<u-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
import { clzConfirm } from '@/libs/tools.js';
import { getCheckTaskConfigList, delCheckTaskConfig, enableCheckTaskConfig } from '@/api/checkTaskConfig.js';
export default {
	data() {
		return {
			status: 'loading',
			noDataText: '暂无数据',
			list: [],
			pageNo: 1,
			pageSize: 10,
			total: 0
		};
	},
	onLoad() {
		if(this.$hasPermissions("B_spotConfig_new_mobile")){
			// #ifdef APP-PLUS
			// 设置标题栏按钮
			let currentWebview = this.$scope.$getAppWebview();
			currentWebview.setTitleNViewButtonStyle(0, {
				text: '\ue610 新增',
				fontSize: 16,
				color: '#eee',
				width: '80px',
				fontSrc: '/static/iconfont/iconfont.ttf'
			});
			// #endif
		}
		
		// 首次加载列表
		this.getList();
		// 刷新列表
		uni.$on('updateCheckTaskConfigList', () => {
			this.getList(1);
		});
	},
	// 新增
	onNavigationBarButtonTap() {
		uni.navigateTo({
			url: '/pages/spotCheckConfigure/addSpotCheck'
		});
	},
	// 上拉分页
	onReachBottom() {
		console.log('onReachBottom');
		if (this.list.length < this.total) {
			this.getList();
		} else {
			uni.showToast({
				title: '已经到底了',
				icon: 'none'
			});
			this.status = 'nomore';
		}
	},
	methods: {
		// 获取列表
		getList(pageNo) {
			let _this = this;
			if(pageNo==1){
				this.pageNo = 1
				this.list = []
			}
			let params = {
				pageNo: this.pageNo,
				pageSize: this.pageSize
			};
			this.status = 'loading';
			getCheckTaskConfigList(params).then(res => {
				console.log(res)
				if (res.status == 200) {
					let list = res.data.list;
					if (_this.pageNo > 1) {
						_this.list = _this.list.concat(list);
					} else {
						_this.list = list;
					}
					_this.total = res.data.count;
					_this.pageNo++;
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none'
					});
					_this.noDataText = res.message;
				}
				_this.status = 'loadmore';
			});
		},
		// 启用禁用
		changeItem(item) {
			console.log(item)
			let _this = this;
			let status = item.status == 1 ? 0 : 1;
			enableCheckTaskConfig({ id: item.id, flag: status }).then(res => {
				if (res.status == 200) {
					let i = _this.list.findIndex(a => a.id == item.id);
					_this.list[i].status = status;
					_this.list.splice();
				}
				uni.showToast({
					title: res.message,
					icon: 'none'
				});
			});
		},
		// 查看详情
		handetail(item) {
			uni.navigateTo({
				url: '/pages/spotCheckConfigure/spotCheckDetail/spotCheckDetail?id=' + item.id
			});
		},
		// 编辑
		handedit(item) {
			uni.navigateTo({
				url: '/pages/spotCheckConfigure/addSpotCheck?id=' + item.id
			});
		},
		// 删除
		handelete(item) {
			const _this = this;
			clzConfirm({
				title: '提示',
				content: '确认删除,删除后数据将无法恢复?',
				success: function(res) {
					if (res.confirm || res.index == 0) {
						delCheckTaskConfig({ id: item.id }).then(ret => {
							if (ret.status == 200) {
								let i = _this.list.findIndex(a => a.id == item.id);
								_this.list.splice(i, 1);
							}
							uni.showToast({
								title: ret.message,
								icon: 'none'
							});
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f8f8f8;
	height: auto;
}
.itemInfo {
	margin: 20upx;
	background-color: #fff;
	border-radius: 3px;
	box-shadow: 1px 1px 3px #eeeeee;
	.itemName {
		padding: 25upx;
		display: flex;
		align-items: center;
		.date {
			color: #666;
		}
		> view{
			&:first-child{
				flex-grow: 1;
			}
		}
	}
	.itemName:first-child {
		border-bottom: 1px solid #f8f8f8;
		padding: 15upx 15upx 15upx 25upx;
	}
}
</style>