<script setup>
	// 我的订单
	import {
		ref,
		reactive,
		getCurrentInstance
	} from 'vue'
	import {
		onLoad,
		onUnload,
		onReachBottom,
		onPullDownRefresh,
		onPageScroll
	} from '@dcloudio/uni-app';
	// 工具库
	import util from '@/common/js/util';
	// api
	import api from '@/api/index.js';
	// 订单方法
	import order from '@/common/js/order.js'
	// 顶部
	import apex from '@/components/header/apex.vue'
	// 顶部条件栏
	import JyShopNavigation from '@/components/public/jy-shop-navigation'
	// 订单
	import orderItem from '@/components/shop/order/item.vue';
	// 快递信息
	import expressVue from '@/components/shop/order/express.vue';
	const {
		proxy
	} = getCurrentInstance()

	// tabs
	const tabs = reactive([{
			id: '',
			name: '全部'
		},
		{
			id: 0,
			name: '待付款'
		},
		{
			id: 1,
			name: '待发货'
		},
		{
			id: 4,
			name: '待收货'
		},
		{
			id: 5,
			name: '已收货'
		},
		{
			id: 6,
			name: '已完成'
		},
		{
			id: 9,
			name: '已取消'
		}
	])
	// 列表
	const list = reactive({
		status: '',
		search: '',
		data: [],
		pageSize: 10,
		pageNum: 1,
		total: 0,
	})
	// 顶部导航背景颜色
	const apexBgColor = ref('#ffffff00')
	// 当前操作的订单
	const orderDetail = reactive({})

	onLoad((options) => {
		// this.params.currentTab = options.currentTab / 1
		// 获取订单列表
		getList()
		// 开启监听
		addListener()
	})

	onUnload(() => {
		// 移除监听
		removeListener()
	})

	onPageScroll((ev) => {
		apexBgColor.value = ev.scrollTop > 44 ? '#fff' : '#ffffff00'
	})

	onReachBottom(() => {
		// 获取更多列表
		getMoreList()
	})

	onPullDownRefresh(() => {
		// 重载列表
		refreshList()
	})

	// 开启监听
	function addListener() {
		uni.$on('updateOrderList', (data) => {
			// 重载列表
			refreshList()
		})
	}

	// 移除监听
	function removeListener() {
		uni.$off('updateOrderList')
	}

	// 重载列表
	function refreshList() {
		list.pageNum = 1
		getList()
	}

	// 获取更多列表
	function getMoreList() {
		if (list.data.length >= list.total) return
		list.pageNum++
		getList()
	}

	// 获取订单列表
	function getList() {
		api.shop.getOrderList({
			query: {
				searchStr: list.search,
				status: list.status,
				pageNum: list.pageNum,
				pageSize: list.pageSize,
			},
		}).then(res => {
			if (res.code == 200) {
				if (list.pageNum == 1) list.data.length = 0
				list.data.push(...res.rows.map(item => {
					// 状态
					item.status = Number(item.status)
					item.refundStatus = Number(item.refundStatus)
					// 编辑订单状态文字
					if (item.refundStatus != 0) {
						item.status_text = {
							'1': '售后中',
							'3': '售后完成',
						} [item.refundStatus]
					} else {
						item.status_text = {
							'0': '待支付',
							'1': '待发货',
							'4': '待收货',
							'5': '已收货',
							'6': '已完成',
							'9': '已取消',
						} [item.status]
					}
					return item
				}))
				list.total = res.total
				return
			}
			util.alert({
				content: res.msg,
				showCancel: false
			})
		})
	}

	/**
	 * 点击订单列表项
	 * @param {Object} ev 订单列表项
	 */
	function handleItem(ev) {
		uni.navigateTo({
			url: util.setUrl('/pages/shop/order/detail', {
				orderId: ev.id,
			})
		})
	}

	/**
	 * 点击tab
	 * @param {Object} ev
	 */
	function itemClick(ev) {
		list.status = ev.id
		// 重载列表
		refreshList()
	}

	/**
	 * 取消订单
	 * @param {Object} item 订单
	 */
	function handleCancel(item) {
		order.orderCancel({
			orderId: item.id,
		}).then(res => {
			// 重载列表
			refreshList()
		})
	}

	/**
	 * 确认收货
	 * @param {Object} item
	 */
	function handleReceived(item) {
		order.orderReceived({
			orderId: item.id,
		}).then(res => {
			// 重载列表
			refreshList()
		})
	}

	// 填写退货物流信息
	function handleExpress(item) {
		Object.assign(orderDetail, {}, item)
		proxy.$refs.expressRef.open()
	}
</script>

<template>
	<!-- 顶部导航栏 -->
	<apex :bgColor="apexBgColor" mode="flex">
		<template #content>
			<view class="search rows f1 mr30 plr20 bf8f8f8 br10">
				<uni-icons type="search" color="#999" />
				<input class="input ml20" v-model="list.search" type="text" placeholder="搜索内容" @confirm="refreshList" />
			</view>
		</template>
	</apex>

	<!-- 页面框架 -->
	<view class="app">
		<view class="shopHeaderBg bgColor"></view>

		<!-- tab选项卡 -->
		<view class="f1 pr">
			<JyShopNavigation :list="tabs" @tabItemClick="itemClick" />
		</view>

		<!-- 订单列表 -->
		<view class="order mlr20 pr">
			<template v-for="(item,index) in list.data" :key="index">
				<view class="mtb30">
					<orderItem :item="item" mode="mine" @item="handleItem">
						<!-- 操作按钮 -->
						<template #menu="scope">
							<view class="menu ptb20 df jcr" v-if="[0,1,4,5,6].includes(scope.item.status)">
								<template v-if="scope.item.refundStatus == 1">
									<view class="btn bar warmHollow plr30" @click.stop="handleExpress(scope.item)">
										填写退货物流信息</view>
								</template>
								<template v-else>
									<template v-if="scope.item.status == 0">
										<view class="btn bar closeHollow plr30" @click.stop="handleCancel(scope.item)">
											取消订单</view>
										<view class="btn bar warmHollow plr30" @click.stop="order.orderPay(item)">
											继续付款
										</view>
									</template>
									<template v-else-if="scope.item.status == 1">
										<view class="btn bar closeHollow plr30"
											@click.stop="order.orderAfterSales(item)">申请退款</view>
										<!-- <view class="btn bar warmHollow plr30">催发货</view> -->
									</template>
									<template v-else-if="scope.item.status == 4">
										<view class="btn bar closeHollow plr30"
											@click.stop="order.orderAfterSales(item)">申请退款</view>
										<view class="btn bar closeHollow plr30" @click.stop="order.logistics(item)">
											查看物流
										</view>
										<view class="btn bar warmHollow plr30" @click.stop="handleReceived(item)">
											确认收货
										</view>
									</template>
									<template v-else-if="scope.item.status == 5">
										<view class="btn bar closeHollow plr30"
											@click.stop="order.orderAfterSales(item)">申请退款</view>
										<view class="btn bar warmHollow plr30">评价</view>
									</template>
									<template v-else-if="scope.item.status == 6">
										<view class="btn bar closeHollow plr30">取消售后</view>
										<view class="btn bar closeHollow plr30">钱款去向</view>
										<view class="btn bar warmHollow plr30">平台介入</view>
									</template>
								</template>
							</view>
						</template>
					</orderItem>
				</view>
			</template>
		</view>
	</view>

	<!-- 物流弹窗 -->
	<expressVue ref="expressRef" />
</template>

<style scoped lang="scss">
	// 搜索
	.search {
		height: 30px;
	}

	// 背景颜色
	.bgColor {
		height: 300rpx;
	}

	.menu {
		border-top: 2rpx solid #eee;
	}
</style>