<template>
	<view class="bg-[var(--page-bg-color)] min-h-screen overflow-hidden">
		<view v-if="!loading" class="pb-20rpx">
			<view v-if="detail.status_name" class="flex status-item text-[32rpx] bg-primary h-[240rpx]">
				<view class="ml-[50rpx]">
					<img v-if="detail.status == 1" class="w-[70rpx] h-[70rpx] mt-[45rpx]" :src="img('addon/xypm/order/payment.png')" />
					<img v-if="detail.status == 2" class="w-[70rpx] h-[70rpx] mt-[45rpx]" :src="img('addon/xypm/order/complete.png')" />
					<img v-if="detail.status == -1" class="w-[70rpx] h-[70rpx] mt-[45rpx]" :src="img('addon/xypm/order/close.png')" />
				</view>
				<view class="ml-[20rpx] text-[#fff] mt-[50rpx] text-[40rpx] leading-[66rpx]">
					{{ detail.status_name.name }}
				</view>
			</view>
			<view class="bg-[#fff] mx-[30rpx] p-[30rpx] mt-[-70rpx] rounded-[10rpx]">
				{{detail.build_name}} - 缴费账单
			</view>
			<view class="bg-[#fff] mx-[30rpx] px-[30rpx] pb-[5rpx] rounded-[10rpx]">
				<view class="order-item flex  justify-between flex-wrap mb-[30rpx]"
					v-for="(billItem, billIndex) in detail.order_item" :key="billIndex">
					<view class="flex-1 line-feed">
						<view class="flex items-center">
							<view class="text-[#333] text-[30rpx] leading-[34rpx] font-500">{{ billItem.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">{{ billItem.money }}</text>
							</view>
						</view>
						<view class="mt-[16rpx] text-[26rpx] line-feed text-[var(--text-color-light9)] leading-[1.4]">收费日期：{{ billItem.startdate }} ～ {{ billItem.enddate }} </view>
					</view>
				</view>
			</view>
			<view class="bg-[#fff] mx-[30rpx] p-[30rpx] mt-[30rpx] rounded-[10rpx]">
				<view
					class="flex justify-between text-[28rpx] pt-[20rpx] border-top-[2rpx] border-[solid] border-[#f1f1f1]">
					<view>订单编号</view>
					<view>{{ detail.order_no }}</view>
				</view>
				<view v-if="detail.out_trade_no"
					class="flex justify-between text-[28rpx] pt-[20rpx] border-top-[2rpx] border-[solid] border-[#f1f1f1] mt-[40rpx]">
					<view>支付流水号</view>
					<view>{{ detail.out_trade_no }}</view>
				</view>
				<view
					class="flex justify-between text-[28rpx] pt-[20rpx] border-top-[2rpx] border-[solid] border-[#f1f1f1] mt-[40rpx]">
					<view>创建时间</view>
					<view>{{ detail.create_time }}</view>
				</view>
				<view v-if="detail.pay"
					class="flex justify-between text-[28rpx] pt-[20rpx] border-top-[2rpx] border-[solid] border-[#f1f1f1] mt-[40rpx]">
					<view>支付方式</view>
					<view>{{ detail.pay.type_name }}</view>
				</view>
				<view v-if="detail.pay"
					class="flex justify-between text-[28rpx] pt-[20rpx] border-top-[2rpx] border-[solid] border-[#f1f1f1] mt-[40rpx]">
					<view>支付时间</view>
					<view>{{ detail.pay.pay_time }}</view>
				</view>
			</view>

			<view class="bg-[#fff] mx-[30rpx] p-[30rpx] mt-[30rpx] rounded-[10rpx]">
				<view
					class="flex justify-between text-[28rpx] pt-[20rpx] border-top-[2rpx] border-[solid] border-[#f1f1f1]">
					<view>账单金额</view>
					<view class=" text-[var(--price-text-color)] price-font">￥{{ detail.order_item_money }}</view>
				</view>
				<view
					class="flex justify-between text-[28rpx] pt-[20rpx] border-top-[2rpx] border-[solid] border-[#f1f1f1] mt-[40rpx]">
					<view>优惠金额</view>
					<view class=" text-[var(--price-text-color)] price-font">￥{{ detail.order_discount_money }}</view>
				</view>
				<view
					class="flex justify-end text-[28rpx] pt-[20rpx] border-top-[2rpx] border-[solid] border-[#f1f1f1] mt-[40rpx]">
					<view><text>实付金额：</text><text class=" text-[var(--price-text-color)] price-font">￥{{
						detail.order_money }}</text></view>
				</view>
			</view>

			<view
				class="flex z-2 justify-between items-center bg-[#fff] fixed left-0 right-0 bottom-0 min-h-[100rpx] px-1 flex-wrap  pb-[env(safe-area-inset-bottom)]" v-if="detail.status == 1" >
				<view class="flex justify-end mr-[30rpx] ml-auto">
					<view class="inline-block text-[26rpx] leading-[56rpx] px-[30rpx] border-[3rpx] border-solid border-[#999] rounded-full" @click="orderBtnFn('close')">关闭订单</view>
					<view class="inline-block text-[26rpx] leading-[56rpx] px-[30rpx] border-[3rpx] border-solid text-[#fff] bg-primary border-primary rounded-full ml-[20rpx]" @click="orderBtnFn('pay')">支付</view>
				</view>
			</view>
		</view>
		<view class="tab-bar-placeholder"></view>
		<pay ref="payRef"></pay>
	</view>

	<u-loading-page :loading="loading" fontSize="16" color="#333"></u-loading-page>
</template>

<script setup lang="ts">
	import { ref} from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import { img } from '@/utils/common';
	import { getBillOrderDetail, billOrderClose } from '@/addon/xypm/api/member';

	let detail = ref<Object>({});
	let loading = ref<boolean>(true);
	let type = ref('')
	let orderId = ref('')

	onLoad((option) => {
		orderId.value = option.order_id;
		orderDetailFn(orderId.value);
	});

	const orderDetailFn = (id) => {
		loading.value = true;
		getBillOrderDetail(id).then((res) => {
			detail.value = res.data;
			loading.value = false;
		}).catch(() => {
			loading.value = false;
		})
	}

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

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

</script>
<style>
	@import '@/addon/xypm/styles/common.scss';
	.tab-bar-placeholder {
		padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
	}
</style>
