<template>
	<view>
		<view class="guodu contain" :style="!transition?'opacity: 0':'opacity: 1'"
			style="transition: opacity 1s ease;padding: 1.1vw;">
			<view class="contain-left">
				<view class="title-input-father">
					<input class="title-input" type="text" v-model="plzinfo.cgdParamInfo" maxlength="15"
						placeholder="采购单号/采购日期/供应商" @confirm="search()" />
					<image v-show="plzinfo.cgdParamInfo" class="title-input-img" src="@/static/x.png"
						@click="plzinfo.cgdParamInfo=``;search()" />
					<!-- <view class="title-input-button" @click="search();">
						检索
					</view> -->
					<view class="title-ball" @click="search();handleClick()">
						<image class="title-ball-img" :src="imgSrc" mode="aspectFill"></image>
					</view>
					<view class="title-ball">
						<image class="title-ball-img" src="/static/index/procurement/sx.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="left-selecttype">
					<view :class="selectType===index?`selecttype-target`: `selecttype`"
						v-for="(item,index) in tagsarray" @click="changetype(index)">
						{{ item }}
					</view>
					<view class="heng-blue" :style="{ left: `${ 11.6 + selectType * 18.5}%` }">
					</view>
				</view>
				<view class="haventmessage" v-if="!plsbuy.length">
					<view class="que">
						<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
						<view>暂无数据</view>
					</view>
				</view>
				<view class="left-menu-father">
					<scroll-view scroll-y="true" scroll-with-animation class="left-menu-scroll"
						:scroll-top="leftscrolltop" @scrolltolower="plsbuytolower" :lower-threshold="400"
						lower-threshold="300">


						<view class="pls-card" v-for="(v,i) in plsbuy" :key='i' @click="clickLeftMenu(i)" :style="{
								  borderColor: i === lefttarget ? '' : 'transparent'}">

							<!-- <view v-if="moreindex==i" class="more-father">
								<view class="more-one" @click="share">
									分享
								</view>
								<view class="more-one" v-if="Number(v.status)<=0" @click="bebad(v)">
									作废
								</view>
							</view> -->
							<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.izNew=='Y'"></text>
							<view class="pls-card-title">
								<view class="title-left">
									{{ v.cgdNo }}
								</view>
								<view class="title-right">

									<view :class="v?.cgdType=='9' ?`tag-fail`:`tag-success`">

										{{ v?.cgdType=='9' ?`已作废`:'待完结' }}
									</view>

									<!-- <image class="title-right-img" src="/static/more.png" @click="openmore(i)" /> -->

								</view>
							</view>
							<view class="pls-card-middle">
								<view class="middle-heng"></view>
								<view class="pls-card-middle-one">
									<view class="middle-title">
										{{ v.createTime?.slice(0,10).replace(/-/g, '.') }}
									</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 class="notoomuch">
											[ 梁嘉豪 ]
										</view>
									</view>
								</view>
								<view class="pls-card-middle-one">
									<view class="middle-title" :style=" v?.cgdType=='9' ?{color:`#FF5757`}:{}">
										{{ v.jhTime?.slice(0,10).replace(/-/g, '.') }}
									</view>
									<view class="middle-heng-father">
										<image class="middle-ball-img" style="width: 32rpx;height: 32rpx;"
											v-if="v?.cgdType=='9'" src="/static/index/requestform/iserror.png" />
										<view class="middle-ball" style="background-color: #1083F8;"
											:style=" v?.cgdType=='9' ?{backgroundColor:`#FF5757`}:{}"
											v-else-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 :style=" v?.cgdType=='9' ?{color:`#FF5757`}:{}">
											{{ v?.cgdType=='9' ?`已作废`:`拣货` }}

										</view>
										<view v-if="v?.jhBy || v?.zfBy" :style=" v?.cgdType=='9' ?{color:`#FF5757`}:{}">
											2026.03.03
											<!--{{ Number(v.status)>0||v?.cgdType=='9'? "[ " +  (v?.cgdType=='9' ?v?.zfBy:v?.jhBy )+ " ]":"" }}-->
										</view>
									</view>
								</view>
								<view class="pls-card-middle-one">
									<view class="middle-title">
										{{ v.wjTime?.slice(0,10).replace(/-/g, '.') }}
										
									</view>
									<view class="middle-heng-father">
										<view class="middle-ball" 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 v-if="Number(v.status)>1 && v.wjBy ">
											2026.03.03
										</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.gysName }}
									</view>
								</view>

								<view class="title-right-big">
									<text>
										￥
									</text>
									<!-- {{ Number(v.totalPrice ) < 10000? Number(v.totalPrice).toFixed(2) : Number(v.totalPrice)  }} -->
									{{ Number(v.totalPrice).toFixed(2) }}
								</view>
								<!-- <view :class="v?.cgdType=='9' ?`tag-fail`:`tag-success`">
									{{ v?.cgdType=='9' ?`已作废`:2222 }}
								</view> -->
							</view>
						</view>
						<view class="pls-card center" style="border-color: #fff;" v-if="plsbuy.length===1">
							<view class="que">
								<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
								<view>暂无数据</view>
							</view>
						</view>
						<view class="pls-card center" style="border-color: #fff;" v-if="plsbuy.length===1">
							<view class="que">
								<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
								<view>暂无数据</view>
							</view>
						</view>
						<view class="pls-card center" style="border-color: #fff;" v-if="plsbuy.length===2">
							<view class="que">
								<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
								<view>暂无数据</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="rightscon">
				<contright @link="link" v-if="rightcat==0"></contright>
				<procurement @link="link" v-if="rightcat==1"></procurement>
				<carlist @link="link" v-if="rightcat==2"></carlist>
				<caigoudan @link="link" v-if="lefttarget>=0" style="z-index: 9999;"></caigoudan>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineComponent, inject, watch } from 'vue';
	import { onLoad } from "@dcloudio/uni-app"
	import contright from './component/contright.vue';
	import procurement from './component/procurement.vue';
	import carlist from './component/carlist.vue';
	import caigoudan from './component/caigoudan.vue';
	import { queryCgdList } from './api/api.js'

	// 入参
	const inputValue = ref({
		pageNo: 1,
	})
	// 初始化卡片
	const getCardArray = () => {
		inputValue.value.pageNo = 1;
		addlock.value = false
		queryCgdList(inputValue.value).then((res : any) => {
			console.log("看看卡片列表", res.result.records)
			plsbuy.value = res.result.records
			if (res.result.records.length != 10) {
				addlock.value = true
			}
		})
	}
	// 添加锁，节流
	const addlock = ref(false)
	// 添加卡片
	const scrolltolower = () => {
		if (!addlock.value) {
			inputValue.value.pageNo++
			queryCgdList(inputValue).then((res : any) => {
				plsbuy.value.push(...res.result.records)
				if (res.result.records.length != 10) {
					addlock.value = true
				}
			})
		}
	}
	const transition = ref(false)
	const leftscrolltop = ref(0)
	const lefttarget = ref(-1)


	const tagsarray = ref(["全部", "待确认", "待完结", "待付款", "已完成"])
	const selectType = ref(0)



	const rightcat = ref(0)
	const link = (e) => {
		console.log(e)
		rightcat.value = e;
		lefttarget.value = -1;
	}



	const clickLeftMenu = (e) => {
		lefttarget.value = e;
		leftscrolltop.value = (e - 1) * 186.5;
		rightcat.value = -1;
	}

	const changetype = (index : number) => {
		if ((selectType.value == index) && index) {
			return
		}
		selectType.value = index
		leftscrolltop.value = 0.01
		setTimeout(() => {
			leftscrolltop.value = 0
		}, 50)
	}
	const props = defineProps({
		isShow: {
			type: Boolean
		},
	});
	watch(
		() => props.isShow,
		(newVal, oldVal) => {
			if (!oldVal && newVal) {
				transition.value = false;
				setTimeout(() => {
					transition.value = true;
				}, 50)
			} else {
				transition.value = false;
			}
			console.log(transition.value)
		}
	)
	const search = () => { }
	const plzinfo = reactive({
		nuId: uni.getStorageSync('nuId'),
		pageNo: 1,
		pageSize: 30,
		canpull: true,
		cgdParamInfo: ""
	})
	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 plsbuy = ref([])
	const basePath = '/static/index/procurement/' // 图片公共路径
	const imgNormal = basePath + 'sh.png'
	const imgActive = basePath + 'shr.png'

	const imgSrc = ref(imgNormal)
	const busy = ref(false) // 防止重复点击造成多个定时器

	function handleClick() {
		if (busy.value) return
		busy.value = true
		// 切换到 active 图
		imgSrc.value = imgActive
		setTimeout(() => {
			imgSrc.value = imgNormal
			busy.value = false
		}, 300)
	}
	onLoad(() => {
		getCardArray()
	})
</script>

<style lang="less" scoped>
	.rightscon {
		width: 60vw;
		height: 60.4vw;
		background: #FFFFFF;
		border-radius: 1.6vw;
		margin-left: 1vw;
		overflow: hidden;
	}

	.left-selecttype {
		margin-top: 8rpx;
		width: 98%;
		height: 85rpx;
		border-radius: 40rpx;
		background-color: #FFFFFF;
		display: flex;
		padding-right: 30rpx;
		padding-left: 15rpx;
		position: relative;


		.heng-blue {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 29rpx;
			height: 7rpx;
			border-radius: 10rpx;
			background-color: #1083F8;
			transition: 0.3s all ease;

		}

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

		}

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

	.contain {
		background-color: #f4f4f4;
		// background-color:red;
		width: 91vw;
		height: 100vh;
		padding: 0 0 0 1.1vw;
		display: flex;
		// overflow: hidden;

		.contain-left {
			height: 100vh;
			min-width: 28vw;
			overflow: hidden;
			// background-color: green;

			.title-input-father {
				height: 6vh;
				width: 100%;
				display: flex;
				align-items: center;
				position: relative;

				.title-ball {
					width: 5.3vh;
					height: 5.3vh;
					border-radius: 50%;
					margin-left: 10rpx;
					background-color: #fff;
					border: 2rpx solid #D9DADC;
					display: flex;
					justify-content: center;
					align-items: center;

					.title-ball-img {
						width: 55%;
						height: 55%;
					}
				}

				.title-input {
					width: 19vw;
					height: 5.1vh;
					background-color: #fff;
					font-size: 27.5rpx;
					padding-left: 26rpx;
					border-radius: 40rpx;
					padding-top: 2rpx;
					border: 2rpx solid #C9C9C9;
				}

				.title-input-button {
					width: 20%;
					margin-left: 2%;
					height: 5vh;
					border-radius: 40rpx;
					font-size: 28rpx;
					background-color: #fff;
					border: 0.5rpx solid #D9DADC;
					color: #555555;
					display: flex;
					justify-content: center;
					align-items: center;
					// box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
				}

			}

			.left-menu-father {
				margin-top: 1.3vh;
				width: 100%;
				height: 83vh;
				// background-color: #fff;
				border-radius: 1.6vw;

				.left-menu-scroll {
					height: 100%;
					width: 100%;

					.pls-card {
						width: 100%;
						height: 355rpx;
						border: #0f9fff 4rpx solid;
						background-color: #fff;
						border-radius: 40rpx;
						margin-bottom: 18rpx;
						padding: 0 30rpx;
						position: relative;

						.pls-card-title {
							height: 7vh;
							width: 100%;
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-top: 5rpx;

							.title-left {
								font-weight: 600;
								font-size: 35rpx;
								color: #222222;
							}

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

								.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;
								}

								.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;
								}


								.title-right-img {
									position: absolute;
									right: -10rpx;
									bottom: 6rpx;
									width: 40rpx;
									height: 40rpx;
									filter: brightness(0.8);
								}
							}
						}


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

								// background-color: yellow;
								.middle-title {
									width: 100%;
									height: 2.1vh;
									// background-color: #007CFF;
									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;
									.notoomuch{
										width: 30rpx;
										background-color: red;
									}
								}
							}
						}

						.pls-card-end {
							width: 100%;
							height: 7vh;
							// margin-top: 1vh;
							display: flex;
							justify-content: space-between;
							position: relative;

							.title-right-big {
								font-weight: 600;
								font-size: 40rpx;
								margin-right: 20rpx;
								color: #555555;
								display: flex;
								align-items: center;

								text {
									font-size: 30rpx
								}
							}

							.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;
								}
							}


						}
					}
				}
			}
		}
	}

	.haventmessage {
		width: 100%;
		height: 51.9vw;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 1.6vw;
		margin-top: 0.7vw;
	}

	.que {
		width: 10vw;
		height: 10vw;
		// margin: auto;

		image {
			width: 100%;
			height: 100%;
		}

		view {
			margin-top: -30rpx;
			width: 100%;
			text-align: center;
			font-weight: 300;
			font-size: 1.2vw;
			color: #555555;
		}
	}

	.center {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>