<template>
	<view>
	<view class="morePages">
		<view class="list-box" v-if="hasRedPacket&&hasShelf">
			<view class="list-title flex align_center justify_between" @click="toPage('/pagesB/redPacket')">
				<view><u-icon size="34" color="#f10000" name="red-packet-fill"></u-icon> <text style="color: #ff0000;margin-left: 10rpx;">红包奖励</text></view>
				<view>
					<u-icon size="28" color="#969799" name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<view class="list-box" v-if="hasLogin&&$hasPermissions('M_couponList_mini')">
			<view class="list-title flex align_center justify_between" @click="toPage('/pagesB/coupon')">
				<view><u-icon size="34" color="#ff7d0b" name="gift-fill"></u-icon> <text style="color: #ff7d0b;margin-left: 10rpx;">我的优惠券</text></view>
				<view>
					<u-icon size="28" color="#969799" name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		
		<!-- 网格图标 -->
		<view class="list-box" v-for="item in itemList" :key="item.id">
			<view class="list-title">
				<u-icon size="35" :name="item.icon"></u-icon> <text>{{item.text}}</text>
			</view>
			<view class="list-body">
				<uni-grid :column="3" :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" :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&&dealerPhone">
			<view class="list-title flex justify_center phone" @click="call">
				<u-icon size="36" name="phone"></u-icon> <text>联系汽配商</text>
			</view>
		</view>
		<view class="list-box" v-if="hasLogin">
			<view class="list-title flex justify_center phone" @click="quitOut">
				<text>退出登录</text>
			</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" :before-switch="beforeSwitch" :midButton="vuex_tabBarList.length==5"></u-tabbar>
	</view>
</template>

<script>
	import {
	    mapState,
	    mapMutations
	} from 'vuex'
	import { queryQplsConfig } from '@/api/shelf.js'
	export default {
		data() {
			return {
				dealerPhone: null, // 经销商电话
				showPopup: false,
				showPriceSet: false,
				shelfSn: null,
			}
		},
		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'
			},
			itemList(){
				const list = [
					{
						text: '货品管理',
						icon: 'bag',
						auth: true,
						child:[
							{
								text: '库存查询',
								icon: 'stockquery',
								auth: this.$hasPermissions('M_stockQueryList_mini'),
								path: '/pagesB/stockQuery/stockQuery',
								color: '#00aaff'
							},
							{
								text: '补货记录',
								icon: 'replenishment',
								auth: this.$hasPermissions('M_stockPut_mini'),
								path: '/pagesA/digitalShelf/stockPut',
								color: '#aa55ff'
							}
						],
					},
					{
						text: '订单管理',
						icon: 'order',
						auth: true,
						child:[
							{
								text: '货架订单',
								icon: 'shelforder',
								auth: this.$hasPermissions('M_shelfOrder_mini'),
								path: '/pagesA/digitalShelf/orderList',
								color: '#0055ff'
							},
							{
								text: '急送订单',
								icon: 'yijianshansong',
								auth: this.$hasPermissions('M_tempShelfOrder_mini'),
								path: '/pagesA/digitalShelf/tempOrderList/tempOrderList',
								color: '#ff7b1c'
							},
							{
								text: '采购订单',
								icon: 'purchaseorder',
								auth: this.$hasPermissions('M_procureOrder_mini'),
								path: '/pagesB/procureOrderList',
								color: '#00aa00'
							}
						],
					},
					{
						text: '电子质保单',
						icon: 'file-text',
						auth: true,
						child:[
							{
								text: '创建质保单',
								icon: 'zhibaodan',
								auth: this.$hasPermissions('M_creatWarranty_mini'),
								path: '/pagesA/qualityPolicy/creatOrder',
								color: '#5555ff'
							},
							{
								text: '质保单查询',
								icon: 'ordersearch',
								auth: this.$hasPermissions('M_searchWarranty_mini'),
								path: '/pagesA/qualityPolicy/searchOrder',
								color: '#ff557f'
							},
						],
					},
					{
						text: '结算管理',
						icon: 'rmb-circle',
						auth: true,
						child:[
							{
								text: '结算记录',
								icon: 'settlement',
								auth: this.$hasPermissions('M_settlementRecord_mini'),
								path: '/pagesA/digitalShelf/settlementRecord/settlementRecord',
								color: '#00aaff'
							},
							{
								text: '付款结算',
								icon: 'payrecord',
								auth: this.$hasPermissions('M_settlementManage_mini'),
								path: '/pagesA/digitalShelf/settlementManage/settlementManage',
								color: '#ff5500'
							},
						],
					},
					{
						text: '基础设置',
						icon: 'setting',
						auth: true,
						child:[
							{
								text: '员工管理',
								icon: 'employee',
								auth: this.$hasPermissions('M_employee_mini'),
								path: '/pages/storeManage/personnel',
								color: '#0055ff'
							},
							{
								text: '岗位权限',
								icon: 'job',
								auth: this.$hasPermissions('M_roleSetting_mini'),
								path: '/pages/storeManage/roleSetting/roleSetting',
								color: '#55aa00'
							},
							{
								text: '价格显示设置',
								icon: 'permission',
								auth: this.$hasPermissions('M_priceShow_mini')&&this.showPriceSet,
								path: '/pages/storeManage/priceSetting/priceSetting',
								color: '#ff5500'
							},
						],
					}
				]
				// 计算父节点，权限
				list.forEach(item => {
					item.id = this.$u.guid()
					item.child = item.child.filter(c => c.auth)
					item.auth = item.child.length > 0
				})
				return list
			}
		},
		onShow() {
			// 获取货架信息
			const shelfInfo = this.$store.state.vuex_storeShelf
			this.shelfSn = shelfInfo ? shelfInfo.shelfSn : ''
			this.dealerPhone = shelfInfo&&shelfInfo.contactMobile ? shelfInfo.contactMobile : ''
			if(this.shelfSn){
				this.getPriceCofig()
			}
		},
		// 页面卸载
		onUnload() {
			uni.$off('refashProm')
		},
		methods: {
			// tab单击
			beforeSwitch(index){
				const row = this.$store.state.vuex_tabBarList[index]
				if(row.text == '促销'){
					uni.$emit('refashProm')
				}
				if(row.text == '扫描VIN'){
					this.openCamera()
				}else{
					return true
				}
			},
			// 网格打开页面
			openPage(e,child){
				const item = child[e.detail.index]
				this.toPage(item.path)
			},
			// 获取价格配置
			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
				})
			},
			// 去扫描
			openCamera(){
				if(this.hasLogin){
					if(this.userInfo.sysUserFlag == '0'){
						if(this.vuex_vinScanNums < this.vuex_scanMaxNums){
							uni.navigateTo({
								url: "/pages/scan-frame/scan-frame"
							})
						}else{
							uni.showModal({
								title: '提示',
								content: '个人用户扫描VIN仅限10次，您的次数已用完！',
								confirmText: '好的',
								showCancel: false,
								success(res) {}
							})
						}
					}else{
						uni.navigateTo({
							url: "/pages/scan-frame/scan-frame"
						})
					}
				}else{
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			// 跳转打开页面
			toPage(path){
				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');
									uni.redirectTo({
										url: '/pages/login/login'
									});
								}
							})						
						}else{
							this.showPopup = true
						}
					}else{
						// 已有数字货架
						if(this.hasShelf){
							uni.navigateTo({
								url: path
							})
						}else{
							uni.showToast({
								icon:'none',
								title: '门店没有关联数字货架，无法使用此功能！'
							})
						}
					}
				}else{
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			// 去认证
			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');
						  uni.navigateTo({
						  	 url: '/pages/login/login'
						  });
					  }
					}
				})
				
			}
		}
	}
</script>

<style lang="less">
.morePages{
	width: 100%;
	padding: 30rpx;
	background-image: linear-gradient(#86defa 0%,#cdeff9 20%,#f8f8f8 30%);
	.list-box{
		background: #ffffff;
		margin-bottom: 20rpx;
		border-radius: 25rpx;
		overflow: hidden;
		box-shadow: 2rpx 2rpx 5rpx #eee;
		.list-title{
			padding: 25rpx 20rpx;
			font-size: 30rpx;
			> text{
				margin-left: 10rpx;
			}
		}
		&:first-child{
			box-shadow: 2rpx 2rpx 5rpx #cdeff9;
		}
		.list-body{
			padding: 0 20rpx 25rpx;
		}
		.grid-item-box{
			display: flex;
			flex-direction: column;
			align-items:center;
			justify-content: center;
			.text{
				text-align:center;
				color: #666;
			}
			.icons{
				font-size: 70rpx;
				width: 90rpx;
				height: 90rpx;
				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>
