<template>
	<view>
		<view class="serchs">
			<view class="leftbtn">
				<view class="ipt">
					<input type="text" placeholder="退货单号/退货人/退货日期" v-model="form.searchContent" @confirm="search" />
					<image src="/static/index/procurement/x.png" mode="aspectFill" v-if="form.searchContent"
						@click="search(0)"></image>
				</view>
				<view @click="search" class="scr">
					<image src="/static/index/procurement/sh.png" mode="aspectFill" class="sh"></image>
					检索
				</view>
			</view>
			<view class="rightbtn">
				<view class="back" @click="uni.navigateBack()">
					<image src="/static/index/procurement/bk.png" mode="aspectFill"></image>
					返回
				</view>
			</view>
		</view>
		<view class="t-box">
			<view class="leftscr">
				<view class="left-menu-father">
					<scroll-view scroll-y="true" scroll-with-animation class="left-menu-scroll" :scroll-top="leftscrolltop"
						 :lower-threshold="400">
						<view class="pls-card" v-for="(v,i) in plsbuy" :key='i' @click="clickLeftMenu(i,v)" :style="{
								  borderColor: i === lefttarget ? '' : 'transparent',
								  background: i === lefttarget ? '#fff' : 'rgba(255,255,255,0.6)'
								}">
				
							<text style="display: block;background: #ff5757;
							position: absolute;width: 1.3vw;height: 1.3vw;border-radius: 50%;right: -0.1vw;top: -0.1vw;"
								v-if="v.izRead=='N'"></text>
							<view class="pls-card-title">
								<view class="title-left">
									退货单号
								</view>
								<view class="title-right">
									 {{ v.thdNo }}
								</view>
							</view>
							<view class="pls-card-middle">
								<view class="middle-heng"></view>
								<view class="pls-card-middle-one">
									<view class="middle-title">
										{{ v.fqTime.replace(/-/g, '.')?.slice(0,10) }}
									</view>
									<view class="middle-heng-father">
										<image class="middle-ball-img" src="/static/index/requestform/isok.png" />
									</view>
									<view class="end-font">
										<view>
											申请退货
										</view>
										<view>
											{{ "[ " + v.fqrName + " ]" }}
										</view>
									</view>
								</view>
								 
								<view class="pls-card-middle-one">
									<view class="middle-title" v-if="v.logList[1]">
										{{ v.logList[1].opeTime?.replace(/-/g, '.').slice(0,10) }}
									</view>
									<view class="middle-heng-father">
										<image class="middle-ball-img" src="/static/index/requestform/isok.png" />
									</view>
									<view class="end-font">
										<view>
											退货完成
										</view>
										<view v-if="v.logList[1]">
											{{ "[ " + v.logList[1].opeByName + " ]" }}
										</view>
									</view>
								</view>
							</view>
							<view class="pls-card-end">
								<view class="end-left">
									<image class="end-left-img" src="/static/shili.png" />
									<view class="end-left-font">
										{{ v.nuName }}
									</view>
								</view>
								<view :class="v?.statusText" class="tag-success">
									{{v.statusText}}
								</view>
							</view>
						</view>
						<view style="height:2vw;width: 90%;display: flex;align-items: center;justify-content: center;">
							<u-loadmore :status="status" :loadText="{nomore:'暂无更多数据'}" v-if="plsbuy.length>4" />
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="rightscr">
				<scroll-view scroll-y="true" class="itembox" scroll-with-animation enable-back-to-top @scroll="scroll" :scroll-top="middletarget">
					<view class="box">
						<view class="fler" v-for="(v,index) in cardarr" :key="index">
							<view class="carditem guodu" >
								<view class="zding" v-if="v.zhiDingId">
									<image src="/static/index/procurement/zd.png" mode="aspectFill"></image>
								</view>
								<view class="speitem guodu" >
									<image :src="v.materialInfo?.materialImg?serverUrl+v.materialInfo?.materialImg:'/static/index/procurement/k.png'"
										mode="aspectFill">
									</image>
									<view class="cardp">
										<view v-if="v.materialInfo?.categoryName">{{v.materialInfo?.categoryName}}</view>
										<view v-if="v.materialInfo?.typeName">{{v.materialInfo?.typeName}}</view>
									</view>
								</view>
								<view class="msitem guodu" >
									<view>
										<view>{{v.materialInfo?.materialName}}</view>
									</view>
									<view>
										<text  style="white-space: nowrap;"> 规格型号: </text>
										<view>{{v.materialInfo?.specificationModel}}</view>
									</view>
									<view>
										<view>
											<text>{{v.thNum?v.thNum:'--'}}</text>
											<text>退货数量</text>
										</view>
										<view>
											<text>{{v.materialInfo?.materialUnits}}</text>
											<text>退货单位</text>
										</view>
									</view>
								</view>
								<view class="add"  v-if="v.isAdd==1">
									<view>已添加</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent } from 'vue';
	import { onShow, onLoad, onHide, onPageScroll } from "@dcloudio/uni-app"
	import { thcList,thdList,transRead ,thdNuMaterialList,thdMaterialList} from './api/lunpan.js'
	const serverUrl = ref(uni.getStorageSync('serverUrl') + '/sys/common/static/')
	const form = reactive({
		pageNo: 1,
		pageSize: 10,
		status:3,
		searchContent: '' 
	})
	const plsbuy = ref([])
	onLoad(() => {
		firstgetqueryCgdList();
	})
	const status = ref('loadmore')
	const plsbuytolower = () => {
		if (status.value == 'loading' || status.value == 'nomore') { return }
		status.value = 'loading';
		form.pageNo++;
		firstgetqueryCgdList();
	}
	const firstgetqueryCgdList = () => {
		thdList(form).then(res => {
			plsbuy.value.push(...res.result.records);
			status.value = res.result.total == plsbuy.value.length ? 'nomore' : 'loadmore';
			if(form.pageNo==1){
				clickLeftMenu(0,plsbuy.value[0])
			}
		})
	}
	const search = (e) => {
		if (e == 0) { form.searchContent = '' }
		form.pageNo = 1;
		plsbuy.value = [];
		firstgetqueryCgdList()
	}
	const InvoicingList = ref([]);
	const lefttarget = ref(0);
	const middletarget = ref(0);
	const leftscrolltop = ref(0);
	const cardarr = ref([])
	const clickLeftMenu = (index : any, item : object) => {
		console.log(item)
		if (lefttarget.value != index) {
			middletarget.value = sctop.value;
			nextTick(()=>{
				middletarget.value = 0;
			})
		}
		let num = Math.ceil((index + 1))
		leftscrolltop.value = (num - 2) * 186;
		lefttarget.value = index;
		thdMaterialList({ thdNo: item.thdNo }).then(res => {
			cardarr.value = res.result
		})
		if (item.izRead == 'N') {
				transReads(item, index)
			}
		}
	const sctop = ref(0)
	const scroll = (e)=>{
		sctop.value = e.detail.scrollTop
	}
	const addMaterial = ref([])
	const transReads = (v, i) => {
		transRead({ id: v.id })
		v.izRead = 'Y'
	}
	const tharrlist = ref([])
	const thlist = () => {
		thdList(form).then(res => {
			tharrlist.value=res.result.records;
		})
	}
</script>

<style scoped lang="less">
	.left-menu-father {
		width: 33vw;
		height: 84vh;
	
		.left-menu-scroll {
			height: 100%;
			width: 100%;
	
			.pls-card {
				width: 30vw;
				height: 26.5vh;
				border: #0f9fff 3rpx solid;
				background-color: #fff;
				border-radius: 40rpx;
				margin-bottom: 2vh;
				padding: 0 30rpx;
				position: relative;
	
				.pls-card-title {
					height: 7vh;
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
	
					.title-left {
						font-weight: 400;
						font-size: 1.2vw;
						color: #888888;
					}
	
					.title-right {
						font-weight: 600;
						font-size: 32rpx;
						color: #222222;
					}
				}
	
				.pls-card-middle {
					width: 100%;
					height: 11vh;
					margin-top: 1vh;
					position: relative;
					display: flex;
	
					.middle-heng {
						position: absolute;
						left: 4%;
						top: 35%;
						transform: translateY(-35%);
						width: 92%;
						height: 2px;
						background-image: repeating-linear-gradient(to right,
								#E5E5E5 0,
								#E5E5E5 6px,
								transparent 6px,
								transparent 10px);
	
					}
	
					.pls-card-middle-one {
						width: 50%;
						height: 100%;
	
						.middle-title {
							width: 100%;
							height: 2.1vh;
							color: #888888;
							text-align: center;
							font-size: 25rpx;
						}
	
						.middle-heng-father {
							width: 100%;
							height: 4vh;
							position: relative;
	
							.middle-ball-img {
								width: 35rpx;
								height: 35rpx;
								position: absolute;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%);
							}
	
							.middle-ball {
								width: 20rpx;
								height: 20rpx;
								background-color: #EEEEEE;
								position: absolute;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%);
								border-radius: 50%;
							}
						}
	
						.end-font {
							width: 100%;
							height: 6vh;
							text-align: center;
							color: #666666;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 25rpx;
						}
					}
				}
	
				.pls-card-end {
					width: 100%;
					height: 7vh;
	
					display: flex;
					justify-content: space-between;
					position: relative;
	
					.end-left {
						height: 100%;
						display: flex;
						align-items: center;
	
						.end-left-img {
							width: 30rpx;
							height: 30rpx;
						}
	
						.end-left-font {
							margin-top: 3rpx;
							width: 400rpx;
							color: #666666;
							margin-left: 10rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
	
					.tag-fail {
						width: 120rpx;
						height: 50rpx;
						border-radius: 30rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #FDEBEC;
						color: #FF5757;
						border: 1rpx solid #FF5757;
						position: absolute;
						right: -5rpx;
						bottom: 20rpx;
					}
	
					.tag-success {
						width: 120rpx;
						height: 50rpx;
						border-radius: 30rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #ECF6FF;
						border: 1rpx solid #0385FA;
						color: #1083F8;
						position: absolute;
						right: -5rpx;
						bottom: 20rpx;
					}
				}
			}
		}
	}
	
	.msitem {
		width: 11.5vw;
		height: 100%;
		position: absolute;
		top:0;
		left: 10vw;
		>view {
			margin-top: 0.25vw;
	
			&:nth-child(3) {
				width: 100%;
				height: 3.4vw;
				display: flex;
				justify-content: space-between;
				>view {
					width: 50%;
					height: 100%;
					display: flex;
					flex-direction: column;
					position: relative;
					margin-top:1vw;
					white-space: nowrap;
					&:nth-child(1){
						padding-right: 1.7vw;
						align-items: flex-start;
					}
					&:nth-child(2){
						padding-left: 1.7vw;
						align-items: flex-start;
					}
					&:nth-child(1)::after {
						content: '';
						position: absolute;
						right: 0;
						width: 100%;
						height: 2.2vw;
						border-right: 1px solid #C9C9C9;
						top: 0.6vw;
					}
	
					text {
						&:nth-child(1) {
							font-weight: bold;
							font-size: 1.7vw;
							color: #555555;
						}
	
						&:nth-child(2) {
							font-weight: 400;
							font-size: 1.1vw;
							color: #999999;
							white-space: nowrap;
						}
					}
				}
			}
	
			&:nth-child(2)  {
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				margin-top: 0.1vw;
				view{
					font-size: 1.4vw;
					color: #888888;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
	
				text {
					font-weight: 400;
					font-size: 1.1vw;
					color: #777777;
					margin-top: 0.25vw;
				}
			}
	
			&:nth-child(1) {
				view{
					display: inline-block;
					width: 10vw;
					font-weight: bold;
					font-size: 1.6vw;
					color: #222222;
					height: 3vw;
					padding-top: 1.3vw;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
			}
		}
	}
	.zding{
		width: 4.6vw;
		height: 4.6vw;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 11;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.speitem {
		width: 10vw;
		height: 100%;
		display: inline-flex;
		flex-direction: column;
		position: absolute;
		top:0;
		left: 0;
		.cardp {
			width:8vw;
			height: 4vw;
			display: flex;
			margin: 0 auto;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			view {
				min-width: 5.5vw;
				height: 1.8vw;
				border-radius: 0.9vw;
				border: 1px solid #D2D2D2;
				margin: 0.5vw 0 0 0.5vw;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 400;
				font-size: 1vw;
				color: #555555;
				padding: 0 0.25vw;
			}
		}
	
		>image {
			width: 7.5vw;
			height: 7.5vw;
			margin: 0.5vw auto 0.25vw;
		}
	}
	
	
	
	.itembox{
		width: 100%;
		height: calc(100vh - 10vw);
		padding:1vw 0.5vw 1vw;
		background: #fff;
		.box{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
		}
		.fler{
			width: 31.4vw;
			height: 13vw;
			margin-bottom: 0.9vw;
			margin-left: 0.5vw;
			.carditem{
				width: 31vw;
				height: 13vw;
				background: rgba(245, 246, 248, 1);
				border-radius: 1.1vw;
				position: relative;
				overflow: hidden;
			}
		}
	}       
	
.t-box {
		width: 100%;
		height: calc(100vh - 8vw);
		display: flex;
		justify-content: space-between;
		margin-top: 1vw;

		.rightscr {
			width: 65vw;
			height: 100%;
			background: #fff;
			border-radius: 1.6vw;
			overflow: hidden;
		}

		.leftscr {
			width: 30.4vw;
			height: 100%;
		}
	}
.serchs {
		width: 96vw;
		height: 3.3vw;
		border-radius: 1.6vw;
		display: flex;
		align-items: center;
		margin: 0.7vw 0 0;
		justify-content: space-between;

		.leftbtn {
			width: 64vw;
			height: 3.3vw;
			display: flex;
			align-items: center;
		}

		.rightbtn {
			width: 30vw;
			height: 3.3vw;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			view {
				width: 7.3vw;
				height: 3.3vw;
				border: 1px solid #D9DADC;
				background: rgba(255, 255, 255, 1);
				border-radius: 1.65vw;
				font-weight: 400;
				font-size: 1.4vw;
				color: rgba(85, 85, 85, 1);
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 0.7vw;
				color: #555555;
				border: 1px solid #D9DADC;

				image {
					width: 1.5vw;
					height: 1.3vw;
					margin: 0 0.5vw 0 0;
				}
			}
		}

		.ipt {
			display: flex;
			align-items: center;
			width: 27vw;
			background: #E2E4E9;
			border-radius: 1.65vw;
			height: 3.3vw;

			image {
				width: 1.8vw;
				height: 1.8vw;
				margin: 0 0.5vw;
			}

			input {
				width: 25vw;
				height: 3.3vw;
				font-size: 1.4vw;
				padding-left: 1.6vw;

			}
		}

		.back {
			width: 8vw;
			height: 3.3vw;
			border-radius: 1.6vw;
			background: rgba(255, 255, 255, 1);
			border-radius: 1.65vw;
			font-weight: 400;
			font-size: 1.4vw;
			color: rgba(85, 85, 85, 1);
			display: flex;
			justify-content: center;
			align-items: center;
			margin-left: 0.6vw;
			border: 1px solid #D9DADC;

			image {
				width: 1.5vw !important;
				height: 1.5vw !important;
				margin: 0 0.5vw 0 0;
			}

		}

		.rightbtn>view:active,
		.scr:active {
			color: #1083F8;
			background: linear-gradient(-45deg, rgba(223, 244, 252, 1), rgba(204, 228, 249, 0.43));
			border: 1px solid #1083F8;
		}

		.scr {
			border-radius: 1.65vw;
			font-weight: 400;
			font-size: 1.4vw;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 7.3vw;
			height: 3.3vw;
			margin: 0 0 0 0.7vw;
			background: rgba(255, 255, 255, 1);
			border: 1px solid #D9DADC;
			color: #555555;

			image {
				width: 1.5vw;
				height: 1.3vw;
				margin: 0 0.5vw 0 0;
			}
		}

	}

	.guodu {
		transition: .4s;
		-webkit-transform-style: preserve-3d;
		-webkit-overflow-scrolling: touch;
	}
</style>
<style>
	page {
		background: RGBA(239, 240, 244, 1);
		padding: 2vw;
		box-sizing: border-box;
	}
</style>