<script setup>
	// 商家订单
	import {
		ref,
		reactive,
		computed,
	} from 'vue'
	import {
		onLoad,
		onPageScroll,
	} from '@dcloudio/uni-app';
	import {
		useStore
	} from 'vuex'
	// 顶部
	import apex from '@/components/header/apex.vue'
	//顶部条件栏
	import JyShopNavigation from '@/components/public/jy-shop-navigation'
	// 订单列表项
	import orderItem from '@/components/shop/order/item.vue';
	// 工具库
	import util from '@/common/js/util';
	// 
	import api from '@/api/index.js'

	// 
	const store = useStore()
	// tabs
	const tabs = reactive([{
			id: '',
			name: '全部'
		},
		{
			id: 0,
			name: '待付款'
		},
		{
			id: 1,
			name: '待发货'
		},
		{
			id: 4,
			name: '待收货'
		},
		{
			id: 7,
			name: '售后/退款'
		}
	])
	// 当前tab下标
	const tabIndex = ref(0)
	// 列表
	const list = reactive({
		search: '',
		status: '',
		data: [],
		pageSize: 10,
		pageNum: 1,
		total: 0,
	})
	// 顶部导航背景颜色
	const apexBgColor = ref('#ffffff00')
	// 用户信息
	const userinfo = computed(() => store.state.userinfo)

	onLoad((options) => {
		// 获取商家订单列表
		getList()
	})

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

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

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

	// 获取商家订单列表
	function getList() {
		api.shop.getShopOrderList({
			query: {
				merId: userinfo.value.merId,
				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 = {
							'0': '待审核',
							'1': '商家拒绝',
							'2': '退款中',
							'3': '已退款',
							'4': '用户退货',
							'5': '商家待收货',
							'6': '已撤销',
						} [item.afterSaleStatus]
					} 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) {
		console.log('handleItem', ev)
		return
		uni.navigateTo({
			url: util.setUrl('/pages/shop/order/detail')
		})
	}

	/**
	 * 点击tab
	 * @param {Object} ev
	 */
	function itemClick(ev) {
		list.status = ev.id
		// 重载列表
		refreshList()
	}
</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" type="text" placeholder="搜索内容" />
			</view>
		</template>
	</apex>

	<view class="app">
		<view class="shopHeaderBg bgColor"></view>

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

		<view class="product mlr20 pr">
			<!-- 订单列表 -->
			<view class="order">
				<template v-for="(item,index) in list.data" :key="index">
					<view class="mtb30">
						<orderItem :item="item" mode="shop" @item="handleItem">
							<template #menu="scope">
								<!-- 收货地址 -->
								<view class="menu rows ptb20" v-if="[2,3,4,5,6].includes(scope.item.status)">
									<view class="key fs0 c333">收货地址</view>
									<view class="value f1 ml20">
										<view class="c333 f28">收货地址</view>
										<view class="mt10 c666 f24">
											<text>姓名</text>
											<text>1397897890</text>
										</view>
									</view>
								</view>
								<!-- 退款原因 -->
								<view class="menu rows ptb20" v-if="[6].includes(scope.item.status)">
									<view class="key fs0 c333">退款原因</view>
									<view class="value f1 ml20">
										<view class="c333 f28">不想要了</view>
										<view class="imgList mt10 c666 f24">
											<template v-for="(item,index) in 3" :key="index">
												<image class="imgs wh80 br10" src="/static/logo.png"
													mode="aspectFill" />
											</template>
										</view>
									</view>
								</view>
								<!-- 操作按钮 -->
								<view class="menu ptb20 df jcr" v-if="[1,2,6].includes(scope.item.status)">
									<template v-if="scope.item.status == 1">
										<view class="btn bar warmHollow plr30">修改价格</view>
									</template>
									<template v-if="scope.item.status == 2">
										<view class="btn bar warmHollow plr30">发货</view>
									</template>
									<template v-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>
								</view>
							</template>
						</orderItem>
					</view>
				</template>
			</view>
			<!-- <JyOrderCard v-for="(item, index) in 10" type="user_order"></JyOrderCard> -->
		</view>

		<!-- 填充 -->
		<view class="fill" style="height: 30rpx;"></view>
	</view>
</template>

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

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

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