<template>
	<view class="container">
		<Navbar title="上门维修" canBack></Navbar>
		<u-sticky>
			<view class="bg-white">
				<u-tabs :list="list" :current="current" :itemStyle="{width:'50%',height:'50px'}" lineColor="#EA5504"
					:activeStyle="{fontSize:'16px',color:'#EA5504',fontWeight:'bold'}" @change="tabChange">
				</u-tabs>
			</view>
		</u-sticky>

		<!-- 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'}">
						{{current?'待整改':'待处理'}}
					</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'}">
						{{current?'已整改':'已处理'}}
					</view>
				</view>
			</view>
		</view>
		<!-- 上门维修订单详情卡片 -->
		<view class="" v-if="current === 0">
			<view class="margin-sm" v-for="(item,index) in orderList" :key="index">
				<repairCard mode="order" :orderObj="item" :orderStatus="deliveryStatus"></repairCard>
			</view>
			<u-empty text="订单为空" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"
				v-if="!orderList.length"></u-empty>
			<u-loadmore :status="wxStatus" marginTop="20" height="10" marginBottom="20" v-else />
		</view>
		<!-- 安检订单卡片 -->
		<view class="" v-else>
			<view class="margin-sm" v-for="(item,index) in ajList" :key="index">
				<ajCard mode="order" :orderObj="item" :orderStatus="deliveryStatus"></ajCard>
			</view>
			<u-empty text="订单为空" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"
				v-if="!ajList.length"></u-empty>
			<u-loadmore :status="ajStatus" marginTop="20" height="10" marginBottom="20" v-else />
		</view>
	</view>
</template>

<script>
	import repairCard from './components/repairCard';
	import ajCard from './components/ajCard';
	export default {
		components: {
			repairCard,
			ajCard
		},
		data() {
			return {
				current: 0,
				list: [{
						name: '维修/报修'
					},
					{
						name: '安检维护'
					}
				],
				actionStyle: {
					'color': '#fff',
					'background': '#EC1E19',
					'borderRadius': "15px",
					'width': '60px',
					'height': '25px',
					'line-height': '25px',
				},
				deliveryStatus: 0,
				orderList: [],
				ajList: [],
				orderDetail: {},
				wxStatus: "loadmore",
				ajStatus: "loadmore",
				formData: {
					current: 1,
					size: 10,
					fZt: '待处理'
				},
				formAjData: {
					current: 1,
					size: 10,
					fAjzt: '待整改'
				},
				wxTotal: null,
				ajTotal: null
			}
		},
		onPullDownRefresh() {
			this.orderList = []
			//调用获取数据方法
			if (this.current) { //查询安检单
				this.getAjPage()
			} else { //查询维修单
				this.getStaffOrderPage()
			}
			setTimeout(() => {
				//结束下拉刷新
				uni.stopPullDownRefresh();
			}, 500);
		},
		onReachBottom() {
			let allTotal;
			if (this.current) {
				allTotal = this.formAjData.current * this.formAjData.size
			} else {
				allTotal = this.formData.current * this.formData.size
			}
			
			if (this.current) {
				if (allTotal < this.ajTotal) {
					//当前条数小于总条数 则增加请求页数
					this.formAjData.current++;
					this.ajStatus = 'loading';
					setTimeout(() => {
						this.getAjPage()
					}, 500)
				} else {
					this.ajStatus = 'nomore';

				}
			} else {
				if (allTotal < this.wxTotal) {
					//当前条数小于总条数 则增加请求页数
					this.formData.current++;
					this.wxStatus = 'loading';
					setTimeout(() => {
						this.getStaffOrderPage()
					}, 500)
				} else {
					this.wxStatus = 'nomore';
				}
			}

		},
		mounted() {

		},
		onLoad(data) {
			// 获取订单列表
			this.getStaffOrderPage();
		},
		methods: {
			tabChange(e) {
				console.log(e);
				this.current = e.index
				// this.formData.current = 1;
				// this.formAjData.current = 1;
				// this.orderList = [];
				if (this.current) { //查询安检单
					if (!this.ajList.length) {
						this.getAjPage()
					}
				} else { //查询维修单
					if (!this.orderList.length) {
						this.getStaffOrderPage()
					}
				}
			},
			async getStaffOrderPage() {
				const result = await this.$api.repairOrderApi.getRepairList(this.formData);
				let {
					code,
					value
				} = result;
				if (code === 200) {
					let allTotal = this.formData.current * this.formData.size
					this.wxTotal = value.total
					const newlist = value.records;
					if (this.formData.current === 1) {
						this.orderList = newlist;
					} else {
						this.orderList.push(...newlist)
					}
					if (this.orderList.length < allTotal) {
						if (this.current) {
							this.ajStatus = 'nomore';
						} else {
							this.wxStatus = 'nomore';
						}
					}
					console.log('维修单', JSON.parse(JSON.stringify(this.orderList)));
				}
			},
			async getAjPage() {
				const result = await this.$api.repairOrderApi.getAjPage(this.formAjData);
				let {
					code,
					value
				} = result;
				if (code === 200) {
					let allTotal = this.formAjData.current * this.formAjData.size
					this.ajTotal = value.total
					const newlist = value.records;
					if (this.formAjData.current === 1) {
						this.ajList = newlist;
					} else {
						this.ajList.push(...newlist)
					}
					if (this.ajList.length < allTotal) {
						if (this.current) {
							this.ajStatus = 'nomore';
						} else {
							this.wxStatus = 'nomore';
						}
					}
					console.log('安检单', JSON.parse(JSON.stringify(this.ajList)));
				}
			},
			// 修改配送状态
			changeStatus(status) {
				this.deliveryStatus = status;
				console.log('打印deliveryStatus', this.deliveryStatus);
				this.formData.fZt = status == 0 ? '待处理' : '已处理';
				this.formAjData.fAjzt = status == 0 ? '待整改' : '已整改';
				this.formData.current = 1;
				this.formAjData.current = 1;
				if (this.current) {
					this.getAjPage();
				} else {
					this.getStaffOrderPage();
				}
			},
			// 搜索
			onSearch() {
				if (this.current) {
					this.getAjPage();
				} else {
					this.getStaffOrderPage();
				}
			},
		}
	}
</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>