<template>
	<view class="content">
		<kevyloading v-if="loading" type="bsm-loader" color="#618af8" transparent></kevyloading>

		<view class=" bg-white sticky top-0 z-50 flex items-center">
			<view class="flex-1">
				<wd-search @search="search({ value: params.keywords })" @clear="search({ value: params.keywords = '' })"
					v-model="params.keywords" hide-cancel></wd-search>
			</view>
		</view>

		<div class="grid p-2">

			<yList height="91vh" ref="yListRef" :apiObj="recon.faceList" :params="{ ...params }">
				<template #default="{ list: order_list }">
					<div v-for="order of order_list" class="rounded-md overflow-hidden">
						<wd-card class="rounded-md overflow-hidden" type="rectangle">
							<template #title>
								<view class="title">
									<view>ID：{{ order.id }}</view>
									<view @click="utils.copy(order.order_no)" class="title-tip">
										{{ order.order_no }}
										<wd-icon name="file-copy" size="14px"></wd-icon>
									</view>
								</view>
							</template>
							<view style="height: 40px;display: block;" class="userBox"  v-if="order.detail && order.detail.length > 0">
								<view v-for="item of order.detail" style="width: 100%;">
									<view style="color: rgba(0,0,0,0.85); font-size: 16px;display: flex;align-items: center;justify-content: space-around;">
										<view style="width: 50%;">
											{{ item.goods_name }} 
										</view>
										<view style="width: 25%;">
											x {{ item.num }}
										</view>
										<view style="width: 25%;">
											<wd-tag class="mx-1" size="small" type="success">
												￥{{ item.price }}
											</wd-tag>
										</view>
										
									</view>
								</view>
							</view>

							<template #footer>
								<view class="flex justify-between items-center">
									<view style="color: #999;">
										{{ order.create_time }}
									</view>
									<view style="color: rgba(0,0,0,0.85);padding: 30rpx 0">
										支付金额：￥{{ order.pay_price }}
									</view>
									<view>
										<wd-button @click="tuikuan_order = order;show_tuikuan=1;tuikuan_info.refund_price = tuikuan_order.pay_price" size="small"
											style="margin-right: 0px;">退款</wd-button>
									</view>
								</view>
							</template>
						</wd-card>
					</div>
				</template>
			</yList>

		</div>

		<wd-toast />
		<wd-message-box></wd-message-box>
		
		
		<wd-popup v-model="show_tuikuan" custom-style="padding: 30px 40px;width: 80%;border-radius: 20rpx;" @close="tuikuan_info = {}">
			<view style="text-align: center;color: #000;">
				退款信息
			</view>
			<view class="shop_item_box" style="max-height: 1000rpx;overflow: scroll;">
				<view style="display: flex;align-items: center;justify-content: space-between;border: none;">
					<view style="width: 150rpx;">
						订单号：
					</view>
					<view style="width: calc(100% - 150rpx);">
						{{ tuikuan_order.order_no }}
					</view>
				</view>
				<view style="display: flex;align-items: center;justify-content: space-between;border: none;">
					<view style="width: 150rpx;">
						退款金额：
					</view>
					<view style="width: calc(100% - 150rpx);">
						<wd-input type="digit" style="width: 100%;" v-model="tuikuan_info.refund_price" />
					</view>
				</view>
				<view style="border: none;display: flex;align-items: center;justify-content: space-around;">
					<wd-button type="error" @click="show_tuikuan = 0;tuikuan_info = {}">取消</wd-button>
					<wd-button @click="tuikuan(tuikuan_order.order_no)">确认</wd-button>
				</view>
			</view>
		</wd-popup>
		
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import utils from '@/utils/utils.js';
	import recon from '@/api/store/recon.js';
	import myTabbar from "../components/myTabbar/index.vue";
	import kevyloading from "@/components/kevy-loading/kevy-loading";
	import {
		useMessage
	} from '@/uni_modules/wot-design-uni';
	import {
		useToast
	} from '@/uni_modules/wot-design-uni'
	import yList from "/components/yList/index.vue";

	import {
		onShow,
	} from "@dcloudio/uni-app";

	const toast = useToast()
	const message1 = useMessage();

	const originType = ref({
		100: 'success',
		101: 'success',
		200: 'info',
		201: 'danger',
		300: 'warning',
	})

	const yListRef = ref(null);

	const searchType = ref('订单号');
	const popover = ref(false);
	
	
	const show_tuikuan = ref(0);
	const tuikuan_info = ref({})
	const tuikuan_order = ref({})


	const search = ({
		value
	}) => {

		if (searchType.value == '昵称') {
			yListRef.value.upData({
				type: 'order_no',
				keywords: params.value.keywords
			});
		}

		if (searchType.value == '订单号') {
			yListRef.value.upData({
				type: 'order_no',
				keywords: params.value.keywords
			});
		}

	};
	
	const tuikuan = (order_no) => {
	
		uni.showModal({
			title: '提示',
			content: '是否确认退款？',
			success(res) {
				if (res.confirm) {
					uni.showLoading({
						title: '提交中'
					})
					recon.tuikuan({
						order_no,
						refund_price: tuikuan_info.value ? tuikuan_info.value.refund_price : 0
					}).then(res => {
						uni.hideLoading()
						if (res.code == 0) {
							uni.showToast({
								icon: 'none',
								title: '退款成功'
							})
							show_tuikuan.value = 0
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					
					})
				}
			}
		})
	
	};

	const menu = ref([{
			content: '昵称'
		},
		{
			content: '订单号'
		},
	]);

	const params = ref({
		keywords: "",
		type: 'order_no',
		status: -2
	});

	/**
	 * 切换搜索类型
	 * @param {Object} item - 切换的项
	 */
	function changeSearchType({
		item,
		index
	}) {
		searchType.value = item.content;
		search(params.value.keywords)
	}

	/** 
	 * @type {Ref<boolean>} 
	 * 控制页面加载状态的 Ref
	 */
	const loading = ref(false);
	
	const order_list = ref([]);
	

	// 初始化调用获取一行数据
	onShow(() => {
		
	})
</script>

<style lang="scss" scoped>
	.search-type {
		position: relative;
		height: 30px;
		line-height: 30px;
		padding: 0 8px 0 16px;
		font-size: 24rpx;
		color: rgba(0, 0, 0, .45);
	}

	.search-type::after {
		position: absolute;
		content: '';
		width: 1px;
		right: 0;
		top: 5px;
		bottom: 5px;
		background: rgba(0, 0, 0, 0.25);
	}

	.search-type {
		:deep(.icon-arrow) {
			display: inline-block;
			font-size: 20px;
			vertical-align: middle;
		}
	}


	.userBox,
	.title {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.userBox {
		justify-content: flex-start;
	}

	.title {
		justify-content: space-between;
	}

	.title-tip {
		color: rgba(0, 0, 0, 0.25);
		font-size: 12px;
	}
	
	
	.shop_item_box>view {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #F0F0F0;
	}
</style>