<template>
	<view>
	<view class="morePages">
		<!-- 头部栏 -->
		<view class="header-box">
			<UniStatusBar></UniStatusBar>
			<view class="title flex align_center" :style="{height:(navHeight+'px')}">
				 <u-image src="/static/logo-h.png" width="349" height='40'></u-image>
			</view>
		</view>
		<!-- body -->
		<view class="morePages-body">
			<view class="body-box bg-blue">
				<!-- 名片 -->
				<view class="userCard flex align_center justify_between">
					<view class="userCard-info flex align_center">
						<view>
							<u-image shape='circle' v-if="!hasLogin" src="/static/def_personal_avatar.png" width="90" height="90"></u-image>
							<u-image shape='circle' v-else :src="avatarUrl||'/static/def_personal_avatar.png'" width="90" height="90"></u-image>
						</view>
						<view class="user-info" @click="toUser">
							<view v-if="!hasLogin" style="font-size: 40rpx;">
								请点击登录
							</view>
							<view v-else>
								<view class="user-name">{{userInfo.userNameCN || userInfo.mobile}}</view>
								<view v-if="hasLogin&&userInfo&&userInfo.sysUserFlag == '0'">
									<u-tag text="个人用户" mode="dark" type="warning" shape="circle" size="mini" />
								</view>
								<view v-else>{{userInfo.orgName}}</view>
							</view>
						</view>
					</view>
					<view @click="toUser">
						<text v-if="hasLogin&&userInfo&&userInfo.sysUserFlag == '0'" class="user-rz">
							{{storeApply&&storeApply.auditStatus=='WAIT'?'认证门店审核中':'认证成为门店'}}
						</text>
						<uni-icons type="arrowright" size="20" color="#999"></uni-icons>
					</view>
				</view>
			</view>
			<!-- 余额数据 -->
			<view class="list-box">
				<view class="list-body">
					<uni-grid :column="4" :highlight="true" :show-border="false" :square="false" @change="e=>openDataList(e)">
						<uni-grid-item v-if="hasBalaceAuth">
							<view class="grid-item-box" :index="0">
								<text class="value">{{storeAccount.rechargeBalance}}</text>
								<text class="text">充值余额</text>
							</view>
						</uni-grid-item>
						<uni-grid-item v-if="hasBalaceAuth">
							<view class="grid-item-box" :index="1">
								<text class="value">{{storeAccount.giveBalance}}</text>
								<text class="text">抵扣余额</text>
							</view>
						</uni-grid-item>
						<uni-grid-item>
							<view class="grid-item-box" :index="2" v-if="$hasPermissions('M_couponList_mini')">
								<text class="value">{{hasShelf?couponCount:0}}</text>
								<text class="text">优惠券</text>
							</view>
						</uni-grid-item>
						<uni-grid-item>
							<view class="grid-item-box" :index="3" v-if="hasLogin&&hasRedPacket&&hasShelf">
								<text class="value">{{redPackCount}}</text>
								<text class="text">红包</text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</view>
			</view>		
			<!-- 网格图标 -->
			<view class="list-box" v-for="item in itemList" :key="item.id">
				<view class="list-title" v-if="item.text">
					<text>{{item.text}}</text>
				</view>
				<view class="list-body" :style="{paddingTop:item.text?0:'10px'}">
					<uni-grid :column="item.column" :highlight="true" :show-border="false" :square="false" @change="e=>openPage(e,item.child)">
						<uni-grid-item v-for="(sub, idx) in item.child" :index="idx" :key="idx">
							<view class="grid-item-box">
								<u-icon class="icons" :color="sub.color" :size="item.size" :name="sub.icon" custom-prefix="custom-icon"></u-icon>
								<text class="text">{{sub.text}}</text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</view>
			</view>
			 
			<view class="list-box" v-if="hasLogin">
				<view class="list-title flex justify_center phone" @click="quitOut">
					<text>退出登录</text>
				</view>
			</view>
		</view>
		
		<!-- 去认证弹框 -->
		<u-popup v-model="showPopup" mode="center" :border-radius="20" closeable>
			<view style="background-color: #fff;padding: 1rem;">
				<u-image width="533" height="415" src="/static/authimg.jpg"></u-image>
				<view style="padding-top:1rem;" class="flex justify_center">
					<u-button @click="toAuthStore()" shape="circle" :custom-style="{background:'#066cff',color:'#fff',width:'350rpx'}">开始认证</u-button>
				</view>
			</view>
		</u-popup>
	</view>
	<!-- tab -->
	<u-tabbar :list="vuex_tabBarList" :mid-button-size="80" :before-switch="beforeSwitch" :midButton="vuex_tabBarList.length==5"></u-tabbar>
	</view>
</template>

<script>
	import {
	    mapState,
	    mapMutations
	} from 'vuex'
	import UniStatusBar from '@/components/uni-status-bar/uni-status-bar.vue'
	import { queryQplsConfig,getProductfindByScanCode } from '@/api/shelf.js'
	import { findUserReward } from '@/api/rewardRule.js'
	import { ticketQueryCount } from '@/api/user.js'
	import { clickTab, toLogin } from "@/utils/index.js"
	export default {
		components: {
			UniStatusBar // 状态栏组件
		},
		data() {
			return {
				dealerPhone: null, // 经销商电话
				showPopup: false,
				showPriceSet: false,
				shelfSn: null,
				avatarUrl:'', // 用户图像
				navHeight: 44,
				couponCount: 0,
				redPackCount: 0,
				dataList:[]
			}
		},
		computed: {
			...mapState(['hasLogin','vuex_vinScanNums','vuex_scanMaxNums','vuex_tabBarList']),
			hasShelf(){
				return !!this.$store.state.vuex_storeShelf
			},
			userInfo(){
				return this.$store.state.vuex_userInfo
			},
			storeApply(){
				return this.$store.state.vuex_storeAuthInfo
			},
			hasRedPacket(){
				const rule = this.$store.state.vuex_rewardRule
				return rule&&rule.ruleStatus == 'release'
			},
			hasShopSeting(){
				return this.$store.state.vuex_hasShopiing
			},
			hasBalaceAuth(){
				return this.$store.state.vuex_showBalanceAuth
			},
			storeAccount(){
				return this.$store.state.vuex_storeAccount
			},
			itemList(){
				const list = [
					{
						text: '订单管理',
						icon: 'order',
						auth: true,
						column: 4,
						size: 60,
						child:[
							{
								text: '货架订单',
								icon: 'huojiaguanli',
								auth: this.$hasPermissions('M_shelfOrder_mini'),
								path: '/pagesA/digitalShelf/orderList',
								color: '#056cd9',
								isShelf: true
							},
							{
								text: '急送订单',
								icon: 'yijianshansong',
								auth: this.$hasPermissions('M_tempShelfOrder_mini'),
								path: '/pagesA/digitalShelf/tempOrderList/tempOrderList',
								color: '#dd6859',
								isShelf: true
							},
							{
								text: '采购订单',
								icon: 'purchaseorder',
								auth: this.$hasPermissions('M_procureOrder_mini'),
								path: '/pagesB/procureOrder/orderList',
								color: '#ffaa00'
							}
						],
					},
					{
						text: '货架管理',
						icon: 'list-dot',
						auth: true,
						column: 4,
						size: 60,
						child:[
							{
								text: '库存查询',
								icon: 'stockquery',
								auth: this.$hasPermissions('M_stockQueryList_mini'),
								path: '/pagesB/stockQuery/stockQuery',
								color: '#ff87a3',
								isShelf: true
							},
							{
								text: '补货记录',
								icon: 'replenishment',
								auth: this.$hasPermissions('M_stockPut_mini'),
								path: '/pagesA/digitalShelf/stockPut',
								color: '#55aaff',
								isShelf: true
							},
							{
								text: '结算记录',
								icon: 'settlement',
								auth: this.$hasPermissions('M_settlementRecord_mini'),
								path: '/pagesA/digitalShelf/settlementRecord/settlementRecord',
								color: '#55aa7f',
								isShelf: true
							},
							{
								text: '付款结算',
								icon: 'payrecord',
								auth: this.$hasPermissions('M_settlementManage_mini'),
								path: '/pagesA/digitalShelf/settlementManage/settlementManage',
								color: '#ff9777',
								isShelf: true
							},
							{
								text: '编码取货',
								icon: 'ziyuanxhdpi',
								auth: this.userInfo && this.userInfo.sysUserFlag == '1',
								path: '#quhuo1',
								color: '#2196f3',
								isShelf: true
							},
							{
								text: '扫码取货',
								icon: 'saoma1',
								auth: this.userInfo && this.userInfo.sysUserFlag == '1',
								path: '#quhuo0',
								color: '#ffaa00',
								isShelf: true
							},
							{
								text: 'VIN查询历史',
								icon: 'lishijilu',
								auth: this.hasLogin,
								path: '/pagesA/vinRecord/vinRecord',
								color: '#799ff9',
								isShelf: true
							},
							{
								text: '联系汽配商',
								icon: 'lianxidianhua',
								auth: this.hasLogin&&this.dealerPhone,
								path: '#call',
								color: '#00aaff',
								isShelf: true
							},
						],
					},
					{
						text: '轮胎质保单',
						icon: 'file-text',
						auth: true,
						column: 4,
						size: 60,
						child:[
							{
								text: '创建质保单',
								icon: 'zhibaodan',
								auth: this.$hasPermissions('M_creatWarranty_mini'),
								path: '/pagesA/qualityPolicy/creatOrder',
								color: '#056cd9'
							},
							{
								text: '质保单查询',
								icon: 'ordersearch',
								auth: this.$hasPermissions('M_searchWarranty_mini'),
								path: '/pagesA/qualityPolicy/searchOrder',
								color: '#ffaa7f'
							},
						],
					},
					{
						text: '基础设置',
						icon: 'setting',
						auth: true,
						column: 4,
						size: 60,
						child:[
							{
								text: '员工管理',
								icon: 'employee',
								auth: this.$hasPermissions('M_employee_mini'),
								path: '/pages/storeManage/personnel',
								color: '#ff9d7c'
							},
							{
								text: '岗位权限',
								icon: 'job',
								auth: this.$hasPermissions('M_roleSetting_mini'),
								path: '/pages/storeManage/roleSetting/roleSetting',
								color: '#aaaaff'
							},
							{
								text: '价格显示授权',
								icon: 'permission',
								auth: this.$hasPermissions('M_priceShow_mini')&&this.showPriceSet,
								path: '/pages/storeManage/priceSetting/priceSetting',
								color: '#55aaff',
								isShelf: true
							},
							{
								text: '商城显示授权',
								icon: 'shangcheng',
								auth: this.$store.state.vuex_showShopAuth&&this.userInfo&&this.userInfo.superAdmin == 1,
								path: '/pagesB/shopShow/shopShow',
								color: '#4caf50',
								isShelf: true
							},
							{
								text: '余额支付授权',
								icon: 'payrecord',
								auth: this.userInfo&&this.userInfo.superAdmin == 1,
								path: '/pagesB/balanceSetting/balanceSetting',
								color: '#009688',
								isShelf: true
							},
						],
					}
				]
				// 计算父节点，权限
				list.forEach(item => {
					item.id = this.$u.guid()
					item.child = item.child.filter(c => c.auth)
					item.auth = item.child.length > 0
				})
				return list.filter(item => item.auth)
			}
		},
		onShow() {
			// 用户头像
			this.avatarUrl = uni.getStorageSync('userPhoto');
			// 获取货架信息
			const shelfInfo = this.$store.state.vuex_storeShelf
			this.shelfSn = shelfInfo ? shelfInfo.shelfSn : ''
			this.dealerPhone = shelfInfo&&shelfInfo.contactMobile ? shelfInfo.contactMobile : ''
			if(this.shelfSn){
				this.getPriceCofig()
			}
			// 获取优惠券总数
			if(this.hasLogin&&this.$hasPermissions('M_couponList_mini')){
				this.getCouponCount()
			}
			// 红包总金额
			if(this.hasRedPacket&&this.hasShelf){
				this.getUserReward()
			}
			// 隐藏促销模块
			if(!this.hasLogin){
				this.hidePromoTab()
			}
		},
		// 页面卸载
		onUnload() {
			uni.$off('refashProm')
		},
		methods: {
			// 获取优惠券数量
			getCouponCount(){
				if(this.userInfo.sysUserFlag == '1'){
					ticketQueryCount().then(res => {
						this.couponCount = res.data ? res.data.ticketValue : 0
					})
				}
			},
			// 红包总金额
			getUserReward(){
				findUserReward().then(res => {
					this.redPackCount = res.data ? res.data.rewardAmount : 0
				})
			},
			// 查看用户信息
			toUser(){
				if(this.hasLogin){
					// 用户详细信息 或 门店认证
					uni.navigateTo({
						url: this.userInfo.sysUserFlag == '1' ? '/pages/personData/personData' : '/pages/storeManage/storeAuth'
					})
				}else{
					toLogin()
				}
			},
			// 隐藏促销模块
			hidePromoTab(){
				// 删除促销模块
				const promoIndex = this.$store.state.vuex_tabBarList.findIndex(item => item.text == '促销')
				if(promoIndex > -1){
					this.$store.state.vuex_tabBarList.splice(promoIndex,1)
				}
				// 扫描按钮不局中
				const scanTab = this.$store.state.vuex_tabBarList.find(item => item.text == '扫描VIN')
				if(scanTab){
					scanTab.iconPath = "/static/tab/tab_scan_normal.png"
					scanTab.midButton = false
				}
			},
			// tab单击
			beforeSwitch(index){
				const row = this.$store.state.vuex_tabBarList[index] // 当前tab
				const isNoAuth = this.userInfo ? this.userInfo.sysUserFlag == '0' : false // 是否认证门店
				return clickTab(row,this.hasLogin,isNoAuth,this.vuex_vinScanNums < this.vuex_scanMaxNums)
			},
			// 网格打开页面
			openPage(e,child){
				const item = child[e.detail.index]
				this.toPage(item.path,item.isShelf)
			},
			// 点击统计数据
			openDataList(e){
				const path = [
					'/pagesB/accountBalance/accountBalance',
					'/pagesB/accountBalance/accountBalance',
					'/pagesB/coupon',
					'/pagesB/redPacket'
				]
				this.toPage(path[e.detail.index],true)
			},
			// 获取价格配置
			getPriceCofig(){
				queryQplsConfig({shelfSn: this.shelfSn}).then(res => {
					this.$store.state.vuex_configPrice = res.data || null
					const ret = [false,false]
					ret[0]= res.data.shelf_cost_show == '1' || res.data.non_shelf_cost_show == '1'
					ret[1]= res.data.shelf_price_show == '1' || res.data.non_shelf_price_show == '1'
					this.showPriceSet = ret.filter(item => !!item).length > 0
				})
			},
			// 取货
			openTakeGood(index){
				// 已有数字货架
				if(this.hasShelf){
					this.clickAction(index)
				}else{
					uni.showToast({
						icon:'none',
						title: '门店没有关联数字货架，无法使用此功能！'
					})
				}
			},
			// 选择取货方式
			clickAction(index){
				const shelfSn = this.hasShelf.shelfSn
				const _this = this
				// 扫描
				if(index == 0){
					uni.scanCode({
						success: function (ret) {
							console.log(ret);
							const params = {
								codeType: ret.scanType == 'QR_CODE' ? 0 : 1
							}
							// 二维码
							if(ret.scanType == 'QR_CODE'){
								const result = ret.result.split("&")
								params.productSn = result[2] // 产品编码sn
							}else{
								params.qrCode = ret.result
							}
							uni.showLoading({
								title: "正在查询产品..."
							})
							// 确认取货
							getProductfindByScanCode(params).then(res => {
								if(res.status == 200 && res.data){
									if(res.data.currentInven){
										const billSource = ret.scanType == 'QR_CODE' ? 'qr_code': 'bar_code'
										const retData = Object.assign({shelfSn: shelfSn, billSource: billSource},res.data)
										_this.$store.state.vuex_tempData = retData
										uni.navigateTo({
											url: '/pagesA/queryByCode/confirmQh'
										})
									}else{
										uni.showModal({
											title: '提示',
											content: '产品库存为0，无法取货！',
											confirmText: '好的',
											showCancel: false
										})
									}
								}else{
									uni.showModal({
										title: '提示',
										content: '产品不属于此货架，请重新扫描！',
										confirmText: '好的',
										showCancel: false
									})
								}
								uni.hideLoading()
							})
						}
					});
				}else{
					// 按编码搜索
					uni.navigateTo({
						url: '/pagesA/queryByCode/queryByCode'
					})
				}
			},
			// 跳转打开页面
			toPage(path,isShelf){
				const _this = this
				if(this.hasLogin){
					// 游客未认证
					if(this.userInfo.sysUserFlag == '0'){
						if(this.storeApply&&this.storeApply.auditStatus=='WAIT'){
							uni.showModal({
								title: '提示',
								content: '门店认证资料审核中，请耐心等待！',
								confirmText: '知道了',
								showCancel: false
							})
						}
						// 如果审核已通过
						else if(this.storeApply&&this.storeApply.auditStatus=='PASS'){
							uni.showModal({
								title: '提示',
								content: '门店认证审核已通过，请重新登录！',
								confirmText: '去登录',
								showCancel: false,
								success() {
									_this.$store.dispatch('userLogout');
									toLogin()
								}
							})						
						}else{
							this.showPopup = true
						}
					}else{
						// 已有数字货架
						if(this.hasShelf || !isShelf){
							if(path.indexOf("/pages")>=0){
								uni.navigateTo({
									url: path
								})
							}else{
								if(path == '#quhuo1'){
									this.openTakeGood(1)
								}
								if(path == '#quhuo0'){
									this.openTakeGood(0)
								}
								if(path == '#call'){
									this.call()
								}
							}
						}else{
							uni.showToast({
								icon:'none',
								title: '门店没有关联数字货架，无法使用此功能！'
							})
						}
					}
				}else{
					toLogin()
				}
			},
			// 去认证
			toAuthStore(){
				this.showPopup = false
				uni.navigateTo({
					url: '/pages/storeManage/storeAuth'
				})
			},
			// 打电话
			call(){
				this.callPhone(this.dealerPhone)
			},
			// 退出登录
			quitOut(){
				let _this = this
				uni.showModal({
					title: '提示',
					content: '确定退出登录吗？',
					success: (ret) => {
					  if(ret.confirm){
						  _this.$store.dispatch('userLogout');
						  toLogin()
					  }
					}
				})
			}
		}
	}
</script>

<style lang="less">
.morePages{
	width: 100%;
	background-image: linear-gradient(#86defa 0%,#cdeff9 20%,#f8f8f8 30%);
	.header-box{
		z-index: 5;
		padding: 0em 1em;
		background: #03A9F4;
		 .title{
			 padding: 0;
		 }
		 .version{
			 color: #FFEB3B;
			 font-size: 0.8em;
			 margin-left: 1em;
		 }
	}
	.morePages-body{
		padding: 0 30rpx;
		overflow: hidden;
		.body-box{
			margin-bottom: 10px;
			z-index: 4;
		}
		.bg-blue{
			position: relative;
			> view{
				z-index: 100;
				position: relative;
			}
			&::after{
				/* 这个伪类的作用就是一个圆弧的背景色 */
				width: 130%;
				height: 100%;
				position: absolute;
				/*设置水平居中*/
				left: -15%;
				/* 之所以left:20%,是因为width:140%，若width:160%，那么left:30%才能水平居中 */
				top: -25%; 
				/*层叠顺序，最底层显示*/
				content: '';
				border-radius: 0 0 50% 50%;
				/*分别对应 左上 右上 右下 左下 可以修改成其它颜色*/
			    background: linear-gradient(to bottom, #03A9F4, #02a6ec);  
			}
			.userCard{
				position:relative;
				left:0;
				bottom:0;
				padding: 0.5rem;
				background: #fff;
				border-radius: 25rpx;
				box-shadow: 2rpx 2rpx 5rpx #bcdede;
				.userCard-info{
					flex-grow:1;
					> view{
						&:last-child{
							margin-left: 0.5em;
							line-height: 1.5em;
							.user-name{
								font-size: 1rem;
							}
							>view{
								padding: 0.2em;
							}
						}
					}
					.user-info{
						flex-grow:1;
					}
				}
				.user-rz{
					font-size: 0.8rem;
					color:#58aff5;
				}
			}
		}
		.list-box{
			background: #ffffff;
			margin-bottom: 20rpx;
			border-radius: 25rpx;
			overflow: hidden;
			box-shadow: 2rpx 2rpx 5rpx #eee;
			.list-title{
				padding: 25rpx 20rpx;
				color: #666;
				> text{
					font-size: 28rpx;
				}
			}
			&:first-child{
				box-shadow: 2rpx 2rpx 5rpx #cdeff9;
			}
			.list-body{
				padding: 0 20rpx;
			}
			.grid-item-box{
				display: flex;
				flex-direction: column;
				align-items:center;
				justify-content: center;
				margin-bottom: 15px;
				.value{
					text-align:center;
					color: #666;
					margin-top: 15px;
					font-size: 16px;
				}
				.text{
					text-align:center;
					color: #666;
					margin-top: 5px;
					font-size: 12px;
				}
				.icons{
					text-align:center;
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: center;
				}
			}
		}
		.phone{
			color: #00aaff;
			&:active{
				opacity: 0.8;
				transform:scale(0.9);
			}
		}
	}
}
</style>
