<template>
	<view class="home">
		<view class="image-swiper"><u-swiper :list="imageList" mode="dot" border-radius="20"></u-swiper></view>
		<view class="tab-swiper">
			<u-tabs :list="list" font-size="26" gutter="10" item-width="130" bar-width="120" active-color="#FF780F"  :current="current" @change="tabsChange"></u-tabs>
		</view>
		
		<view class="order-list" v-if="current == 0">
			<view v-for="(item, index) in allorder" :key="index"><OrderItem :info="item"></OrderItem></view>
			<u-empty margin-top="20" v-if="!allorder.length" mode="order"></u-empty>

		</view>
		<view v-else-if="current == 1">
			<view v-for="(item, index) in testlist" :key="index"><testList :info="item"></testList></view>
			<u-empty margin-top="20" v-if="!testlist.length" mode="order"></u-empty>

		</view>
		<view v-else-if="current == 2">
			<view v-for="(item, index) in worklist" :key="index"><OrderItem :info="item"></OrderItem></view>
			<u-empty margin-top="20" v-if="!worklist.length" mode="order"></u-empty>
		</view>
		<view v-else-if="current == 3">
			<view v-for="(item, index) in translist" :key="index"><OrderItem :info="item"></OrderItem></view>
			<u-empty margin-top="20" v-if="!translist.length" mode="order"></u-empty>
		</view>
		<view v-else-if="current == 4">
			<view class="complaint">
				<view class="select-container">
					<view class="title">选择订单号</view>
					<view class="worker" v-if="JSON.stringify(worker) != '{}'">
						<view>{{ worker.name }}</view>
						<u-icon name="arrow-down" @click="worker = {}"></u-icon>
					</view>
					<view v-else class="select" @click="showSelect = true">
						<view>请选择</view>
						<image src="/static/image/home/5.png"></image>
					</view>
				</view>
				<view class="textarea">
					<view class="title">投诉简介</view>
					<textarea placeholder-style="color:#999999" placeholder="请输入内容" v-model="reportcontent" />
				</view>
				<!-- 事件 -->
				<view class="btn" @click="reportcar">确定</view>
			</view>
		</view>
		<view v-else-if="current == 5">
			<view v-for="(item, index) in finshlist" :key="index">
				<OrderItem :info="item"></OrderItem>
			</view>
			<u-empty margin-top="20" v-if="!finshlist.length" mode="order"></u-empty>
		</view>
		<view v-else-if="current == 6">
			<view v-for="(item, index) in badlist" :key="index">
				<OrderItem :info="item"></OrderItem>
			</view>
			<u-empty margin-top="20" v-if="!badlist.length" mode="order"></u-empty>
		</view>
		<view class="release-btn" @click="publish">
			<image src="../../static/image/index/publish.png"></image>
			<view class="text">发布</view>
		</view>
		<u-select v-model="showSelect" :list="carlist" @confirm="setWorker" confirm-color="#FF780F"></u-select>
		<u-popup v-model="showComplaint" mode="center" border-radius="10">
			<view class="confirm-complaint">
				<view class="text">
					<view>投诉成功</view>
					<view>请等待审核结果</view>
				</view>
				<view class="btn" @click="showComplaint = false">确认</view>
			</view>
		</u-popup>
		<u-popup v-model="publishstate" mode="bottom">
			<view class="publish">
				<view class="list">
					<view @click="navto('release/tosign')">
						<image src="../../static/image/index/live.png"></image>
						<text>直播</text>
					</view>
					<view @click="navto('release/index')">
						<image src="../../static/image/index/photo.png"></image>
						<text>图文</text>
					</view>
					<view @click="navto('release/video')">
						<image src="../../static/image/index/video.png"></image>
						<text>视频</text>
					</view>
				</view>
				<image src="../../static/image/index/close.png" class="off" @click="close"></image>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import OrderItem from '@/components/order-item/index';
import testList from '@/components/order-item/testlist.vue';
export default {
	components: {
		OrderItem,
		testList
	},
	data() {
		return {
			list: [
				{
					name: '全部订单'
				},
				{
					name: '试穿订单'
				},
				{
					name: '待处理订单'
				},
				{
					name: '已发货订单'
				},
				{
					name: '投诉骑手'
				},
				{
					name: '已完成订单'
				},
				{
					name: '退货订单'
				}
			],
			imageList: [],
			showSelect: false,
			current: 0,
			swiperCurrent: 0,
			showComplaint: false,
			worker: {},
			publishstate: false,
			clickstate:false,//投诉骑手按钮点击状态
			num: 1,
			allorder: [], //所有订单
			testlist: [], //试穿列表
			worklist: [], //待处理列表
			translist: [], //已发货列表
			finshlist: [], //已完成列表
			badlist: [], //退货列表
			carlist: [], //可投诉订单列表
			reportinfo: null, //投诉信息
			reportcontent: '', //投诉内容
            del_id: 0, // 删除id
		};
	},
	onLoad() {
		// 初始化轮播图
		this.getswiper();
		// 获取可投诉列表
		this.getcarlist();
		// 所有订单
		this.getallorder(0);
		const user = uni.getStorageSync('userinfo');
		console.log(user)
		this.imService.login(user.userId,user.member_nickname,user.member_avatar)
		this.imService.connectIM()
		// 订单状态： 0:全部 1已付款未发货 2已发货 3已完成 4申请退款/退货 5已退款/退货 6拒绝退款/退货
	},
	onShow() {
		this.publishstate = false;
		this.tabsChange(this.current);
	},
	onReachBottom() {
		this.num++;
		this.reset();
	},
	methods: {
		// 初始化数组
		resetarr() {
			this.allorder = [];
			this.worklist = [];
			this.translist = [];
			this.finshlist = [];
			this.badlist = [];
			this.badlist = [];
			this.testlist = [];
		},
		// 根据current请求不同的接口
		reset() {
			let current = this.current;
			if (current == 0) {
				// 所有订单
				this.getallorder(0);
			} else if (current == 1) {
				// 试穿订单
				this.getshiftlist();
			} else if (current == 2) {
				// 待处理订单
				this.getallorder(1);
			} else if (current == 3) {
				// 已发货订单
				this.getallorder(2);
			} else if (current == 4) {
				// 投诉
			} else if (current == 5) {
				// 已完成订单
				this.getallorder(3);
			} else if (current == 6) {
				// 退货订单
				this.getallorder(4);
			}
		},
		// 关闭发布弹窗
		close() {
			this.publishstate = false;
		},
		// 投诉骑手
		reportcar(type) {
			let that = this;
			if(this.clickstate==false){
				this.clickstate=true
			}else{
				this.$refs.uToast.show({
					title: "不能重复提交",
					type: 'error'
				});
				return
			}
			if (that.reportcontent == '') {
				this.$refs.uToast.show({
					title: "投诉内容不能为空",
					type: 'error'
				});
				return;
			}
			
			this.$u.api.reportorder({
				order_id: that.reportinfo.order_id,
				takeawayer_id: that.reportinfo.takeawayer_id,
				order_list: that.reportinfo.order_list,
				content: that.reportcontent
			}).then(res => {
				// 恢复可点击状态
				this.clickstate=false
				if (res.errCode != 0) {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				} else {
					// 提交后清空选择信息
					that.reportinfo=null
					// 清空投诉评价
					that.reportcontent = ""
					// 清空选择器返回信息
					that.worker = {}
					// 重新获取可投诉列表
					that.getcarlist();
					// 提示修改成功
					that.showComplaint = true;
				}
			});
		},
		// 获取可投诉列表
		getcarlist() {
			let that = this;
			this.$u.api.canreportorder({}).then(res => {
				console.log(res);
				if (res.errCode != 0) {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				} else {
					let arr = res.data.order_normal;
					// {
					// 	value: 2,
					// 	label: '广东',
					// 	children: [
					// 		{
					// 			value: 3,
					// 			label: '深圳'
					// 		},
					// 		{
					// 			value: 4,
					// 			label: '广州'
					// 		}
					// 	]
					// },
					for (let index in arr) {
						arr[index].value = arr[index].takeawayer_id;
						let newarr = arr[index].order_list.split('-');
						arr[index].label = newarr[0] + ' ' + newarr[1];
					}
					this.carlist = arr;
				}
			});
		},
		// 获取试穿列表
		getshiftlist() {
			let that = this;
			this.$u.api.getshiftlist({}).then(res => {
				console.log(JSON.stringify(res));
				if (res.errCode != 0) {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				} else {
					this.testlist = res.data.orderList;
				}
			});
		},
		// 获取订单列表
		getallorder(type) {
			let that = this;
			this.$u.api.getorderlist({
				type: type,
				page: that.num
			}).then(res => {
				if (res.errCode != 0) {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					});
				} else {
					let arr = res.data;
					for (let index in arr) {
						if (type == 0) {
							this.allorder.push(arr[index]);
						} else if (type == 1) {
							this.worklist.push(arr[index]);
						} else if (type == 2) {
							this.translist.push(arr[index]);
						} else if (type == 3) {
							this.finshlist.push(arr[index]);
						} else if (type == 4) {
							this.badlist.push(arr[index]);
						} else if (type == 5) {
							this.badlist.push(arr[index]);
						}
					}
				}
			});
		},
		// 获取轮播图
		getswiper() {
			this.imageList = [
				{
					image: '../../static/image/index/swiper.png'
				},
				{
					image: '../../static/image/index/swiper.png'
				},
				{
					image: '../../static/image/index/swiper.png'
				}
			];
		},
		// 打开发布弹窗
		publish() {
			this.publishstate = true;
		},
		// 骑手投诉点击确定
		setWorker(e) {
			if(e[0].label==null){
				this.$refs.uToast.show({
					title: "选择无效",
					type: 'error'
				});
				return
			}
			let arr = this.carlist;
			for (let index in arr) {
				if (arr[index].takeawayer_id == e[0].value) {
					this.reportinfo = arr[index];
				}
			}
			this.worker = {
				name: e[0].label,
				id: e[0].value
			};
		},
		// 导航栏点击事件
		tabsChange(index) {
			this.swiperCurrent = index;
			this.current = index;
			this.num = 1;
			this.resetarr();
			this.reset();
		},
		// 发布内容跳转页面
		navto(url) {
			this.publishstate = false;
			this.$u.route({
				url: `/pages/${url}`
			});
		}
	}
};
</script>
<style lang="scss" scoped>
.home {
	min-height: calc(100vh - var(--window-top));
	background-color: #ececec;
	display: flex;
	flex-direction: column;
	.image-swiper {
		background-color: #ffffff;
		padding: 0 30rpx 16rpx;
	}
	.tab-swiper {
		margin: 2rpx 0 20rpx 0;
	}
	.complaint {
		margin: 0 30rpx;
		padding: 100rpx 20rpx;
		background-color: #ffffff;
		.select-container {
			display: flex;
			align-items: center;
			margin-bottom: 100rpx;
			.title {
				width: 150rpx;
				font-size: 26rpx;
				color: rgba(51, 51, 51, 1);
				margin-right: 20rpx;
				text-align: right;
			}
			.select {
				padding: 18rpx 20rpx;
				width: 490rpx;
				height: 60rpx;
				background: rgba(236, 236, 236, 1);
				border-radius: 6rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				> view {
					font-size: 26rpx;
					color: #999999;
				}
				> image {
					width: 24rpx;
					height: 13rpx;
				}
			}
			.worker {
				display: flex;
				align-items: center;
				background-color: #ececec;
				> view {
					font-size: 26rpx;
					color: rgba(51, 51, 51, 1);
					margin-right: 20rpx;
				}
			}
		}
		.textarea {
			box-sizing: border-box;
			display: flex;
			.title {
				width: 150rpx;
				font-size: 26rpx;
				text-align: right;
				color: rgba(51, 51, 51, 1);
				margin-right: 20rpx;
			}
			> textarea {
				padding: 20rpx;
				width: 430rpx;
				height: 220rpx;
				border: 1rpx solid #999999;
				font-size: 26rpx;
			}
		}
		.btn {
			margin: 90rpx auto 0;
			width: 630rpx;
			height: 88rpx;
			background: rgba(255, 120, 15, 1);
			border-radius: 44rpx;
			font-size: 36rpx;
			color: rgba(255, 255, 255, 1);
			line-height: 88rpx;
			text-align: center;
		}
	}
	.release-btn {
		position: fixed;
		bottom: 475rpx;
		right: 30rpx;
		width: 100rpx;
		height: 100rpx;
		background: rgba(255, 120, 15, 1);
		box-shadow: 0rpx 6rpx 6rpx 0rpx rgba(255, 120, 15, 0.22);
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		> image {
			width: 36rpx;
			height: 36rpx;
			flex-shrink: 0;
			margin-bottom: 2rpx;
		}
		.text {
			font-size: 20rpx;
			color: rgba(255, 255, 255, 1);
		}
	}
	.confirm-complaint {
		text-align: center;
		padding-bottom: 20rpx;
		.text {
			text-align: center;
			width: 420rpx;
			padding: 55rpx 112rpx;
			font-size: 28rpx;
			color: rgba(51, 51, 51, 1);
			line-height: 4r2px;
			> view:first-child {
				margin-bottom: 20rpx;
			}
		}
		.btn {
			width: 200rpx;
			height: 60rpx;
			background: rgba(255, 120, 15, 1);
			border-radius: 30rpx;
			text-align: center;
			line-height: 60rpx;
			font-size: 28rpx;
			color: rgba(255, 255, 255, 1);
			margin: 0 auto;
		}
	}
	.publish {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding: 50rpx 84rpx 31rpx 78rpx;
		image {
		}
		.list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			> view {
				display: flex;
				flex-direction: column;
				align-items: center;
				> image {
					width: 94rpx;
					height: 80rpx;
				}
				> text {
					margin-top: 10rpx;
					font-size: 28rpx;
					color: #333;
					font-weight: 400;
				}
			}
		}
		.off {
			margin-top: 81rpx;
			width: 37rpx;
			height: 37rpx;
		}
	}
}
</style>
