<template>
	<view class="content" v-if="!loging">
		<!-- 基础信息 -->
		<view class="info-card">
			<view class="cover">
				<view class="cover-add vertical" @click="updCover">
					<block v-if="cover.showpath != ''">
						<image :src="cover.showpath" mode="aspectFill"></image>
					</block>
					<block v-else>
						<image class="cover-default" src="@/static/icons/add-icon.png" mode="widthFix"></image>
						<view>员工寸照</view>
					</block>
				</view>
			</view>
			<view class="info-text">
				<view class="info-inputs">
					<input type="text" v-model="name" placeholder="姓名"/>
				</view>
				<view class="info-inputs">
					<input type="number" v-model="phone" placeholder="手机号码"/>
				</view>
				<view class="info-inputs">
					<input type="text" v-model="job" placeholder="职业"/>
				</view>
				<view class="info-inputs">
					<picker :range="section" range-key="name" :value="sectionIndex" @change="pickerChange">
						<view class="picker-text">
							{{section[sectionIndex].name}}
							<uni-icons class="icon" type="arrowdown" color="#555"></uni-icons>
						</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="jurisdiction switch">
			<view class="item">
				<label>
					<view class="item-title">设为推荐</view>
					<view class="item-info">设为推荐员工将在企业自媒体中优先展示</view>
					<switch class="item-switch" :checked="isPosition" color="#e93340" @change="switchChange" />
				</label>
			</view>
		</view>
		<!-- 权限设置 -->
		<view class="title">权限设置</view>
		<view class="jurisdiction">
			<checkbox-group @change="permissionChange">
				<view class="item" v-for="(item, index) in permissions" :key="index">
					<label>
						<view class="item-title">{{item.title}}</view>
						<view class="item-info">{{item.description}}</view>
						<checkbox class="item-checkbox" :checked="item.check" color="#e93340" :value="item.permission_id" />
					</label>
				</view>
			</checkbox-group>
		</view>
		<!-- 按钮 -->
        <view class="basisc-btn">
            <button class="btn" size="default" @click="onAddEmployees">{{type === 'PUT' ? '修改': '添加'}}</button>
        </view>
	</view>
</template>

<script>
	import { employeesConfig, addEmployees, employeesInfo, employeesPut } from '@/apis/interfaces/employees'
	import { uploads } from '@/apis/interfaces/uploading'
	export default {
		data() {
			return {
				type		 : '',
				loging		 : true,
				section		 : [],
				permissions	 : [],
				permissionIds: [],
				sectionIndex : 0,
				cover		 : {
					showpath : '',
					path	 : ''
				},
				name		 : '',
				phone		 : '',
				job			 : '',
				isPosition	 : false
			};
		},
		created() {
			if(this.$Route.query.type === 'PUT'){
				this.type = 'PUT'
				uni.setNavigationBarTitle({
					title: '编辑员工'
				})
			}
			employeesConfig().then(res => {
				this.section 	 = res.store
				if(this.$Route.query.type === 'PUT'){
					employeesInfo(this.$Route.query.id || 4).then(res => {
						let permissionIds = []
						for(let val of res.permission){
							if(val.check){
								permissionIds.push(val.permission_id)
							}
						}
						this.permissions  = res.permission
						this.sectionIndex = this.section.findIndex(val => val.store_id == res.store.store_id)
						this.permissionIds= permissionIds
						this.name  		  = res.name
						this.phone 		  = res.mobile
						this.job   		  = res.job
						this.cover		  = res.cover
						this.isPosition	  = res.is_position
						this.loging 	  = false
					}).catch(err => {
						uni.showToast({
							title: err.message,
							icon : 'none'
						})
					})
				}else{
					this.permissions = res.permissions
					this.loging = false
				}
			})
		},
		methods:{
			// 设为推荐
			switchChange(e){
				this.isPosition = e.detail.value
			},
			// 选择部门
			pickerChange(e){
				this.sectionIndex = e.detail.value
			},
			// 权限选择
			permissionChange(e){
				this.permissionIds = e.detail.value
			},
			// 上传照片
			updCover(){
				uni.chooseImage({
					crop: {width: 229, height: 320},
					success: path=> {
						uploads([{
							uri : path.tempFilePaths[0]
						}]).then(res => {
							this.cover = {
								showpath: res.url[0],
								path	: res.path[0]
							}
						}).catch(err => {
							uni.showToast({
								title: err.message,
								icon : 'none'
							})
						})
					}
				})
			},
			// 添加员工
			onAddEmployees(){
				let data = {
					name		: this.name,
					mobileNo	: this.phone,
					job			: this.job,
					cover		: this.cover.path,
					position	: this.isPosition ? 1: 0,
					order		: 0,
					store_id	: this.section[this.sectionIndex].store_id,
					permission	: this.permissionIds
				}
				let submitAdd = this.type == 'PUT' ? employeesPut(this.$Route.query.id, data) : addEmployees(data)
				
				submitAdd.then(res => {
					uni.showModal({
						title		: '提示',
						content		: res,
						showCancel	: false,
						success 	: () => {
							this.$Router.back()
						}
					})
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
    // 按钮组
    .basisc-btn{
    	position: fixed;
    	bottom: 0;
    	left: 0;
    	right: 0;
    	padding: $padding;
    	background: white;
    	box-shadow: 0 0 4rpx 4rpx rgba($color: #000000, $alpha: .02);
    	.btn {
    		background: $mian-color;
    		color: white;
    		border-radius: 0;
    		font-size: $title-size-lg;
    		line-height: 88rpx;
    		height: 88rpx;
    		&::after {
    			border: none;
    		}
    		&[disabled] {
    			background: rgba($color: $mian-color, $alpha: .6);
    		}
    	}
    }
    
	.content{
		// min-height: 100vh;
        padding-bottom: ($padding*3) + 90;
		@extend .ios-bottom;
		.title{
			padding: ($padding/2) $padding;
			color: $text-gray;
		}
		.jurisdiction{
			background: white;
			&.switch{
				margin-top: $margin;
			}
			.item{
				position: relative;
				padding: $padding 150rpx $padding $padding;
				&::after{
					position: absolute;
					left: $padding;
					right: 0;
					bottom: 0;
					height: 1rpx;
					content: " ";
					background: $border-color;
				}
				&:last-child::after{
					display: none;
				}
				.item-checkbox{
					position: absolute;
					right: $padding;
					top: 50%;
					height: 40rpx;
					margin-top: -27rpx;
				}
				.item-switch{
					position: absolute;
					right: $padding;
					top: 50%;
					height: 40rpx;
					margin-top: -27rpx;
				}
				.item-title{
					font-size: $title-size;
					padding-bottom: $margin/3;
				}
				.item-info{
					font-size: $title-size-m;
					color: $text-gray;
				}
			}
		}
		// 基础信息
		.info-card{
			background: white;
			padding: $padding;
			position: relative;
			min-height: 238rpx;
			.cover{
				position: absolute;
				top: $padding;
				left: $padding;
				background: #f8f8f8;
				width: 229rpx;
				height: 320rpx;
				.cover-add{
					position: absolute;
					width: 100%;
					height: 100%;
					text-align: center;
					image{
						width: 229rpx;
						height: 320rpx;
					}
					image.cover-default{
						width: 128rpx;
					}
					color:  $text-gray-m;
					font-size: $title-size-m;
				}
			}
			.info-text{
				padding-left: $padding + 229;
				.info-inputs{
					height: 80rpx;
					line-height: 80rpx;
					border-bottom: solid 1rpx $border-color;
					input{
						height: 80rpx;
					}
					.picker-text{
						position: relative;
						padding-right: 80rpx;
						.icon{
							position: absolute;
							right: 0;
							top: 0;
						}
					}
				}
			}
		}
		// 添加按钮
		.add-btns{
			padding: $padding;
			button[size='default']{
				height: 90rpx;
				line-height: 90rpx;
				padding: 0;
				margin: 0;
				background: $text-price;
				font-size: $title-size;
				font-weight: bold;
				color: white;
				border-radius: 0;
			}
		}
	}
</style>
