<template>
	<view>
		<!-- 顶部操作条 -->
		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">我的订单</block>
		</cu-custom>
		<!-- tab -->
		<view class="sticky-bar" :style="[{top: stickyTop + 'px'}]">
			<scroll-view scroll-x class="bg-white nav text-center" :scroll-with-animation="true"
				:scroll-left="scrollLeft">
				<view class="cu-item" :class="index==tabCur?'text-main-color cur':''"
					v-for="(item,index) in tabHeaderList" :key="index" @tap="tabSelect" :data-id="index">
					{{item.name}}
				</view>
			</scroll-view>
		</view>

		<!-- tab content -->
		<view class="margin-lr-sm margin-bottom-xl">
			<view class="margin-top-sm padding-bottom-sm bg-white" v-for="(shopOrder, index) in myOrders">
				<view class="cu-bar solid-bottom">
					<view class="action bar-first-action">
						<text class="cuIcon-shopfill text-main-color"></text>
						{{shopOrder.worker.name}}
						<view>
							<view class="cuIcon-right"></view>
						</view>
					</view>
					<view class='cu-tag bg-yellow radius margin-right-sm' v-if="shopOrder.mainProcess === 'ordersServing'" @click="showServDetail(shopOrder)">查看订单详情</view>
				</view>
				<view class="padding-lr">
					<view class="margin-top-sm">
						<product-picked :product="shopOrder.orderGoods" :pickedList="shopOrder.orderGoods.pickedList">
						</product-picked>
					</view>
					<view class="flex justify-end align-end padding-bottom-sm">
						<view class="margin-right-sm"><text>总价</text><text class="text-price text-red">{{shopOrder.financialMaster.totalMoney}}</text>
						</view>
						<view class="margin-right-sm"><text>优惠</text><text class="text-price text-red">{{shopOrder.financialMaster.discountMoney}}</text>
						</view>
						<view class="text-lg"><text>需付款</text><text
								class="text-price text-red text-lg text-bold">{{shopOrder.financialMaster.payMoney}}</text></view>
					</view>
					<view v-if="orderType === 'servOrder'" class="padding-tb-sm flex justify-end oper-bar">
						<button v-if="shopOrder.subProcessStatus <= 4 && shopOrder.mainProcess !== 'ordersWait2Serv'"
							class="cu-btn line-black margin-right-sm">取消订单</button>
						<button v-if="shopOrder.subProcessStatus >= 1 && shopOrder.subProcessStatus <= 2"
							class="cu-btn line-black margin-right-sm">催单</button>
						<button v-if="shopOrder.subProcessStatus >= 2 && shopOrder.subProcessStatus <= 3"
							class="cu-btn line-black margin-right-sm">撤换师傅</button>
						<button v-if="shopOrder.subProcessStatus >= 1 && shopOrder.subProcessStatus <= 3"
							class="cu-btn line-black margin-right-sm">加价</button>
						<button v-if="shopOrder.subProcessStatus === 5"
							class="cu-btn line-black margin-right-sm">申请售后</button>
						<button v-if="shopOrder.subProcessStatus >= 4 && shopOrder.subProcessStatus <= 5"
							class="cu-btn line-black margin-right-sm">评价</button>
						<button v-if="shopOrder.subProcessStatus === 6"
							class="cu-btn line-black margin-right-sm">查看进度</button>
						<button v-if="shopOrder.payStatus === 0" class="cu-btn bg-main-color">付款</button>
					</view>
					<view v-if="orderType === 'servOrder' && shopOrder.subProcessStatus === 4"
						class="padding-tb-sm solid-top">
						<view>师傅已提交完成，请验收。</view>
						<view>服务保障权益期：</view>
						<view class="flex justify-between align-end">
							<view>{{shopOrder.finishOrder.finishWaitUntil}}</view>
							<view>
								<button v-if="shopOrder.finishOrder.finishStatus === 1"
									class="cu-btn sm bg-yellow margin-right-sm"
									@click="updateFinisheStatus(2, index)">已验收</button>
								<button v-if="shopOrder.finishOrder.finishStatus === 1"
									class="cu-btn sm bg-yellow margin-right-sm"
									@click="updateFinisheStatus(-1, index)">拒绝完单</button>
								<button v-if="shopOrder.finishOrder.finishStatus === 2"
									class="cu-btn sm bg-yellow margin-right-sm" disabled type="">已完成验收</button>
								<button v-if="shopOrder.finishOrder.finishStatus === -1"
									class="cu-btn sm bg-yellow margin-right-sm" disabled type="">已拒绝完单</button>
							</view>
						</view>
					</view>
					<view
						v-if="orderType === 'servOrder' && (shopOrder.subProcessStatus === 2 || shopOrder.subProcessStatus === 3)"
						class="padding-tb-sm solid-top">
						<view>约定服务时间：</view>
						<view class="flex justify-between align-end">
							<view>{{shopOrder.agreedServTime.time}}</view>
							<view>
								<button v-if="shopOrder.agreedServTime.customerAgreeStatus === 1"
									class="cu-btn sm bg-yellow margin-right-sm"
									@click="updateAgreeStatus(2, index)">同意</button>
								<button v-if="shopOrder.agreedServTime.customerAgreeStatus === 1"
									class="cu-btn sm bg-yellow margin-right-sm"
									@click="updateAgreeStatus(-1, index)">不同意</button>
								<button v-if="shopOrder.agreedServTime.customerAgreeStatus === 2"
									class="cu-btn sm bg-yellow margin-right-sm" disabled type="">已同意</button>
								<button v-if="shopOrder.agreedServTime.customerAgreeStatus === -1"
									class="cu-btn sm bg-yellow margin-right-sm" disabled type="">已否决</button>
							</view>
						</view>
					</view>
					<view v-else-if="orderType === 'servOrder' && shopOrder.subProcessStatus === 1"
						class="padding-tb-sm solid-top text-orange">
						路途遥远？服务内容稍难？时间紧迫？您可以试试追加赏金，重金之下必有勇夫噢！
					</view>
				</view>
			</view>
		</view>
		<load-status-bar ref="loadStatusBar"></load-status-bar>
	</view>
</template>

<script>
	import productPicked from '@/components/goods-card/product-picked.vue';
	import loadStatusBar from '@/components/custom-bar/load-status-bar.vue';

	export default {
		components: {
			productPicked,
			loadStatusBar
		},
		data() {
			return {
				scrollLeft: 0,
				tabCur: 0,
				tabHeaderList: [],
				orderType: '',
				myOrders: [],
				pageParams: [],
				stickyTop: this.CustomBar
			}
		},
		onLoad(options) {
			if (Boolean(options) && Boolean(options.tabInfo)) {
				let tabInfo = JSON.parse(decodeURIComponent(options.tabInfo));
				if (tabInfo.tabCur != null || tabInfo.tabCur != undefined) {
					this.tabCur = tabInfo.tabCur;
				}
				if (tabInfo.tabCur != null || tabInfo.tabCur != undefined) {
					this.orderType = tabInfo.orderType;
				}
				if (Array.isArray(tabInfo.tabHeaderList) && tabInfo.tabHeaderList.length > 0) {
					this.tabHeaderList = tabInfo.tabHeaderList;
					this.loadData(this.tabHeaderList[this.tabCur].type);
				}
			}
		},
		methods: {
			loadData(mainProcess) {
				for(let i = 0; i < this.tabHeaderList.length; i++) {
					this.pageParams.push({
						pageNum: 0
					});
				}
				// 真实对接口的时候使用
				// this.myOrders = await this.$api.data(this.orderType, mainProcess);
				// this.myOrders = await this.$api.data(mainProcess);
				this.loadOrderPage({
					orderType: this.orderType
				});
			},
			reloadOrderPage(params = {}) {
				this.pageParams = [];
				for(let i = 0; i < this.tabHeaderList.length; i++) {
					this.pageParams.push({
						pageNum: 0
					});
				}
				this.myOrders = [];
				this.$refs.loadStatusBar.showLoadMore();
				this.loadOrderPage(params);
			},
			async loadOrderPage(params) {
				params.pageNum = this.pageParams[this.tabCur].pageNum;
				params.pageSize = this.$globalData.initPageSize;
				this.$refs.loadStatusBar.showLoading();
				try {
					let res = await this.$request.qryOrderPage(params);
					let rowsLength = res.rows.length;
					if (rowsLength > 0) {
						this.myOrders = this.myOrders.concat(res.rows);
						this.pageParams[this.tabCur].pageNum++;
						if (rowsLength === this.pageSize) {
							this.$refs.loadStatusBar.showLoadMore();
						}
					}
					this.$refs.loadStatusBar.showLoadOver();
				} catch (e) {
					console.error(e)
					this.$refs.loadStatusBar.showLoadErr();
				}
				console.log(this.pageParams)
			},
			tabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				this.reloadOrderPage({
					orderType: this.tabHeaderList[this.tabCur].type
				})
			},
			updateAgreeStatus(status, index) {
				this.myOrders[index].agreedServTime.customerAgreeStatus = status;
			},
			updateFinisheStatus(status, index) {
				this.myOrders[index].finishOrder.finishStatus = status;
			},
			showServDetail(shopOrder) {
				uni.navigateTo({
					url: '/pages/my/serv-detail'
				})
			}
		}
	}
</script>

<style scoped>
	.bar-first-action {
		margin-left: unset !important;
		padding-left: 40rpx;
		font-size: 30rpx !important;
	}

	.cu-btn.sm {
		padding: 0 20rpx;
		font-size: 23rpx;
		height: 48rpx;
	}
</style>
