<template>
	<view class="index-content-other" :style="transition?{opacity: `1`}:{opacity: `0`}">
		<view class="right-container-title-nav">
			<text style="margin-left: 30rpx;">
				NUID：{{ uni.getStorageSync('nuId')}}
			</text>
			<text class="new-weight">
				{{ uni.getStorageSync('nuName')}}
			</text>
			<view class="right-icons">
				<image class="right-icons-img" src="/static/index/requestform/touxiang.png" />
				<view>{{name}}</view>
				<image class="right-icons-img-back" src="/static/index/requestform/back.png" />
				<view>返回</view>
			</view>
		</view>
		<view class="buttons-father">
			<view class="ipt">
				<input type="text" placeholder="物料名称/物料简拼" />
			</view>
			<view class="scr">
				检索
			</view>
			<view class="shx">
				<image src="/static/index/requestform/shaixuan.png" mode="aspectFill"></image>
				<view class="shx-font">
					筛选
				</view>

			</view>
			<view class="shx">
				<image src="/static/index/requestform/chongzhi.png" mode="aspectFill"></image>
				<view class="shx-font">
					重置
				</view>
			</view>
		</view>
		<view class="other-contain">
			<view class="other-contain-left">
				<view class="left-selecttype">
					<view :class="selectType===index?`selecttype-target`: `selecttype`"
						v-for="(item,index) in tagsarray" @click="changetype(index)">
						{{ item }}
						<view class="heng-blue" v-if="selectType===index"></view>
					</view>
				</view>
				<scroll-view scroll-y="true" scroll-with-animation class="left-menu-scroll" :scroll-top="leftscrolltop"
					@scrolltolower="plsbuytolower" :lower-threshold="400">
					<view style="height: 1%;"></view>
					<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)'
						}">
						<view style="background: #ff5757;position: absolute;width: 1.3vw;height: 1.3vw;border-radius: 50%;right: -0.5vw;top: -0.2vw;" v-if="v.izNew=='Y'">
						</view>
						<view class="pls-card-title">
							<view class="middle-title">
								请领单号
							</view>
							<view class="title-left">
								{{ v.cgdNo }}
							</view>
							<!-- <view class="title-right">
								<text style="position: absolute;bottom: 4rpx;left: -30rpx;">
									￥
								</text>

								<view class="title-right-big">
									{{ Number(v.totalPrice).toFixed(2) }}
								</view>

							</view> -->
						</view>
						<view class="pls-card-middle">
							<view class="middle-heng"></view>
							<view class="pls-card-middle-one">
								<view class="middle-title">
									{{ v.qgDate }}
								</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 style="font-size: 25rpx;">
										{{ "[ " + v.qgBy + " ]" }}
									</view>
								</view>
							</view>
							<view class="pls-card-middle-one">
								<view class="middle-title">
									{{ v.jhTime?.slice(0,10) }}
								</view>
								<view class="middle-heng-father">

									<view class="middle-ball" style="background-color: #1083F8;"
										:style=" v?.cgdType=='9' ?{backgroundColor:`#FF5757`}:{}"
										v-if="Number(v.status)<1"></view>
									<image class="middle-ball-img" v-else src="/static/index/requestform/isok.png" />
								</view>
								<view class="end-font">

									<view :style=" v?.cgdType=='9' ?{color:`#FF5757`}:{}">
										{{ v?.cgdType=='9' ?`已作废`:`拣货` }}

									</view>
									<view style="font-size: 25rpx;" v-if="Number(v.status)>0 && v.jhBy ">
										{{ "[ " + v.jhBy + " ]" }}
									</view>
								</view>
							</view>
							<view class="pls-card-middle-one">
								<view class="middle-title">
									{{ Number(v.status)>=2 ? v.wjTime?.slice(0,10) :""}}
								</view>

								<view class="middle-heng-father">

									<!-- <view class="middle-ball" :style="{backgroundColor: `#1083F8`}"></view> -->
									<view class="middle-ball"
										:style="{backgroundColor: Number(v.status)==1? ``:`#E5E5E5`}"
										v-if="Number(v.status)!=2"></view>
									<image class="middle-ball-img" v-else src="/static/index/requestform/isok.png" />
								</view>
								<view class="end-font">
									<view>
										完结
									</view>
									<view style="font-size: 25rpx;" v-if=" v.wjBy">
										{{ "[ " + v.wjBy + " ]" }}
									</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.gysId_dictText }}
								</view>
							</view>
							<view :class="v?.cgdType=='9' ?`tag-fail`:`tag-success`">

								{{ v?.cgdType=='9' ?`已作废`:tagesstatues[Number(v.status)]  }}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="other-contain-right">

			</view>
		</view>



	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick, defineProps, watch, reactive } from 'vue';
	import { onShow, onLoad, onHide, onPageScroll } from "@dcloudio/uni-app"
	import { queryCgdList } from '@/pages/Warehouse/api/lunpan.js'

	const transition = ref(false);
	const tagsarray = ref(["全部", "待出库", "已出库", "已收货 ", "已作废"])

	const props = defineProps({
		isShow: {
			type: Boolean,
			required: true,
		},
	});

	watch(
		() => props.isShow,
		(newVal, oldVal) => {
			// 当旧值为false，新值为true时延迟0.2秒调用方法
			if (!oldVal && newVal) {
				transition.value = false;
				setTimeout(() => {
					transition.value = true;
				}, 50)
			} else {
				transition.value = false;
			}

		}
	)
	const name = ref("");
	onMounted(() => {
		name.value = uni.getStorageSync('realname')
	})
	const lanjie = ref(false);

	const selectType = ref(0)
	const changetype = (index : number) => {
		selectType.value = index
	}
	const tagesstatues = ["待入库", "待完结", '已完结'];
	const plsbuy = ref([])
	const alltotal = ref(0);
	const lefttarget = ref(0)
	const plzinfo = reactive({
		pageNo: 1,
		pageSize: 10,
		canpull: true,
		cgdParamInfo: "",
		suppliers: "",
		// cgdType: "0,1",
		startTime: "",
		endTime: "",
		cgBy: "",
		// nuId: uni.getStorageSync('nuId')
	})
	const mobanplzinfo = {
		pageNo: 1,
		pageSize: 10,
		canpull: true,
		cgdParamInfo: "",
		suppliers: "",
		// cgdType: "0,1",
		startTime: "",
		endTime: "",
		cgBy: "",
		// nuId: uni.getStorageSync('nuId')
	}
	const nomessageshow = ref(false);
	const leftscrolltop = ref(0)
	const firstgetqueryCgdList = () => {
		queryCgdList(plzinfo).then((res : any) => {
			console.log("加载", res.result.records)
			plsbuy.value.push(...res.result.records)
			alltotal.value = res.result.total
			if (!res.result.total) {
				// console.log("没数据了!!!")
				nomessageshow.value = true;
			}
			// console.log("请购单数据呢???", res)
			// if (res.result.records.length) {
			// 	form.cgdId = plsbuy.value[0].id
			// 	queryInvo(0);
			// }

			if (res.result.records.length < plzinfo.pageSize) {
				plzinfo.canpull = false;
			}

		})
	}
	const setout = ref(true)
	let times = null
	const plsbuytolower = () => {
		if (!setout.value) { return }
		plzinfo.pageNo++;
		getqueryCgdList()
		setout.value = false
		times = setTimeout(() => {
			setout.value = true
		}, 500)
	}
	//获得采购单列表
	const getqueryCgdList = () => {
		if (!plzinfo.canpull) return
		queryCgdList(plzinfo).then((res : any) => {
			plsbuy.value.push(...res.result.records)
			alltotal.value = res.result.total
			if (res.result.records.length < plzinfo.pageSize) {
				plzinfo.canpull = false;
			}
		})
	}
	const clickLeftMenu = (index : any, item : any) => {
		let num = Math.ceil((index + 1))
		leftscrolltop.value = (num - 2) * 180;
		lefttarget.value = index;
		// form.cgdId = plsbuy.value[index].id
		// form.pageNo = 1
		// form.canpull = true;
		// // console.log("!!!!",form)
		// queryCgdInfoList(form).then(res => {
		// 	InvoicingList.value = []
		// 	// console.log("数据呢", res.result.records)
		// 	InvoicingList.value.push(...res.result.records);
		// 	if (form.pageNo) {
		// 		clickmiddle(0);
		// 	}
		// })
		// if (item.izNew == 'Y') {
		// 	item.izNew = 'N'
		// 	editIzNew({ id: item.id })
		// }

	}
	onLoad(() => {
		firstgetqueryCgdList();
		// serverUrl.value = uni.getStorageSync('serverUrl') + '/sys/common/static/';
		// getSelectList();
	})
</script>

<style scoped lang="less">
	.index-content-other {
		width: calc(100% - 260rpx);
		// background-color: red;
		height: 100%;
		transition: opacity 1s ease;
		position: relative;


	}

	.right-container-title-nav {
		margin-top: 60rpx;
		display: flex;
		align-items: center;
		height: 60rpx;
		position: relative;
		font-size: 28rpx;

		.new-weight {
			margin-left: 30rpx;
			font-weight: 600;
		}

		.right-icons {
			position: absolute;
			right: 40rpx;
			top: 0;
			display: flex;
			align-items: center;
			height: 60rpx;
			font-size: 30rpx;
		}

		.right-icons-img {
			width: 40rpx;
			height: 40rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
		}

		.right-icons-img-back {
			width: 38rpx;
			height: 38rpx;
			margin-left: 60rpx;
			margin-right: 3rpx;
		}
	}

	.right-container-tem {
		display: flex;

		.right-container-tem-text {
			font-size: 30rpx;
			margin-right: 20rpx;
		}


		.right-container-tem-img {
			width: 38rpx;
			height: 38rpx;
		}
	}

	.buttons-father {
		width: 100%;
		height: 90rpx;
		// background-color: red;
		display: flex;

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

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

			input {
				width: 18vw;
				height: 3.5vw;
				font-size: 1.4vw;
				padding-left: 1.6vw;

			}
		}

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

		.shx {
			width: 6.5vw;
			height: 3.3vw;
			background: rgba(255, 255, 255, 0.6);
			border-radius: 1.65vw;
			border: 1rpx solid #D9DADC;
			font-weight: 400;
			font-size: 1.2vw;
			color: #222;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 0.5rpx 3rpx 3rpx #dadee1;
			margin: 0 0 0 0.5vw;
			color: #555555;

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

			.shx-font {
				margin-top: 3rpx;
				// margin-left: -5rpx;
			}
		}
	}

	.other-contain {
		width: 100%;
		height: 1050rpx;
		display: flex;

		.other-contain-left {
			width: 35%;
			height: 100%;

			.left-menu-scroll {
				margin-top: 3%;
				height: 94%;
				width: 100%;
				// position: relative;
				// overflow: auto;

				// background-color: red;
				.pls-card {
					width: 98%;
					height: 25.3vh;
					border: #0f9fff 3rpx solid;
					background-color: #fff;
					border-radius: 40rpx;
					margin-bottom: 2vh;
					// margin: 1vh 0;
					padding: 0 30rpx;
					position: relative;

					.pls-card-title {
						height: 5.5vh;
						width: 105%;
						display: flex;
						justify-content: space-between;
						align-items: flex-end;

						.title-left {
							font-weight: 600;
							font-size: 32rpx;
						}

						.title-right {
							display: flex;
							align-items: flex-end;
							font-size: 30rpx;
							position: relative;

							.title-right-big {
								font-weight: 600;
								font-size: 40rpx;
								margin-right: 35rpx;
								color: #555555;
							}

							.title-right-img {
								position: absolute;
								right: -10rpx;
								bottom: 6rpx;
								width: 40rpx;
								height: 40rpx;
							}
						}
					}

					.pls-card-middle {
						width: 100%;
						height: 11vh;
						margin-top: 1vh;
						display: flex;
						position: relative;

						.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: 33.3%;
							height: 100%;

							// background-color: yellow;
							.middle-title {
								width: 100%;
								height: 2vh;
								// background-color: #007CFF;
								color: #888888;
								text-align: center;
								font-size: 25rpx;
								overflow: hidden;
							}

							.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: #1083F8;
									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;
							}
						}
					}

					.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;
								// background-color: #007CFF;
								// font-size: 26rpx;
								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;
							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;
							color: #1083F8;
							border: 1rpx solid #1083F8;
							position: absolute;
							right: -5rpx;
							bottom: 20rpx;
						}
					}
				}
			}

			.left-selecttype {
				width: 100%;
				height: 80rpx;
				border-radius: 40rpx;
				background-color: #FFFFFF;
				display: flex;
				padding-right: 30rpx;
				padding-left: 15rpx;

				.heng-blue {
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 25rpx;
					height: 8rpx;
					border-radius: 10rpx;
					background-color: #1083F8;

				}

				.selecttype {
					width: 20%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #999999;
					font-size: 31rpx;
					position: relative;

				}

				.selecttype-target {
					width: 20%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #222222;
					font-size: 31rpx;
					font-weight: 600;
					position: relative;
				}
			}
		}

		.other-contain-right {
			width: 65%;
			height: 100%;
			// background-color: red;
		}
	}
</style>