<template>
	<view>
		<view class="kcyj">
			<view class="kjlt">
				请领物料
				<view class="mhao" v-if="Material.length>0">{{Material.length}}</view>
			</view>
			<scroll-view scroll-x="true" class="kcscrol guodu"  @scroll="onScroll"
				scroll-with-animation :scroll-left="scrollleft"  :style="qb?'width:calc(100% - 21.8vw)':'width:calc(100% - 10vw)' ">
				<view class="yjbox" v-for="(v,i) in Material" :key="i" >
					<image :src="v.materialInfo?.materialImg?serverUrl+v.materialInfo?.materialImg:'/static/index/procurement/k.png'"
						mode="aspectFill"></image>
					<view>{{v.materialInfo?.materialName}}</view>
					<text class="ytj" v-if="v.qlNum>=0">{{v.qlNum}}</text>
					<view class="zhanwei" v-if="moredex==1" @click.stop="del(v)">
						<view>-</view>
					</view>
				</view>
				<defaultr cont="暂无数据" v-if="Material.length==0&&timeout" style="position: absolute;width: 10vw;height: 10vw;"></defaultr>
			</scroll-view>
			<view class="kjlt more guodu" :style="qb?'width:15vw':'' "  @touchstart="ts" @touchmove="canmove" v-if="Material.length>0">
				<view @click="zksq" class="righ0">
					{{!qb?'更多':'收起'}}
					<image class="guodu" :style="qb?'transform: rotate(180deg);':''"
						src="/static/index/procurement/zjt.png" mode="aspectFill"></image>
				</view>
				<view class="guodu" :class="qb?(moredex==1?'avt':''):'righ0'" @click="moredex = moredex==1?0:1; ">
					批量移除
				</view>
				<view class="guodu" :class="qb?(moredex==2?'avt':''):'righ0'" @click="moredex=2; ">
					清空列表
				</view>
				<view class="guodu" :class="qb?(moredex==3?'avt':''):'righ0'" @click="moredex=3;emit('submit')">
					提交请领单
				</view>
			</view>
		</view>
		<tanchuang @back="moredex = 0" :show="moredex==2" font="确定将本次请领清单中的所有物料都移除吗？" @right="delall"></tanchuang>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick,  watch, reactive } from 'vue';
	import defaultr from './default.vue'
	import tanchuang from '../common/tanchuang.vue';
	const props = defineProps({
		Material:{
			type:Array,
			required: true,
		}
	});
	const emit = defineEmits([ 'delall' ,'del','submit'])
	const serverUrl = ref(uni.getStorageSync('serverUrl') + '/sys/common/static/')
	const qb = ref(false)
	const moredex = ref(0)
	watch(()=>props.Material,
	()=>{
		if(props.Material.length==0){
			qb.value = false;
			moredex.value=0;
		}
	})
	const delall = ()=>{
		emit('delall');
		setTimeout(()=>{
			moredex.value = 0;
			qb.value = false;
		},100)
	}
	const del =(v)=>{
		emit('del',v)
	}
	const zksq = () =>{
		if(props.Material.length==0){
			uni.showToast({
				icon:'none',
				title:'请添加请领物料！'
			})
			return
		}
		qb.value=!qb.value;
		moredex.value=0;
		moveleft();
	}
	const startX = ref(0)
	const ts = (e) => {
		startX.value = e.touches[0].clientX
	}
	const savescrollleft = ref(0)
	// 监听用户滚动
	function onScroll(e : any) {
		savescrollleft.value = e?.detail?.scrollLeft ?? 0
	}
	const scrollleft = ref(0)
	const canmove = (e : any) => {
		if(props.Material.length==0){ return }
		const moveX = e.touches[0].clientX
		const diff = moveX - startX.value
		// diff 为负值就是向左滑
		if (diff < -60 && !qb.value) {  // 👉 60px 阈值，随便改
			qb.value = !qb.value;
			moredex.value = 0;
			// 这么写是解决这个组件的响应丢失的bug
			scrollleft.value = savescrollleft.value + 125.99
			setTimeout(() => {
				scrollleft.value = savescrollleft.value + 126
			}, 50)
		}
		if (diff > 60 && qb.value) {  // 👉 60px 阈值，随便改
			qb.value = !qb.value;
			moredex.value = 0;
			scrollleft.value = savescrollleft.value - 125.99
			setTimeout(() => {
				scrollleft.value = savescrollleft.value - 126
			}, 50)
		}
	}
	const moveleft = () => {
		if (qb.value) {
			scrollleft.value = savescrollleft.value + 125.99
			setTimeout(() => {
				scrollleft.value = savescrollleft.value + 126
			}, 50)
		} else {
			scrollleft.value = savescrollleft.value - 125.99
			setTimeout(() => {
				scrollleft.value = savescrollleft.value - 126
			}, 50)
		}
	}
	const timeout = ref(false)
	onMounted(()=>{
		setTimeout(()=>{
			timeout.value = true
		},500)
	})
</script>

<style scoped lang="less">
	.kcyj {
		width: 100%;
		height: 10vw;
		display: flex;
		margin-top: 1vw;
		position: relative;

		.kjlt {
			width: 3.2vw;
			height: 10vw;
			background: rgba(255, 255, 255, 0.5);
			border-radius: 1.1vw;
			writing-mode: vertical-rl;
			align-items: center;
			display: flex;
			justify-content: center;
			letter-spacing: 3px;
			font-size: 1.4vw;
			position: relative;
			z-index: 10;
			.mhao{
				width: 1.6vw;
				min-height: 0vw;
				border-radius: 0.8vw;
				border: 1px solid #FF4E4E;
				font-weight: 400;
				font-size: 1.1vw;
				color: #FF4E4E;
				padding: 0.4vw 0vw;
				position: absolute;
				top: -0.8vw;
				right: -0.4vw;
				transform: rotate(-90deg);
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

		.more {
			margin-left: 0.6vw;
			position: relative;
			background: RGBA(239, 240, 244, 1);

			.righ0 {
				right: 0 !important;
			}

			view {
				writing-mode: vertical-rl;
				align-items: center;
				display: flex;
				justify-content: center;
				letter-spacing: 3px;
				width: 3.2vw;
				height: 10vw;
				position: absolute;
				top: 0;
				border-radius: 1.1vw;
				font-size: 1.4vw;
				color: #888888;
				background: #fff;

				&:nth-child(1) {
					letter-spacing: 6px;
					padding-top: 2vw;
					z-index: 5;

					image {
						width: 1.6vw;
						height: 1.6vw;
						margin-top: 10px;
					}
				}

				&:nth-child(2) {
					right: 3.9vw;
					z-index: 3;
				}

				&:nth-child(3) {
					right: 7.7vw;
					z-index: 2;
				}
				
				&:nth-child(4) {
					right: 11.6vw;
					z-index: 2;
				}
			}

			.avt {
				background: rgba(85, 166, 249, 1);
				color: #FFFFFF;
			}

		}
		.kcscrol {
			width:calc(100% - 10vw);
			height: 10vw;
			white-space: nowrap;
			margin-left: 0.6vw;
			position: relative;
			z-index: 9;

			.yjbox {
				display: inline-block;
				width: 12vw;
				height: 10vw;
				background: rgba(255, 255, 255, 0.5);
				border-radius: 1.1vw;
				margin-right: 0.8vw;
				position: relative;
				.zhanwei{
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 200;
					view{
						position: absolute;
						width: 2.2vw;
						height: 2.2vw;
						display: flex;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						margin: auto;
						border-radius: 50%;
						border: 2px solid rgba(255, 78, 78, 1);
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 3vw;
						color: rgba(255, 78, 78, 1);
					}
				}
				.ytj {
					min-width: 1.5vw;
					height: 1.8vw;
					background: #E3EEF7;
					border-radius: 0.9vw;
					border: 1px solid rgba(3, 133, 250, 0.34);
					font-weight: 400;
					font-size: 1.1vw;
					color: #1083F8;
					text-align: center;
					line-height: 1.75vw;
					position: absolute;
					padding:  0 0.8vw;
					top: 0.8vw;
					right: 0.8vw;
				}

				image {
					width: 7vw;
					height: 7vw;
					margin: 0.5vw auto 0.5vw;
					display: block;
					border-radius: 1vw;
				}

				>view {
					width: 100%;
					height: 1.4vw;
					font-weight: 400;
					font-size: 1.3vw;
					color: #212327;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					padding: 0 1vw;
					text-align: center;
				}
			}
		}
	}
	.guodu {
		transition: .4s;
		-webkit-transform-style: preserve-3d;
		-webkit-overflow-scrolling: touch;
	}
</style>