<template>
	<div class="companyName">
		<div @click="dialogVisible = true">
			<svg-icon class-name="company-icon" icon-class="selectCompany" />
		</div>

		<div class="dialog" :style="{display: dialogVisible ? 'block' : 'none'}">
			<div class="company-account">
				<div class="close" @click="dialogVisible = false"><i class="el-icon-close"></i></div>
				<h3>切换公司账户</h3>
				<div class="choose-tableBlock">
					<template v-for="item in companyList">
						<div class="ac-tableLine-content ac-tableLine" :key="item.companyId" @click="setCompanyHandle(item.companyId)" v-if="item.companyId != companyId">
							<div class="actname">{{item.companyInfo.companyName}}</div>
							<div class="right">
								<span>{{item.powerLevel === 999 ? '超级管理员' : item.powerLevel === 100 ? '公司超管' : item.powerLevel === 99 ? '管理员' : '普通用户'}}</span>
								<i class="el-icon-right"></i>
							</div>
						</div>
						<div class="ac-tableLine-content ac-none" :key="item.companyId" v-else>
							<div class="actname">{{item.companyInfo.companyName}}</div>
							<div class="right">
								<span>{{item.powerLevel === 999 ? '超级管理员' : item.powerLevel === 100 ? '公司超管' : item.powerLevel === 99 ? '管理员' : '普通用户'}}</span>
								<i class="el-icon-right"></i>
							</div>
						</div>
					</template>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { getCompanyId } from '@/utils/auth'
import { mapState } from 'vuex'
export default {
  data() {
    return {
			companyId: getCompanyId(),
			dialogVisible: false
		};
  },
	computed: {
    ...mapState({
      companyList: state => state.user.companyList
    })
  },
	methods: {
		setCompanyHandle(companyId) {
			const loading = this.$loading({
				lock: true,
				text: 'Loading',
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			})
			this.$store.dispatch("SelectCom", companyId).then(() => {
				this.dialogVisible = false
				if (this.$route.path === '/index') {
					this.$router.go(0);
				} else {
					this.$router.push({ name:'首页', params: { refresh: true } })
				}
				loading.close();
			}).catch(() => {
				loading.close();
			})
		},
		handleClose(done) {
			this.$confirm('确认关闭？').then(_ => {
				done();
			}).catch(_ => {});
		}
	}
};
</script>

<style lang="scss" scoped>
	.company-icon {
		cursor: pointer;
    	font-size: 26px;
    	vertical-align: middle;
		vertical-align: -7px !important;
	}
	.companyName {
		
		.dialog {
			line-height: normal;
			position: fixed;
			width: 100%;
			height: 100vh;
			background: rgba(0, 0, 0, .5);
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 2000;
			display: none;
		}
		.account-title {
			color: #FFFFFF;
			margin-bottom: 40px;
		}
		.company-account {
			border-radius: 8px;
			background: rgba(255, 255, 255, .9);
			margin-bottom: 80px;
			box-shadow: 0 4px 20px 0 rgba(0, 60, 179, 0.12);
			margin-bottom: 10px;
			width: 500px;
			padding: 48px 36px;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			&>.close {
				position: absolute;
				right: 20px;
				top: 20px;
				padding: 10px;
			}
			&>h3{
				margin: 0;
				font-size: 20px;
			}
			&>.choose-tableBlock {
				margin-top: 20px;
				border-top: 1px solid rgba(181, 181, 181, .4);
				font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei","Source Han Sans CN",sans-serif;
				max-height: 250px;
				overflow-y: auto;
				padding: 0 10px;

				.ac-tableLine-content {
					padding: 16px 14px;
					display: flex;
					align-items: center;
					font-size: 14px;
					cursor: pointer;
					color: #68779c;
					justify-content: space-between;
					border: 2px solid transparent;
					position: relative;
					border-radius: 4px;
					.actname {
						width: 250px;
						color: #0b1531;
						font-size: 16px;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
					.right {
						display: flex;
						justify-content: flex-end;
						align-items: center;
						font-size: 13px;
						&>span{
							margin-right: 10px;
						}
					}
					i{
						color: #1890ff;
						font-size: 20px;
					}
					&::after {
						content: '';
						position: absolute;
						bottom: 0;
						left: 0;
						background-color: rgba(181, 181, 181, .4);
						height: 1px;
						width: 100%;
					}
				}
				.ac-tableLine {
					&:hover {
						border: 2px solid #296aef;
						z-index: 5;
						transition: all .2s;
						box-shadow: 0 0 12px rgba(0, 60, 179 , 0.12);
						i {
							color: #296aef;
						}
					}
				}
				.ac-none {
					.actname {
						color: #99a0ad;
					}
					.right {
						color: #99a0ad;
					}
					i {
						color: #aeb6c5;
					}
				}
			}
		}
	}
</style>