<template>
	<view>		
		 <mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">	
			 <!-- sticky吸顶悬浮的菜单, 父元素必须是 mescroll -->
			<view class="sticky-tabs">
				<me-tabs v-model="tabIndex" :tabs="tabs" @change="tabChange"></me-tabs>
			</view>
			
			<button class='bottom' type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="wxGetUserInfo">授权微信</button>
			
			<!-- 搜索  -->
			<view class="cu-bar bg-white search sticky-tabs">
				<view class="search-form round">
					<input type="text" @confirm="keywordSearch" placeholder="请输入客户名称/业务编号" confirm-type="search"></input>
					<text class="cuIcon-search"></text>
				</view>
			</view>			
			
			<!-- 数据列表 -->
			<view>
				<view v-for="(item,index) in ListData" :key="index">
					<view class="good-list">
						<view class="charge" :id="'index-' + item.name" :data-index="item.name">
							<view class="charge-title flex-between">
								<text>{{item.clientName}}</text>
							</view>
							<view class="charge-text">
								<view>
									<text class="label-text">提单人：</text>
									<text class="mgl30">{{item.applicant}}</text>
								</view>
								<view>
									<text class="label-text">申请日期：</text>
									<text class="mgl30">{{item.applicationDate}}</text>
								</view>
								<view>
									<text class="label-text">累计耗时：</text>
									<text class="mgl30">{{item.timeConsuming}}</text>
								</view>
								<view>
									<text class="label-text">任务节点：</text>
									<text class="mgl30">{{item.taskNode}}</text>
								</view>
								<view>
									<text class="label-text">完成时间：</text>
									<text class="mgl30">{{item.completeTime}}</text>
								</view>
								<view>
									<text class="label-text">审批状态：</text>
									<text class="mgl30">{{item.approveStatus}}</text>
								</view>
								<view>
									<text class="label-text">业务状态：</text>
									<text class="mgl30">{{item.businessStatus}}</text>
								</view>
								<view>
									<text class="label-text">操作状态：</text>
									<text class="mgl30">{{item.operatingStatus}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 抄送数据列表 -->
			<view>
				<view v-for="(item,index) in copyData" :key="index">
					<view class="good-list">
						<view class="charge" :id="'index-' + item.name" :data-index="item.name">
							<view class="charge-title flex-between">
								<text>{{item.clientName}}</text>
							</view>
							<view class="charge-text">
								<view>
									<text class="label-text">提单人：</text>
									<text class="mgl30">{{item.applicant}}</text>
								</view>
								<view>
									<text class="label-text">申请日期：</text>
									<text class="mgl30">{{item.applicationDate}}</text>
								</view>
								<view>
									<text class="label-text">任务节点：</text>
									<text class="mgl30">{{item.taskNode}}</text>
								</view>
								<view>
									<text class="label-text">完成时间：</text>
									<text class="mgl30">{{item.approveDate}}</text>
								</view>
								<view>
									<text class="label-text">业务状态：</text>
									<text class="mgl30">{{item.businessStatus}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {apiSearch} from "@/api/mock.js"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				upOption: {
					// 如果用mescroll-uni 则需要onScroll: true, 且需要 @scroll="scroll"; 而mescroll-body最简单只需在onPageScroll处理即可
					// onScroll: true // 是否监听滚动事件, 默认false (配置为true时,可@scroll="scroll"获取到滚动条位置和方向)
				},
				tabs:[
					{name:'全部', value: ''},
					{name:'已发起', value: 0},
					{name:'待审核', value: 1},
					{name:'已处理', value: 2},
					{name:'抄送我', value: 3}
					],
				tabIndex: 0, // 当前菜单下标
				ListData: [],//前几个的data
				copyData: [],//抄送的列表
				totals: 0,
			
				page: {
					num: 1,
					size: 10,
				},
				keyword: '',//搜索关键词
				operatingStatus: '',
				userInfo: {}
			};
		},
		methods: {
			wxGetUserInfo(){
				let _this = this
				uni.getUserInfo({
					provider: 'weixin',
					success: infoRes => {
						_this.userInfo = infoRes.userInfo; //用户信息，微信头像，昵称等等
						console.log(infoRes)
						uni.login({
							success(res){
								console.log(res)  //获取到的code
								let params = {
									code: res.code,
									encryptedData: infoRes.encryptedData,
									iv: infoRes.iv
								}
								_this.$http.post('/apiHrmsAuth/hrms/auth/userlogin/wxAuthLogin',params).then(res =>{
									let params = {
										phone: '',
										type: 2,
										wechatId: res.data,
										password: '',
										tenDayEffective: 2
									}
									_this.$http.post('/apiHrmsAuth/hrms/auth/userlogin/login',params).then(res =>{
										
									}).catch(()=>{})
								}).catch(()=>{})
							}
						})			
					},
					fail(res) {
						uni.showToast({
							title:'登录授权失败',
							icon:'none',
						})
					}
				});
				
				//4、解密数据
				// var decrypt = function(res){
				// 	var data = {
				// 		action: 'wxDecryptData',
				// 		encryptedData: res.encryptedData,
				// 		iv: res.iv,
				// 		sessionKey: res.session_key,
				// 	}
				// 	console.log('wxDecryptData send:');
				// 	console.log(data);
				// 	wd.wd.mina.request(data).then(res=>{
				// 		var ret = res.data;
				// 		console.log('wxDecryptData return:');
				// 		console.log(ret);
					
				// 		if( ret.status == 0 ){
				// 			if( ret.data.unionId != undefined ){
				// 				that.setData({
				// 					unionId1: ret.data.unionId
				// 				})
				// 			}
				// 		}else{
							
				// 		}
				// 	})
				// }
			},
			keywordSearch(){},
			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				//联网加载数据
				if(this.isChangeTab){
					this.mescroll.hideUpScroll(); // 切换菜单,不显示mescroll进度, 显示系统进度条
					uni.showLoading(); 
				}
				if(this.operatingStatus == 3){
					this.$http.post('/api-guarantee/dg-copy-user/queryCopyForMe',{clientName: this.keyword}).then(res =>{
						this.copyData = this.copyData.concat(res.data.list); //追加新数据
						this.mescroll.endSuccess(res.data.list); // 隐藏加载状态栏
						// this.totals = res.data.totalCount;
					}).catch(()=>{
						//联网失败, 结束加载
						this.mescroll.endErr();
					})
				}else{
					this.$http.post('/api-guarantee/guarantee/efficiency/personalEfficiencyList',{operatingStatus: this.operatingStatus}).then(res =>{
						this.ListData = this.ListData.concat(res.data.list); //追加新数据
						this.mescroll.endSuccess(res.data.list); // 隐藏加载状态栏
						// this.totals = res.data.totalCount;
					}).catch(()=>{
						//联网失败, 结束加载
						this.mescroll.endErr();
					})
				}
			},
			// 设置nav到顶部的距离 (滚动条为0, 菜单顶部的数据加载完毕获取到的navTop数值是最精确的)
			setNavTop(){
				let view = uni.createSelectorQuery().select('#tabInList');
				view.boundingClientRect(data => {
					this.navTop = data.top // 到屏幕顶部的距离
				}).exec();
			},
			// 点击回到顶部按钮时,先隐藏悬浮菜单,避免闪动
			topClick(){
				this.isShowSticky = false
			},
			// 切换菜单
			tabChange (index) {
				this.operatingStatus = this.tabs[index].value;//当前下标的值
				this.keyword = '';
				this.ListData = []; // 置空列表,显示加载进度条
				this.copyData = []; // 置空列表,显示加载进度条
				this.mescroll.resetUpScroll()
			},
		},
	}
</script>

<style lang="scss" scoped>
.cu-bar .search-form{
	border: 2rpx solid #00B9FF;
	border-radius: 20rpx;
	background-color: #fff;
	margin: 0 50rpx;
	height: 72rpx;
	line-height: 72rpx;
	margin-top: 20rpx;
	input{
		height: 72rpx;
		line-height: 72rpx;
		padding: 0 40rpx;
	}
	.cuIcon-search{
		margin: 0 20rpx;
	}
}
.add-customer{
	padding: 0 50rpx;
	button{
		background-color: #00B9FF;
		border-radius: 30rpx;
		.mar-icon{
			margin-right: 10rpx;
		}
	}
}
</style>
