<template>
	<view>
		<view class="ifclass guodu" :class="show?'':'unclass'" :style="showbox?'z-index:220':'z-index:-2'">
			<view class="gyss">
				<view class="lef">供 应 商</view>
				<view class="set" @click="selt = !selt">
					<text :class="gysidnum>-1?'n':''">{{gysidnum>-1?gysarr[gysidnum].suppliersName:'请选择供应商'}}</text>
					<image @click.stop="xiala" class="guodu"
						:style="selt&&gysidnum==-1?'transform: rotate(180deg);':''"
						:src="gysidnum<0?'/static/index/procurement/sj.png':'/static/index/procurement/x.png'"
						mode="aspectFill"></image>
				</view>
				<view class="xuze guodu" :class="selt?'':'hei0'">
					<scroll-view scroll-y="true" class="gysscrol guodu" :class="selt?'':'hei0'">
						<view v-for="(v,i) in gysarr" :key='i' :class="gysidnum==i?'acts':''"
							@click="gysidnum=i;selt=false;getTreelnum()">
							<text>{{v.suppliersName}}</text>
							<!-- <image src="/static/index/procurement/d.png" mode="aspectFill"></image> -->
						</view>
					</scroll-view>
				</view>
				<view class="mengban" v-if="selt" @click="selt = false"></view>
			</view>
			<view class="titletop">物料分类</view>
			<view class="toptype">
				<view v-for="v in ['一','二','三']">{{v+'级分类'}}</view>
			</view>
			<view class="scroltype">
				<scroll-view scroll-y="true" scroll-with-animation :scroll-top="scroll.scrolltop1"
					class="scroll-Y scrl1">
					<view :class="scroll.act1==i?'act':''" v-for="(v,i) in TreeData" @click="typescroll(1,i,v)">
						<image :src="serverUrl + v.appCheckIconPath" mode="aspectFill" v-if="scroll.act1==i">
						</image>
						<image :src="serverUrl + v.appIconPath" mode="aspectFill" v-else></image>
						<text>
							{{v.title}}
						</text>
					</view>
				</scroll-view>

				<scroll-view scroll-y="true" scroll-with-animation :scroll-top="scroll.scrolltop2"
					class="scroll-Y scrl2">
					<view :class="scroll.act2==i?'act':''" v-for="(v,i) in TreeData[scroll.act1]?.children"
						@click="typescroll(2,i,v)">
						{{v.title}}
					</view>
				</scroll-view>
				<scroll-view scroll-y="true" scroll-with-animation :scroll-top="scroll.scrolltop3"
					class="scroll-Y scrl3">
					<view :class="scroll.act3==i?'act':''"
						v-for="(v,i) in TreeData[scroll.act1]?.children[scroll.act2]?.children"
						@click="typescroll(3,i,v)">
						{{v.title}}
					</view>
				</scroll-view>

			</view>
			<view class="btnbotm">
				<view class="bt" @click="typescroll(1,-1,{});qingkong()">重置</view>
				<view class="bt qd" @click="config">确定 <text v-if="num>0">（{{num>99?'99+':num}}件物料）</text></view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick,  watch } from 'vue';
	import { getMaterialTreeData, getTreeDataWlnum, getGysList, getGwcTreeDataWlnum, getGwcMaterialTreeData ,getCgdMaterialTreeData ,getCgdTreeDataWlnum} from '../api/lunpan.js'
	import { onShow, onLoad, onHide, onPageScroll } from "@dcloudio/uni-app"
	const scroll = reactive({ scrolltop1: 0, scrolltop2: 0, scrolltop3: 0, act1: -1, act2: -1, act3: -1 });
	const TreeData = ref([]);
	const gysarr = ref([]);
	const gysidnum = ref(-1);

	const serverUrl = ref('');
	const selt = ref(false);
	const showbox = ref(false);
	
	const emit = defineEmits(['confirm'])
	const typescroll = (e : number, i : number, v : object) => {
		if (e == 1) {
			scroll.act2 = -1;
			scroll.act3 = -1;
			scroll.scrolltop2 = 0;
			scroll.scrolltop3 = 0;
			if (scroll.act1 == i) {
				scroll.act1 = -1;
				getTreelnum()
				return
			}
		}
		if (e == 2) {
			scroll.act3 = -1;
			scroll.scrolltop3 = 0;
		}
		if (e == 3) {

		}
		scroll['act' + e] = i;
		scroll['scrolltop' + e] = (i - 2) * 50;
		getTreelnum()
	}
	onMounted(() => {
		serverUrl.value = uni.getStorageSync('serverUrl') + '/sys/common/static/';
		getMaterial();
		GysList()
	})
	const GysList = () => {
		getGysList().then(res => {
			gysarr.value = res.result
		})
	}
	const num = ref(0)
	const getTreelnum = () => {
		let obj = {
			nuId: uni.getStorageSync('nuId'),
			categoryId: scroll.act1 > -1 ? TreeData.value[scroll.act1].categoryId : '',
			typeId: scroll.act2 > -1 ? TreeData.value[scroll.act1].children[scroll.act2].typeId : '',
			medicationId: scroll.act3 > -1 ? TreeData.value[scroll.act1].children[scroll.act2].children[scroll.act3].key : '',
			suppliers: gysidnum.value > -1 ? gysarr.value[gysidnum.value].suppliers : ''
		}
		switch (props.typenum) {
			case 0:
				// 采购单
				getTreeDataWlnum(obj).then(res => {
					num.value = res.result.totalSize;
				})
				break;
			case 1:
				// 购物车
				getGwcTreeDataWlnum(obj).then(res => {
					num.value = res.result.totalSize;
				})
				break;
			case 2:
				getCgdTreeDataWlnum(obj).then(res => {
					num.value = res.result.totalSize;
				})
				break;

			default:
				break;
		}
	}
	const getMaterial = () => {
		switch (props.typenum) {
			case 0:
				// 采购单
				getMaterialTreeData({ 'nuId': uni.getStorageSync('nuId') }).then(res => {
					TreeData.value = res.result;
					getTreelnum()
				})
				break;
			case 1:
				// 购物车
				getGwcMaterialTreeData({ 'nuId': uni.getStorageSync('nuId') }).then(res => {
					TreeData.value = res.result;
					getTreelnum()
				})
				break;
			case 2:
				console.log({ 'nuId': uni.getStorageSync('nuId') })
				getCgdMaterialTreeData({ 'nuId': uni.getStorageSync('nuId') }).then(res => {
					console.log(res.result)
					TreeData.value = res.result;
					getTreelnum()
				})
				break;

			default:
				break;
		}




	}
	const config = () => {
		let obj = {
			categoryId: scroll.act1 > -1 ? TreeData.value[scroll.act1].categoryId : '',
			typeId: scroll.act2 > -1 ? TreeData.value[scroll.act1].children[scroll.act2].typeId : '',
			medicationId: scroll.act3 > -1 ? TreeData.value[scroll.act1].children[scroll.act2].children[scroll.act3].key : '',
			suppliers: gysidnum.value > -1 ? gysarr.value[gysidnum.value].suppliers : ''
		}
		emit('confirm', obj)
	}
	const props = defineProps({
		show: {
			type: Boolean,
			default: false,
			required: true,
		},
		typenum: {
			type: Number,
			default: 0
		}
	})
	watch(
		() => props.show,
		() => {
			if (props.show == false) {
				selt.value = false;
				setTimeout(()=>{
					showbox.value = false;
				},400)
			}else{
				setTimeout(() => {
					showbox.value = true;
				}, 50)
			}
		})
		const xiala = ()=>{
			if(gysidnum.value<0){
				selt.value = !selt.value
			}else{
				qingkong()
			}
		}
	const qingkong = () => {
		if (gysidnum.value > -1) {
			gysidnum.value = -1;
			getTreelnum();
		}
	}
	defineExpose({
		typescroll,
		config,
		qingkong,
		getTreelnum
	})
</script>

<style scoped lang="less">
	.mengban {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index:221;
		background: RGBA(239, 240, 244, 0);
	}
	.gyss {
		width: 100%;
		height: 4vw;
		display: flex;
		align-items: center;
		position: relative;
		justify-content: space-between;

		.hei0 {
			height: 0 !important;
		}

		.xuze {
			width: 32vw;
			height: calc(85vh - 20vw);
			background: #fff;
			border-radius: 1.6vw;
			box-shadow: 0rpx 0rpx 1.3vw 0rpx rgba(163, 167, 182, 0.16);
			position: absolute;
			top: 4vw;
			right: 0;
			z-index: 311;

			.gysscrol {
				width: 100%;
				height: calc(85vh - 20vw);

				.acts {
					color: #0385FA !important;

					image {
						display: block;
					}
				}

				view {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-weight: 400;
					font-size: 1.5vw;
					color: #666666;
					margin-bottom: 1.2vw;
					padding: 0 1vw;

					&:nth-child(1) {
						margin-top: 0.9vw;
					}

					image {
						width: 1vw !important;
						height: 0.7vw !important;
						display: none;
					}
				}
			}
		}

		.lef {
			width: 6.7vw;
			letter-spacing: 2px;
			font-weight: 400;
			font-size: 1.5vw;
			color: #333333;
		}

		.set {
			width: 23vw;
			height: 3.8vw;
			padding: 0 1.7vw;
			display: flex;
			justify-content: space-between;
			background: #F8F8FA;
			border-radius: 1vw;
			align-items: center;

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

			text {
				font-weight: 300;
				font-size: 1.4vw;
				color: #999999;
				display: block;
				white-space: nowrap;
				overflow: hidden;
				width: 21vw;
				height: 1.5vw;
				line-height: 1.5vw;
				text-overflow: ellipsis;
			}

			.n {
				color: #000;
			}

		}
	}

	.unclass {
		opacity: 0 !important;
	}

	.ifclass {
		width: 36vw;
		height: 85vh;
		position: fixed;
		z-index: 120;
		background: rgba(255, 255, 255, 0.98);
		box-shadow: 0rpx 0rpx 1.3vw 0rpx rgba(163, 167, 182, 0.16);
		border-radius: 1.6vw;
		top: 10vh;
		left: 32vw;
		padding: 2.5vw 2.5vw;

		.btnbotm {
			width: 100%;
			height: 4vw;
			margin-top: 3vw;
			display: flex;
			justify-content: flex-end;
			align-items: end;

			.bt {
				min-width: 8vw;
				height: 3.8vw;
				background: #EDEDEF;
				border-radius: 1.9vw;
				padding: 0 2vw;
				margin-left: 1vw;
				border: 1px solid #EDEDEF;
				font-size: 1.8vw;
				font-weight: 400;
				color: #888888;
				white-space: nowrap;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.qd {
				background: linear-gradient(0deg, #CAE0F9, #E9F4FF);
				border: 1px solid rgba(3, 133, 250, 0.34);
				color: #0385FA;

				text {
					font-size: 1.4vw;
				}
			}
		}

		.scroltype {
			width: 100%;
			height: calc(85vh - 23vw);
			display: flex;
			justify-content: space-around;

			.scrl1 {
				width: 10vw;
			}

			.scrl2,
			.scrl3 {
				width: 10vw;
				display: flex;
				justify-content: flex-end;
				view {
					width: 8vw;
					margin-left: 1vw;
				}
			}
			.scroll-Y {
				width: 10vw;
				height: calc(85vh - 23vw);

				view {
					min-width: 8.5vw;
					max-width: 10vw;
					height: 3.8vw;
					background: #F5F5F8; 
					border-radius: 1.9vw;
					font-weight: 400;
					font-size: 1.3vw;
					color: #212327;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 0 0.4vw;
					margin-bottom: .8vw;
					text-align: center;

					text {
						white-space: nowrap;
						width: 6vw;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					>image {
						width: 2vw;
						height: 2vw;
					}
				}

				.act {
					background: #EAF5FF !important;
					font-weight: 600;
					color: #0385FA !important;
				}
			}
		}
	}

	.toptype {
		width: 100%;
		height: 2vw;
		display: flex;
		justify-content: space-around;
		margin: 1.4vw 0 .4vw 0;

		.act {
			background: rgba(255, 255, 255, 1) !important;
			font-weight: 600;
			color: #0385FA !important;
		}

		>view {
			width: 7vw;
			height: 1.9vw;
			border-radius: 1vw;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgba(255, 255, 255, .5);
			border: 1px solid rgba(255, 255, 255, .5);
			font-weight: 400;
			font-size: 1.2vw;
			color: #333333;
			padding: 0;
		}
	}

	.titletop {
		width: 100%;
		height: 2.5vw;
		font-weight: 400;
		font-size: 1.5vw;
		color: #333333;
		line-height: 2.5vw;
		margin-top: 1vw;
	}

	.guodu {
		transition: .4s;
		-webkit-transform-style: preserve-3d;
		-webkit-overflow-scrolling: touch;
	}
</style>