<template>
	<Drawer :closable="false" width="1000" class-name="order_box" v-model="modals" :styles="{ padding: 0 }">
		<div class="user-info">
			<div class="section">
				<div class="section-hd">仓位：{{info.title}}</div>
			</div>
		</div>
		<Card :bordered="false" dis-hover class="ivu-mt">
			<Tabs v-model="activeName">
				<TabPane v-for="(item, index) in list" :key="index" :label="item.label" :name="item.val">
					<template v-if="item.val === 'info'">
						<Card>
							<div class="user-info" v-for="(goods,gindex) in info.info">
								<div class="section-hd">{{goods.product_name}}</span> </div>
								<div  class="section">
									<div class="section-bd">
										<div class="item">
											<div>批次编号：</div>
											<div class="value">{{ goods.batch_code || '/'}}</div>
										</div>
										<div class="item">
											<div>商品编号：</div>
											<div class="value">{{ goods.bar_code}}</div>
										</div>
										<div class="item">
											<div>生产日期：</div>
											<div class="value">{{ goods.batch_code ? goods.batch_code.slice(0,4) + '年' + goods.batch_code.slice(4,6) + '月' + goods.batch_code.slice(6,8) + '日': '/'}}</div>
										</div>
										<div class="item">
											<div>数量：</div>
											<div class="value">{{ goods.product_num}}</div>
										</div>
										<div class="item">
											<div>单位：</div>
											<div class="value">{{ goods.unit_name}}</div>
										</div>
										<!-- shelf_life -->
										<div class="item">
											<div>保质期：</div>
											<div class="value">{{ goods.shelf_life == -1 ? '/': goods.shelf_life}}</div>
										</div>
										<!-- <div class="item" v-if="goods.is_weigh == 1">
											<div>皮重(kg)：</div>
											<div class="value">{{ goods.tare_weight}}</div>
										</div> -->
										<div class="item" v-if="goods.is_weigh == 1">
											<div>净重(kg)：</div>
											<div class="value">{{ goods.net_weight}}</div>
										</div>
									</div>
								</div>
							</div>
						</Card>
					</template>
					<template v-if="item.val === 'base'">
						<div class="user-info">
							<div class="section" >
								<div class="section-bd">
									<div class="item">
										<div>通道：</div>
										<div class="value">{{ info.bin_number.slice(0,2)}}</div>
									</div>
									<div class="item">
										<div>左右：</div>
										<div class="value">{{ info.bin_number.slice(2,3)}}</div>
									</div>
									<div class="item">
										<div>层数：</div>
										<div class="value">{{ info.bin_number.slice(3,4)}}</div>
									</div>
									<div class="item">
										<div>仓位编号：</div>
										<div class="value">{{ info.bin_number.slice(4)}}</div>
									</div>
								</div>
							</div>
						</div>
					</template>
				</TabPane>
			</Tabs>
		</Card>
	</Drawer>

</template>

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

	export default {
		name: 'positionDetail',
		data() {
			return {
				info: {},
				roterPre: Setting.roterPre,
				psInfo: {},
				modals: false,
				activeName: 'base',
				list: [{
						val: 'base',
						label: '基础信息'
					}, {
						val: 'info',
						label: '商品信息'
					},

				],
				ckColumns: [{
						title: "ID",
						key: "id",
						width: 80,
					},
					{
						title: "title",
						key: "title",
						width: 200,
					},
				],
				columns: [{
						title: "ID",
						key: "id",
						width: 80,
					},
					{
						title: "商品名称",
						key: "product_name",
						width: 200,
					},
					{
						title: "采购数量0",
						key: "product_num",
						width: 150,
					},
					{
						title: "采购数量1",
						key: "pur_num",
						width: 150,
					},
					{
						title: "单位",
						key: "unit_name",
						width: 150,
					},
					{
						title: "净重",
						key: "net_weight",
						width: 80,
					},
					{
						title: "皮重",
						key: "tare_weight",
						width: 80,
					},
					{
						title: "总重",
						key: "pur_weight",
						width: 80,
					},
				]
			}
		},
		watch: {

		},
		created() {},
		methods: {
			deit() {
				this.$router.push({
					path: this.roterPre + "/erp/user_add?id=" + this.formValidate.id
				});
			},
			getInfo(id) {
				getPosition(id).then(res => {
					console.log(res, 'res');
					this.modals = true
					this.info = res.data
				}).catch(err => {
					this.modals = false
				})
			}
		}
	}
</script>

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

	.user-info {
		.section {
			padding: 25px 25px;
			border-bottom: 1px dashed #EEEEEE;

			&-hd {
				padding-left: 10px;
				border-left: 3px solid #1890FF;
				font-weight: 500;
				font-size: 14px;
				line-height: 16px;
				color: #303133;
			}

			&-bd {
				display: flex;
				flex-wrap: wrap;
			}

			.item {
				// flex: 0 0 calc(~"(100% - 60px) / 3");
				width: 25%;
				display: flex;
				margin: 16px 30px 0 0;
				font-size: 13px;
				color: #606266;

				&:nth-child(3n+3) {
					margin: 16px 0 0;
				}
			}

			.value {
				flex: 1;
			}

			.avatar {
				width: 60px;
				height: 60px;
				overflow: hidden;

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

	.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>