<template>
	<view class="index">
		<view class="header">
			<view class="search-bar">
				<u-row>
					<u-col span="10">
						<u-search placeholder="客户姓名/手机号/订单号/订单名称" :disabled="true" bg-color="#ffffff"
							:show-action="false" @click="navigator('/pages/search/search')"></u-search>
					</u-col>
					<u-col span="2" @click="navigator('/pages/map/map')">
						<view class="map-container">
							<view class="font-size map"></view>
						</view>
						<view class="map-container">
							<text class="white">地图</text>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
		<view class="tabs">
			<view class="deom-flex">
				<view class="defa" :class="{'active': titleCurrent==index}" v-for="(item,index) in titleTabs"
					:key="index" @tap="titleTabsChange(index)">
					<text class="Tcenter">
						{{item.name}}
					</text>
					<text class="radius" :class="{'show': titleCurrent===2}" v-if="item.count>0">{{item.count}}</text>
				</view>
			</view>
		</view>
		<view class="container">
			<!-- <u-button @click="navigator('../register/register')">跳转注册页(测试用)</u-button> -->
			<!-- 授权登录:{{state.login}}注册:{{state.register}} -->
			<view class="login" v-if="!state.login || !state.register">
				<view class="login-title">您尚未登录</view>
				<view class="login-sub-title">登录后即可查看订单和接单</view>
				<u-button shape="circle" hover-class="none" :custom-style="btnStyle" @click="showLoginModal">点击登录账户
				</u-button>
			</view>
			<view v-if="state.login && state.register">
				<view v-if="titleCurrent == 0">
					<order :data="orderData"></order>
				</view>
				<view v-if="titleCurrent == 1">
					<u-tabs active-color="#ff9900" :list="subTabs" :current="subCurrent" @change="subTabsChange"
						:offset="offset"></u-tabs>
					<order :data="orderData"></order>
				</view>
				<view v-if="titleCurrent == 2">
					<order :data="orderData"></order>
				</view>
			</view>

		</view>

		<view class="modal">
			<u-modal v-model="loginModal" :show-cancel-button="true" :title-style="loginModalTitleStyle" title="授权登录"
				confirm-text="立即登录" cancel-text="暂不登录" confirm-color="#7c59fc" @confirm="handleLogin">
				<view class="slot-content">
					<view class="modal-title">京台服务师傅端</view>
					<view class="modal-sub-title">靖靖智能科技（上海）有限公司</view>
				</view>
			</u-modal>
		</view>

		<view class="authentication">
			<u-modal v-model="authModal" title=" " content="您还未实名认证,快去实名认证吧!" confirm-text="立即认证" confirmColor="#7D5AFC"
				@confirm="auth"></u-modal>
		</view>

	</view>
</template>
<script>
	import {
		loading,
		hidden,
		toast
	} from '../../tips/myTips.js'
	import {
		Validation,
		SFView
	} from '../../api/apis.js'
	import order from '../../components/order.vue'
	import store from '../../store/store.js'
	export default {
		onLoad() {
			this.init()
			uni.$u.mpShare.title = '页面分享';
		},
		onShow() {
			let that = this
			this.checkPageState()
			// if(that.$store.state.userInfo.FCheckStatus == '0'){
			// 	console.log("未实名认证,弹出认证窗口")
			// 	that.authModal = true
			// }else{
			// 	console.log("实名认证了,继续操作吧")
			// }
			this.init()
			// if(this.state.initComplete == true){
			// 	this.$store.state.loading = true
			// 	//查询订单信息
			// 	this.sfview()
			// }
		},
		data() {
			return {
				offset: [5, 0],
				btnStyle: {
					background: "#7D5AFC",
					color: '#FFFFFF'
				},
				loginModalTitleStyle: {
					color: '#000000',
					fontWeight: "1000",
					fontSize: "20px"
				},
				loginModal: false,
				titleCurrent: 0,
				titleTabs: [{
						name: "待报价",
						count: ''
					},
					{
						name: "进行中"
					},
					{
						name: "已完成",
						count: ''
					}
				],
				subTabs: [{
						name: '待预约',
						count: 0,
					},
					{
						name: '待服务',
						count: 0,
					},
					{
						name: '已超时',
						count: 0,
					},
					{
						name: '待验收',
						count: 0,
					},
					{
						name: '待结算',
						count: 0,
					},
					{
						name: '待平台结算',
						count: 0,
					},
					{
						name: '退款/售后',
						count: 0,
					}
				],
				subCurrent: 0,
				loading: false,
				authModal: false,
				//订单信息
				orderData: []
			}
		},
		computed: {
			state: function() {
				return this.$store.state
			}
		},
		components: {
			order
		},
		methods: {
			init() {
				let that = this
				wx.getSystemInfo({
					success(res) {
						console.log("设备信息:", res)
						that.$store.state.sysInfo = res
					}
				})
				wx.login({
					success(res) {
						that.$store.state.login = true
						that.$store.state.code = res.code
						console.log(res)
						loading()
						Validation(res.code).then((res) => {
							if (res.data.code == 0) {
								hidden()
								console.log("验证登录成功:", res.data.result)
								if (res.data.result.isRegister == false) {
									console.log("此处设置token,注册状态(注册失败),没有师傅信息")
									that.$store.state.token = res.data.result.token
									that.$store.state.register = res.data.result.isRegister
									console.log('跳转至注册界面')
									that.navigator('../register/register')
								} else {
									console.log("此处设置token,注册状态(注册成功),师傅信息")
									that.$store.state.token = res.data.result.token
									that.$store.state.register = res.data.result.isRegister
									that.$store.state.userInfo = JSON.parse(res.data.result.result)
									console.log("师傅信息:", that.$store.state.userInfo)
									that.$store.state.initComplete = true
									that.$store.state.loading = true
									//查询订单信息
									that.sfview()
									// if(that.$store.state.userInfo.FCheckStatus == '0'){
									// 	console.log("未实名认证,弹出认证窗口")
									// 	that.authModal = true
									// }else{
									// 	console.log("实名认证了,继续操作吧")
									// }
								}
							} else {
								hidden()
								console.log("验证登录失败:", res)
								toast(res.data.message)
							}
						}).catch((res) => {
							hidden()
							toast(res)
						})
					}
				})
			},

			//手动登录
			handleLogin() {
				let that = this
				wx.login({
					success(res) {
						that.$store.state.login = true
						that.$store.state.code = res.code
						console.log(res)
						loading()
						Validation(res.code).then((res) => {
							if (res.data.code == 0) {
								hidden()
								console.log("验证登录成功:", res.data.result)
								if (res.data.result.isRegister == false) {
									console.log("此处设置token,注册状态(注册失败),没有师傅信息")
									that.$store.state.token = res.data.result.token
									that.$store.state.register = res.data.result.isRegister
									console.log('跳转至注册界面')
									that.navigator('../register/register')
								} else {
									console.log("此处设置token,注册状态(注册成功),师傅信息")
									that.$store.state.token = res.data.result.token
									that.$store.state.register = res.data.result.isRegister
									that.$store.state.userInfo = JSON.parse(res.data.result.result)
									console.log("师傅信息:", that.$store.state.userInfo)
									that.$store.state.initComplete = true
									that.$store.state.loading = true
									//查询订单信息
									that.sfview()
									// if(that.$store.state.userInfo.FCheckStatus == '0'){
									// 	console.log("未实名认证,弹出认证窗口")
									// 	that.authModal = true
									// }else{
									// 	console.log("实名认证了,继续操作吧")
									// }
								}
							} else {
								hidden()
								al
								console.log("验证登录失败:", res)
								toast(res.data.message)
							}
						}).catch((res) => {
							hidden()
							toast(res)
						})
					}
				})
			},

			//跳转至认证
			auth() {
				uni.navigateTo({
					url: '../realnameAuthentication/realnameAuthentication'
				})
			},
			//大标题切换
			titleTabsChange(index) {
				if (this.$store.state.login == false || this.$store.state.register == false) {
					toast("请先登录")
					return false
				}
				this.titleCurrent = index
				if (this.titleCurrent == 1) {
					this.clearCount()
					let that = this
					let list = []
					this.orderData = []
					SFView("").then((res) => {
						if (res.data.code == 0) {
							console.log(res)
							list = Object.values(res.data.result)
							list = list.flat(Infinity)
							console.log(list[0].caption)
							for (let i = 0, len = list.length; i < len; i++) {
								console.log(list[i].caption)
								if (list[i].caption === "待预约") {
									that.subTabs[0].count += 1
									console.log(list[i].caption)
								}
								if (list[i].caption === "待服务") {
									that.subTabs[1].count += 1
								}

								if (list[i].caption === "已超时") {
									that.subTabs[2].count += 1
								}
								if (list[i].caption === "待验收") {
									that.subTabs[3].count += 1
								}
								if (list[i].caption === "待结算") {
									that.subTabs[4].count += 1
								}
								if (list[i].caption === "待平台结算") {
									that.subTabs[5].count += 1
								}
								if (list[i].caption === "退款/售后") {
									that.subTabs[6].count += 1
								}
							}
							that.checkPageState()
							that.sfview()
						} else {
							console.log("出现错误", res)
						}
					})
				} else {
					this.checkPageState()
					this.$store.state.loading = true
					//查询订单信息
					this.sfview()
				}
				if (this.titleCurrent == 2) {
					console.log(2)
					this.checkPageState()
					this.$store.state.loading = true
				}
			},
			navigator(url) {
				uni.navigateTo({
					url: url,
					success: res => {},
					fail: () => {},
					complete: () => {}
				})
			},
			subTabsChange(index) {
				let that = this
				this.subCurrent = index
				this.checkPageState()
				this.$store.state.loading = true
				//查询订单信息
				this.sfview()
			},

			showLoginModal() {
				this.loginModal = true
			},

			//检测页面状态(在哪个页面)
			checkPageState() {
				if (this.titleTabs[this.titleCurrent].name == '进行中') {
					this.$store.state.state = this.subTabs[this.subCurrent].name
				} else {
					this.$store.state.state = this.titleTabs[this.titleCurrent].name
				}
				console.log("当前在" + this.$store.state.state + '页')
			},

			sfview() {
				let that = this
				SFView(this.state.state).then((res) => {
					that.$store.state.loading = false
					console.log("查询订单信息结果:", res)
					if (res.data.code == 0) {
						console.log(that.$store.state.state + '信息')
						if (Object.values(res.data.result)[0] !== null) {
							console.log(Object.values(res.data.result)[0])
							that.orderData = Object.values(res.data.result)[0]
							that.setCount()
						} else {
							console.log(Object.values(res.data.result)[0])
							that.orderData = Object.values(res.data.result)[0]
							that.setCount()
						}
					} else {
						console.log("查询" + that.$store.state.state + "信息失败")
						console.log(res)
						toast(res.data.message)
					}
				})
			},

			setCount() {
				if (this.titleCurrent != 1) {
					this.clearCount()
					let count = this.orderData.length
					this.titleTabs[this.titleCurrent].count = count
				} else {
					if (this.orderData) {
						this.clearCount()
						let count = this.orderData.length
						this.subTabs[this.subCurrent].count = count
					}
				}
			},

			clearCount() {
				for (let i in this.titleTabs) {
					this.titleTabs[i].count = ''
				}
			}
		}
	}
</script>

<style>
	@import "../../icon.css";

	.header {
		padding: 5% 2% 0 2%;
		background-color: #7D5AFC;
	}

	.white {
		color: white;
	}

	.login {
		width: 50%;
		position: relative;
		left: 25%;
		top: 70px;
		text-align: center;
	}

	.login-title {
		color: #000000;
		font-size: 20px;
		font-weight: 1000;
		margin: 5% 0;
	}

	.login-sub-title {
		color: #C8C9CC;
		font-size: 15px;
		margin: 5% 0;
	}

	.slot-content {
		margin: 10% 0;
		text-align: center;
	}

	.modal-title {
		margin: 2%;
		font-size: 18px;
		font-weight: 400;
	}

	.modal-sub-title {
		color: #C8C9CC;
		font-size: 15px;
	}

	.map-container {
		display: inline-block;
		position: relative;
		top: 2px;
	}

	.data-v-0de61367 .u-badge {
		background-color: #ff9900 !important;
		height: 35rpx;
		width: 35rpx;
		font-size: 35rpx;
	}

	.data-v-6a7e75c7 .u-badge {
		background-color: #ff9900 !important;
		height: 35rpx;
		width: 35rpx;
		font-size: 35rpx;
	}
	.defa {
		/* 		width: 250rpx; */
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		flex: 1;
		margin-bottom: 5rpx;
	}
	
	.active {
		/* 		width: 250rpx; */
		border-bottom: 2px solid #f7f8f9;
		}
		.radius {
			margin-left: 10rpx;
			display: inline-block;
			width: 45rpx;
			height: 45rpx;
			border: 3rpx none #ff9900;
			background-color: #ff9900;
			color: white;
			border-radius: 50%;
		}
		
		.show {
			background-color: #00ff00
		}
		.deom-flex {
			padding-top: 15rpx;
			text-align: center;
			vertical-align: middle;
/* 			height: 60rpx; */
			display: flex;
			flex-direction: row;
			font-size: 35rpx;
			background-color: #7D5AFC;
			color:#ffffff;
		}
</style>
