<template>
	<view class="bg-[var(--page-bg-color)] min-h-screen overflow-hidden" v-if="showPage">
		
		<view class="list-wrap sidebar-margin mt-[20rpx]">
			
			<view class="flex flex-col card-template mb-[20rpx] pt-[20rpx] pb-[20rpx]">
				{{memberBuildInfo.house_type_text}}【{{memberBuildInfo.build_name}}】- 待缴账单
			</view>
			<view class="mb-[var(--top-m)] rounded-[var(--rounded-big)] overflow-hidden" v-for="(item, index) in list">
				<view class="flex flex-col card-template">
					<view class="flex-1 line-feed">
						<view class="flex items-center">
							<view class="text-[#333] text-[30rpx] leading-[34rpx] font-500">{{ item.feeitem }}</view>
							
							<view class="ml-auto">
								<text class="text-[24rpx] font-500 text-[var(--price-text-color)] price-font">￥</text>
								<text class="text-[30rpx] mr-[10rpx]  font-500  text-[var(--price-text-color)] price-font">{{ moneyFormat(item.money) }}</text>
							</view>
						</view>
						<view class="mt-[16rpx] text-[26rpx] line-feed text-[var(--text-color-light9)] leading-[1.4]">收费日期：{{ item.startdate }} ～ {{ item.enddate }} </view>
					</view>
				</view>
			</view>
		</view>
		<mescroll-empty :option="{tip : '暂无待缴账单'}" v-if="!list.length"></mescroll-empty>
		
		<u-tabbar :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
		    <view class="flex-1 flex items-center justify-between">
		        <view class="whitespace-nowrap px-[30rpx] text-color font-600 leading-[45rpx]">
		            <text class="text-[#333333] text-[26rpx]">合计：</text>
		            <text class="text-[24rpx] font-500 text-[var(--price-text-color)] price-font">￥</text>
		            <text class="text-[34rpx] mr-[10rpx]  font-500  text-[var(--price-text-color)] price-font">{{
		                moneyFormat(totalMoney) }}</text>
		        </view>
		        <button class="!w-[220rpx] !h-[66rpx] text-[30rpx] mr-[30rpx] leading-[66rpx] rounded-full text-white bg-[var(--primary-color)] remove-border"
		            :loading="createLoading" @click="createOrder">确认缴费</button>
		    </view>
		</u-tabbar>
		<pay ref="payRef" @close="payClose"></pay>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { redirect,moneyFormat } from '@/utils/common';
	import { getBillOrderInitData,createBillOrder } from '@/addon/xypm/api/member';
	import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
	import { onLoad } from '@dcloudio/uni-app';

	let list = ref<Array<Object>>([]);
	let loading = ref<boolean>(false);
	let showPage = ref<boolean>(false);
	let member_build_id = ref<number | string>('');
	let memberBuildInfo = ref({});
	let totalMoney = ref<number | string>('');
	let orderId = ref<number | string>('');
	const createLoading = ref(false)
	const payRef = ref(null)
	
	onLoad((option: any) => {
		member_build_id.value = option.member_build_id || ''
		getBillOrderInitData({member_build_id:member_build_id.value}).then(res => {
			memberBuildInfo.value = res.data.member_build_info;
			list.value = res.data.bill_list;
			totalMoney.value = res.data.total_money;
			showPage.value = true;
		})
	});

	/**
	 * 创建缴费订单
	 */
	const createOrder = () => {
		
		
		if (createLoading.value) return
		createLoading.value = true
		
		let data = {
		    member_build_id: member_build_id.value,
		}
		
		createBillOrder(data).then(res => {
			
			console.log('res',res);
			
			orderId.value = res.data.trade_id;
			payRef.value?.open(res.data.trade_type, res.data.trade_id,`/addon/xypm/pages/member/bill/order_detail?order_id=${res.data.trade_id}`);
			createLoading.value = false
		}).catch(() => {
			createLoading.value = false
			loading.value = false
		})
	}
	
	/**
	 * 支付弹窗关闭
	 */
	const payClose = () => {
	    redirect({ url: '/addon/xypm/pages/member/bill/order_detail', param: { order_id: orderId.value }, mode: 'redirectTo' })
	}

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