<template>
	<view>
		<!-- 状态栏 -->
		<status-nav :backgroudColor="publicColor" :tabcolor="publicColor"  :statusTitle="true" :statusBack="false"></status-nav>
		<image src="/static/public/staff-head.png" class="blue-img"></image>
		<view class="mar-zy32 posir pad-x260" :style="{paddingTop:statusHNH+'px'}">
			<view class="radius20 posir gao">
				<view class="posia" :style="{top:`-${gaoh*0.4}px`,height:gaoh+'px'}"></view>
				<view class="disjbac">
					<view class="disac colf">
						<!-- 头像 -->
						<image @tap="openXiao" class="mar-sx30" :src="userInfo.headimgurl || ''" mode="aspectFill"></image>
						<view class="mar-z30">
							<!-- 昵称 -->
							<view class="disac">
								<view class="fon36 bold clips1" style="max-width: 260rpx;">{{userInfo.nickname || ''}}</view>
								<view class="gao-name">{{userInfo.level.name}}</view>
							</view>
							<view class="disac mar-s10" v-if="userPhone!==''">
								<image src="/static/public/phone-02.png" class="gao-phone" mode=""></image>
								<!-- 手机号 -->
								<view class="fon24 mar-z10">{{userPhone}}</view>
							</view>
						</view> 
					</view>
					<view class="mar-y25 disac">
						<!-- 二维码 -->
						<image @tap="tuneUpqr" src="/static/public/staff-qro.png" class="gao-m" mode=""></image>
						<!-- 前进键 -->
						<view @tap="goNodifyData" class="disac gao-next-box">
							<!-- <image class="" src="/static/public/next-white.png" mode="aspectFill"></image> -->
							<image class="" src="/static/public/set-icon.png" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<view class="disjbac posir mar-s40 fon24 pad-zy50" style="z-index: 1;color: #F8CE59;">
					<view>
						<view class="disac"><span class="bold mar-y20">VIP</span>{{userInfo.level.name}}</view>
					</view>
					<navigator url="/pagesA/member/member" hover-class="none">
						<view class="disac">
							<view>更多权益</view>
							<image src="/static/public/next-yellow.png" class="white-next" mode=""></image>
						</view>
					</navigator>
				</view>
			</view>
			<view class="disja posir" style="z-index: 1;margin-top: 75rpx;">
				<view @tap="chooseone(indext)" class="disac fc flexs width25" v-for="(itemt,indext) in tongList" :key="indext">
					<view class="fon28 bold mar-sx20 clips1">{{itemt.num}}<text v-if="indext==2">天</text><text v-if="indext==3">人</text></view>
					<view class="fon28 mar-x25">{{itemt.title}}</view>
				</view>
			</view>
			<!-- 员工功能 v-if="userInfo.is_staff && yuanList.length!=0" -->
			<view v-if="userInfo.is_staff==1" class="bacf radius20 mar-s20 pad20">
				<view class="mar-x30 fon28 bold col3">员工功能</view>
				<view class="disja yuan-box">
					<view @tap="chooseYitem(indexy)" v-for="(itemy,indexy) in yuanList" :key="indexy">
						<view class="disac fc">
							<image :src="itemy.src" mode="aspectFill"></image>
							<view class="fon28 mar-s20 mar-x10">{{itemy.title}}</view>
						</view>
						<block v-if="indexy<yuanList.length-1">
							<view class="xian-right"></view>
						</block>
					</view>
				</view>
			</view>
			<!-- 我的订单 -->
			<view class="bacf radius20 mar-s20 pad20">
				<view class="mar-x30 fon28 col3 disjbac">
					<view>我的订单</view>
					<navigator url="/pagesA/myOrder/myOrder?index=0" hover-class="none">
						<view class="disac">
							<view class="fon24 col9">全部</view>
							<image src="/static/public/nextM.png" class="white-next" mode=""></image>
						</view>
					</navigator>
				</view>
				<view class="disja fon28 col3">
					<view @tap="chooseOrderStatus(indexo)" v-for="(itemo,indexo) in myOrderList" :key="indexo">
						<view class="disac fc posir">
							<image :src="itemo.src" class="icon-img" mode="aspectFill"></image>
							<view class="mar-s20 mar-x10">{{itemo.title}}</view>
							<view class="posia red-num" style="right: 0;top: 0;" v-if="itemo.num!=0">{{itemo.num}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 广告 -->
			<image @tap="goPage" class="width100 radius20 mar-sx20" :src="guangImg" style="height: 160rpx;" mode="aspectFill"></image>
			<!-- 功能列表① -->
			<view class="bacf radius20">
				<view class="disjbac fon28 col3 fw">
					<view @tap="goPageNew(indexm)" v-for="(itemm,indexm) in moneyList" :key="indexm" class="mar-s20 mar-x20 width25">
						<view class="disac fc">
							<image :src="itemm.src" class="icon-img" mode="aspectFill"></image>
							<view class="mar-s20 mar-x10">{{itemm.title}}</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 功能列表② -->
			<view class="bacf radius20 mar-s20">
				<view class="disac fon28 col3 fw">
					<view @tap="goPageTwo(indexf)" v-for="(itemf,indexf) in toolsList" :key="indexf" class="mar-s20 mar-x20 width25">
						<view class="disac fc posir">
							<image :src="itemf.src" class="icon-img" mode="aspectFill"></image>
							<view class="mar-s20 mar-x10">{{itemf.title}}</view>
							<view v-if="itemf.title=='消息通知' && itemf.num!=0" class="posia red-num">{{itemf.num}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 我的二维码弹框 -->
		<view v-if="isQrcode" class="posAll disjcac">
			<view>
				<view class="bacf radius20" style="margin: 0 130rpx;">
					<view class="fon28 col3 tc pad-s40">我的二维码</view>
					<image :src="myqr" class="person-m" mode="aspectFill"></image>
				</view>
				<view class="disjcac">
					<image @tap="closeqr" class="mar-s50 close-m" src="/static/public/qrcodec.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<!-- 专属客服 -->
		<view v-if="zCustomer" class="posAll disjcac">
			<view style="width: 80%;">
				<view class="bacf radius20 pad-sx40" style="">
					<view class="fon32 bold col3 tc pad-x40" v-if="customerInfo.service_name!=''">我的专属客服</view>
					<view class="fon28 col3 disjb mar20" v-if="customerInfo.service_name!=''">客服名称：{{customerInfo.service_name}}</view>
					<view class="fon28 col3 disjb mar20" v-if="customerInfo.service_phone!=''">客服手机号：{{customerInfo.service_phone}}<span @tap="countCustomer(customerInfo.service_phone)" class="pcol">联系客服</span></view>
					<view class="fon28 col3 disjb mar20" v-if="customerInfo.service_wechat!=''">客服微信号：{{customerInfo.service_wechat}}<span @tap="copyWechat" class="pcol">复制</span></view>
					<view style="display: flex;align-items: center;flex-direction: column;width: 100%;">
						<image v-if="customerImg!=''" :src="customerImg" class="person-m" style="margin-bottom: 40rpx;" mode="aspectFill"></image>
						<view class="fon28 colf tc radius10" @tap="saveImg" style="width: 200rpx; padding: 16rpx;background-color: #38CE51;margin: 0 auto;">保存</view>
					</view>
					<view class="fon28 col9 tc pad-s40" v-if="customerInfo.service_phone==''">暂无专属客服</view>
				</view>
				<view class="disjcac">
					<image @tap="closeCustomer" class="mar-s50 close-m" src="/static/public/qrcodec.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<!-- 底部tab -->
		<foot-tab :titleList="titleList" :imgList="imgList" :newcurrent='4'></foot-tab>
		<!-- 签到弹框 -->
		<view v-if="isQian" class="sigin-box">
			<view>{{contentVal}}</view>
		</view>
		<!-- 用户信息授权，手机号授权 -->
		<auth-userInfo-mobileInfo></auth-userInfo-mobileInfo>
	</view>
</template>

<script>
	import {base64ToPath} from '@/jsFile/base64-src.js';
	import {checkBanner,themeEv} from '@/jsFile/publicAPI.js';
	export default {
		data() {
			return {
				statusHNH:uni.getSystemInfoSync().statusBarHeight + 54,
				tongList:[
					{num:'0',title:'我的积分'},
					{num:'0',title:'孔雀币'},
					{num:'0',title:'连续签到'},
					{num:'0',title:'我的分享人'}
				],
				yuanList:[],	//'customer-list','footmarks','scan'
				zanCyuanList:[
					{src:'/static/public/keh.png',title:'客户列表',rule:'customer-list'},
					{src:'/static/public/zu.png',title:'用户足迹',rule:'footmarks'},
					{src:'/static/public/scan.png',title:'扫码签到',rule:'scan'},
					{src:'/static/public/customer-check.png',title:'客服查询',rule:'customer-list'},
					{src:'/static/public/scan.png',title:'核销扫码',rule:'check-scan'},
				],
				myOrderList:[//我的订单状态
					{src:'/static/public/dai-fu60.png',title:'待付款',num:0},
					{src:'/static/public/dai-fa60.png',title:'待发货',num:0},
					{src:'/static/public/dai-shou60.png',title:'待收货',num:0},
					{src:'/static/public/wan-60.png',title:'已完成',num:0},
				],
				moneyList:[
					{src:'/static/public/integral60.png',title:'积分商城'},
					{src:'/static/public/address60.png',title:'地址管理'},
					{src:'/static/public/day60.png',title:'日程提醒'},
					{src:'/static/public/ren60.png',title:'活动任务'},
					{src:'/static/public/quan60.png',title:'优惠券'},
					{src:'/static/public/kong60.png',title:'孔雀币'},
					{src:'/static/public/scor60.png',title:'积分管理'},
					{src:'/static/public/signIn.png',title:'积分签到'},
				],
				toolsList:[
					{src:'/static/public/staff-yue60.png',title:'自助预约',num:''},
					{src:'/static/public/staff-hai60.png',title:'个人海报',num:''},
					{src:'/static/public/staff-collection60.png',title:'收藏',num:''},
					{src:'/static/public/staff-share.png',title:'分享中心',num:''},
					{src:'/static/public/staff-msg60.png',title:'消息通知',num:''},
					{src:'/static/public/diary.png',title:'我的日记',num:''},
					{src:'/static/public/staff-about60.png',title:'关于我们',num:''},
					{src:'/static/public/staff-tou60.png',title:'投诉与建议',num:''},
				],
				isQrcode:false,//是否显示我的二维码
				userInfo:{},//用户信息
				gaoh:uni.getStorageSync('gao'),
				myqr:'/static/public/qrcode.png',
				is_worker:'',//是否为职工账号，0否（客户）， 1是
				is_doctor:'',//是否为医生，0否，1是
				is_servicer:'',//是否为客服，0否，1是
				is_staff:'',//是否为普通员工，0否，1是
				isQian:false,
				bannerList:[],
				guangImg:'',
				guanggao:'',
				userToken:'',
				contentVal:'',//扫码后的提示内容
				userPhone:'',
				timer:null,
				nonce_str:'',
				zCustomer:false,
				customerImg:'',
				customerInfo:'',
				times:0,
				openSettingBtnHidden: true,//是否授权
			}
		},
		onUnload: function() {
			//相当于监听返回按钮
			let pages = getCurrentPages();
			// console.log('pages:',pages);
		},
		computed: {
			// 底部标题
			titleList() {
				return this.$store.state.titleList 
			},
			// 底部图标
			imgList() {
				return this.$store.state.imgList
			},
			// 主题颜色
			publicColor() {
				return this.$store.state.publicColor
			}
		},
		onShow() {
			uni.removeStorageSync('uinfo')//清空用户缓存信息
			uni.removeStorageSync('shareAll')//清空分享中心里的统计信息
			if(uni.getStorageSync('phone_active')!=0 && uni.getStorageSync('is_active')!=0){
				this.checkInfo();
			}
		},
		onUnload() {
			// 关闭我的二维码弹框
			this.closeqr();
		},
		onLoad(options) {
			uni.setStorageSync('channel',options.channel);
			if(uni.getStorageSync('gao')==''){
				const query = wx.createSelectorQuery()
				query.select('.gao').boundingClientRect((rect) => {
					uni.setStorageSync('gao',rect.height)
					this.gaoh = rect.height
				}).exec()
			}
			this.checkSwi()
		},
		methods: {
			countCustomer(phone){//拨打电话
				const res = uni.getSystemInfoSync();
				if(res.platform=='ios'){
					uni.makePhoneCall({
						phoneNumber:phone,
						success: () => {},
						fail: () => {}
					})
				} else {
					uni.showActionSheet({
						itemList:[phone,'呼叫'],
						itemColor:'#3875F6',
						success: (res) => {
							if(res.tapIndex==1){
								uni.makePhoneCall({
									phoneNumber:phone
								})
							}
						}
					})
				}
			},
			copyWechat(){//复制微信号
				if(this.times==0){
					this.times++;
					this.$toolAll.tools.clickCopy(this.customerInfo.service_wechat);
					this.$toolAll.tools.showToast('复制成功');
					setTimeout(()=>{
						this.times = 0;
					},2000)
				}
			},
			saveImg(e){//保存二维码
				//获取相册授权
				uni.getSetting({
					success:(res)=> {
					    if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success:()=> {
									//这里是用户同意授权后的回调
									this.saveImgToLocal();
								},
								fail:()=> {//这里是用户拒绝授权后的回调
									this.openSettingBtnHidden=false
								}
							})
					    } else {//用户已经授权过了
							this.saveImgToLocal();
					    }
					}
				})
			},
			saveImgToLocal(){//保存图片
				this.$toolAll.tools.showToast('正在保存','loading');
				uni.downloadFile({
					url: this.customerImg,//图片地址
					success: (res) =>{
						if (res.statusCode === 200){
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: ()=> {
									this.$toolAll.tools.showToast('保存成功');
								},
								fail: ()=> {
									this.$toolAll.tools.showToast('保存失败');
								}
							});
						} 
					}
				})
			},
			tuneUpqr(){//调起二维码弹框
				this.isQrcode = true;
				clearInterval(this.timer);
				this.myqr = '';
				this.nonce_str='';
				this.checkGM();
				this.timer = setInterval(()=>{
					if(this.nonce_str!=''){
						this.$requst.post('user/check-scan',{nonce_str:this.nonce_str}).then(res=>{
							if(res.code==0){
								if(res.data.result==1){
									this.$toolAll.tools.showToast('已签到');
									this.isQrcode = false;
									clearInterval(this.timer);
								}
							}
						})
					}
				},3000)
				setTimeout(()=>{
					this.isQrcode = false;
					clearInterval(this.timer);
				},60000)
			},
			// 关闭我的二维码弹框
			closeqr(){
				this.isQrcode = false;
				clearInterval(this.timer);
			},
			chooseone(index){
				if(index==2){uni.navigateTo({url:'/pagesA/signIn/signIn'})}
				if(index==3){uni.navigateTo({url:'/pagesB/mysharer/mysharer'})}
			},
			goPageNew(index){
				if(index==0){uni.navigateTo({url:'/pagesA/pointsMall/pointsMall'})}
				if(index==1){uni.navigateTo({url:'/pagesA/myAddress/myAddress'})}
				if(index==2){uni.navigateTo({url:'/pagesB/messagecenter/messagecenter?index=true&comeNum=0'})}
				if(index==3){uni.navigateTo({url:'/pagesA/activityTask/activityTask'})}
				if(index==4){uni.navigateTo({url:'/pagesA/coupon/coupon'})}
				if(index==5){uni.navigateTo({url:'/pagesA/peacockCoin/peacockCoin'})}
				if(index==6){uni.navigateTo({url:'/pagesA/integralManage/integralManage'})}
				if(index==7){uni.navigateTo({url:'/pagesA/signIn/signIn'})}
			},
			goPageTwo(index){//自助预约、个人海报、收藏、分享中心、消息通知、我的日记、投诉与建议、关于我们、专属客服
				let newUrl = ''
				if(this.toolsList[index].title=='自助预约') newUrl = '/pagesA/makeAnPppointment/makeAnPppointment'
				if(this.toolsList[index].title=='个人海报') newUrl = '/pagesB/personalPoster/personalPoster'
				if(this.toolsList[index].title=='收藏') newUrl = '/pagesB/myCollection/myCollection'
				if(this.toolsList[index].title=='分享中心') newUrl = '/pagesB/sharingCenter/sharingCenter'
				if(this.toolsList[index].title=='消息通知') newUrl = '/pagesB/messagecenter/messagecenter?comeNum=0'
				if(this.toolsList[index].title=='我的日记') newUrl = '/pagesA/my-diary/my-diary'
				if(this.toolsList[index].title=='关于我们') newUrl = '/pagesB/aboutUs/aboutUs'
				if(this.toolsList[index].title=='投诉与建议') newUrl = '/pagesA/suggestions/suggestions'
				if(this.toolsList[index].title=='专属客服'){
					this.$requst.post('user/my-service').then(res=>{
						if(res.code==0){
							this.customerInfo = res.data;
							if(this.customerInfo.service_qr!=''){
								this.customerImg = this.$http + this.customerInfo.service_qr;
							}
							this.zCustomer = true;
						}
					})
				} else {
					uni.navigateTo({
						url:newUrl
					})
				}
			},
			closeCustomer(){
				this.zCustomer = false;
			},
			chooseOrderStatus(index){
				let statusIndex = ''
				if(index==0) statusIndex = 1;
				if(index==1) statusIndex = 2;
				if(index==2) statusIndex = 4;
				if(index==3) statusIndex = 5;
				uni.navigateTo({
					url:'/pagesA/myOrder/myOrder?index='+statusIndex
				})
			},
			goPage(){
				uni.navigateTo({
					url:this.guanggao
				})
			},
			checkSwi(){
				checkBanner({position:'personal-center-banner'}).then(res=>{
					// console.log('res',res);
					if(res.code==0){
						if(res.data.length!=0){
							this.guangImg = this.$http + res.data[0].src
							this.guanggao = res.data[0].url
							// res.data.forEach(item=>{
							// 	let isVideo = false
							// 	if(item.type!='img') isVideo = true
							// 	let banObj = {
							// 		imgSrc:this.$http + item.src,
							// 		url:item.url,
							// 		isVideo:isVideo,
							// 		poster:this.$http + item.src,
							// 	}
							// 	this.bannerList.push(banObj)
							// })
						}
					}
				})
			},
			checkGM(){//查询个人二维码事件
				uni.showToast({
					title:'正在生成二维码',
					icon:'none',
					duration:100000
				})
				this.$requst.post('user/personal-qr').then(res=>{
					// console.log('个人二维码：',res);
					if(res.code==0){
						this.nonce_str = res.data.nonce_str;
						base64ToPath(res.data.qr).then(path => {
							this.myqr = path
							uni.hideToast();
							uni.setStorageSync('imgSrc',path)
						}).catch(error => {})
					}
				},error=>{})
			},
			checkInfo(){
				this.$requst.post('user/info').then(res=>{
					// console.log('用户信息：',res);
					if(res.code==0 && res.data.length!=0) {
						this.userInfo = res.data;
						uni.setStorageSync('userId',res.data.id);
						uni.setStorageSync('phone',this.userInfo.mobile);
						this.userPhone = this.$toolAll.tools.hideMPhone(this.userInfo.mobile)
						this.tongList[0].num = res.data.score;//个人积分
						this.tongList[1].num = res.data.coin;//个人孔雀币
						this.tongList[2].num = res.data.continuity_sign;//个人连续签到
						this.tongList[3].num = res.data.share_users.total;//分享人总数
						this.toolsList[4].num = res.data.unread_messages;//消息总数
						this.toolsList[5].num = res.data.unread_messages;//消息总数
						this.myOrderList[0].num = res.data.order_count.waiting;//待支付总数
						this.myOrderList[1].num = res.data.order_count.paid;//待发货总数
						this.myOrderList[2].num = res.data.order_count.shipped;//待收货总数
						this.is_worker = res.data.is_worker;//是否为职工账号，0否（客户）， 1是
						this.is_doctor = res.data.is_doctor;//是否为医生，0否，1是
						this.is_servicer = res.data.is_servicer;//是否为客服，0否，1是
						this.is_staff = res.data.is_staff;//是否为普通员工，0否，1是
						if(res.data.customer_service!=0 && this.toolsList.length==8){
							this.toolsList.unshift({src:'/static/public/customer-check.png',title:'专属客服',num:''})
						}
						uni.setStorageSync('shareAll',res.data)
						if(res.data.rules.length!=0){
							// 判断是否有分配客服的权限
							let isFen = res.data.rules.indexOf('customer-allot');
							if(isFen!=-1){
								uni.setStorageSync('isFen',true);
							} else {
								uni.setStorageSync('isFen',false);
							}
							let result = this.zanCyuanList.filter(item => res.data.rules.some(itemt => itemt===item.rule))
							this.yuanList = result
							uni.setStorageSync('rules',res.data.rules)
						} else this.yuanList = []
					}
				},error=>{})
			},
			chooseYitem(index){//员工功能事件
				// console.log('当前选项：',this.yuanList[index].title);
				if(this.yuanList[index].title=='客户列表') {
					uni.navigateTo({
						url:'/pagesB/customerList/customerList'
					})
				}
				if(this.yuanList[index].title=='用户足迹') {
					uni.navigateTo({
						url:'/pagesB/userFootprint/userFootprint'
					})
				}
				if(this.yuanList[index].title=='扫码签到') {
					wx.scanCode({  // 微信扫码 调起客户端扫码界面进行扫码
						complete: (res) => {}, //接口调用结束的回调函数（调用成功、失败都会执行）
						fail: (res) => {}, //接口调用失败的回调函数
						onlyFromCamera: false, //是否只能从相机扫码，不允许从相册选择图片,这里是只允许相机扫码
						scanType: ['qrCode'], // scanType：扫码类型 : 二维码
						success: (rt) => { // 接口调用成功的回调函数
							if(rt.result.slice(0,1)=='{'){
								let uc = JSON.parse(rt.result).user_coding;
								let ns = JSON.parse(rt.result).nonce_str;//随机码
								console.log(rt);
								this.$requst.post('user/sign-in',{user_coding:uc,nonce_str:ns}).then(res=>{
									// console.log('执行扫码事件：',res);
									if(res.code==0){
										this.isQian = true;
										this.contentVal = "签到成功";
										setTimeout(()=>{
											this.isQian = false
										},2000)
									}
								},error=>{})
							} else this.$toolAll.tools.showToast('请出示正确的码');
						}
					})
				}
				if(this.yuanList[index].title=='核销扫码') {
					wx.scanCode({  // 微信扫码 调起客户端扫码界面进行扫码
						complete: (res) => {}, //接口调用结束的回调函数（调用成功、失败都会执行）
						fail: (res) => {}, //接口调用失败的回调函数
						onlyFromCamera: false, //是否只能从相机扫码，不允许从相册选择图片,这里是只允许相机扫码
						scanType: ['qrCode'], // scanType：扫码类型 : 二维码
						success: (rt) => { // 接口调用成功的回调函数
							let narr = rt.result.split('H');
							if(narr[1]=='true'){//体验券核销
								this.$requst.post('staff/coupon/write-off-experience-coupon',{coupon_id:narr[0],secret:narr[2],account_id:narr[3]}).then(res=>{
									this.isQian = true
									if(res.code==0){
										this.contentVal = "核销成功";
									} else {
										this.contentVal = res.msg;
									}
									setTimeout(()=>{
										this.isQian = false
									},2000)
								},error=>{})
							} else {//订单核销
								this.$requst.post('order/check',{order_coding:narr[0],id:narr[1],check_user:this.userInfo.id}).then(res=>{
									this.isQian = true
									if(res.code==0){
										this.contentVal = "核销成功";
									} else {
										this.contentVal = res.msg;
									}
									setTimeout(()=>{
										this.isQian = false
									},2000)
								},error=>{})
							}
						}
					})
				}
				if( this.yuanList[index].title=='客服查询') {
					uni.navigateTo({
						url:'/pagesB/customerCheck/customerCheck'
					})
				}
			},
			goNodifyData(){//去修改资料页面
				uni.setStorageSync('uinfo',this.userInfo)
				uni.navigateTo({
					url:'/pagesA/nodifyData/nodifyData'
				})
			},
		}
	}
</script>

<style>

</style>