<template>
	<view>
		<!-- <loadlogo v-if="!loadlogo" /> -->
		<view class="container">
			<far-bottom></far-bottom>
			<view class="clerklist-content p-r p-left-right-30">
				<!-- <view class="record-dialog dis-flex flex-x-center flex-y-center" v-if="addDialog">
					<view class="record-dialog-main">
						<view class="m-top40 f-28 color-33 m-btm50 t-c">用微信扫一扫，成为店员</view>
						<view class="dis-flex flex-x-center"><img class="qrcode" s:rc="@imgfixUrls + '4e81ea09056979072a00019a.jpg" alt=""></view>
						<view class="record-dialog-btns dis-flex flex-x-center"><view @click="addDialog=false" class="btn i icon iconfont icon-close_light"></view></view>
					</view>
				</view> -->
				<view class="m-btm20" v-for="(item, index) in adminList">
					<view class="menu-style dis-flex flex-x-between flex-y-center">
						<view class="dis-flex flex-y-center">
							<image class="menu-style-bg" :src="item.avatar" />
							<view class="dis-flex flex-dir-column">
								<view class="f-30 color-33 dis-flex flex-y-center" style="padding-bottom: 12upx;">
									<view>{{ item.name }}</view>
									<image class="iconbox" :src="imgfixUrls + 'centerMerchant/clerksuccess.png'" v-if="item.enabled == 1" />
									<image class="iconbox" :src="imgfixUrls + 'centerMerchant/clerkjian.png'" v-if="item.enabled == 0" />
								</view>
								<view class="f-24 color-99">角色：{{ ismainList[item.ismain - 1] }}</view>
							</view>
						</view>
						<view class="clerklist-btns dis-flex">
							<view class="edit" @click="goEdit(item.id)" v-if="item.ismain!='1' && item.ismain!='4'">编辑店员</view>
							<view :class="item.enabled == 0 ? 'switchOn' : 'switch'" @click="changeAdminEnabled(item.id)" v-if="item.ismain!='1' && item.ismain!='4'">{{ enabledList[Number(item.enabled)] }}</view>
						</view>
					</view>
				</view>
				<view class="addbtn" @click="getAdminInfo" :class="openButton==1?'':'cantButton'">添加店员</view>
			</view>
		</view>
	<!-- 	<TabBars :tabBarAct="0" /> -->
		<!-- 添加店员弹框 -->
		<PopManager :show="popShow" :type="popType">
			<view class="popView">
				<view class="popImg">
					<span>用微信扫一扫，成为店员</span>
					<view class="imgView"><image :src="src" /></view>
				</view>
			</view>
			<view class="closeImg" @click="closePopShow"><image :src="imgfixUrls + 'merchant/close.png'" /></view>
		</PopManager>
	</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 {
			openButton:1,
			qrcode: null,
			src: null,
			popShow: false,
			popType: 'center',
			loadlogo: false,
			addDialog: true,
			ismainList: ['店长', '核销员', '管理员', '业务员'],
			adminList: {},
			enabledList: ['开启', '停用']
		};
	},
	components: {
		Loadlogo,
		TabBars,
		PopManager
	},
	computed: {},
	onShow() {},
	mounted() {},
	onLoad(e) {
		let _this = this;
		uni.getStorage({
			key: 'checkStoreid',
			success: function(res) {
				_this.storeid = res.data;
				_this.init(res.data);
			}
		});
		
	},
	methods: {
		closePopShow(){
			let _this=this
			_this.popShow = false
			_this.openButton=1
			clearInterval(_this.t1);
		},
		init(id) {
			let _this = this;
			_this.getAdminList(id);
		},
		// 验证店员是否扫码
		adminAjax() {},
		// 获取添加店员二维码
		getAdminInfo() {
			let _this = this;
			_this.openButton=0
			let data = {
				storeid: _this.storeid
			};
			App._post_form('&p=store&do=adminInfo', data, res => {
				_this.popShow = true;
				_this.src = res.data.src;
				_this.qrcode = res.data.qrcode;
				if(_this.qrcode){
					_this.t1=setInterval(adminAjax, 3000);
				}
				function adminAjax() {
					let data = {
						qrcode: _this.qrcode
					};
					App._post_form(
						'&p=store&do=adminAjax',
						data,
						res => {
							_this.userInfo = res.data;
							if (!!res.data.id) {
								clearInterval(_this.t1);
								_this.popShow=false
								App.navigationTo({
									url: 'pages/subPages/merchant/merchantClerkEdit/merchantClerkEdit?newadminid=' + res.data.id
								});
							} else {
							}
						},
						fail => {
							console.info('过期结束')
							clearInterval(_this.t1);
						}
					);
				}
			},fail=>{
			});
		},
		getAdminList(id) {
			let _this = this;
			let data = {
				storeid: _this.storeid||id
			};
			App._post_form('&p=store&do=adminList', data, res => {
				_this.adminList = res.data;
			});
		},
		// 跳转
		goEdit(adminid) {
			App.navigationTo({
				url: 'pages/subPages/merchant/merchantClerkEdit/merchantClerkEdit?adminid=' + adminid
			});
		},
		// 修改店员状态
		changeAdminEnabled(userid) {
			let _this = this;
			let data = {
				userid: userid
			};
			App._post_form('&p=store&do=changeAdminEnabled', data, res => {
				uni.showToast({
					icon: 'none',
					title: '修改店员状态成功',
					duration: 2000
				});
				for (let i = 0; i < _this.adminList.length; i++) {
					if (userid == _this.adminList[i].id) {
						if (_this.adminList[i].enabled == 0) {
							_this.adminList[i].enabled = 1;
						} else {
							_this.adminList[i].enabled = 0;
						}
					}
				}
			});
		},
		navgateTo(e, navType) {
			let _this = this;
			switch (navType) {
				case 'contactway':
					App.navigationTo({
						url: 'pages/subPages/dealer/contactway/contactway'
					});
					break;
				case 'withdraw':
					App.navigationTo({
						url: 'pages/subPages/dealer/withdraw/withdraw'
					});
					break;
				case 'setshop':
					App.navigationTo({
						url: 'pages/subPages/dealer/setshop/setshop'
					});
					break;
				case 'order':
					App.navigationTo({
						url: 'pages/subPages/merchant/merchantUserCenter/merchantUserCenter'
					});
					break;
				case 'rank':
					App.navigationTo({
						url: 'pages/subPages/dealer/rank/rank'
					});
					break;
				case 'level':
					App.navigationTo({
						url: 'pages/subPages/dealer/level/level'
					});
					break;
				case 'client':
					App.navigationTo({
						url: 'pages/subPages/dealer/client/client'
					});
					break;
				case 'help':
					App.navigationTo({
						url: 'pages/subPages/dealer/richtext/setrich'
					});
					break;
				case 'gener':
					App.navigationTo({
						url: 'pages/subPages/dealer/gener/gener'
					});
					break;
				case 'poster':
					// #ifdef H5
					location.href = e.currentTarget.dataset.url;
					// #endif
					break;
				case 'shops':
					// #ifdef H5
					location.href = e.currentTarget.dataset.url;
					// #endif
					break;
			}
		}
	}
};
</script>

<style lang="scss">
.cantButton{
	pointer-events: none;
}	
.closeImg {
	margin: 40upx auto 0 auto;
	width: 42upx;
	height: 42upx;
	> image {
		width: 42upx;
		height: 42upx;
	}
}
.popView {
	width: 512upx;
	height: 537upx;
	background: rgba(255, 255, 255, 1);
	border-radius: 10upx;
}
.popImg {
	text-align: center;
	padding: 30upx;
	> span {
		font-size: 28upx;
		
		
		color: rgba(51, 51, 51, 1);
	}
}
.imgView {
	margin: 20upx auto 0 auto;
	width: 359upx;
	height: 359upx;
	> image {
		width: 359upx;
		height: 359upx;
	}
}
page {
	background-color: #f7f7f7;
}

.container {
	
	.color-33 {
		color: #333333;
	}

	.color-99 {
		color: #999999;
	}
	.record-dialog {
		z-index: 10;
		position: fixed;
		background: rgba(0, 0, 0, 0.7);
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;

		.record-dialog-main {
			border-radius: 10upx;
			padding: 0 76upx 56upx 76upx;
			z-index: 11;
			background: #ffffff;
			position: relative;
			.qrcode {
				width: 359upx;
				height: 359upx;
			}
		}
		.record-dialog-btns {
			position: absolute;
			bottom: -64upx;
			left: 0;
			right: 0;
			.btn {
				width: 42upx;
				height: 42upx;
				text-align: center;
				line-height: 42upx;
				border: 2upx solid rgba(255, 255, 255, 1);
				border-radius: 50%;
				color: #ffffff;
			}
		}
		.record-picker-view {
			margin: 40upx 30upx;
			box-sizing: border-box;
			width: 540upx;
			height: 240upx;
		}
	}
	//圆形
	.circle {
		width: 14upx;
		height: 14upx;
		background: rgb(69, 231, 171);
		border-radius: 50%;
		margin-right: 4px;
	}
	.addbtn {
		position: fixed;
		left: 30upx;
		right: 30upx;
		bottom: 130upx;
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		border-radius: 45upx;
		font-size: 28upx;
		color: #ffffff;
		background: rgba(51, 136, 255, 1);
	}
	// 详情内容
	.clerklist-content {
		padding-bottom: 120upx;
		margin-top: 37upx;

		// 工具导航
		.tool-tab {
			padding: 30upx 0;

			.tool-tab-title {
				padding: 0 30upx;
			}

			.tool-item {
				.tool-item-icon {
					margin: 0 auto 20upx;
					display: block;
					width: 80upx;
					height: 80upx;
				}
			}
		}

		// 菜单样式
		.menu-style {
			background-color: #ffffff;
			position: relative;
			padding: 30upx;
			border-radius: 10upx;

			.iconbox {
				width: 24upx;
				height: 24upx;
				margin-left: 16upx;
				border-radius: 50%;
			}
			.clerklist-btns {
				font-size: 24upx;
				text-align: center;
				.edit {
					width: 124upx;
					height: 44upx;
					line-height: 44upx;
					background: rgba(245, 250, 255, 1);
					border-radius: 6px;
					color: rgba(51, 136, 255, 1);
					margin-right: 20upx;
				}
				.switch {
					width: 76upx;
					height: 44upx;
					line-height: 44upx;
					border: 1upx solid rgba(246, 45, 38, 1);
					border-radius: 6upx;
					color: rgba(255, 68, 68, 1);
				}
				.switchOn {
					line-height: 44upx;
					width: 76upx;
					height: 44upx;
					background: rgba(51, 136, 255, 1);
					border-radius: 6upx;
					color: rgba(255, 255, 255, 1);
					font-size: 24upx;
					
					
					border: 1upx solid rgba(0, 0, 0, 0);
				}
				.switch.on {
					width: 76upx;
					height: 44upx;
					line-height: 44upx;
					color: rgba(255, 255, 255, 1);
					background: rgba(51, 136, 255, 1);
					border: none;
				}
			}
			.menu-style-bg {
				width: 80upx;
				height: 80upx;
				margin-right: 20upx;
				border-radius: 80upx;
			}
		}
	}
}
</style>
