<template>
	<view class="mater-select">
		<!-- <u-sticky>
      <view class="search-wrap">
        <u-search placeholder="关键词搜索" :showAction="false" v-model="keyword"></u-search>
      </view>
    </u-sticky> -->
		<u-cell-group>
			<div v-for="material in materialList" :key="material.type">
				<p class="type-title">
					{{ material.type }}
				</p>
				<view v-for="item in option.filter((item) =>item.type==material.type)" :key="item.label">
					<u-cell :title="item.text" @click="onSelect(item)"></u-cell>
				</view>
			</div>

		</u-cell-group>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: "",
				option: [],
				materialList: [],
				index: null,
				isMultiple: "0",
			};
		},
		onLoad(options) {
			this.handleOption(options);
		},
		methods: {
			onSelect(item) {
				console.log(item, "========");
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2].$vm.orderForm; //上一个页面
				console.log(this.index);
				if (this.index && this.index !== null) {
					prevPage.batchOrderList[this.index].materialId = ''
					prevPage.batchOrderList[this.index].materialName = ''
					prevPage.batchOrderList[this.index].kind = ''
					prevPage.batchOrderList[this.index].measureUnit = ''
					if (item.value) {
						prevPage.batchOrderList[this.index].materialId = item.value
						prevPage.batchOrderList[this.index].materialName = item.text
						prevPage.batchOrderList[this.index].measureUnit = item.measureUnit
					}
				} else {
					prevPage.materialId = ''
					prevPage.materialName = ''
					prevPage.kind = ''
					prevPage.measureUnit = ''
					if (item.value) {
						prevPage.materialId = item.value
						prevPage.materialName = item.text
						prevPage.kind = item.kind
						prevPage.measureUnit = item.measureUnit
					}
				}
				uni.navigateBack();
			},
			handleOption(options) {
				this.option = JSON.parse(options.option) || [];
				this.materialList = this.repeatList(this.option);
				this.index = options.index;
				console.log(this.materialList, "===========");
			},
			repeatList(arr) {
				const map = new Map();
				return arr.filter((item) => !map.has(item.type) && map.set(item.type, 1));
			},
		},
	};
</script>

<style lang="scss" scoped>
	.mater-select {
		.search-wrap {
			padding: 20rpx 30rpx;
			background-color: #fff;
		}

		.type-title {
			line-height: 84rpx;
			background-color: #f2f2f2;
			padding: 0 30rpx;
			font-size: 30rpx;
			font-weight: bold;
		}
	}
</style>