<template>
	<view class="container">
		<view class="top">{{topTitle}}</view>
		<view class="sub">{{subTitle}}</view>
		<view>
			<view class="item" v-for="(item, index) in accountList" :style="{'margin-top':index===0?'128rpx':'', 'opacity':item.staffState!==200?'0.6':''}" :key="index" @click="goAccount(item)">
				<image class="left" :src="item.avatar" mode=""></image>
				<view class="middle">
					<view class="middle-item">{{item.staffName}}</view>
					<view class="middle-next-item">{{item.accountName}}</view>
				</view>
				<image class="right" src="../../static/arrow-right.png" mode=""></image>
			</view>
		</view>
		<view class="bottom">
			<image v-if="!selectTips" class="select-img" src="../../static/select-n.png" mode="" @click="selectTips=!selectTips"></image>
			<image v-else class="select-img" src="../../static/select-h.png" mode="" @click="selectTips=false"></image>
			<view class="tips">
				查看并同意<text>《隐私政策》</text>和<text>《服务协议》</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topTitle: '选择账号',
				subTitle: '系统检测到该手机号已在多家公司注册',
				accountList: [],
				selectTips: false
			};
		},
		created() {
			this.getAllAccount()
		},
		methods: {
			goAccount(item) {
				if (!this.selectTips) {
					this.toast('请先查看并同意《隐私政策》和《服务协议》')
					return
				}
				this.$net.post('/account/change', {'accountCode': item.accountCode}).then(res => {
					if (res.code === 200) {
						this.$router.pop()
					} else {
						this.toast(res.message)
					}
				})
			},
			getAllAccount() {
				this.$net.get('/staff/query').then(res => {
					if (res.code === 200) {
						this.accountList = this.accountList.concat(res.data.QueryAccountOutput)
					} else {
						this.toast(res.message)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	height: 100%;
	padding: 64rpx;
	.top {
		font-size: 40rpx;
		color: #333333;
	}
	.sub {
		font-size: 24rpx;
		color: #666666;
		margin-top: 16rpx;
	}
	.first-item{
		margin-top: 128rpx;
	}
	.item {
		margin-top: 40rpx;
		border-radius: 16rpx;
		border: 2rpx solid #F0F0F0;
		display: flex;
		padding: 24rpx;
		align-items: center;
		.left {
			display: block;
			height: 96rpx;
			width: 96rpx;
			background-color: #18BC37;
			border-radius: 96rpx;
		}
		.middle {
			height: 86rpx;
			margin-left: 24rpx;
			font-size: 26rpx;
			color: #333333;
			.middle-item {
				height: 36rpx;
				line-height: 38rpx;
				width: 402rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			.middle-next-item {
				margin-top: 14rpx;
			}
		}
		.right {
			display: block;
			margin-left: 40rpx;
			height: 20rpx;
			width: 12rpx;
		}
	}
	.bottom {
		position: fixed;
		bottom: 118rpx;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		.select-img {
			height: 28rpx;
			width: 28rpx;
		}
		.tips {
			margin-left: 16rpx;
			font-size: 22rpx;
			color: #999999;
			text {
				color: #338AFF;
			}
		}
	}
}
</style>
