<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">
				<scroll-view scroll-y="true" class="leftscrol" :scroll-top="cardtop" scroll-with-animation
					@scrolltolower="plsbuytolower">
					<view class="card" v-for="(v,i) in tharrlist" :key="i" :class="i==cardindex?'act':''"
						@click="cardcon(v,i)">
						<view class="rad" v-if="v.izRead=='N'"></view>
						<view class="hli">
							<view class="lig">
								<image src="/static/index/procurement/gys.png" mode="aspectFill"></image>
								{{v.nuName}}
							</view>
							<view class="rig">
								<image src="/static/index/procurement/jx.png" mode="aspectFill"></image>
								<text>{{v.statusText}}</text>
							</view>
						</view>
						<view class="cont">
							<view class="conle">
								<image :src=" '/static/index/procurement/k.png'" mode="aspectFill" />
								<text>退货</text>
							</view>
							<view class="ritcon">
								<view class="rq">
									退货日期：<text>{{v.fqTime.substring(0, 10)}}</text>
								</view>
								<view class="rq">
									申请人：{{v.fqrName}}
								</view>
								<view class="fwjd" v-if="v.status==0">
									<view class="jx" @click.stop="start(v,i)">开始服务</view>
									<view>服务结束</view>
								</view>
								<view class="fwjd" v-if="v.status==1">
									<view>开始服务</view>
									<view class="jx">服务中</view>
								</view>
								<view class="fwjd" v-if="v.status==2">
									<view>开始服务</view>
									<view class="jx" @click.stop="end(v,i)">服务结束</view>
								</view>
								<view class="fwjd" v-if="v.status==3">
									<view>开始服务</view>
									<view>服务结束</view>
								</view>
							</view>
						</view>
					</view>
					<view style="height:3vw;width: 100%;display: flex;align-items: center;justify-content: center;">
						<u-loadmore :status="status" :loadText="{nomore:'暂无更多数据'}" v-if="tharrlist.length>4" />
					</view>
				</scroll-view>
			</view>
			<view class="rightscr">
				<view class="thwl">
					<thwl :Material="addMaterial" @delall="delall" @del="adddel" @submit="submit" :status="tharrlist[cardindex]?.status"></thwl>
					<!--  -->
				</view>
				<view class="carditem">
					<thitem :InvoicingList="cardarr" :status="tharrlist[cardindex]?.status" @comfig="comfig"></thitem>
				</view>
			</view>
		</view>
		<tanchuang @back="tanshow = false" :show="tanshow" font="确定将该物料从本次请领清单中移除吗？" @right="del"></tanchuang>
		<submits :show="subshow" :list="addMaterial" @fill="subshow = false" :thdt="tharrlist[cardindex]" @config="tijiao"></submits>
		<view class="thdfed" @click="uni.navigateTo({ url:'/pages/procurement/authorization' })"  v-if="carnum>0">
			<image src="/static/index/procurement/thd.png" mode="aspectFill"></image>
			<text v-if="carnum>0">{{carnum>99?'99+':carnum}}</text>
		</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 { thdList, transRead, thdNuMaterialList, addThc, thcList, removeWl, removeAll, submitThd ,startServe , finishServe} from './api/lunpan.js'
	const serverUrl = ref(uni.getStorageSync('serverUrl') + '/sys/common/static/')
	import thwl from './common/thwl.vue'
	import thitem from './common/thitem.vue'
	import tanchuang from './components/tanchuang.vue'
	import submits from './common/submits.vue'
	const form = reactive({
		pageNo: 1,
		pageSize: 10,
		searchContent: '' 
	})
	const tanshow = ref(false)
	const subshow = ref(false)
	const carnum = ref(0)
	onMounted(() => {
		thlist()
	})
	onShow(()=>{
		ritbot();
	})
	const ritbot = () =>{
		let forms = {
			pageNo: 1,
			pageSize: 10,
			status:3,
			searchContent: '' 
			}
			thdList(forms).then(res => {
				carnum.value = res.result.total;
			})
	}
	const submit = () => {
		cardcon(tharrlist.value[cardindex.value], cardindex.value);
		nextTick(() => {
			subshow.value = true;
		})
	}
	const tijiao = () => {
		submitThd({ id: tharrlist.value[cardindex.value].id }).then(res => {
			if (res.success) {
				subshow.value = false;
				th(tharrlist.value[cardindex.value],cardindex.value)
				setTimeout(() => {
					cardcon(tharrlist.value[cardindex.value], cardindex.value);
				}, 200)
			} else {
				uni.showToast({
					icon: 'none',
					title: res.message
				})
			}
		})
	}
	const th = (v,i) =>{
		let obj = {refreshDataKey:v.id}
		thdList(obj).then(res => {
			tharrlist.value[i] = res.result.records[0];
			ritbot();
		})
	}
	const start = (v,i) =>{
		startServe({id:v.id}).then(res=>{
			if(res.success){
				th(v,i)
			}else{
				uni.showToast({
					icon: 'none',
					title: res.message
				})
			}
		})
	}
	const end = (v,i)=>{
		finishServe({id:v.id}).then(res=>{
			console.log(res)
			if(res.success){
				th(v,i)
			}else{
				uni.showToast({
					icon: 'none',
					title: res.message
				})
			}
		})
	}
	const search = (e) => {
		if (e == 0) { form.searchContent = '' }
		form.pageNo = 1;
		tharrlist.value = [];
		thlist()
	}
	const status = ref('loadmore')
	const plsbuytolower = () => {
		if (status.value == 'loading' || status.value == 'nomore') { return }
		status.value = 'loading';
		form.pageNo++;
		thlist();
	}
	const tharrlist = ref([])
	const thlist = () => {
		thdList(form).then(res => {
			tharrlist.value.push(...res.result.records);
			status.value = res.result.total == tharrlist.value.length ? 'nomore' : 'loadmore';
			if (form.pageNo == 1) {
				cardcon(tharrlist.value[cardindex.value], cardindex.value);
			}
		})
	}
	const cardindex = ref(0);
	const cardtop = ref(0);
	const cardarr = ref([])
	const cardcon = (v, i) => {
		cardindex.value = i;
		cardtop.value = Math.floor(i - 1) * 154;
		console.log(v)
		wuliao();
		thdNuMaterialList({ nuId: v.nuId, id: v.id }).then(res => {
			console.log(res)
			cardarr.value = res.result
		})
		if (v.izRead == 'N') {
			transReads(v, i)
		}
	}
	const addMaterial = ref([])
	const transReads = (v, i) => {
		transRead({ id: v.id })
		v.izRead = 'Y'
	}
	const comfig = (e, v) => {
		let obj = {
			pkId: tharrlist.value[cardindex.value].id,
			kfId: v.kfId,
			wlId: v.materialInfo?.id,
			thNum: e,
			nuId: tharrlist.value[cardindex.value].nuId,
			elderId: tharrlist.value[cardindex.value].elderId
		}
		console.log(obj)
		addThc(obj).then(res => {
			console.log(res)
			if (res.success && res.result.status == 'success') {
				uni.showToast({
					icon: 'success',
					title: '提交成功'
				})
				setTimeout(() => {
					th(tharrlist.value[cardindex.value],cardindex.value);
					cardcon(tharrlist.value[cardindex.value], cardindex.value);
				}, 800)
			} else {
				uni.showToast({
					icon: 'none',
					title: res.result.message?res.result.message:res.message
				})
			}
		})
	}
	const wuliao = () => {
		let obj = {
			pkId: tharrlist.value[cardindex.value].id
		}
		thcList(obj).then(res => {
			addMaterial.value = res.result
		})
	}
	const delall = () => {
		let obj = { pkId: tharrlist.value[cardindex.value].id }
		removeAll(obj).then(res => {
			if (res.success) {
				cardcon(tharrlist.value[cardindex.value], cardindex.value);
			} else {
				uni.showToast({
					icon: 'none',
					title: res.message
				})
			}
		})
	}
	const objtake = ref({})
	const adddel = (e) => {
		objtake.value = e;
		tanshow.value = true;
	}
	const del = () => {
		let obj = {
			pkId: tharrlist.value[cardindex.value].id,
			wlId: objtake.value.materialInfo?.id
		}
		removeWl(obj).then(res => {
			if (res.success) {
				cardcon(tharrlist.value[cardindex.value], cardindex.value);
				tanshow.value = false;
			} else {
				uni.showToast({
					icon: 'none',
					title: res.message
				})
			}
		})
	}
</script>

<style scoped lang="less">
	.thdfed{
		width: 4.9vw;
		height: 4.9vw;
		background: rgba(255, 255, 255, 0.86);
		border-radius: 50%;
		border: 1px solid #D9DADC;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		right: 1vw;
		bottom:4.3vw;
		text {
			min-width: 1.8vw;
			height: 1.8vw;
			border-radius: 0.8vw;
			border: 2px solid #E81D1D;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 0.5vw;
			font-weight: 400;
			font-size: 1.3vw;
			color: #E81D1D;
			position: absolute;
			top: -0.8vw;
			right: -0.8vw;
		}
		image{
			width: 3.3vw;
			height: 3.3vw;
		}
	}
	.carditem {
		width: 100%;

	}

	.thwl {
		width: 100%;
		height: 12vw;
	}

	.leftscrol {
		width: 100%;
		height: 100%;

		.act {
			border: 2px solid #0385FA !important;
			background: rgba(255, 255, 255, 1) !important;
		}

		.card {
			width: 30vw;
			height: 13.6vw;
			background: rgba(255, 255, 255, 0.6);
			border-radius: 1.6vw;
			padding: 1vw 1.4vw;
			border: 2px solid rgba(255, 255, 255, 0.6);
			margin-bottom: 0.8vw;
			position: relative;

			.rad {
				width: 1.2vw;
				height: 1.2vw;
				border-radius: 50%;
				position: absolute;
				right: 0;
				top: 0;
				background: rgba(255, 87, 87, 1);
			}

			.cont {
				width: 100%;
				height: 10vw;
				display: flex;
				justify-content: space-between;

				.ritcon {
					width: 19vw;
					height: 100%;

					.fwjd {
						width: 100%;
						display: flex;
						justify-content: space-between;

						view {
							width: 8.1vw;
							height: 3vw;
							background: #EFF2F8;
							border-radius: 1.2vw;
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 1px solid #EFF2F8;
							font-weight: 400;
							font-size: 1.3vw;
							color: #B6B8BA;
						}

						.jx {
							background: linear-gradient(0deg, #F3FAFF, #E4F3FF, #CBE8FF);
							color: #249BFA;
							border: 1px solid #A8D4FF;
						}
					}

					.rq {
						font-weight: 400;
						font-size: 1.3vw;
						color: #888888;
						margin-bottom: 1vw;

						text {
							font-size: 1.8vw;
							font-weight: bolder;
							color: rgba(85, 85, 85, 1);
						}
					}
				}

				.conle {
					width: 10vw;
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						width: 6.3vw;
						height: 6.3vw;
					}

					view {
						font-weight: bold;
						font-size: 1.4vw;
						color: #555555;
						margin-top: 1vw;
					}
				}
			}

			.hli {
				width: 100%;
				height: 2vw;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.rig {
					width: 3.7vw;
					height: 1.6vw;
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						position: absolute;
						width: 100%;
						height: 100%;
						top: 0;
						left: 0;
						z-index: 1;
					}

					text {
						position: relative;
						z-index: 2;
						font-weight: 400;
						font-size: 1vw;
						color: #FFFFFF;
					}
				}

				.lig {
					font-weight: 400;
					font-size: 1.2vw;
					color: #666666;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 1.7vw;
						height: 1.7vw;
						margin-right: 0.4vw;
					}
				}
			}

		}
	}

	.t-box {
		width: 100%;
		height: calc(100vh - 8vw);
		display: flex;
		justify-content: space-between;
		margin-top: 1vw;

		.rightscr {
			width: 65vw;
			height: 100%;
			background: #F9F9F9;
			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>