<template>
	<view>
		<view class="topTab"></view>
		<view class="page-content">
			<view class="search">
				<image @click="customNavigateBack" style="width: 40rpx;height: 40rpx;margin:0 20rpx;" src="@/static/img/back.png" mode=""></image> 
				<u-search :showAction="false" style="margin-right: 20rpx;" :input-style="inputStyle" bgColor='#F3F3F3' :searchIconSize="36" v-model="searchValue" @change="searchList" ></u-search>
				<view style="width: 20%;height: 100%;display: flex;align-items: center;justify-content: center;">
					<view class="addBtn" @click="addDevice">添加样品</view>
					<!-- <view class="addBtn" v-if="hasTeam" @click="searchList">查询</view> -->
				</view>
				
			</view>
			<view class="main-header">
				<view style="color: #A6A6A6;font-size: 24rpx;width: 110rpx;margin-left: 20rpx;">送样单位</view>
				<view style="margin:0 20rpx;font-size: 24rpx;">{{customName}}</view>
			</view>
			
			<view class="main-box">
				<!-- 列表 -->
				<view class="list-box" >
					<u-list @scrolltolower="scrolltolower" height="82vh" v-if="listData.length>0">
						<u-list-item  v-for="(item, index) in listData" :key="index">
							<view class="list-item">
								<view class="item-header">
									<view class="header-name">
										{{item.sampleTools+' '+item.devModule}}
									</view>
									<view class="header-time">
										{{item.sampleTime}}
									</view>
								</view>
								<view class="item-content">
									<view class="content-box">
										<view class="item-text">
											<text class="label">送样部门：</text>
											<text class="info">{{item.sampleDepartment}}</text>
										</view>
										<view class="item-text">
											<text class="label">样品编号：</text>
											<text class="info">{{item.devCode}}</text>
										</view>
										<view class="item-text">
											<text class="label">收样编号：</text>
											<text class="info">{{item.customerCode}}</text>
											<image src="../../static/images/del.png" @click="delDevice(item)" v-if="item.experStatus==0"  style="width: 30rpx;height: 30rpx;float: right;margin-right: 20rpx;" alt="">
										</view>
									</view>
								</view>
								<view class="item-footer">
									<view class="footer-left">
										<view style="font-size: 22rpx;">收样标签</view>
										<view class="foot-btn" @click="goSamplesCode(item)">查看</view>
									</view>
									<!-- <view class="footer-right">已打印</view> -->
								</view>
							</view>
						</u-list-item>
					</u-list>
					
					<view style="width: 100%;height: 80vh;display: flex;flex-direction:column;justify-content: center;align-items: center;" v-if="listData.length==0">
						<image src="../../static/images/noDevices.png" style="width: 60%;height: 20vh;" alt="">
						<view style="color: rgba(0, 0, 0, 0.45);">未添加样品</view>
					</view>
				</view>
			</view>
		</view>
		 
	</view>
</template>

<script>
	import { getDetailsList,delSamplesDetails,getFlag } from '@/service/url.js';
	import tabHeader from '@/components/tab-Header.vue';
	import eselect from '@/components/eselect.vue';
	import AES from "@/utils/cryptoJs/aes.js";
	export default {
		components: {
			tabHeader,
			eselect, 
		},
		data() {
			return {
				addData:{},//新增
				searchValue:'',//搜索记录 
				inputStyle:{
					fontSize:'24rpx',//修改搜索框里面的文字大小
					height:'60rpx',
				},
				batchCode:'',//编辑
				collectId:'',
				customId:'',
				customName:'',
				hasTeam:false,
 
				// 新增收样
				addPopup: false,
				addForm:{
					collectDept:'',
				},
				showDate: false,
				showDept: false,
				columns: [['曹村供电所', '王村供电所', '张村供电所', '周村供电所', '李村供电所']],
				rules: {
					'collectDept': {
						type: 'string',
						required: true,
						message: '请选择部门',
						trigger: ['blur', 'change']
					},
				},
				isFlag:true,
				listData:[],
				page:1,
 
			};
		},
		
		onLoad(option) {
			console.log(option)
			if(option.addData){
				this.addData=JSON.parse(option.addData)||{};
				this.customName=this.addData.customName;
			}else{
				this.collectId = option.id || '';
				this.customId = option.customId || '';
				this.customName = option.customName|| ''
				this.batchCode = option.batchCode|| ''
				if(option.hasTeam&&option.hasTeam!=""){
					this.hasTeam=true;
				}else{
					this.hasTeam=false;
				}
			}
			
		},
		onShow() {
			if(this.collectId&&this.collectId!=""){
				this.loadmore()
			}
		},
		methods: {
			customNavigateBack() {
				// 自定义返回逻辑
				const pages = getCurrentPages(); // 获取页面栈
				const len = pages.length;
				let backPage = ''; // 要返回的页面路径
				for (let i = len - 2; i >= 0; i--) {
					// 从倒数第二个页面开始遍历，找到第一个不是当前页面的页面
					if (pages[i].route !== 'pages/A/A') {
						backPage = pages[i].route;
						break;
					}
				}
				if (backPage) {
					uni.navigateBack({
						delta: len - 1 - pages.findIndex(page => page.route === backPage) // 返回到已存在的页面
					});
				}
			},
			searchList(value){//搜索收样记录
				// console.log(value)
				// console.log(this.searchValue)
				this.page = 1;
				this.listData=[]
				this.loadmore()
			},
			scrolltolower() {
				this.page += 1;
				this.loadmore()
			},
			loadmore() {
				let obj = {
					"keyWord":this.searchValue,
					"id":this.collectId,
					"page":this.page,
					"limit":"10"
				}
				let param = {
					encryptedData: AES.encrypt(JSON.stringify(obj))
				}
				this.$http.post(getDetailsList,param).then(res => {
					if (res) {
						console.log(res)
						if(res.code == 200){
							if(res.data?.length>0){
								if(this.page == 1){
									this.listData = res.data;
								}else{
									this.listData = [...this.listData, ...res.data];
								}
							}else{
								console.log("没有更多了")
							}
						}
					}
				}).catch(error => {
					console.log(error)
					// this.$utils.showHttpError(error)
				})
				// console.log(this.listData)
			},
			goSamplesCode(item){
				uni.navigateTo({
					url: `/pages/samples/sampleCode?customerCode=sybq/${item.customerCode}`
				})
			},
			//判断是否可操作
			hasFlag(){
				
			},
			//新增按钮触发
			addDevice(){
				if(this.collectId){
					let obj = {"id":this.collectId}
					let param = {encryptedData: AES.encrypt(JSON.stringify(obj))}
					this.$http.post(getFlag,param).then(response => {
						if (response) { 
							if(response.code == 200){
								uni.navigateTo({//修改收样批次
									url: `/pages/samples/addDevice?id=${this.collectId}&customName=${this.customName}&customId=${this.customId}&batchCode=${this.batchCode}`
								})
							}
						}
					}).catch(error => {
							uni.showToast({
								title: error.msg,
								icon: "none"
							})
					})
				}else{
					uni.navigateTo({//新建收样批次
						url: `/pages/samples/addDevice?addData=${JSON.stringify(this.addData)}`
					})
				}
				
			},  
			//为派工可删除
			delDevice(chosen){
				let obj = {"id":this.collectId}
				let param = {encryptedData: AES.encrypt(JSON.stringify(obj))}
				this.$http.post(getFlag,param).then(response => {
					if (response){
						if(response.code == 200){
							uni.showModal({
								title: '确认',
								content: '请确认是否删除该样品！',
								showCancel: true,
								cancelText: '取消',
								confirmText: '确认',
								success: res => {
									if (res.confirm) {
										let obj = {
											"id":chosen.id,
										}
										let param = {
											encryptedData: AES.encrypt(JSON.stringify(obj))
											// encryptedData: JSON.stringify(obj)
										}
										this.$http.post(delSamplesDetails,param).then(response => {
											if (response) { 
												if(response.code == '200'){
													uni.showToast({
														title: "删除成功",
														icon: "none"
													})
													this.page = 1;
													this.listData=[];
													this.loadmore()
												}else{
													uni.showToast({
														title: "删除失败",
														icon: "none"
													})
												}
											}
										}).catch(error => {
											console.log(error)
										})
									} else if (res.cancel) {}
								}
							});
						}
					}
				 }).catch(error => {})
			},
		},
	}
</script>

<style lang="scss">
	/deep/.u-popup .u-slide-right-enter-active{
		left: 0;
	}
	.searchInput{
		height: 100%;
	}
	.page-content{
		width: 100%;
		height: 96vh;
		position: absolute; 
		top: 4vh;
		padding: 0 0;
		background-color: #F3F3F3;
		.search{
			width: 100%;
			height: 120rpx;
			margin: 0rpx auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #FFF;
		}
		.addBtn{
			width: 120rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			color: #fff;
			border-radius: 30rpx;
			font-size: 20rpx;
			background-color: #0052D9;
			margin:0 20rpx;
		}
		.main-box{
			width: 100%;
			height: auto;
		}
		.main-header{
			width: 100%;
			height: auto;
			display: flex;
			align-items: center;
			background-color: #FFF;
			padding-bottom: 20rpx;
		}
		.tab-box {
			overflow: hidden;
			height: 80upx;
			.tab-item {
				float: left;
				height: 70upx;
				width: 48%;
				font-size: 30upx;
				line-height: 70upx;
				text-align: center;
			}
			.active {
				color: #333;
				border-radius: 10upx 10upx 0 0;
				font-weight: bold;
			}
			.activeLine{
				background: linear-gradient( 90deg, #50CBA1 0%, #06AEA6 100%), #5685F2;
				border-radius: 10upx;
				width: 50upx;
				height: 10upx;
				margin: 0 auto;
			}
		}
		
		.list-box{
			width: 94%;
			height: auto;
			// border: 1px solid #000;
			margin: 20rpx auto;
			
			.list-item{
				width: 100%;
				height: auto;
				background-color: #fff;
				border-radius: 20rpx;
				margin: 20rpx 0;
				
				.item-header{
					width: 100%;
					height: auto;
					line-height: 72rpx;
					font-size: 28rpx;
					border: 1px dashed #E3E9FA;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
				.header-name{
					width: 72%;
					padding:20rpx;
					// word-wrap: break-word;
					line-height: 40rpx;
				}
				.header-time{
					width: 26%;
					color: #999999;
					font-size: 20rpx;
				}
				
				.item-content{
					width: 100%;
					height: auto;
					border: 1px dashed #E3E9FA;
					font-size: 24rpx;
					
					.content-box{
						width: 94%;
						height: auto;
						margin: 20rpx;
						background-color: #F7F7F7;
						padding: 20rpx 0;
						border-radius: 10rpx;
						.item-text{
							margin-left: 20rpx;
							margin-top: 15rpx;
							.label{
								color: #999999;
							}
							.info{
								color: #373737;
							}
						}
					}
				}
				
				
				
				.item-footer{
					width: 100%;
					height: 72rpx;
					position: relative;
					.footer-left{
						width: 300rpx;
						height: 70rpx;
						display: flex;
						align-items: center;
						position: absolute;
						left: 0;
						font-size: 20rpx;
						margin-left: 40rpx;
					}
					.footer-right{
						width: 100rpx;
						height: 70rpx;
						display: flex;
						align-items: center;
						position: absolute;
						right: 0;
						color: #999999;
						font-size: 20rpx;
					}
					.foot-btn{
						width: 80rpx;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						background: rgba(0,133,255,0.05);
						border-radius: 10rpx; 
						color: #0052D9;
						font-size: 20rpx;
						margin-left: 20rpx;
					}
				}
			}
		}
	} 
	
	.submit-box {
		width: 100%;
		height: 100rpx;
		padding-bottom: 20rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFF;
		.submit-add{
			width: 80%;
			margin: 0 auto;
			height: 65rpx;
			font-size: 26rpx;
			background: #0052D9;
			box-shadow: 0px 4px 2px 0px rgba(81,147,254,0.15);
		}
	}
	 
	.add-header{
		width: 100%;
		height: 80rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
	}
	.add-form{
		width: 100%;
		height: 20vh;
		padding: 20rpx 0;
		background-color: #fff;
	}
	
	
</style>
