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

		<up-subsection :list="statusList" mode="subsection" :current="0" @change="handleChange" />
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="{ use: false }" height="auto" @up="getListFn"
			:top="mescrollTop">
			<view class="sidebar-margin body-bottom" v-if="orderList.length">
				<view class="mb-[15rpx]" v-for="(item,index) in orderList" :key="item.id">

					<view class="bg-[#ffffff] rounded-10rpx"
						@click="redirect({ url: '/addon/erp/pages/purchase/order/detail',param:{id: item.id} })">
						<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.code}}</view>
								<view>
									<up-tag v-if="item.status == 0" :text="item.status_text" type="warning" plain
										size="mini"></up-tag>
									<up-tag v-if="item.status == 1" :text="item.status_text" type="error" plain
										size="mini"></up-tag>
									<up-tag v-if="item.status == 2" :text="item.status_text" plain size="mini"></up-tag>
									<up-tag v-if="item.status == 3" :text="item.status_text" type="success" plain
										size="mini"></up-tag>
								</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('supplierId') }}:<text
										class="ml-[20rpx] text-[var(--primary-color)]">{{item.supplier?.name}}</text>
								</view>
								<view class="flex justify-start mb-[18rpx] text-[12px] text-[#6a6a6a]">
									{{ t('contact') }}:<text
										class="ml-[20rpx] text-[var(--primary-color)]">{{item.supplier?.contact}}</text>
								</view>
								<view class="flex justify-start mb-[18rpx] text-[12px] text-[#6a6a6a]">
									{{ t('phone') }}:<text
										class="ml-[20rpx] text-[var(--primary-color)]">{{item.supplier?.phone}}</text>
								</view>
								<view class="flex justify-start mb-[18rpx] text-[12px] text-[#6a6a6a]">
									{{ t('type') }}:<text
										class="ml-[20rpx] text-[var(--primary-color)]">{{item.type}}</text>
								</view>
								<view class="flex justify-start mb-[18rpx] text-[12px] text-[#6a6a6a]">
									{{ t('totalNums') }}:<text
										class="ml-[20rpx] text-[var(--primary-color)]">{{item.total_num}}</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>
				</view>
			</view>
			<mescroll-empty v-if="!orderList.length && !loading &&!listLoading"></mescroll-empty>

		</mescroll-body>
		<loading-page :loading="loading"></loading-page>
		<view class="fixed bottom-4 right-4 z-2">
			<up-button @click="redirect({ url: '/addon/erp/pages/purchase/order/add'})" type="primary" shape="circle"
				:customStyle="{borderRadius: '50%',padding: 0,width: '50px',height: '50px'}">
				<u-icon size="30" color="#fff" name="plus-circle-fill"></u-icon>
			</up-button>
		</view>

	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	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 { getOrderList, getOrderStatus } from '@/addon/erp/api/purchase';
	import { onShow, onPageScroll, onReachBottom, onLoad } from '@dcloudio/uni-app';

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


	const show = ref(false);
	const statusList = ref<any[]>([]);
	const searchParams = ref<any>({
		status: undefined,
	});

	// 获取系统状态栏的高度
	let menuButtonInfo : any = {};
	// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
	menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	// #endif


	onLoad(() => {
		getStatusAllFn();
	})

	// 获取状态
	const getStatusAllFn = () => {
		getOrderStatus().then((res) => {
			statusList.value = res.data;
			statusList.value.unshift('全部')
		});
	};

	// 分段器改变事件
	const handleChange = (index : number) => {
		// 由于多了一个全部，这里多个处理
		if (index === 0) {
			searchParams.value.status = undefined
		} else {
			searchParams.value.status = index - 1;
		}
		getMescroll().resetUpScroll();
	}

	const mescrollTop = "20rpx"

	const orderList = 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,
			status: searchParams.value.status
		};
		getOrderList(data).then((res : any) => {
			let newArr = res.data.data;
			mescroll.endSuccess(newArr.length);
			//设置列表数据
			if (mescroll.num == 1) {
				orderList.value = []; //如果是第一页需手动制空列表
			}
			orderList.value = orderList.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(); // 请求失败, 结束加载
		})
	}
</script>

<style>
</style>