<template>
	<page-meta :page-style="'overflow:'+(ifShowPageMeta?'hidden':'visible')"></page-meta>
	<view>
		<!-- 顶部操作条 -->
		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">接收的任务</block>
		</cu-custom>
		<view class="sticky-bar" :style="[{top: stickyTop + 'px'}]">
			<!-- 条件筛选栏 -->
			<view class="padding bg-white solid-bottom">
				<view class="flex justify-start align-center">
					<text class="margin-right-xs inline-lable">全部</text>
					<!-- <my-uni-combox class="inline-combox margin-right-xs" :candidates="stateList" placeholder="请选择"
						v-model="formData.state"></my-uni-combox>
					<my-uni-combox class="inline-combox" :candidates="subStateList" placeholder="请选择"
						v-model="formData.subState"></my-uni-combox> -->
					<!-- 区域筛选picker -->
					<picker class="inline-combox margin-right-xs" :mode="'multiSelector'" @change="regionChange" :value="areaMultiIndex" :range-key="'name'" :range="areaList">
						<input class="radius-input" :value="formData.area ? formData.area[0].name + '-' + formData.area[1].name + '-' + formData.area[2].name : ''"
							placeholder="请选择区域"></input>
					</picker>
					<!-- 品类筛选picker -->
					<picker class="inline-combox" :mode="'multiSelector'" @change="categoryChange" :value="categoryMultiIndex" :range-key="'name'" :range="categoryList">
						<input class="line-input radius-input" :value="formData.category ? formData.category[0].name + '-' + formData.category[1].name + '-' + formData.category[2].name : ''"
							placeholder="请选择品类"></input>
					</picker>
				</view>
				<view class="flex justify-between align-center margin-top-xs">
					<input class="line-input radius-input margin-right-sm" v-model="formData.orderKeywords"
						placeholder="请输入订单关键字"></input>
					<view class="text-xl text-bold">
						<text class="cuIcon-search margin-right-sm"></text>
						<text class="cuIcon-refresh"></text>
					</view>
				</view>
			</view>
			<!-- 状态分类tab -->
			<view class="cu-list grid no-border col-5 padding-top-sm bg-white">
				<view class="cu-item" :class="stateCur === 0 ? 'bg-main-color light' : ''" :data-id="0" @tap="statusSelect">
					<view class="margin-bottom-xs">超时单</view>
					<view>({{myOrders.summary.overtimeOrderNum}})</view>
				</view>
				<view class="cu-item" :class="stateCur === 1 ? 'bg-main-color light' : ''" :data-id="1" @tap="statusSelect">
					<view class="margin-bottom-xs">今日单</view>
					<view>({{myOrders.summary.todayOrderNum}})</view>
				</view>
				<view class="cu-item" :class="stateCur === 2 ? 'bg-main-color light' : ''" :data-id="2" @tap="statusSelect">
					<view class="margin-bottom-xs">明日单</view>
					<view>({{myOrders.summary.tomorrowOrderNum}})</view>
				</view>
				<view class="cu-item" :class="stateCur === 3 ? 'bg-main-color light' : ''" :data-id="3" @tap="statusSelect">
					<view class="margin-bottom-xs">急报单</view>
					<view>({{myOrders.summary.urgentMsgOrderNum}})</view>
				</view>
				<view class="cu-item" :class="stateCur === 4 ? 'bg-main-color light' : ''" :data-id="4" @tap="statusSelect">
					<view class="margin-bottom-xs">新订单</view>
					<view>({{myOrders.summary.newOrderNum}})</view>
				</view>
			</view>
			<!-- 子状态分类tab -->
			<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 subStateList"
					:key="index" @tap="tabSelect" :data-id="index">
					{{item.name}}
				</view>
			</scroll-view>
		</view>
		<!-- tab content -->
		<view class="padding bg-white margin-top-sm margin-lr-sm" v-for="(order, index) in orderList">
			<view class="flex justify-between">
				<view class="text-lg text-bold text-cut">{{order.title}}</view>
				<!-- 不同状态订单使用不同角标 -->
				<view v-if="order.state === 'newOrder'" class="right-tag padding-lr-sm padding-tb-xs bg-cyan">新</view>
				<view v-else-if="order.subState === 'waitArrange'" class="right-tag padding-lr-sm padding-tb-xs bg-main-color">未</view>
				<view v-else-if="order.subState === 'waitToServ'" class="right-tag padding-lr-sm padding-tb-xs bg-yellow">待</view>
				<view v-else-if="order.subState === 'waitServing'" class="right-tag padding-lr-sm padding-tb-xs bg-purple">服</view>
			</view>
			<view>
				<view v-for="(tag, index1) in order.tags" v-if="tag.level === 'error'" class='cu-tag margin-right-xs radius line-red margin-top-xs'>{{tag.content}}</view>
				<view v-else-if="tag.level === 'info'" class='cu-tag margin-right-xs radius line-main-color margin-top-xs'>{{tag.content}}</view>
			</view>
			<view class="margin-top-sm">
				<text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-people"></text></text>
				<text>姓名：{{order.name}}</text>
			</view>
			<view class="margin-top-sm">
				<text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-location"></text></text>
				<text class="margin-right-xs">{{order.address}}</text>
				<text class="text-lg" @tap="copyData(order.address)"><text class="cuIcon-copy"></text></text>
			</view>
			<view class="margin-top-sm" v-if="Boolean(order.doorTime)">
				<text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-time"></text></text>
				<text>上门时间：{{order.doorTime}}</text>
			</view>
			<view class="margin-top-sm" v-else-if="Boolean(order.servTime)">
				<text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-time"></text></text>
				<text>服务时间：{{order.servTime}}</text>
			</view>
			<view class="margin-top-sm flex justify-start align-center" v-if="order.subState === 'waitToServ'">
				<text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-repair"></text></text>
				<text>距上门：</text>
				<uni-countdown :show-colon="false" :backgroundColor="'#eee'"
					:day="$dateUtil.countDownDiff(order.deadlineDate).day" 
					:hour="$dateUtil.countDownDiff(order.deadlineDate).hour" 
					:minute="$dateUtil.countDownDiff(order.deadlineDate).min" 
					:second="$dateUtil.countDownDiff(order.deadlineDate).seconds">
				</uni-countdown>
			</view>
			<!-- 不同状态订单支持不同操作按钮 -->
			<view v-if="order.state === 'newOrder'">
				<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" data-popup="dispatchOrder" @tap="togglePopup($event, index)">派单</button>
				<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm">改价</button>
				<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm">转发</button>
				<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm">确认接单</button>
			</view>
			<view v-if="order.subState === 'waitArrange'">
				<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" data-popup="dispatchOrder" @tap="togglePopup($event, index)">派单</button>
				<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" data-modal="showTimeArrangeModal" @tap="showModal($event, index)">预约时间</button>
			</view>
			<view v-if="order.subState === 'waitToServ'">
				<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" @click="makePhoneCall(order.phoneNum)">联系客户</button>
				<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm">修改时间</button>
				<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm">立即上门</button>
			</view>
			<view v-if="order.subState === 'waitServing'">
				<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm">改价</button>
				<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm" @click="makePhoneCall(order.phoneNum)">联系客户</button>
				<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm">修改时间</button>
				<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm">拍照回单</button>
				<button class="cu-btn bg-main-color margin-right-xs shadow-blur margin-top-sm">生成付款码</button>
			</view>
			<view class="margin-top-sm solid-top padding-top-sm" v-if="Boolean(order.comments)">
				<text class="text-main-color text-lg margin-right-xs"><text class="cuIcon-comment"></text></text>
				<text>备注：{{order.comments}}</text>
			</view>
		</view>
		<!-- 模态框 -->
		<time-arrange :show="showTimeArrangeModal" :data="curOrder"></time-arrange>
		<time-arrange-fail :show="showArrangeFailTimeModal" :data="curOrder"></time-arrange-fail>
		<!-- popup -->
		<uni-popup ref="dispatchOrder" type="bottom" @change="changePopupState">
			<view class="text-bold text-gray text-lg text-center left-top-sm-bar" data-popup="dispatchOrder" @click="togglePopup"><text
					class="cuIcon-close"></text></view>
			<view class="bg-white padding" style="padding-top: 74rpx;">
				<dispatch-order :columnTitleArr="['购买机型', '待派单', '派单量']" :singleServ="curOrder && curOrder.product.pickedList.length === 1 ? true : false" 
					:product="curOrder.product" :pickedList="curOrder.product.pickedList" :members="myTeamMembers"></dispatch-order>
			</view>
			<!-- 底部占位 -->
			<view class="cu-bar bg-white fixed-bottom-bar"></view>
		</uni-popup>
	</view>
</template>

<script>
	import myUniCombox from '@/components/uni-combox/my-uni-combox.vue';
	import timeArrange from '@/pages/order-manage/modal/time-arrange.vue';
	import timeArrangeFail from '@/pages/order-manage/modal/time-arrange-fail.vue';
	import dispatchOrder from '@/pages/order-manage/dispatch-order.vue';
	
	export default {
		components: {
			myUniCombox,
			timeArrange,
			timeArrangeFail,
			dispatchOrder
		},
		data() {
			return {
				formData: {
					category: null,
					area: null,
					orderKeywords: ''
				},
				areaList: [],
				areaMultiIndex: [0, 0, 0],
				categoryList: [],
				categoryMultiIndex: [0, 0, 0],
				// stateList: [{
				// 	code: 1,
				// 	name: '超时单'
				// }, {
				// 	code: 2,
				// 	name: '今日单'
				// }, {
				// 	code: 3,
				// 	name: '明日单'
				// }, {
				// 	code: 4,
				// 	name: '急报单'
				// }, {
				// 	code: 5,
				// 	name: '新订单'
				// }],
				subStateList: [{
					code: 1,
					name: '未约/未排'
				}, {
					code: 2,
					name: '待上门'
				}, {
					code: 3,
					name: '服务中'
				}, {
					code: 4,
					name: '确认中'
				}, {
					code: 5,
					name: '售后中'
				}, {
					code: 6,
					name: '已完成'
				}],
				myOrders: {},
				orderList: [],
				curOrder: {},
				myTeamMembers: [],
				scrollLeft: 0,
				stickyTop: this.CustomBar,
				tabCur: 0,
				stateCur: 0,
				showTimeArrangeModal: false,
				showArrangeFailTimeModal: false,
				ifShowPageMeta: false
			}
		},
		onLoad() {
			this.loadData();
			this.bindEvent();
		},
		onUnload() {
			this.offBindEvent();
		},
		methods: {
			async loadData() {
				let myTeamInfo = await this.$api.data('myTeamInfo');
				this.myTeamMembers = myTeamInfo.members;
				this.myOrders = await this.$api.data('myOrders');
				this.orderList = this.myOrders.orderList;
				this.areaList = await this.$api.data('areaList');
				this.categoryList = await this.$api.data('categoryList');
			},
			bindEvent() {
				uni.$on(this.$globalFun.SHOW_ARRANGE_FAIL_TIME, this.showArrangeFailTime);
				uni.$on(this.$globalFun.HIDE_MODAL, this.hideModal);
				uni.$on(this.$globalFun.SUBMIT_FAIL_REASON, this.submitFailReason);
			},
			offBindEvent() {
				uni.$off(this.$globalFun.SHOW_ARRANGE_FAIL_TIME);
				uni.$off(this.$globalFun.HIDE_MODAL);
				uni.$off(this.$globalFun.SUBMIT_FAIL_REASON);
			},
			regionChange(e) {
				this.areaMultiIndex = e.detail.value;
				let chosenArea = [];
				for(let i = 0; i < this.areaList.length; i++) {
					chosenArea.push(this.areaList[i][this.areaMultiIndex[i]]);
				}
				this.formData.area = chosenArea;
			},
			categoryChange(e) {
				this.categoryMultiIndex = e.detail.value;
				let chosenCategory = [];
				for(let i = 0; i < this.categoryList.length; i++) {
					chosenCategory.push(this.categoryList[i][this.categoryMultiIndex[i]]);
				}
				this.formData.category = chosenCategory;
			},
			input(e) {
				console.log(e)
				console.log(this.formData)
			},
			tabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				this.loadData(this.stateCur, this.subStateList[this.tabCur].code);
			},
			statusSelect(e) {
				this.stateCur = e.currentTarget.dataset.id;
				this.loadData(this.stateCur, this.subStateList[this.tabCur].code);
			},
			setCurOrder(orderIndex) {
				this.curOrder = this.orderList[orderIndex];
			},
			showModal(e, orderIndex) {
				if (orderIndex != null && orderIndex != undefined) {
					this.setCurOrder(orderIndex);
				}
				this[e.currentTarget.dataset.modal] = true;
			},
			hideModal(e) {
				this.curOrder = null;
				this[e.currentTarget.dataset.modal] = false;
			},
			copyData(data) {
				uni.setClipboardData({
					data: data
				});
			},
			showArrangeFailTime(e) {
				this.showTimeArrangeModal = false;
				this.showArrangeFailTimeModal = true;
			},
			submitFailReason(e, reasonObj) {
				// TODO: 提交内容后隐藏modal（curOrder信息置null）
				this.hideModal(e);
			},
			togglePopup(e, orderIndex) {
				if (this.ifShowPageMeta) {
					this.$refs[e.currentTarget.dataset.popup].close();
					let timeout = setTimeout(() => {
						this.curOrder = null;
					}, 100);
				} else {
					if (orderIndex != null && orderIndex != undefined) {
						this.setCurOrder(orderIndex);
					}
					this.$refs[e.currentTarget.dataset.popup].open();
				}
			},
			changePopupState(e) {
				this.ifShowPageMeta = e.show;
			},
			makePhoneCall(phoneNum) {
				uni.makePhoneCall({
					phoneNumber: phoneNum
				})
			},
		}
	}
</script>

<style scoped>
	.inline-combox {
		display: inline-block;
		width: calc((90vw - 80rpx)/2);
	}

	.cu-list.grid.no-border {
		padding: unset;
	}

	.cu-list.grid.no-border>.cu-item {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}
	
	.right-tag {
		position: relative;
		right: -30rpx;
		border-radius: 40rpx 0 0 40rpx;
	}
	
	.cu-tag+.cu-tag {
		margin-left: unset;
	}
	
	.left-top-sm-bar {
		position: absolute;
		right: 25rpx;
		top: 25rpx;
		z-index: 99;
	}
</style>
