<template>
	<view class="content" v-if="!loding">
		<block v-if="this.$store.state.token != ''">
			<block v-if="!certification">
				<!-- 企业认证 -->
				<view class="statusBar">
					<view class="statusBar-title">企业工具</view>
				</view>
				<view class="store-login">
					<block v-if="appliesState.code === -1">
						<image class="icon" src="@/static/icons/approve-icon.png" mode="widthFix"></image>
						<view class="sub-title">{{appliesState.message}}</view>
						<button type="default" @click="onRightBtn">认证并开通</button>
					</block>
					<block v-if="appliesState.code === -2">
						<image class="icon" src="@/static/icons/approve-icon.png" mode="widthFix"></image>
						<view class="sub-title">{{appliesState.message}}</view>
						<button type="default" @click="onRightBtn1">企业未注册</button>
					</block>
					<block v-else-if="appliesState.code === 2">
						<image class="icon" src="@/static/icons/approve-icon.png" mode="widthFix"></image>
						<view class="title">认证失败</view>
						<view class="sub-title">{{appliesState.message}}</view>
						<button type="default" @click="$Router.push({name: 'Approve', params: {formType: 'put'}})">重新提交认证</button>
					</block>
					<block v-else-if="appliesState.code === 0">
						<image class="icon" src="@/static/icons/audit-icon.png" mode="widthFix"></image>
						<view class="sub-title">{{appliesState.message}}</view>
					</block>
				</view>
			</block>
			<block v-else>
				<view class="statusBar">
					<view class="statusBar-box">
						<image class="logo" :src="company.logo" mode="aspectFill"></image>
						<view class="company">
							<view class="name">{{company.name}}<image v-if="!employee" @click="$Router.push({name: 'Basics'})" class="name-img" src="../../static/icons/store_icon_pen.png" mode="aspectFill"></image></view>
							<view class="tool">
							    <view class="faith"><image class="faith-img" src="../../static/icons/store_icon_row.png" mode="aspectFill"></image>诚信{{company.faith}}</view>
							    <view class="btn"><image class="btn-img" src="../../static/icons/store_icon_icon.png" mode="aspectFill"></image>{{company.identity}}</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 老板 -->
				<boss v-if="!employee" :word-data="workbench"/>
				<!-- 员工 -->
				<staff v-if="employee" :tool-list="toolList"/>
			</block>
		</block>
		<!-- 登录提示 -->
		<block v-else>
			<view class="statusBar">
				<view class="statusBar-title">企业工具</view>
			</view>
			<view class="store-login">
				<image class="icon" src="@/static/icons/login-icon.png" mode="widthFix"></image>
				<view class="sub-title">一键开启您的易货之旅</view>
				<button type="default" @click="login">登录</button>
			</view>
		</block>
	</view>
</template>

<script>
	import { index } from '@/apis/interfaces/store'
	import { isallow, appliesQuery } from '@/apis/interfaces/company'
    import { employeesTool } from '@/apis/interfaces/employees'
	import boss from '@/components/store-boss/store-boss'
	import staff from '@/components/store-staff/store-staff'
	import userAuth from '@/public/userAuth'
	export default {
		components:{
			boss,
			staff
		},
		data() {
			return {
				loding 		 : true,
				appliesState : {},
				certification: false,
				employee	 : false,
				workbench	 : {},
				company		 : {},
                toolList     : ''
			}
		},
		onShow(){
			this.getIndex()
		},
		methods: {
			// 首页数据
			getIndex(){
				if(this.$store.state.token == ''){
					this.loding = false
					return
				}
				index().then(res => {
					this.certification = res.is_certification
					if(!res.is_certification){
						this.getAppliesQuery()
						return
					}
					this.company	   = {
						logo	: res.cover,
						name	: res.name,
						identity: res.company_identity,
						faith	: res.integrity
					}
					this.workbench 	   = {
                        identity: res.identity_time,
                        grade   : res.identity_sign,
						top		: res.top,
						middle	: res.middle,
						order	: res.order
					}
					this.employee	   = res.is_employee
					this.loding 	   = false
                    
                    // 若为员工身份-则调取员工管理信息
                    if(res.is_employee) {
                        employeesTool().then(res=>{
                            this.toolList = res.permission
                        })
                    }
                    
				}).catch(err =>{
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 查询企业认证状态
			getAppliesQuery(){
				appliesQuery().then(res=>{
					this.appliesState = res
					this.loding 	  = false
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 登录
			login(){
				let auth = new userAuth()
				auth.Login().then(res => {
					if(res.auth) this.getIndex()
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 开通vip
			onRightBtn(){
				isallow().then(res =>{
					this.$Router.push({name: 'Approve'})
				}).catch(err =>{
					uni.showModal({
						title		: '提示',
						content		: '暂未开通商家vip无法开通店铺工具',
						confirmText	: '立即开通',
						success		: res=> {
							if(res.confirm){
								this.$Router.push({name: 'Vip'})
							}
						}
					})
				})
			},
			// 跳转到创建企业选择企业类型的页面
			onRightBtn1(){
				this.$Router.push({name: 'Registered'})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 登录提示
	.store-login{
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 9;
		background: white;
		text-align: center;
		@extend .vertical;
		button{
			margin-top: $margin*3;
			display: inline-block;
			width: 50%;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: $radius/2;
			background: $text-price;
			color: white;
			font-weight: bold;
			font-size: $title-size;
		}
		.sub-title{
			color: $text-gray;
			font-size: $title-size-m;
		}
		.icon{
			width: 288rpx;
		}
	}
	// Bar
	.statusBar{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99;
		background: $text-price;
		@extend .ios-top;
		.statusBar-box{
			min-height: 90rpx;
			position: relative;
			padding: $padding $padding $padding ($padding + 88);
			color: white;
			.logo{
				position: absolute;
				left: $padding;
				width: 94rpx;
				height: 94rpx;
				border-radius: 50%;
                border: 4rpx solid #ed8483;
                box-sizing: border-box;
                box-shadow: 0 4rpx 15rpx rgba(109,1,0,.8);
				background-color: #fff;
			}
			.company{
                width: calc(100% - 94rpx);
                padding-left: 30rpx;
                box-sizing: border-box;
				.name{
					line-height: 40rpx;
					@extend .nowrap;
					font-size: $title-size;
                    .name-img {
                        width: 30rpx;
                        height: 30rpx;
                        margin: 7rpx 0 0 15rpx;
                    }
				}
                .tool {
                    display: flex;
                    margin-top: 13rpx;
                    .faith{
                    	line-height: 40rpx;
                        height: 38rpx;
                    	@extend .nowrap;
                    	font-size: 24rpx;
                        background-color: rgba(0,0,0,.15);
                        padding: 0 15rpx;
                        border-radius: 60rpx;
                        margin-right: 30rpx;
                        display: flex;
                        .faith-img {
                            width: 28rpx;
                            height: 28rpx;
                            margin: 5rpx 4rpx 0 0;
                        }
                    }
                    .btn{
                    	line-height: 40rpx;
                        height: 38rpx;
                        font-size: 24rpx;
                        padding: 0 15rpx 0 30rpx;
                        background-color: #913335;
                        display: inline-block;
                        border-radius: 0 60rpx 60rpx 0;
                        position: relative;
                        text-transform: uppercase;
                        .btn-img {
                            position: absolute;
                            width: 38rpx;
                            height: 38rpx;
                            left: -20rpx;
                            top: 0;
                        }
                    }
                }
			}
		}
		.statusBar-title{
			line-height: 88rpx;
			min-height: 88rpx;
			color: white;
			text-align: center;
			font-weight: bold;
		}
	}
	.content{
		padding-top: calc(var(--status-bar-height) + #{$padding * 2} + 65rpx);
		padding-bottom: $padding;
	}
</style>
