<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2023年5月26日 13:28:56
	 */
	import {
		ref,
		computed
	} from 'vue'
	import {
		BuyItemsAction,
		BuyInfoAction,
		$image,
		$response
	} from '@/api'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from '@/store'
	const $store = useStore()
	const buy_info = ref(false)
	const BuyInfo = async (items = true) => {
		const response = await BuyInfoAction($store.buy_info)
		$response(response, () => {
			buy_info.value = response.data
			//遍历返回的自选项目，获取id 赋值给 本地缓存
			let ll=[]
			buy_info.value.items.forEach(function(v,i){
				ll.push(v.id)
			})
			$store.buy_info.items=ll
			
			
			if (items) BuyItems()
		})
	}
	const items_list = ref([])
	const BuyItems = async () => {
		uni.showLoading()
		const response = await BuyItemsAction($store.buy_info)
		uni.hideLoading()
		$response(response, () => {
			items_list.value = response.data.list
		})
	}
	const search_input = ref('')
	const items_list_show = computed(() => {
		let list = {}
		for (let i in items_list.value) {
			for (let j in items_list.value[i].items) {
				let name = items_list.value[i].items[j].name.indexOf(search_input.value)
				let py = items_list.value[i].items[j].py.indexOf(search_input.value)
				if (!search_input.value) {
					name = 1
					py = 1
				}
				if (name !== -1 || py !== -1) {
					if (!(`g${items_list.value[i].id}` in list)) {
						list[`g${items_list.value[i].id}`] = {
							...items_list.value[i],
							items: []
						}
					}
					list[`g${items_list.value[i].id}`].items.push(items_list.value[i].items[j])
				}
			}
		}
		let l = []
		for (let i in list) {
			l.push(list[i])
		}
		return l
	})

	const items_group_active = ref(0)
	const itemClick = (info) => {
		
		let index = $store.buy_info.items.indexOf(info.id)
		if (index === -1) {
			$store.buy_info.items.push(info.id)
		} else {
			$store.buy_info.items.splice(index, 1)
		}
	 console.log($store.buy_info.items)
		BuyInfo(false)
	}
	const nextClick = () => {
		if ($store.buy_info.combo !== 0) {
			uni.navigateBack({
				delta: 1
			})
		} else {
			uni.navigateTo({
				url: '/pages/buy/info/info'
			})
		}
	}
	const searchInputUpdate = () => {
		items_group_active.value = 0
	}
	onShow(() => {
		BuyInfo()
		console.log(JSON.stringify($store.buy_info))
	})
</script>
<template>
	<view>
		<view class="top_line_wrapper"></view>
		<view class="search_wrapper">
			<input v-model="search_input" @input="searchInputUpdate" class="search_input_wrapper" placeholder="搜索"
				type="text">
		</view>
		<view class="items_wrapper">
			<view class="items_group_wrapper">
				<view v-if="items_list_show.length > 0">
					<view class="items_group_item_wrapper" @click="items_group_active = k" :class="[
						items_group_active === k ? 'items_group_item_active_wrapper' : ''
					]" v-for="(i,k) in items_list_show" :key="k">
						<view class="items_group_item_text_wrapper">{{ i.name }}</view>
					</view>
				</view>
			</view>
			<view v-if="items_list_show.length > 0" class="items_list_wrapper">
				<view class="items_list_title_wrapper">
					<view class="items_list_title_box_wrapper">{{ items_list_show[items_group_active].name }}</view>
				</view>
				<view class="items_list_list_wrapper">
					<view @click="itemClick(i)" class="items_list_list_item_wrapper"
						v-for="(i,k) in items_list_show[items_group_active].items" :key="k">
						<view class="items_list_list_item_name_wrapper">{{ i.name }}</view>
						<view class="items_list_list_item_right_wrapper">
							<view class="items_list_list_item_price_wrapper">￥{{ Number(i.price).toFixed(2) }}</view>
							<view class="items_list_list_item_choose_wrapper">
								<image v-if="$store.buy_info.items.indexOf(i.id) !== -1"
									:src="$image('/storage/assets/mp/items/选中.png')"></image>
								<image v-if="$store.buy_info.items.indexOf(i.id) === -1"
									:src="$image('/storage/assets/mp/items/未选中.png')"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom_wrapper">
			<view v-if="!!buy_info" class="bottom_box_wrapper">
				<view class="bottom_count_wrapper">
					<view>您需现场付费</view>
					<view>{{ buy_info.count }}个项目</view>
				</view>
				<view class="bottom_line_wrapper"></view>
				<view class="bottom_price_wrapper">
					<view class="bottom_price_original_price_wrapper"
						v-if="Number(buy_info.original_price) > Number(buy_info.price)">
						￥{{ Number(buy_info.original_price).toFixed(2) }}
					</view>
					<view class="bottom_price_price_wrapper">
						<view class="bottom_price_price_icon_wrapper">￥</view>
						{{ Number(buy_info.price).toFixed(2) }}
					</view>
				</view>
				<view @click="nextClick()" class="bottom_button_wrapper">下一步</view>
			</view>
			<view class="blank_wrapper"></view>
		</view>
		<view class="blank_wrapper"></view>
	</view>
</template>
<style>
	page {
		background: #ffffff;
	}
</style>
<style scoped>
	.items_list_list_item_price_wrapper {
		font-size: 30rpx;
		font-weight: 500;
		color: #F02E50;
		line-height: 1;
		margin-right: 23rpx;
	}

	.items_list_list_item_right_wrapper {
		display: flex;
		align-items: center;
	}

	.items_list_list_item_name_wrapper {
		font-size: 30rpx;
		font-weight: 500;
		color: #181818;
		width: 300rpx;
		margin-left: 30rpx;
	}

	.items_list_list_item_choose_wrapper image {
		width: 40rpx;
		height: 40rpx;
		display: block;
	}

	.items_list_list_item_choose_wrapper {
		width: 40rpx;
		height: 40rpx;
		margin-right: 28rpx;
	}

	.items_list_list_item_wrapper {
		display: flex;
		width: 574rpx;
		min-height: 104rpx;
		background: #FFFFFF;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #F2F0F0;
	}

	.items_list_title_box_wrapper {
		margin-left: 30rpx;
		max-width: 500rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.items_list_title_wrapper {
		width: 574rpx;
		height: 62rpx;
		background: #d9e3e9;
		font-size: 26rpx;
		font-weight: 500;
		color: #0BBACF;
		line-height: 62rpx;
	}

	.items_list_wrapper {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: 574rpx;
		background: #f0f0f1;
		overflow-y: auto;
		background: #ffffff;
	}

	.items_group_item_active_wrapper {
		background: #ffffff;
	}

	.items_group_item_active_wrapper>.items_group_item_text_wrapper {
		color: #0BBACF;
	}

	.items_group_item_text_wrapper {
		position: absolute;
		top: 50%;
		left: 20rpx;
		right: 20rpx;
		transform: translateY(-50%);
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		text-align: center;
		font-size: 26rpx;
		font-weight: 500;
		color: #222222;
		line-height: 34rpx;
	}

	.items_group_item_wrapper {
		width: 176rpx;
		height: 120rpx;
		position: relative;
	}

	.items_group_wrapper {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 176rpx;
		background: #f0f0f1;
		overflow-y: auto;
	}

	.bottom_price_price_icon_wrapper {
		font-size: 24rpx;
		font-weight: 400;
	}

	.bottom_price_price_wrapper {
		font-size: 36rpx;
		font-weight: 800;
		color: #F02E50;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.bottom_price_original_price_wrapper {
		font-size: 22rpx;
		font-weight: 800;
		text-decoration: line-through;
		color: #444444;
		line-height: 1;
	}

	.bottom_button_wrapper {
		width: 320rpx;
		height: 68rpx;
		background: #0BBACF;
		border-radius: 34rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 68rpx;
		text-align: center;
		overflow: hidden;
	}

	.bottom_price_wrapper {
		text-align: right;
		margin-right: 30rpx;
		width: 200rpx;
	}

	.bottom_line_wrapper {
		width: 1rpx;
		height: 53rpx;
		background: #dedede;
	}

	.bottom_count_wrapper {
		width: 169rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #000000;
		line-height: 40rpx;
		text-align: center;
	}

	.bottom_box_wrapper {
		height: 120rpx;
		display: flex;
		align-items: center;
	}

	.bottom_wrapper {
		position: fixed;
		width: 750rpx;
		background: #ffffff;
		bottom: 0;
	}

	.items_wrapper {
		position: fixed;
		bottom: calc(150rpx + var(--safe-area-inset-bottom));
		top: 111rpx;
		left: 0;
		right: 0;
		border-top: 1rpx solid #0BBACF;
	}

	.search_input_wrapper {
		height: 66rpx;
		border-radius: 34rpx;
		border: 1rpx solid #0BBACF;
		width: 660rpx;
		line-height: 66rpx;
		text-align: center;
	}

	.search_wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
	}
</style>