<template>
	<view class="listPage">
		<view class="fixedheader">
			<headers :showBack="true">
				<view class="headerName">
					巡检点
				</view>
			</headers>
			<view class="searchBox">
				<form>
					<view class="uni-form-item">
						<input class="uni-input" name="searchName" v-model="condition.search" placeholder="输入巡检点名称、所属区域、责任人" />
						<button  class="mini-btn" type="primary" size="mini"  @click="loadData">搜索</button>
					</view>
				</form>
			</view>
		</view>
		<view class="content" :style="{paddingTop: mobileTopHeight + 100 + 'px'}">
			<view class="item" v-if="listData.length>0" v-for="(item,index) in listData" :key="index"
				@click="goDetails(item)">
				<image class="safety_ic" src="@/static/icon/safety.png"></image>
				<view class="item_left">
					<view class="card_title">
						<text class="title">{{item.checkingPointName}}</text>
						<text class="value">（{{item.regionName}}）</text>
					</view>
					<view class="card_title">
						<text class="label">巡检位置：</text>
						<text class="value">{{item.position}}</text>
					</view>
					<view class="card_title">
						<text class="label">最低巡检时长(分钟)：</text>
						<text class="value">{{item.minInspectTime}}</text>
					</view>
					<view class="card_title">
						<text class="label">创建人：</text>
						<text class="value">{{item.createUserName}}</text>
						<text class="label wrap">（{{item.createDate}}）</text>
					</view>
					<view class="card_title">
						<text class="label">责任企业：</text>
						<text class="value wrap">{{item.enterpriseName}}</text>
					</view>
					<view class="card_title">
						<view class="plan_duty">
							<image src="@/static/plan_duty.png"></image>
						</view>
						<text class="label">责任人：</text>
						<text class="value">{{item.inspectUserNames}}</text>
					</view>
				</view>
				<view class="item_right">
					<image :src="url_config+'image/'+item.qrCode" class="qrcode_img"></image>
					<view class="text_wrap">
						<image class="d_ic" src="@/static/icon/riLine-download-line.svg"></image>
						<view class="d_text" @click.stop="saveImage(url_config+'image/'+item.qrCode)">下载二维码</view>
					</view>
					<view class="btn_wrap">
						<view class="common_btn primary" @click.stop="handleEdit(item)"><image class="b_ic" src="@/static/icon/edit.svg"></image></view>
						<view class="common_btn danger" @click.stop="handleDel(item)"><image class="b_ic" src="@/static/icon/delete.svg"></image></view>
					</view>
				</view>
			</view>
			<view class="noData" v-if="listData.length==0">
				<image class="noDataImg" src="../../../static/noData.png"></image>
				<view>暂无数据</view>
			</view>
		</view>
		<image class="add_btn" @click="handleAdd" src="@/static/addImg.png"></image>
	</view>
</template>

<script>
	import dateTimePiccker from '@/components/dateTimePicker/index.vue'
	
	export default {
		components: {
			dateTimePiccker
		},
		data() {
			return {
				mobileTopHeight: 0,
				listNum: 0,
				listData: [],
				condition: {
					pageNo: 1,
					pageSize: 10,
					projectSn: "",
					search: '', //搜索字段
				},
				teach: true,
			}
		},
		onLoad(option) {
			this.condition.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
		},
		mounted() {
			var that = this
			uni.getSystemInfo({
				success(res) {
					that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0;
					uni.setStorageSync('systemInfo',res)
					console.log(res)
				}
			})
			console.log('this.mobileTopHeight',this.mobileTopHeight)
		},
		onShow() {
			this.listData = [];
			this.condition.pageNo = 1;
			this.condition.pageSize = 10;
			this.getListData()
		},
		//上拉触底时间
		onReachBottom() {
			if (this.teach) {
				this.condition.pageNo = this.condition.pageNo + 1;
				// this.condition.pageNo = this.condition.pageNo;
				this.getListData();
			}
		},
		methods: {
			saveImage(url) {
				let that = this;
				uni.showLoading({
					title: "保存中..."
				})
				uni.downloadFile({
					url: url, //网络路径，下载下来  
					success: (res) => {
						if (res.statusCode === 200) {
							  uni.saveImageToPhotosAlbum({
							  	filePath: res.tempFilePath, //下载后的临时路径  
							  	success: res => { //下载完成后在相册里压根找不到  
							  		uni.hideLoading()
							  		uni.showToast({
							  			title: "保存成功！"
							  		})
							  	}
							  })
						}
					}
				})
				fetch(url)
					.then(response => response.blob())
					.then(blob => {
						// h5
						const link = document.createElement('a');
						link.href = URL.createObjectURL(blob);
						link.download = "二维码.png";
						link.target = "_blank"; // 可选，如果希望在新窗口中下载文件，请取消注释此行
						link.click();
						uni.hideLoading()
						uni.showToast({
							title: "保存成功！"
						})
					});
			},
			getListData(isSearch = false) {
				let that = this;
				let data = {
					pageNo: this.condition.pageNo,
					pageSize: this.condition.pageSize,
					projectSn: this.condition.projectSn,
					checkingPointName: this.condition.search
				};
				this.sendRequest({
					url: 'xmgl/checkingPoint/selectPage',
					method: 'post',
					data,
					success: res => {
						console.info(res,'res')
						if (res.code == 200) {
							that.listNum = res.result.total
							if(isSearch) {
								that.listData = res.result.records;
								that.teach = res.result.records.length > 0 && !(res.result.records.length < that.condition.pageSize);
							} else {
								let arr = JSON.parse(JSON.stringify(that.listData));
								if (res.result.records.length > 0) {
									let newArr = arr.concat(res.result.records);
									if (res.result.records.length < that.condition.pageSize) {
										that.teach = false;
									} else {
										that.teach = true;
									}
									that.listData = newArr;
								} else {
									that.teach = false;
								}
							}
						}
					}
				})
			},
			goDetails(data) {
				uni.navigateTo({
					url: `/pages/projectEnd/InspectionRoute/inspectionPointDetail?id=${data.id}`
				})
			},
			handleAdd() {
				uni.navigateTo({
					url: "/pages/projectEnd/InspectionRoute/editInspectionPoint"
				})
			},
			handleEdit(data) {
				uni.navigateTo({
					url: `/pages/projectEnd/InspectionRoute/editInspectionPoint?id=${data.id}`
				})
			},
			handleDel(data) {
				uni.showModal({
					title: '提示',
					content: '您确定要删除此项吗？',
					success: async (res) => {
						if (res.confirm) {
							this.sendRequest({
								url: 'xmgl/checkingPoint/delete',
								method: 'get',
								data:{id: data.id},
								success: res => {
									console.info(res,'res')
									if (res.code == 200) {
										uni.showToast({
											title: "删除成功"
										})
										setTimeout(() => {
											this.condition.pageNo = 1
											this.getListData(true)	
										}, 1000);
									}
								}
							})
						}
					}
				})
			},
			//搜索
			loadData(e) {
				// this.condition.search = e.detail.value
				this.condition.pageNo = 1
				this.getListData(true)
			},
		}
	}
</script>

<style lang="scss">
	.plan_duty {
		// background-color: #5181F6;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		// border-radius: 40rpx;
		margin-right: 6rpx;
		>image {
			width: 100%;
			height: 100%;
		}
	}
	.fixedheader {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;

		.headerName {
			z-index: 1;
		}
		/deep/ .headerBox {
			background-color: #5181F6;
			color: white;
			.uni-icons{
				color: white !important;
			}
		}
	}

	.line {
		width: 100%;
		height: 1px;
		background-color: #ccc;
		margin-top: 3%;
	}

	.searchBox {
		background-color: white;
	}

	.uni-form-item {
		position: relative;
		display: flex;
		align-items: center;
		font-size: 14px;
		/* .search-icon{
			position: absolute;
			top: 50%;
			right: 50rpx;
			transform: translateY(-50%);
		} */
	}

	.uni-input {
		border-radius: 20px;
		margin: 10px 10px;
		background-color: #f7f8fa;
		height: 35px;
		line-height: 30px;
		padding: 0 20px;
		font-size: 14px;
		flex: 1;
	}

	.screen {
		line-height: 50px;
		color: gray;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.content {
		padding: 0px 30rpx 30rpx;
		box-sizing: border-box;
		width: 100%;
	}

	.item {
		min-height: 320rpx;
		width: 100%;
		padding: 24rpx 16rpx;
		box-sizing: border-box;
		box-shadow: 0 0 10px rgba(194, 194, 194, 0.5);
		border-radius: 4px;
		margin-bottom: 30rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 32rpx;
		font-family: PingFangSC-Medium;
		display: flex;
		&:last-child {
			margin-bottom: 80rpx;
		}
	}
	.safety_ic {
		width: 23px;
		height: 23px;
		margin-right: 5px;
	}
	.item_left {
		flex: 1;
		.card_title {
			display: flex;
			align-items: flex-start;
			margin-bottom: 8rpx;
			// white-space: nowrap;
			// overflow: hidden;
			// text-overflow: ellipsis;
			&:first-child {
				margin-bottom: 16rpx;
			}
			.title {
				min-height: 40rpx;
				color: rgba(81, 129, 246, 1);
				font-size: 28rpx;
				text-align: left;
				font-weight: 600;
			}
			.value {
				min-height: 40rpx;
				color: rgba(16, 16, 16, 1);
				font-size: 26rpx;
				text-align: left;
				white-space: nowrap;
				font-family: SourceHanSansSC-regular;
				&.wrap {
					white-space: pre-wrap;
				}
			}
			.label {
				min-height: 40rpx;
				color: rgba(16, 16, 16, 0.43);
				font-size: 26rpx;
				text-align: left;
				font-family: SourceHanSansSC-regular;
				white-space: nowrap;
				&.wrap {
					white-space: pre-wrap;
				}
			}
		}
	}
	.item_right {
		flex-shrink: 0;
		width: 160rpx;
		.text_wrap {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 12rpx;
			.d_ic {
				width: 32rpx;
				height: 32rpx;
			}
			.d_text {
				color: rgba(81, 129, 246, 1);
				font-size: 20rpx;
			}
		}
		.btn_wrap {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 12rpx;
		}
	}

	.rightStatus {
		float: right;
		font-size: 12px;
		margin-top: -18px;
		width: 60px;
		height: 20px;
		text-align: center;
		border-radius: 10px;
		color: #fff;
		line-height: 18px;
	}

	.item_title {
		font-weight: 600;
		margin-bottom: 2px;
	}

	.item_content {
		width: 100%;
		font-size: 28rpx;
		color: rgba(51, 51, 51, 1);
		font-family: PingFangSC-Regular;
		line-height: 28px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		color: #999;

	}

	.item_info {
		font-size: 26rpx;
		line-height: 24px;
		font-family: PingFangSC-Regular;
		color: #999;
	}

	.state {
		padding: 0px 8px;
		color: #fff;
		box-sizing: border-box;
		border-radius: 30px;
		font-size: 24rpx;
	}

	.bg1 {
		background-color: rgba(245, 166, 35, 1);
		box-shadow: 0px 2px 0px rgba(242, 76, 50, 0.28);
	}

	.bg2 {
		background-color: rgba(88, 86, 214, 1);
		box-shadow: 0px 2px 0px rgba(87, 81, 217, 0.28);
	}

	.bg3 {
		background-color: rgba(238, 94, 94, 1);
		box-shadow: 0px 2px 0px rgba(236, 92, 98, 0.28);
	}

	.bg4 {
		background-color: rgba(76, 217, 100, 1);
		box-shadow: 0px 2px 0px rgba(68, 219, 94, 0.28);
	}

	.noData {
		text-align: center;
		font-size: 32rpx;
		margin-top: 120px;
		color: #bed0fb;
	}

	.noDataImg {
		width: 125px;
		height: 98px;
	}

	::v-deep .tki-tree-cnt {
		z-index: 99999;
		border-radius: 20px;
	}

	::v-deep .tki-tree-bar {
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
	}

	::v-deep .placeholder {
		padding-left: 40px;
	}
	.mini-btn{
		margin-right: 24rpx;
		border-radius: 15px;
		height: 30px;
		line-height: 30px;
	}
	.common_btn {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 8rpx;
		&.primary {
			background: #5181F6;
		}
		&.danger {
			background: #F26161;
		}
	}
	.b_ic {
		width: 24rpx;
		height: 24rpx;
	}
	.add_btn {
		width: 108rpx;
		height: 108rpx;
		position: fixed;
		bottom: 4rpx;
		right: 28rpx;
	}
	.qrcode_img {
		width: 160rpx;
		height: 160rpx;
	}
</style>