<template>
	<view>
		<!-- 个人中心 -->
		<!-- <loadlogo v-if="!loadlogo" /> -->
		<view class="container">
			<far-bottom></far-bottom>
			<view class="merchantuserEdit p-r p-left-right-30 m-top20">
				<view class="userEdit-box bor-radius-10upx b-f">
					<view class="dis-flex flex-x-center">
						<image class="tximg" :src="adminInfo.admin.avatar" />
					</view>
					<view class="f-24 color-99 m-btm10">店员信息</view>
					<view class="dis-flex userEdit-form-item flex-y-center">
						<view class="label">姓名</view>
						<input placeholder="请填写店员姓名" class="f-24" type="text" v-model="adminInfo.admin.name"/>
					</view>
					<view class="dis-flex userEdit-form-item flex-y-center">
						<view class="label">电话</view>
						<input placeholder="请填写店员电话" class="f-24" type="text" v-model="adminInfo.admin.mobile"/>
					</view>
				</view>
				<view class="userEdit-box bor-radius-10upx b-f m-top20">
					<view class="dis-flex flex-x-between flex-y-center" @click="popShow=true">
						<view class="dis-flex userEdit-form-item flex-y-center">
							<view class="label">身份</view>
							<view class="label">{{ismainList[adminInfo.admin.ismain-1]}}</view>
						</view>
						<view class="i icon iconfont icon-jinrujiantouxiao1"></view>
					</view>
				</view>
				<view class="userEdit-box bor-radius-10upx b-f m-top20">
					<view class="f-24 color-99 m-btm10 p-top-40">状态设置</view>
					<!-- <view class="dis-flex userEdit-form-item flex-y-center flex-x-between">
						<view class="label">订单核销</view>
						<view :class="['switch', adminInfo.admin.orderwrite == 1?'':'close']">
							<view class="switchOn" v-if="adminInfo.admin.orderwrite == 1" @click="adminInfo.admin.orderwrite=0">
								<span></span>
								<view></view>
							</view>
							<view class="switchClose" v-if="adminInfo.admin.orderwrite == 0" @click="adminInfo.admin.orderwrite=1">
								<view></view>
								<span></span>
							</view>
						</view>
					</view>
					<view class="dis-flex userEdit-form-item flex-y-center flex-x-between">
						<view class="label">查看交易数据</view>
						<view :class="['switch', adminInfo.admin.viewdata == 1?'':'close']">
							<view class="switchOn" v-if="adminInfo.admin.viewdata == 1" @click="adminInfo.admin.viewdata=0">
								<span></span>
								<view></view>
							</view>
							<view class="switchClose" v-if="adminInfo.admin.viewdata == 0" @click="adminInfo.admin.viewdata=1">
								<view></view>
								<span></span>
							</view>
						</view>
					</view> -->
					<view class="dis-flex userEdit-form-item flex-y-center flex-x-between">
						<view class="label">状态</view>
						<view :class="['switch', adminInfo.admin.enabled == 1?'':'close']">
							<view class="switchOn" v-if="adminInfo.admin.enabled == 1" @click="adminInfo.admin.enabled=0">
								<span></span>
								<view></view>
							</view>
							<view class="switchClose" v-if="adminInfo.admin.enabled == 0" @click="adminInfo.admin.enabled=1">
								<view></view>
								<span></span>
							</view>
						</view>
					</view>
				</view>
				<view class="save-btn" @click="createAdmin">保存</view>
			</view>
		</view>
		
		<!-- 选择身份弹框 -->
		<PopManager :show="popShow" :type='popType' @clickmask="closePop">
			<view class="popShowView">
				<view class="popShowViewPackage">
					<view class="popTitle">
						<span>店员身份</span>
					</view>
					<view class="popBody" v-for="(item,index) in adminstatusList" @click="checkStatus(item.status)">
						<span>{{item.name}}</span>
						<view :class="adminInfo.admin.ismain==item.status?'reasonYCheck':'reasonNCheck'">
							<image :src="imgfixUrls + 'merchant/payCheck.svg'" v-if="adminInfo.admin.ismain==item.status"/>
						</view>
					</view>
				</view>
			</view>
		</PopManager>
		<!-- 选择身份弹框 -->
		<!-- <TabBars :tabBarAct="0" /> -->
	</view>
</template>
<script>
	import App from '@/common/js/app.js'
	import Loadlogo from '@/components/template/loadlogo'
	import TabBars from '@/components/template/tabBar.vue'
	import PopManager from '@/components/template/PopManager';
	export default {
		data() {
			return {
				popShow:false,
				popType:'bottom',
				detalsData: null,
				loadlogo: false,
				integralType: 0,
				adminid:null,
				newadminid:null,
				storeid:null,
				adminInfo:{},
				ismainList:['店长','核销员','管理员','业务员'],
				adminstatusList:[
					{
						name:'核销员',
						status:2
					},
					{
						name:'管理员',
						status:3
					}
				]
			}
		},
		components: {
			Loadlogo,
			TabBars,
			PopManager
		},
		computed: {},
		onShow(e) {
			
		},
		mounted() {
			
		},
		onLoad(e){
			let _this=this
			if(!!e.adminid){
				_this.adminid=e.adminid
			}
			if(!!e.newadminid){
				_this.newadminid=e.newadminid	
			}
			uni.getStorage({
				key: 'checkStoreid',
				success: function(res) {
					_this.storeid = res.data;
					_this.init(res.data,e.adminid,e.newadminid)
				}
			});
			
		},
		methods: {
			checkStatus(status){
				let _this=this
				_this.adminInfo.admin.ismain=status
			},
			init(id,adminid,newadminid){
				let _this=this
				_this.getAdminInfo(id,adminid,newadminid)
			},
			closePop(){
				let _this=this
				_this.popShow=false
			},
			// 保存店员信息
			createAdmin(){
				let _this=this
				_this.adminInfo.admin.adminid=_this.adminid
				_this.adminInfo.admin.mid=_this.newadminid
				_this.adminInfo.admin.storeid=_this.storeid
				let data=_this.adminInfo.admin
				App._post_form('&p=store&do=createAdmin',data,res=>{
					App.navigationTo({
						url: 'pages/subPages/merchant/merchantClerkList/merchantClerkList'
					})
				})
			},
			// 获取店员信息
			getAdminInfo(id,adminid,newadminid){
				let _this=this
				let data={
					storeid:_this.storeid||id,
					adminid:_this.adminid||adminid,
					newadminid:_this.newadminid||newadminid,
				}
				App._post_form('&p=store&do=adminInfo',data,res=>{
					_this.adminInfo=res.data
				})
			},
			// 跳转商家
			goSuccess() {
				App.navigationTo({
					url: 'pages/subPages/merchant/merchantSuccess/merchantSuccess'
				})
			},
			changIntegral(type) {
				let _this = this;
				_this.integralType = type;
			}
		}
	}
</script>

<style lang="less" scoped>
	.reasonNCheck{
		margin-top: 20upx;
		width:32upx;
		height:32upx;
		border:1upx solid rgba(204,204,204,1);
		border-radius:16upx;
	}	
	.reasonYCheck{
		margin-top: 20upx;
		width:32upx;
		height:32upx;
		border-radius:16upx;
		background:#FF4444;
		>image{
			vertical-align: top;
			width:32upx;
			height:32upx;
		}
	}	
	.popBody{
		display: flex;
		justify-content: space-between;
		height: 70upx;
		>span{
			line-height: 70upx;
			font-size:24upx;
			color:rgba(51,51,51,1);
		}
	}
	.popTitle{
		height: 80upx;
		text-align:center;
		>span{
			line-height: 80upx;
			font-size:30upx;
			color:rgba(51,51,51,1);
		}
	}
	.popShowViewPackage{
		padding: 30upx;
	}
	.popShowView{
		width:750upx;
		background:rgba(255,255,255,1);
		border-radius:20upx 20upx 0px 0px;
	}
	page {
		background-color: #F6F6F6;
		
	}

	.container {

		.color-33 {
			color: #333333;
		}

		.color-99 {
			color: #999999;
		}

		.color-f4 {
			color: #FF4444;
		}

		.color-cc {
			color: #CCCCCC;
		}

		.font-blod {
			font-weight: bold;
		}

		// 详情内容
		.merchantuserEdit {
			padding-bottom: 120upx;
			.switch {
				width: 80upx;
				height: 40upx;
				background:rgba(51,136,255,1);
				border-radius: 20upx;
				> view {
					padding: 6upx;
					display: flex;
					justify-content: space-between;
					> view {
						width: 28upx;
						height: 28upx;
						background:rgba(245,250,255,1);
						border-radius: 50%;
					}
				}
			}
			.switch.close{
				background:#EEEEEE;
				> view {
					> view {
						background:rgba(255,255,255,1);
					}
				}
			}
			.save-btn{
				width:690upx;
				height:80upx;
				line-height: 80upx;
				text-align: center;
				margin-top: 30upx;
				background:rgba(51,136,255,1);
				border-radius:10upx;
				font-size:28upx;
				color: #FFFFFF;
			}
			// 外盒子
			.userEdit-box {
				padding:0 30upx;
				.tximg{
					margin: 40upx 0;
					width:159upx;
					height:159upx;
					border-radius:20upx;
				}
				.icon.icon-jinrujiantouxiao1{
					color: #999999;
					font-size: 24upx;
				}
			}
			.userEdit-form-item{
				padding: 40upx 0;
				font-size: 28upx;
				border-bottom:1upx solid rgba(238,238,238,1);
				.label{
					margin-right: 40upx;
				}
			}
			.userEdit-form-item:last-child{
				border-bottom:none;
			}
		}
	}
</style>
