<template>
	<view class="content">
		<!-- 基础信息 -->
		<view class="info-card">
			<view class="cover">
				<view class="cover-add vertical">
					<image src="@/static/icons/add-icon.png" mode="widthFix"></image>
					<view>员工寸照</view>
				</view>
				<!-- <image src="@/static/dev/good_cover_00.jpg" mode="aspectFill"></image> -->
			</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" @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="title">权限设置</view>
		<view class="jurisdiction">
			<view class="item">
				<label>
					<view class="item-title">运营者权限</view>
					<view class="item-info">管理、推广、设置等模块权限，可使用体验版小程序</view>
					<checkbox class="item-checkbox" color="#c82626" />
				</label>
			</view>
			<view class="item">
				<label>
					<view class="item-title">开发者权限</view>
					<view class="item-info">开发模块权限，可使用体验版小程序、开发者工具（IDE）</view>
					<checkbox class="item-checkbox" color="#c82626" />
				</label>
			</view>
			<view class="item">
				<label>
					<view class="item-title">数据分析者（基础分析）</view>
					<view class="item-info">统计模块权限，可使用体验版小程序</view>
					<checkbox class="item-checkbox" color="#c82626" />
				</label>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="add-btns">
			<button size="default">确认添加</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				section		: [
					{name: '技术部', id: 0},
					{name: '市场部', id: 1},
					{name: '南岗店', id: 2}
				],
				sectionIndex: 0,
				name		: '',
				phone		: '',
				job			: ''
			};
		},
		methods:{
			// 选择部门
			pickerChange(e){
				this.sectionIndex = e.detail.value
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		min-height: 100vh;
		@extend .ios-bottom;
		.title{
			padding: ($padding/2) $padding;
			color: $text-gray;
		}
		.jurisdiction{
			background: white;
			.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;
					width: 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: 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>
