<template>
	<uv-navbar :fixed="false" @leftClick="$onClickLeft" bgColor="#09b4f1">
		<template v-slot:left>
			<uv-icon name="arrow-left" size="19" color="#ffffff"></uv-icon>
		</template>
		<template v-slot:center>
			<text style="color:#ffffff">{{title}}</text>
		</template>
	</uv-navbar>
	<view class="container">
		<view class="pb-2 flex px-5" style="background-color: #09b4f1;">
			<uv-search placeholder="搜索产品名称" v-model="keyword" bgColor="#ffffff" :customStyle="customStyle"
				:show-action="false" @change="onSearch"></uv-search>
		</view>
		<view class="wrap">
			<scroll-view scroll-y class="sv" :style="{height:scrollHeight+'px'}" :scroll-top="scrollTop" @scroll="scroll"
				@scrolltolower="reachBottom">
				<view class="page-box">
					<block v-if="list.length > 0">
						<view class="client" v-for="(item, index) in list" :key="index">
							<view class="top">
								<view>
									<radio activeBackgroundColor="#09b4f1" activeBorderColor="#09b4f1" color="#09b4f1" :disabled="true"
										:value="item.id" :checked="item.checked" />
								</view>
								<view class="sku-name">{{item.storeName}}</view>
							</view>

							<view class="item">
								<view class="title uv-line-2 flex">
									<view class="mr-1">规格：{{item.sku}}</view>
									<uv-text color="#3c9cff" text="选择规格" @click="selectSku(item,index)"></uv-text>
								</view>
								<view class="title">库存：{{item.stock}}</view>
								<view class="decimal">价格：{{item.price}}</view>
							</view>

							<view class="bottom">
								<view class="client_time">添加时间: {{formatDateTime(item.createTime)}}</view>
								<view class="flex">
									<view class="btn ml-1 entity" :style="{backgroundColor:item.checked?'#999':'#09b4f1'}"
										@click.stop="onSelect(item,index)">{{item.checked ? '取消':'选择'}}</view>
								</view>
							</view>
						</view>
						<uv-load-more :status="listStatus"></uv-load-more>
					</block>
					<uv-empty text="暂无数据" v-else margin-top="50" mode="list"></uv-empty>
				</view>
			</scroll-view>
			<view class="bottom_btn flex justify-end">
				<view class="mr-1">
					<uv-button @click="selectedShow"
						customStyle="padding-left:80rpx;padding-right:80rpx;border:solid">查看已选</uv-button>
				</view>
				<view class="mr-1">
					<uv-button color="#09b4f1" customStyle="padding-left:80rpx;padding-right:80rpx;"
						@click="chosen">选好了</uv-button>
				</view>
			</view>
		</view>
		<!-- 已选产品弹窗 -->
		<uv-popup mode="bottom" round="38" ref="selectedRef">
			<view class="popup-content">
				<view class="popup-title">
					<view class="" style="width: 45px;">
					</view>
					<text class="">已选产品</text>
					<view class="" @click="selectedClose" style="width: 45px;">
						<uv-icon name="close" color="#909399" size="30"></uv-icon>
					</view>
				</view>
				<scroll-view scroll-y style="height: 960rpx;width: 100%;" @scrolltolower="reachBottom">
					<view class="list">
						<block v-if="selectList.length > 0">
							<view class="mb-4">
								<view class="item flex" v-for="(item,index) in selectList" :key="index">
									<view class="title pr-1">{{item.storeName}}(规格:{{item.sku}})</view>
									<view class="check-icon">
										<uv-button size="mini" type="error" @click="remove(item,index)">删除</uv-button>
									</view>
								</view>
							</view>
							<uv-load-more status="nomore"></uv-load-more>
						</block>
						<uv-empty text="暂无数据,请先选择产品" v-else margin-top="50" mode="list"></uv-empty>
					</view>
				</scroll-view>
			</view>
		</uv-popup>

		<!-- 选择sku弹窗 -->
		<uv-popup mode="bottom" round="38" ref="selectShowRef">
			<view class="popup-content">
				<view class="popup-title">
					<view class="" style="width: 45px;">
					</view>
					<text class="">选择产品规格</text>
					<view class="" @click="selectShowClose" style="width: 45px;">
						<uv-icon name="close" color="#909399" size="30"></uv-icon>
					</view>
				</view>
				<scroll-view scroll-y style="height: 760rpx;width: 100%;" @scrolltolower="reachBottom">
					<view class="list">
						<block v-if="skuList.length > 0">
							<view class="mb-2">
								<view class="item flex" v-for="(item,index) in skuList" :key="index" @click="onItem(item,index)">
									<view class="title">{{item.sku}}</view>
									<view class="check-icon">
										<uv-icon v-if="item.checked" name="checkmark" color="#09b4f1" size="28"></uv-icon>
									</view>
								</view>
							</view>
						</block>
						<uv-empty text="暂无数据" v-else mode="list"></uv-empty>
					</view>
				</scroll-view>
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		unref,
		computed
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReady
	} from '@dcloudio/uni-app'
	import {
		getProducts,
		getProductsSku
	} from '@/api/business'
	import AddressSelect from '@/components/AddressSelect/index.vue'
	import {
		formatDateTime,
		prePage
	} from '@/utils/util'
	import {
		useMainStore
	} from '@/store/store'
	import {
		storeToRefs
	} from 'pinia'
	const main = useMainStore()
	const {
		selectProductList
	} = storeToRefs(main)
	const title = ref('选择产品')
	const keyword = ref('')
	const selected = ref(false)
	const priceShow = ref(false)
	const oldScrollTop = ref(0)
	const scrollTop = ref(-1)
	const skuList = ref([])
	const list = ref([])
	const selectList = ref([])
	const consentShow = ref(false)
	const refund_type = ref(1)
	const current = ref(0)
	const pH = ref(0)
	const dx = ref(0)
	const scrollHeight = ref(0)
	const page = ref(1)
	const pageSize = ref(15)
	const lastPage = ref(false)
	const listStatus = ref('loadmore')
	const status = ref('')
	const order_id = ref('')
	const thisIndex = ref(0)


	onReady(() => {
		uni.getSystemInfo({
			success(res) {
				pH.value = res.windowHeight
				let scrollH = uni.createSelectorQuery().select(".sv")
				scrollH.boundingClientRect(data => {
					let pH0 = pH.value
					scrollHeight.value = pH0 - data.top
				}).exec()
			}
		})
	})

	onLoad((opt) => {
		selectList.value = selectProductList.value || []
		getProductList()
	})

	// 选中一个
	const selectShowRef = ref()
	const onSelect = (val, i) => {
		if (!val.sku) {
			uni.showToast({
				title: '请先选择产品规格',
				icon: 'error',
				duration: 2000
			})
			return
		}
		list.value.forEach((item, index) => {
			if (val.id == item.id) {
				item.checked = item.checked ? !item.checked : true
			}
		})
		// 添加已选
		if (list.value[i].checked == true) {
			// 添加已选中
			selectList.value.push(list.value[i])
		} else {
			// 删除取消选中
			selectList.value.forEach((item, i) => {
				if (item.id == val.id) {
					selectList.value.splice(i, 1)
				}
			})
		}
	}

	const selectSku = async (val, index) => {
		thisIndex.value = index
		let list = await getProductsSku({
			id: val.id
		})
		skuList.value = list.map(item => {
			return {
				...item,
				checked: val.chooseSkuInfo && item.id == val.chooseSkuInfo.id ? true : false
			}
		})
		unref(selectShowRef).open()
	}

	const selectShowClose = () => {
		unref(selectShowRef).close()
	}

	const selectedRef = ref()
	const selectedShow = () => {
		unref(selectedRef).open()
	}

	const selectedClose = () => {
		unref(selectedRef).close()
	}

	// 选择客户
	const onItem = (val, i) => {
		skuList.value.forEach((item, index) => {
			if (val.id == item.id) {
				item.checked = true
			} else {
				item.checked = false
			}
		})
		list.value[thisIndex.value].sku = val.sku
		list.value[thisIndex.value].chooseSkuInfo = val
		list.value[thisIndex.value].productAttrUnique = val.unique
		selectShowClose()
	}

	//移除已选产品
	const remove = (val, index) => {
		list.value.forEach((i, index) => {
			if (val.id == i.id) {
				i.checked = false
			}
		})
		selectList.value.splice(index, 1)
	}

	// 选好了
	const chosen = () => {
		main.SET_SELECT_PRODUCT(selectList.value)
		uni.navigateBack();
	}

	// 页面数据
	const getProductList = async (isNextPage, pages) => {
		await getProducts({
			pageNo: page.value,
			pageSize: pageSize.value,
			storeName: keyword.value,
			isShow: 1
		}).then(res => {
			if (res) {
				res.list.forEach((item, index) => {
					item.checked = false
					// 设置默认数据
					item.nums = 1
					item.remarks = ''
					selectList.value.forEach((i, index) => {
						if (i.id == item.id) {
							item.checked = true
						}
					})
				})
				if (res.list.length < pageSize.value) {
					listStatus.value = 'nomore'
				}
				if (res.list.length == 0) {
					lastPage.value = true
				}
				// 第二页开始
				if (isNextPage) {
					list.value = list.value.concat(res.list)
					return
				}
				list.value = res.list
			}
		})
	}

	const scroll = (e) => {
		oldScrollTop.value = e.detail.scrollTop
	}

	// 滚动到底部
	const reachBottom = () => {
		if (lastPage.value || listStatus.value == 'loading') return;
		listStatus.value = 'loading'
		setTimeout(() => {
			if (lastPage.value) return;
			getProductList(true, ++page.value)
			if (list.value.length >= pageSize.value) {
				listStatus.value = 'loadmore'
			} else {
				listStatus.value = 'loading'
			}
		}, 1200)
	}
	// 点击搜索
	const onSearch = () => {
		page.value = 1
		getProductList()
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F7F7F7;
		min-height: 100vh;
	}

	.page-box {
		padding: 20rpx 20rpx 160rpx;
	}

	.client {
		width: 710rpx;
		background-color: #ffffff;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;

		.top {
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.sku-name {
				font-size: 30rpx;
				margin-left: 10rpx;
				color: #333;
			}

			.right {
				color: #FF7159;
			}
		}

		.item {
			margin: 20rpx 0 0;

			.content {
				font-size: 28rpx;

				.title {
					line-height: 50rpx;
				}

				.type {
					margin: 10rpx 0;
				}
			}

			.title {
				line-height: 50rpx;
			}

			.decimal {
				margin: 10rpx 0;
			}

			.number {
				color: $uv-tips-color;
				font-size: 24rpx;
			}
		}

		.bottom {
			display: flex;
			margin-top: 10rpx;
			justify-content: space-between;
			align-items: center;

			.client_time {
				color: #777;
				font-size: 26rpx;
			}

			.btn {
				line-height: 60rpx;
				width: 160rpx;
				border-radius: 5px;
				font-size: 26rpx;
				text-align: center;
				color: $uv-info-dark;
			}

			.entity {
				color: #fff;
				background-color: #09b4f1;
			}
		}
	}

	.wrap {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.bottom_btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		text-align: right;
		padding: 28rpx 10rpx 45rpx;
		background-color: #fff;
		z-index: 100;
	}

	.popup-content {
		.popup-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			font-size: 35rpx;
			font-weight: 600;
			text-align: center;
			height: 50px;
			padding-right: 25rpx;
		}

		.list {
			margin-bottom: 45rpx;

			.item {
				padding: 0 25rpx;
				justify-content: space-between;
				height: 55px;

				.title {
					flex: 1;
					font-size: 28rpx;
					font-weight: 600;
				}

				.check-icon {
					text-align: center;
					width: 100rpx;
				}
			}
		}
	}
</style>