<template>
	<view class="bg-[var(--page-bg-color)] min-h-[100vh]" :style="themeColor()">

		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="{ use: false }" height="auto" @up="getListFn"
			:top="mescrollTop">
			<view class="sidebar-margin body-bottom" v-if="productList.length">
				<u-checkbox-group class="w-full" v-model="checkProductList" placement="column">
					<view class="mb-[15rpx]" v-for="(item,index) in productList" :key="index">

						<view class="bg-[#ffffff] rounded-10rpx">
							<view class="head border-0 border-b-1 border-solid border-[#ddd]">
								<view class="flex justify-between p-[20rpx]">
									<view class="u-body-item-title u-line-2">{{item.name}}</view>
								</view>
							</view>
							<view class="body">
								<view class="flex justify-start flex-col p-[20rpx]">
									<view class="flex justify-start mb-[18rpx] text-[12px] text-[#6a6a6a]">
										{{ t('code') }}:<text
											class="ml-[20rpx] text-[var(--primary-color)]">{{item.code}}</text>
									</view>
									<view class="flex justify-start mb-[18rpx] text-[12px] text-[#6a6a6a]">
										{{ t('productTypeId') }}:<text
											class="ml-[20rpx] text-[var(--primary-color)]">{{item.productType?.name}}</text>
									</view>
									<view class="flex justify-start mb-[18rpx] text-[12px] text-[#6a6a6a]">
										{{ t('spec') }}:<text
											class="ml-[20rpx] text-[var(--primary-color)]">{{item.spec}}</text>
									</view>
									<view class="flex justify-start mb-[18rpx] text-[12px] text-[#6a6a6a]">
										{{ t('inventory') }}:<text
											class="ml-[20rpx] text-[var(--primary-color)]">{{item.inventory}}</text>
									</view>
									<view class="flex justify-start mb-[18rpx] text-[12px] text-[#6a6a6a]">
										{{ t('productUnitId') }}:<text
											class="ml-[20rpx] text-[var(--primary-color)]">{{item.productUnit?.name}}</text>
									</view>
									<view class="flex justify-start mb-[18rpx] text-[12px] text-[#6a6a6a]">
										{{ t('createTime') }}:<text
											class="ml-[20rpx] text-[var(--primary-color)]">{{item.create_time}}</text>
									</view>

								</view>
							</view>
							<view class="foot  border-0 border-t-1 border-solid border-[#ddd]">
								<view class="flex justify-start p-[20rpx]">
									<u-checkbox :name="item" :label="t('choose')"></u-checkbox>
								</view>
							</view>
						</view>
					</view>
				</u-checkbox-group>
			</view>
			<mescroll-empty v-if="!productList.length && !loading &&!listLoading"></mescroll-empty>

		</mescroll-body>
		<loading-page :loading="loading"></loading-page>
		<view class="sidebar-margin mt-[20rpx] body-bottom">
			<u-button @click="onConfirm" type="primary" shape="circle" :text="t('confirmChoose')"></u-button>
		</view>

	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, computed, nextTick } from 'vue'
	import { topTabar } from '@/utils/topTabbar';
	import { t } from '@/locale';
	import { redirect, pxToRpx } from '@/utils/common';
	import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
	import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
	import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
	import { getProductList, getProductListByWarehouse } from '@/addon/erp/api/product';
	import { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app';

	const { downCallback, mescrollInit, getMescroll } = useMescroll(onPageScroll, onReachBottom);


	const checkProductList = ref<any[]>([]);
	const queryType = ref<any>('all');	// 查询方式 all 获取全部产品，  warehouse 根据仓库ID ，获取对应的产品
	const warehouse_id = ref<any>(undefined);	// 仓库Id
	// 页面加载
	onLoad((option : any) => {
		queryType.value = option.type ? option.type : '';
		warehouse_id.value = option.warehouse_id ? option.warehouse_id : undefined
	})


	const mescrollTop = "20rpx"

	const productList = ref<Array<any>>([]),
		loading = ref<boolean>(true),
		listLoading = ref<boolean>(true),
		mescrollRef = ref(null);

	interface mescrollStructure {
		num : number,
		size : number,
		endSuccess : Function,
		[propName : string] : any
	}

	const getListFn = (mescroll : mescrollStructure) => {
		listLoading.value = true;
		let data : Object = {
			page: mescroll.num,
			limit: mescroll.size,
			warehouse_id: warehouse_id.value
		};
		let getDataApi =
			queryType.value == "all" ? getProductList : getProductListByWarehouse;

		getDataApi(data).then((res : any) => {
			let newArr = res.data.data;
			mescroll.endSuccess(newArr.length);
			//设置列表数据
			if (mescroll.num == 1) {
				productList.value = []; //如果是第一页需手动制空列表
			}
			productList.value = productList.value.concat(newArr);
			listLoading.value = false;
			loading.value = false;
		}).catch((err) => {
			// 如果是4001，没有绑定企业账号，强制跳转绑定
			if (err.code == 4001) {
				redirect({ url: '/addon/erp/pages/member/bind' })
			}
			listLoading.value = false;
			loading.value = false;
			mescroll.endErr(); // 请求失败, 结束加载
		})
	}

	// 确认选择
	const onConfirm = () => {
		uni.$emit('choose_product', checkProductList.value);
		// 返回上一页
		uni.navigateBack({
			delta: 1
		});
	}
</script>

<style>
</style>