<template>
	<view class="bg-[var(--page-bg-color)] min-h-screen overflow-hidden">
		<view class="fixed left-0 top-0 right-0 z-10" v-if="statusLoading">
			<scroll-view scroll-x="true" class="scroll-Y box-border px-[24rpx] bg-white">
				<view class="flex whitespace-nowrap justify-around">
					<view :class="['text-sm leading-[90rpx]', { 'class-select': orderState === item.status.toString() }]"
						@click="orderStateFn(item.status)" v-for="(item, index) in orderStateList">{{ item.name }}</view>
				</view>
			</scroll-view>
		</view>

		<mescroll-body ref="mescrollRef" top="105rpx" @init="mescrollInit" @down="downCallback" @up="getBillOrderFn">
			<view class="order-wrap">
				<template v-for="(item, index) in list" :key="index">
					<view class="mb-[30rpx] bg-[#fff] pb-[24rpx]">
						<view @click="toLink(item)">
							<view class="px-[24rpx] py-[30rpx]">
								<view class="text-[30rpx] text-[#222] flex  justify-between">
									<view class="">
										{{ t('orderNo') }}：{{ item.order_no }}
									</view>
									<view class="text-[var(--primary-color)]">{{ item.status_name.name }}</view>
								</view>
							</view>
							<view class="px-[24rpx]">
								<text class="text-[#999]">缴费房产：{{ item.build_name }}</text>
							</view>
							<view class="px-[24rpx] my-[20rpx]">
								<text class="text-[#999]">账单数量：{{ item.order_item.length }}</text>
							</view>
							<view class="px-[24rpx]">
								<text class="text-[#999]">创建时间：{{ item.create_time }}</text>
							</view>
						</view>
						
						<view class="mt-[34rpx] flex z-10 px-[24rpx]">
							<view
								class="inline-block leading-[60rpx]"
								@click="toLink(item)">
								<text>合计：<text class=" text-[var(--price-text-color)] price-font">￥{{ item.order_money }}</text></text>
							</view>
							
							<view class="flex justify-end ml-auto">
								<view
									class="inline-block text-[26rpx] leading-[56rpx] px-[30rpx] border-[3rpx] border-solid border-[#999] rounded-full"
									v-if="item.status == 1" @click="orderBtnFn(item, 'close')">关闭订单</view>
								<view
									class="inline-block text-[26rpx] leading-[56rpx] px-[30rpx] border-[3rpx] border-solid border-[#999] rounded-full ml-[20rpx]"
									@click="toLink(item)">详情</view>
								<view
									class="inline-block text-[26rpx] leading-[56rpx] px-[30rpx] border-[3rpx] border-solid text-[#fff] border-primary bg-primary rounded-full ml-[20rpx]"
									@click="orderBtnFn(item, 'pay')" v-if="item.status == 1">支付</view>
							</view>
						</view>
					</view>
				</template>
			</view>
			<mescroll-empty :option="{tip : '暂无订单'}" v-if="!list.length && loading"></mescroll-empty>
		</mescroll-body>
		<pay ref="payRef"></pay>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { t } from '@/locale'
import { img, redirect } from '@/utils/common';
import { getBillOrderStatus, getBillOrder, billOrderClose } from '@/addon/xypm/api/member';
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 { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app';

const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);
let list = ref<Array<Object>>([]);
let loading = ref<boolean>(false);
let statusLoading = ref<boolean>(false);
let orderState = ref('')
let orderStateList = ref([]);

onLoad((option) => {
	orderState.value = option.status || "";
	getBillOrderStatusFn();
});

const getBillOrderFn = (mescroll) => {
	loading.value = false;
	let data: object = {
		page: mescroll.num,
		limit: mescroll.size,
		status: orderState.value
	};

	getBillOrder(data).then((res) => {
		let newArr = (res.data.data as Array<Object>);
		//设置列表数据
		if (mescroll.num == 1) {
			list.value = []; //如果是第一页需手动制空列表
		}
		list.value = list.value.concat(newArr);
		mescroll.endSuccess(newArr.length);
		loading.value = true;
	}).catch(() => {
		loading.value = true;
		mescroll.endErr(); // 请求失败, 结束加载
	})
}

const getBillOrderStatusFn = () => {
	statusLoading.value = false;
	orderStateList.value = [];
	let obj = { name: '全部', status: '' };
	orderStateList.value.push(obj);

	getBillOrderStatus().then((res) => {
		Object.values(res.data).forEach((item, index) => {
			orderStateList.value.push(item);
		});
		statusLoading.value = true;
	}).catch(() => {
		statusLoading.value = true;
	})
}

const orderStateFn = (status) => {
	orderState.value = status.toString();
	list.value = [];
	getMescroll().resetUpScroll();
};

const toLink = (data) => {
	redirect({ url: '/addon/xypm/pages/member/bill/order_detail', param: { order_id: data.order_id } })
}

// 支付
const payRef = ref(null)
const orderBtnFn = (data, type = '') => {
	if (type == 'pay')
		payRef.value?.open(data.order_type, data.order_id, `/addon/xypm/pages/member/bill/order_detail?order_id=${data.order_id}`);
	else if (type == 'close') {
		close(data);
	}
}

//关闭订单
const close = (item: any) => {
	uni.showModal({
		title: '提示',
		content: '您确定要关闭该订单吗？',
		success: res => {
			if (res.confirm) {
				billOrderClose(item.order_id).then((data) => {
					getMescroll().resetUpScroll();
				})
			}
		}
	})
}


</script>
<style>
	@import '@/addon/xypm/styles/common.scss';
</style>
