<template>
	<view class="container">
		<Navbar title="订单配送" canBack></Navbar>
		<view class="" v-if="!isScan">
			<!-- 搜索扫码栏 -->
			<view class="searchCss flex justify-between">
				<view class="flex">
					<u-search v-model="formData.khdh" bgColor="#fff" borderColor="#EC1E19" :clearabled="true"
						placeholder="客户电话 客户姓名 身份证号" :actionStyle="actionStyle" @custom="onSearch"
						@clear="getStaffOrderPage"></u-search>
				</view>
				<view class="flex" @click="openScan">
					<u-icon name="scan" size="25"></u-icon>
				</view>
			</view>
			<!-- tab切换烂 -->
			<view class="usuallyCard margin-tb-sm margin-lr-sm ">
				<view class="flex justify-around padding-tb">
					<view class="flex flex-direction align-center" @click="changeStatus(0)">
						<u-image src="/static/images/home/dps.png" width="30px" height="30px"></u-image>
						<view class="margin-top" :style="{color:deliveryStatus?'#8799A3':'#EA5504'}">
							待配送
						</view>
					</view>
					<view class="flex flex-direction align-center" @click="changeStatus(1)">
						<u-image src="/static/images/home/ywc.png" width="30px" height="30px"></u-image>
						<view class="margin-top" :style="{color:deliveryStatus?'#EA5504':'#8799A3'}">
							已完成
						</view>
					</view>
				</view>
			</view>
			<!-- 订单详情卡片 -->
			<view class="">
				<view class="margin-sm" v-for="(item,index) in orderList" :key="index">
					<orderCard mode="order" :orderObj="item" :orderStatus="deliveryStatus"></orderCard>
				</view>
			</view>
		</view>
		<u-empty text="订单为空" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"
			v-if="!orderList.length"></u-empty>
		<u-loadmore :status="status" marginTop="20" height="10" marginBottom="20" v-else />

		<ScanCode ref="scanCode" @scanCode="getCode" @close="closeScanWindow"></ScanCode>
	</view>
</template>

<script>
	import orderCard from '@/components/orderCard/orderCard.vue';
	export default {
		components: {
			orderCard
		},
		data() {
			return {
				actionStyle: {
					'color': '#fff',
					'background': '#EC1E19',
					'borderRadius': "15px",
					'width': '60px',
					'height': '25px',
					'line-height': '25px',
				},
				isScan: false,
				deliveryStatus: 0,
				orderList: [],
				orderDetail: {},
				status: "loadmore",
				formData: {
					current: 1,
					size: 10,
					khdh: "",
					qptm: "", //扫码使用
					zt: '202'
				}
			}
		},
		onPullDownRefresh() {
			this.orderList = [];
			this.formData.current = 1;
			this.formData.khdh = "";
			this.formData.qptm = "";
			//调用获取数据方法
			this.getStaffOrderPage()
			setTimeout(() => {
				//结束下拉刷新
				uni.stopPullDownRefresh();
			}, 500);
		},
		onReachBottom() {
			let allTotal = this.formData.current * this.formData.size
			if (allTotal < this.total) {
				//当前条数小于总条数 则增加请求页数
				this.formData.current++;
				this.status = 'loading';
				setTimeout(() => {
					this.getStaffOrderPage()
				}, 500)
			} else {
				this.status = 'nomore'
				// console.log('已加载全部数据')
			}
		},
		mounted() {

		},
		onLoad(data) {
			this.getStaffOrderPage()
			// 获取订单列表
			uni.$on('scanCode', (code, name) => {
				console.log("orderDelivery页监听code", code);
				if (name === 'orderDelivery') {
					this.formData.qptm = code;
					this.getStaffOrderPage()
				}
			});
		},
		onShow() {
      this.getStaffOrderPage()
      // 获取订单列表
      uni.$on('scanCode', (code, name) => {
        console.log("orderDelivery页监听code", code);
        if (name === 'orderDelivery') {
          this.formData.qptm = code;
          this.getStaffOrderPage()
        }
      });
			// this.getStaffOrderPage();
		},
		methods: {
			async getStaffOrderPage() {
				const result = await this.$api.orderApi.getStaffOrderPage(this.formData);
				let {
					code,
					value
				} = result;
				// this.orderList = code === 200 ? value.records : [],
				if (code === 200) {
					let allTotal = this.formData.current * this.formData.size
					this.total = value.total
					const newlist = value.records;
					if (this.formData.current === 1) {
						this.orderList = newlist;
					} else {
						this.orderList.push(...newlist)
					}
					if (this.orderList.length < allTotal) {
						this.status = 'nomore'
					}
					console.log('员工订单', JSON.parse(JSON.stringify(this.orderList)));
				}
			},
			// 修改配送状态
			changeStatus(status) {
				this.formData.current = 1;
				this.deliveryStatus = status;
				this.formData.zt = this.deliveryStatus ? '204' : '202';
				this.getStaffOrderPage();
			},
			// 搜索
			onSearch() {
				if (!this.formData.khdh) {
					uni.$u.toast('请输入搜索关键词');
					return;
				}
				this.getStaffOrderPage();
			},
			openScan() {
				// 组件扫码
				// this.$refs.scanCode.open();
				uni.navigateTo({
					url: '/pages/scan/scanCode?mode=2'
				})
			},
			// 扫码重新获取订单
			getCode(code) {
				console.log("获取code", code);
				this.formData.qptm = code;
				this.getStaffOrderPage();
				this.close()
			},
			close() {
				this.isScan = false;
				this.$refs.scanCode.close();
			},
			closeScanWindow() {
				this.isScan = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: 10px;
	}

	.searchCss {
		// margin: 10px;
		padding: 10px;
		background: #fff;
	}

	/deep/.u-search__content {
		width: 85vw;
		padding-right: 70px;
	}

	/deep/.u-search__action {
		position: absolute;
		right: 15%;
	}
</style>
