<template>
	<view class="content">
		<view class=" bg-white sticky top-0 z-50">
			<div class="flex items-center">
				<view class="flex-1">
					<wd-search @search="search" @clear="search({ value: '' })" v-model="params.keywords" hide-cancel>
						<template #prefix>
							<wd-popover v-model="popover" mode="menu" :content="menu" @menuclick="changeSearchType">
								<view class="search-type">
									<text>{{ searchType }}</text>
									<wd-icon custom-class="icon-arrow" name="fill-arrow-down"></wd-icon>
								</view>
							</wd-popover>
						</template>
					</wd-search>
				</view>
				<div v-if="getQrItem.img_url" class="mr-2">
					<wd-button @click="showImg = true" size="small">付款码</wd-button>
				</div>
			</div>

			<wd-tabs @change="(e) => {
				params.status = (e.index == 3 ? 5 : e.index);
				search({ value: params.keywords })
			}" v-model="params.status">
				<wd-tab v-for="item in status" :key="item" :title="`${item.content}`"></wd-tab>
			</wd-tabs>
		</view>

		<view class="goodsBox p-2">
			<yList ref="yListRef" :apiObj="order.OrderInpersonPayment.orderList"
				:params="{ ...params, status: params.status - 1 }">
				<template #default="{ list }">
					<view>
						<view v-for="item of list" class="goods">
							<wd-card type="rectangle">
								<template #title>
									<view class="title">

										<view>
											<span class="mr-2">用户：{{ item?.user?.nickname }}</span>
										</view>

										<view @click="utils.copy(item.order_no, '已复制单号')" class="title-tip">
											<span style="font-size: 24rpx;margin-left: 8px;">单号：{{ item.order_no }}</span>
										</view>
									</view>
								</template>

								<view class="bg-gray-50 p-2 mb-2 flex justify-between" style="font-size: 22rpx;">
									<view>原价：<text class="text-red-600">￥ {{ item.total_price || 0 }}</text></view>
									<view>支付金额：<text class="text-red-600">￥ {{ item.pay_price || 0 }}</text></view>
									<view>
										支付方式：
										<text class="text-black">
											{{ [
												"", "支付宝", "微信", "余额", "货到付款", "先就餐后支付"
											][item.pay_type] }}
										</text>
									</view>
								</view>

								<template #footer>
									<!-- <view class="bg-gray-50 p-2 mb-2.5 flex justify-between" style="font-size: 22rpx;">
										<view>
											售后状态:
											
										</view>
									</view> -->

									<view class="flex justify-between items-center">
										<!-- <view class="font-bold">实付: {{ item.pay_price }} 元</view> -->
										<view>
											支付状态：<wd-button :round="false" size="small"
												:type="['warning', 'success', 'warning', 'success', 'info'][item.status]">
												<div>{{ ["未支付", "已支付", "已取消"][item.status] || "已取消" }}</div>
											</wd-button>
										</view>
										<view class="flex-1 flex justify-end">

											<!-- <view v-if="item.apply_cancel === 1" class="mr-2">
												<wd-button type="error" @click="orderApproval(item)" size="small">退款</wd-button>
											</view>

											<view class="mr-2">
												<wd-button @click="printing(item)" size="small">小票打印</wd-button>
											</view>
											<view class="mr-2">
												<wd-button @click="orderNotes(item)" size="small">备注</wd-button>
											</view>
											<view v-if="item.status == 1" class="">
												<wd-button @click="shipments(item)" size="small">发货</wd-button>
											</view> -->

										</view>

									</view>
								</template>
							</wd-card>
						</view>
					</view>
				</template>
			</yList>
		</view>
		<wd-toast />

		<wd-curtain v-if="getQrItem.img_url" :value="showImg" :src="getQrItem.img_url" :to="'/store/inpersonPay/index'"
			@close="showImg = false" close-position="top" width="280"></wd-curtain>


	</view>
</template>

<script setup>
import utils from '@/utils/utils.js';
import order from '@/api/mall/order.js';
import yList from "/components/yList/index.vue";
import { useMessage } from '@/uni_modules/wot-design-uni';
import { useToast } from '@/uni_modules/wot-design-uni';
import { ref } from 'vue';

const message = useMessage('wd-message-box-slot');
const message1 = useMessage();
const toast = useToast();
const showImg = ref(false)
let afterType = 1


/**
 * 处理订单备注操作
 * @param {Object} row - 行数据
 */
const orderNotes = (row, text) => {
	message1
		.prompt({
			title: text,
			inputValue: row.refund_amount
		})
		.then((resp) => {
			order.after_sale.update({
				id: row.id,
				status: 5,
				refund_amount: resp.value,
				refund_type: afterType,
				shop_description: 1,
			}).then(res => {
				if (res.code == 0) {
					toast.success('操作成功');
					row.status = 5;
				} else {
					toast.error('操作失败');
				}
			});
		})
		.catch((error) => {
			console.log(error);
		});
};

const classify_id = ref(0);

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

const yListRef = ref(null);

const search = ({ value }) => {
	yListRef.value.upData({
		keywords: value,
		classify_id: classify_id.value,
		status: params.value.status - 1
	});
};

const searchType = ref('订单编号');
const popover = ref(false);

const status = ref([
	{ content: '全部' },
	{ content: '未支付' },
	{ content: '已支付' },
	{ content: '已取消' },
]);

const menu = ref([
	{ content: '订单编号' },
	{ content: '商品名称' },
	{ content: '手机号' },
	{ content: '会员昵称' },
	{ content: '收货人' },
]);

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

	if (item.content == '订单编号') {
		params.value.type = "order_no";
	}
	if (item.content == '商品名称') {
		params.value.type = "goods_name";
	}
	if (item.content == '手机号') {
		params.value.type = "receiver_phone";
	}
	if (item.content == '会员昵称') {
		params.value.type = "nickname";
	}
	if (item.content == '收货人') {
		params.value.type = "receiver_name";
	}
}


const getQrItem = ref({});

/** 
 * 获取物流公司列表
 */
const getGetQrItem = () => {
	order.OrderInpersonPayment.GetQrItem().then(res => {
		getQrItem.value = res.data
	});
};

// 初始化调用获取物流公司列表
getGetQrItem();


</script>

<style lang="scss" scoped>
.search-type {
	position: relative;
	height: 30px;
	line-height: 30px;
	padding: 0 8px 0 10px;
	font-size: 22rpx;
	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;
	}
}

.goodsBox {

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

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

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

	.title-tip {
		color: rgba(0, 0, 0, 0.25);
		font-size: 12px;
	}
}
</style>
