<script setup lang="ts">
import { onMounted,ref } from 'vue';
import { getAction, postAction } from '../../common/http';
	const form = ref({} as any)
	const list = ref([] as any[])
	onMounted(()=>{
		getAction('/fabric/info/all').then((res:any)=>{
			if(res.code===200){
				let set=new Set()
				let arr=[]
				res.data.forEach((l:any)=>{
					set.add(l.category)
					let a=arr.find((k:any)=>k.category===l.category)
					if(a){
						a.list.push(l.name)
					}else{
						arr.push({category:l.category,list:[l.name]})
					}
				})
				form.value.list = arr
				popuList.value=[...set].map((k:any)=>({text:k,value:k}))
			}
		})
	})
	
	const init = (arr:any[]) =>{
		list.value=[]
		postAction('/rawFabric/preview',arr).then((res:any)=>{
			if(res.code==200){
				list.value=res.data
			}
		})
	}
	
	const onClickLeft = () => {
		window.history.back()
	}
	
	const showPicker = ref(false)
	const popuList = ref([] as any[])
	//选择框事件
	const choosePic = () =>{
		showPicker.value=true
	}
	//选择框确认
	const pickerConfirm = (val:any) =>{
		form.value.pl=val.selectedValues[0]
		let item=form.value.list.find((l:any)=>l.category==val.selectedValues[0])
		init(item.list)
		showPickerCancel()
	}
	//取消
	const showPickerCancel = () =>{
		showPicker.value=false
	}
	
	const toDetile = (item:any) =>{
		console.log(item);
	}
</script>

<template>
	<view class="flex">
		<van-nav-bar title="白胚库存列表" left-text="返回" left-arrow @click-left="onClickLeft" />
		<van-cell-group inset>
			<van-field v-model="form.pl" name="品类" label="品类" colon class="bor" label-width="3em" readonly @click="choosePic"/>
		</van-cell-group>

		<view class="grid-container">
			<view class="grid-item">面料名称</view>
			<view class="grid-item">面料匹数</view>
			<view class="grid-item">面料米数</view>
			<view class="grid-item">操作</view>
		</view>
		<view class="content">
			<view class="grid-container" v-for="(item,index) in list" :key="index" @click="toDetile(item)">
				<view class="grid-item">{{item.category}}</view>
				<view class="grid-item">{{item.count}}</view>
				<view class="grid-item">{{item.len}}</view>
				<view class="grid-item">查看</view>
			</view>
		</view>
	</view>
	<!--选择框-->
	<van-popup v-model:show="showPicker" round position="bottom">
	  <van-picker
		  show-toolbar
		  :columns="popuList"
		  @confirm="pickerConfirm"
		  @cancel="showPickerCancel"
		  ref="pickerRef"
	  />
	</van-popup>
</template>
<style lang="scss" scoped>
	.flex {
		display: flex;
		flex-direction: column;
		height: 100vh;
		width: 100vw;
		overflow: hidden;

		.van-nav-bar {
			width: 100%;
		}

		.grid-container {
			display: grid;
			grid-template-columns: 2fr 1.6fr 1.6fr 1fr;
			padding: 0 15rpx;

			.grid-item {
				border: 1rpx solid #f2f2f2;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 5rpx;
			}
		}

		.content {
			flex: 1;
			overflow-y: scroll;
		}
	}

	::v-deep .van-cell {
		padding: 5px !important;
	}

	::v-deep .van-field {
		font-size: 16px;
	}

	.bor {
		::v-deep .van-field__control {
			border: 1px solid #d7d7d7;
			text-align: center;
		}

		::v-deep .van-field__label {
			margin: 0;
		}
	}

	.bor-a {
		::v-deep .van-field__control {
			border-bottom: 1px solid #d7d7d7;
			text-align: center;
		}

		::v-deep .van-field__label {
			margin: 0;
		}
	}

	::v-deep .van-button--normal {
		padding: 5px 8px;
		height: 30px;
	}

	::v-deep .van-field__control {
		text-align: center;
	}

	.footer-button {
		margin: 20px;
		display: flex;
		justify-content: space-around;
	}
</style>