<template>
	<Drawer :closable="false" width="1000" class-name="order_box" v-model="modals" :styles="{ padding: 0 }">
		<div class="acea-row user-row">
			<div class="avatar mr15">
				<img :src="psInfo.avatar">
			</div>
			<div class="user-row-text">
				<div>
					<span class="nickname">账号：{{ psInfo.account || '-' }} ( {{psInfo.staff_name || '-'}} ) </span>
				</div>
				<span class="nickname">手机号码：{{ psInfo.phone || '-' }}</span>
			</div>
			<div class="user-row-action">
				<Button type="primary" v-auth="['admin-erp-user_add']" @click="deit">编辑</Button>
			</div>
		</div>
		<Card :bordered="false" dis-hover class="ivu-mt">
			<Form class="formValidate mt20" ref="formValidate" :model="formValidate" @submit.native.prevent>
				<Row :gutter="24" type="flex">
					<Col span="24">
					<div class="tit">绑定用户：</div>
					<div class="info-list">
						<div>ID：<span>{{psInfo.user.uid}}</span></div>
						<div>昵称：<span>{{psInfo.user.nickname}}</span></div>
						<div>用户类型：<span>{{psInfo.user.user_type}}</span></div>
					</div>
					</Col>
					<Col span="24" v-if="psInfo.staff&&psInfo.staff.id">
					<div class="tit">绑定客服：</div>
					<div class="info-list">
						<div>ID：<span>{{psInfo.staff.id}}</span></div>
						<div>名称：<span>{{psInfo.staff.nickname}}</span></div>
						<div>手机号码：<span>{{psInfo.staff.phone}}</span></div>
					</div>
					
					</Col>
					<Col span="24" v-if="psInfo.admin && psInfo.admin.id">
					<div class="tit">绑定后台：</div>
					<div class="info-list">
						<div>ID：<span>{{psInfo.admin.id}}</span></div>
						<div>账号：{{psInfo.admin.account}}</div>
						<div>名称：<span>{{psInfo.admin.real_name}}</span></div>
						<div>手机号码：<span>{{psInfo.admin.phone}}</span></div>
					</div>
					</Col>
					<Col span="24" v-if="psInfo.ware&&psInfo.ware.id">
					<div class="tit">所属仓库：</div>
					<div class="info-list">
						<div>ID：<span>{{psInfo.ware.id}}</span></div>
						<div>名称：<span>{{psInfo.ware.title}}</span></div>
						<div>手机号码：<span>{{psInfo.ware.phone}}</span></div>
						<div>地址：{{psInfo.ware.detailed_address}}</div>
					</div>
					</Col>
				</Row>
			</Form>
		</Card>
	</Drawer>

</template>

<script>
	import {
		getGodownList,
		createUser,
		getUserInfo
	} from "@/api/erp";
	import Setting from "@/setting";

	export default {
		name: 'erpUserDetails',
		data() {
			return {
				roterPre: Setting.roterPre,
				psInfo: {},
				modals: false,
				formValidate: {
					avatar: "",
					uid: 0,
					nickname: "",
					id: 0,
					account: "",
					wid: 0,
					staff_name: "",
					store_id: 0,
					is_manager: 0,
					pwd: "",
					phone: "",
					kefu: "",
					staff_id: 0,
					admin_name: "",
					is_system: 0,
					admin_id: 0
				},
			}
		},
		watch: {

		},
		created() {},
		methods: {
			deit() {
				this.$router.push({
					path: this.roterPre + "/erp/user_add?id=" + this.formValidate.id
				});
			},
			getUserInfo(id) {
				getUserInfo(id).then(res => {
					let data = res.data
					this.psInfo = data
						
						this.modals = true;
					

				})
			}
		}
	}
</script>

<style lang="less" scoped>
	/deep/.ivu-modal-body {
		padding: 0;
	}

	.user-info {
		// padding: 15px;
	}

	.user-row {
		padding: 30px 35px 0;

		&-text {
			flex: 1;
			align-self: center;
		}

		&-action {

			.ivu-btn {
				margin-left: 12px;
				font-size: 13px !important;
				color: rgba(0, 0, 0, 0.85);

				&:first-child {
					margin-left: 0;
				}

				&.ivu-btn-primary {
					border-color: #1890FF;
					background-color: #1890FF;
					color: #FFFFFF;
				}

				&.ivu-btn-success {
					border-color: #00C050;
					background-color: #00C050;
					color: #FFFFFF;
				}
			}
		}

		.nickname {
			font-weight: 500;
			font-size: 16px;
			line-height: 16px;
			color: rgba(0, 0, 0, 0.85);
		}

		.iconfont {
			margin-left: 7px;
			font-size: 18px;

			&:nth-child(2) {
				margin-left: 9px;
			}

			&.iconxiaochengxu {
				color: #007DFF;
			}

			&.icongongzhonghao {
				color: #00BF00;
			}

			&.iconPC {
				color: #F69B00;
			}

			&.iconh5 {
				color: #9F5CE3;
			}

			&.iconapp {
				color: #E36734;
			}
		}

		.level {
			margin-top: 5px;

			img {
				width: 42px;
				height: 20px;
				vertical-align: middle;

				+span {
					margin-left: 7px;
				}
			}

			.vip {
				display: inline-block;
				width: 56px;
				height: 26px;
				padding-left: 30px;
				// background: url("../../../../assets/images/vip-bg.png") left top/100% 100% no-repeat;
				font-weight: bold;
				font-size: 9px;
				line-height: 26px;
				color: #5F7DB5;
				transform-origin: left;
				transform: scale(0.75, 0.75);
				vertical-align: middle;
			}
		}
	}

	.info-row {
		flex-wrap: nowrap;
		padding: 20px 35px 24px;

		&-item {
			flex: none;
			width: 155px;
			font-size: 14px;
			line-height: 14px;
			color: rgba(0, 0, 0, 0.85);

			&-title {
				margin-bottom: 12px;
				font-size: 13px;
				line-height: 13px;
				color: #666666;
			}
		}
	}

	.ivu-tabs {
		color: rgba(0, 0, 0, 0.85);

		/deep/ .ivu-tabs-bar {
			border-bottom: 0;
			margin-bottom: 0;
			background-color: #F5F7FA;

			.ivu-tabs-nav-container {
				font-size: 13px;
			}

			.ivu-tabs-ink-bar {
				display: none;
			}

			.ivu-tabs-tab {
				padding: 7px 19px !important;
				margin-right: 0;
				line-height: 26px;
			}

			.ivu-tabs-tab-active {
				background-color: #FFFFFF;
				color: rgba(0, 0, 0, 0.85);

				&:before {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 2px;
					background-color: #1890FF;
				}
			}
		}

		/deep/ .ivu-tabs-content {
			.ivu-tabs-tabpane {
				padding: 15px 15px !important;

				&:first-child {
					padding: 0 25px !important;
				}
			}
		}

		.product {
			display: flex;

			.image {
				width: 50px;
				height: 50px;
			}

			img {
				width: 100%;
				height: 100%;
				border-radius: 4px;
			}

			.title {
				flex: 1;
				padding-left: 13px;
				text-align: left;
			}
		}
	}

	.avatar {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		overflow: hidden;

		img {
			width: 100%;
			height: 100%;
		}
	}

	.dashboard-workplace {
		&-header {
			&-avatar {
				width: 64px;
				height: 64px;
				border-radius: 50%;
				margin-right: 16px;
				font-weight: 600;
			}

			&-tip {
				width: 82%;
				display: inline-block;
				vertical-align: middle;

				&-title {
					font-size: 13px;
					color: #000000;
					margin-bottom: 12px;
				}

				&-desc {
					&-sp {
						width: 33.33%;
						color: #17233D;
						font-size: 13px;
						display: inline-block;
					}
				}
			}

			&-extra {
				.ivu-col {
					p {
						text-align: right;
					}

					p:first-child {
						span:first-child {
							margin-right: 4px;
						}

						span:last-child {
							color: #808695;
						}
					}

					p:last-child {
						font-size: 22px;
					}
				}
			}
		}
	}
</style>
<style scoped lang="stylus">
	.user_menu>>>.ivu-menu {
		width 100% !important;
	}

	/deep/ .ivu-form-item {
		margin: 20px 0 0 0 !important;
	}
	.info-list {
		display: flex;
		flex-wrap: wrap;
		padding:0 0 0 20px;
		div {
			width: 50%
		}
	}
	.tit {
		font-weight: bold;
		padding: 20px 0 10px 0;
	}
</style>