<template>
	<!-- <div style="width: 100%"> -->
	<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">仓库详情</div>
				<div class="section-bd" v-for="item in wareInfo.info">
					<div class="item">
						<div>仓库ID：</div>
						<div class="value">{{ item.id}}</div>
					</div>
					<div class="item">
						<div>仓库名称：</div>
						<div class="value">{{ item.title}}</div>
					</div>
					<div class="item">
						<div>省市区：</div>
						<div class="value">{{ item.address }}</div>
					</div>
					<div class="item">
						<div>详细地址：</div>
						<div class="value">{{ item.detailed_address }}</div>
					</div>
					<div class="item">
						<div>手机号码：</div>
						<div class="value">{{ item.phone}}</div>
					</div>
					<div class="item">
						<div>是否显示：</div>
						<div class="value">{{ item.is_show? '是': '否' }}</div>
					</div>
					<div class="item">
						<div>经纬度：</div>
						<div class="value">{{ item.latitude + '，' + item.longitude}}</div>
					</div>
				</div>
			</div>
		</div>
		<Tabs v-model="activeName">
			<TabPane v-for="(item, index) in list" :key="index" :label="item.label + '('+wareInfo.count[item.tit]+')'"
				:name="item.val">
				<div style="height: 20px;"></div>
				<Table :columns="columns" :data="userLists" ref="table" :loading="loading" no-userFrom-text="暂无数据"
					no-filtered-userFrom-text="暂无筛选结果">
					<template slot-scope="{ row, index }" slot="passageway">
						<span> {{ row.bin_number.slice(0,2) }}</span>
					</template>
					<template slot-scope="{ row, index }" slot="control">
						<span> {{ row.bin_number.slice(2,3) }}</span>
					</template>
					<template slot-scope="{ row, index }" slot="layer">
						<span> {{ row.bin_number.slice(3,4) }}</span>
					</template>
					<template slot-scope="{ row, index }" slot="number">
						<span> {{ row.bin_number.slice(4) }}</span>
					</template>
					<template slot-scope="{ row, index }" slot="add_time">
						<span> {{ row.add_time | formatDate }}</span>
					</template>
					<template slot-scope="{ row, index }" slot="num">
						<!-- <span> {{ row.body }}</span> -->
						<div v-for="item in row.body">{{item.product_name}}</div>
					</template>
					<template slot-scope="{ row, index }" slot="supplier">
						<!-- <span v-if="row.auth_time"> {{ row.auth_time | formatDate }}</span> -->
						<div>名称：{{row.supplier.supplier_name}}</div>
						<div>ID:{{row.supplier.id}}</div>
						<div>手机：{{row.supplier.phone}}</div>
					</template>
					<template slot-scope="{ row, index }" slot="cuser">
						<div>名称：{{row.cuser.staff_name}}</div>
						<!-- <div>管理员ID：{{row.cuser.admin_id}}</div> -->
						<div>ID:{{row.cuser.id}}</div>
						<div>手机：{{row.cuser.phone}}</div>
					</template>
					<template slot-scope="{ row, index }" slot="tware">
						<div>名称：{{row.tware.title}}</div>
						<div>ID:{{row.tware.id}}</div>
						<div>手机：{{row.tware.phone}}</div>
					</template>
					<template slot-scope="{ row, index }" slot="store">
						<div>名称：{{row.store.name}}</div>
						<div>ID:{{row.store.id}}</div>
						<div>手机：{{row.store.phone}}</div>
					</template>
					<template slot-scope="{ row, index }" slot="tstore">
						<div>名称：{{row.tstore.name}}</div>
						<div>ID:{{row.tstore.id}}</div>
						<div>手机：{{row.tstore.phone}}</div>
					</template>
					<template slot-scope="{ row, index }" slot="info">
						<div v-for="item in row.info" class="info">
							<div>
								商品名称：{{item.product_name}}
							</div>
						<!-- 	<div>
								商品ID：{{item.product_id}}
							</div> -->
							<div>
								数量：{{item.product_num*1 || item.want_product_num*1}}{{' '}}{{item.unit_name}}
							</div>
						</div>
					</template>
					<template slot-scope="{ row, index }" slot="product">
						<div v-for="item in row.product" class="info">
							<div>
								商品名称：{{item.store_name}}
							</div>
							<div>
								商品ID：{{item.product_id}}
							</div>
							<div>
								数量：<div v-for="goods in item.group">
									<Tag color="primary" v-if="goods.pur_number != 0">{{goods.pur_number *1}} {{goods.unit_name}}</Tag>
								</div>
							</div>

						</div>
					</template>
					<template slot-scope="{ row, index }" slot="mystore">
						<viewer style="display: flex;">
							<div class="tabBox_img">
								<img v-lazy="row.mystore.image" />
							</div>
							<div>门店：{{row.mystore.name}}<br>ID：{{row.mystore.id}}</div>
						</viewer>

					</template>
					<template slot-scope="{ row, index }" slot="store">
						<viewer style="display: flex;">
							<div class="tabBox_img">
								<img v-lazy="row.store.image" />
							</div>
							<div>门店：{{row.store.name}}<br>ID：{{row.store.id}}</div>
						</viewer>

					</template>
					<template slot-scope="{ row, index }" slot="status">
						<Tag color="default" v-if="row.status == 0">待审核</Tag>
						<Tag color="primary" v-if="row.status == 1">通过</Tag>
						<Tag color="success" v-if="row.status == 3">完成</Tag>
						<Tag color="error" v-if="row.status == -1">拒绝</Tag>
						<Tag color="warning" v-if="row.status == 2">部分完成</Tag>
						<Tag color="magenta" v-if="row.status == -2">无效</Tag>
					</template>
					<template slot-scope="{ row, index }" slot="image">
						<viewer>
							<div class="tabBox_img">
								<img v-lazy="row.avatar" />
							</div>
						</viewer>
					</template>
				</Table>
				<div class="acea-row row-right page">
					<Page :total="total" :current.sync="userFrom.page" show-elevator show-total @on-change="pageChange"
						:page-size="userFrom.limit" />
				</div>
				<!-- <user-form v-if="isEdit" ref="userForm" :ps-info="psInfo" @change-menu="changeMenu"></user-form>
					<user-info v-else :ps-info="psInfo" :workMemberInfo="workMemberInfo"
						:workClientInfo="workClientInfo"></user-info> -->

			</TabPane>
		</Tabs>
	</Drawer>
	<!-- <Modal v-model="modals" scrollable footer-hide closable title="用户详情" :mask-closable="false" width="1000" :z-index="2"> -->
	<!-- <Spin size="large" fix v-if="spinShow"></Spin> -->
	<!-- <div class="acea-row">
                <div class="avatar mr15"><img :src="psInfo.avatar"></div>
                <div class="dashboard-workplace-header-tip">
                    <p class="dashboard-workplace-header-tip-title" v-text="psInfo.nickname || '-'"></p>
                    <div class="dashboard-workplace-header-tip-desc">
                        <span class="dashboard-workplace-header-tip-desc-sp" v-for="(item, index) in detailsData" :key="index">{{item.title+'：'+item.value}}</span>
                    </div>
                </div>
            </div> -->
	<!-- <Row type="flex" justify="space-between" class="mt25">
                <Col span="4" class="user_menu">
                    <Menu :theme="theme2" :active-name="activeName" @on-select="changeType">
                        <MenuItem :name="item.val" v-for="(item, index) in list" :key="index" >
                            {{item.label}}
                        </MenuItem>
                    </Menu>
                </Col>
                <Col span="20">
                    <Table :columns="columns" :data="userLists" max-height="400"
                           ref="table"
                           :loading="loading"
                           no-userFrom-text="暂无数据"
                           no-filtered-userFrom-text="暂无筛选结果"
                    ></Table>
                    <div class="acea-row row-right page">
                        <Page :total="total" :current="userFrom.page" show-elevator show-total @on-change="pageChange"
                              :page-size="userFrom.limit"  /></div>
                </Col>
            </Row> -->
	<!-- </Modal> -->
	<!-- </div> -->
</template>

<script>
	import {
		detailsApi,
		infoApi,
		visitList,
		spreadList
	} from '@/api/user';
	import {
		getGodownInfo,
		getPositionList,
		getInLists,
		getUserList,
		getWantList,
		getPurchaselist,
		getInventoryList,
		getGoodsList,
		getOutLists
	} from '@/api/erp'
	import {
		formatDate
	} from "@/utils/validate";
	// import userForm from './userForm';
	// import userInfo from './userInfo';

	export default {
		name: 'userDetails',
		filters: {
			formatDate(time) {
				if (time !== 0) {
					let date = new Date(time * 1000);
					return formatDate(date, "yyyy-MM-dd");
				}
			},
		},
		components: {
			// userForm,
			// userInfo
		},
		props: ['levelList', 'labelList', 'groupList', 'fromType'],
		data() {
			return {
				id: 0,
				wareInfo: {}, //仓库详情
				theme2: 'light',
				list: [{
						val: 'position',
						tit: 'position_count',
						label: '仓位列表'
					},
					{
						val: 'outbound',
						tit: 'outbound_count',
						label: '出库列表'
					},
					{
						val: 'warehousing',
						tit: 'warehousing_count',
						label: '入库列表'
					},
					{
						val: 'position_info',
						tit: 'position_info_count',
						label: '商品列表'
					},
					{
						val: 'purchase',
						tit: 'purchase_count',
						label: '采购列表'
					},
					{
						val: 'user',
						tit: 'user_count',
						label: '用户列表'
					},
					{
						val: 'want',
						tit: 'want_count',
						label: '要货列表'
					},
					{
						val: 'inventory',
						tit: 'inventory_count',
						label: '盘点单列表'
					},
				],
				modals: false,
				spinShow: false,
				detailsData: [],
				userId: 0,
				loading: false,
				userFrom: {
					type: 'position',
					page: 1, // 当前页
					limit: 12 // 每页显示条数
				},
				total: 0,
				columns: [],
				userLists: [],
				psInfo: {},
				workMemberInfo: {},
				workClientInfo: {},
				activeName: 'position',
				isEdit: false,
				groupOptions: [],
				labelOptions: []
			}
		},
		watch: {
			activeName(value) {
				this.userFrom.page = 1;
				this.isEdit = false;
				this.changeType(value);
			},
			modals(value) {
				if (value) {
					this.isEdit = false;
				}
			}
		},
		created() {},
		methods: {
			getGodownInfo(id) {
				getGodownInfo(id).then(res => {
					console.log(res);
					this.wareInfo = res.data
					this.changeType('position');
				})
			},
			changeMenu(value) {
				if (value === '99') {
					this.getDetails(this.userId);
					this.$parent.getList();
					this.isEdit = false;
					return;
				}
				this.$parent.changeMenu(this.psInfo, value);
			},
			// 完成
			finish() {
				this.$refs.userForm[0].detailsPut();
			},
			// 推荐人变更记录
			getSpreadList() {
				this.loading = true;
				spreadList({
					id: this.userId,
					datas: {
						page: this.userFrom.page,
						limit: this.userFrom.limit
					}
				}).then(async res => {
					if (res.status === 200) {
						let data = res.data;
						this.userLists = data.list;
						this.total = data.count;
						this.columns = [{
								title: '推荐人ID',
								key: 'spread_uid',
								minWidth: 120
							},
							{
								title: '推荐人',
								key: 'nickname',
								minWidth: 120,
								render: (h, params) => {
									return h('div', [
										h('img', {
											style: {
												borderRadius: '50%',
												marginRight: '10px',
												verticalAlign: 'middle'
											},
											attrs: {
												with: 38,
												height: 38
											},
											directives: [{
													name: 'lazy',
													value: params.row.avatar
												},
												{
													name: 'viewer'
												}
											]
										}),
										h('span', {
											style: {
												verticalAlign: 'middle'
											}
										}, params.row.nickname)
									]);
								}
							},
							{
								title: '变更方式',
								key: 'type',
								minWidth: 120
							},
							{
								title: '变更时间',
								key: 'spread_time',
								minWidth: 120
							}
						];
						this.loading = false;
					} else {
						this.loading = false;
						this.$Message.error(res.msg);
					}
				}).catch(res => {
					this.loading = false;
					this.$Message.error(res.msg);
				});
			},
			// 浏览足迹
			getVisitList() {
				this.loading = true;
				visitList({
					id: this.userId,
					datas: {
						page: this.userFrom.page,
						limit: this.userFrom.limit
					}
				}).then(async res => {
					if (res.status === 200) {
						let data = res.data;
						this.userLists = data.list;
						this.total = data.count;
						this.columns = [{
								title: '商品信息',
								slot: 'product',
								minWidth: 400
							},
							{
								title: '价格',
								key: 'product_price',
								minWidth: 120,
								render: (h, params) => {
									return h('div', `¥${params.row.product_price}`);
								}
							},
							{
								title: '浏览时间',
								key: 'add_time',
								minWidth: 120
							}
						];
						this.loading = false;
					} else {
						this.loading = false;
						this.$Message.error(res.msg);
					}
				}).catch(res => {
					this.loading = false;
					this.$Message.error(res.msg);
				});
			},
			// 会员详情
			getDetails(id) {
				this.userId = id;
				this.spinShow = true;
				detailsApi(id).then(async res => {
					if (res.status === 200) {
						let data = res.data
						this.detailsData = data.headerList;
						if (this.fromType !== 'order') {
							let groupItem = this.groupList.find(item => item.id == data.ps_info.group_id);
							if (groupItem) {
								data.ps_info.group_name = groupItem.group_name;
							}
						}
						this.psInfo = data.ps_info;
						this.workMemberInfo = data.workMemberInfo;
						this.workClientInfo = data.workClientInfo;
						this.spinShow = false;
					} else {
						this.spinShow = false;
						this.$Message.error(res.msg);
					}
				}).catch(res => {
					this.spinShow = false;
					this.$Message.error(res.msg);
				})
			},
			pageChange(index) {
				this.userFrom.page = index
				this.changeType(this.userFrom.type);
				// switch (this.activeName) {
				//     case 'visit':
				//        this.changeType(this.userFrom.type);
				//         break;
				//     case 'spread_change':
				//        this.changeType(this.userFrom.type);
				//         break;
				//     default:
				//         this.changeType(this.userFrom.type);
				//         break;
				// }
			},
			// tab选项
			changeType(name) {
				console.log('zhizxin');
				this.loading = true;
				this.userFrom.type = name;
				this.activeName = name;
				let getList;
				try {
					if (name == 'position') {
						getList = getPositionList
						this.columns = [{
								title: "ID",
								key: "id",
								width: 80,
							},
							{
								title: "仓位名称",
								key: "title",
								minWidth: 90,
							},
							{
								title: "通道",
								slot: "passageway",
								minWidth: 90,
							},
							{
								title: "左右",
								slot: "control",
								minWidth: 90,
							},
							{
								title: "层数",
								slot: "layer",
								minWidth: 90,
							},
							{
								title: "仓位编号",
								slot: "number",
								minWidth: 90,
							},
							{
								title: "编号",
								key: "bin_number",
								minWidth: 90,
							},
						]
					} else if (name == 'outbound') {
						getList = getOutLists
						this.columns = [{
								title: "ID",
								key: "id",
								width: 80,
							},
							{
								title: "出库单号",
								key: "out_order_id",
								minWidth: 200,
							},
							{
								title: "出库商品",
								slot: "product",
								minWidth: 200,
							},
							
							{
								title: "接收仓库",
								slot: "tware",
								minWidth: 120,
							},
							
							{
								title: "接收门店",
								slot: "tstore",
								minWidth: 120,
							},
							{
								title: "创建人",
								slot: "cuser",
								minWidth: 200,
							},
							// {
							// 	title: "总数量",
							// 	key: "total_num",
							// 	minWidth: 90,
							// },
							{
								title: "总价格",
								key: "total_price",
								minWidth: 90,
							},

						]
					} else if (name == 'warehousing') {
						getList = getInLists
						this.columns = [{
								title: "ID",
								key: "id",
								width: 80,
							},
							{
								title: "入库单号",
								key: "in_order_id",
								minWidth: 200,
							},
							{
								title: "商品",
								slot: "info",
								width: 200,
							},
							{
								title: "总数量",
								key: "total_num",
								minWidth: 90,
							},
							{
								title: "总价格",
								key: "total_price",
								minWidth: 90,
							},
						]
					} else if (name == 'position_info') {
						getList = getGoodsList
						this.columns = [{
								title: "ID",
								key: "product_id",
								width: 80,
							},
							{
								title: '商品名称',
								key: 'product_name',
								width: 200,
							},
							{
								title: '数量',
								key: 'product_num',
								width: 200,
							},
							{
								title: '单位',
								key: 'unit_name',
								width: 200,
							},
							{
								title: '单价',
								key: 'price',
								width: 200,
							}

						]
					} else if (name == 'purchase') {
						getList = getPurchaselist
						this.columns = [{
								title: "ID",
								key: "id",
								width: 80,
							},

							{
								title: "采购单号",
								key: "purchase_order_id",
								minWidth: 200,
							},
							{
								title: "要货单号",
								key: "want_order_id",
								minWidth: 200,
							},
							{
								title: "供应商",
								slot: "supplier",
								minWidth: 200,
							},
							{
								title: "门店",
								slot: "store",
								minWidth: 200,
							},
							{
								title: "订单数量",
								key: "order_num",
								minWidth: 90,
							},
							{
								title: "订单金额",
								key: "order_price",
								minWidth: 90,
							},
							{
								title: "运费",
								key: "freight",
								minWidth: 90,
							},
							{
								title: "审核状态",
								slot: "status",
								minWidth: 200,
							}

						]
					} else if (name == 'user') {
						getList = getUserList
						this.columns = [{
								title: "ID",
								key: "id",
								width: 80,
							},
							{
								title: "账号",
								key: "account",
								minWidth: 90,
							},
							{
								title: "用户头像",
								slot: "image",
								minWidth: 90,
							},
							{
								title: "ERP用户名称",
								key: "staff_name",
								minWidth: 90,
							},
							{
								title: "手机号",
								key: "phone",
								minWidth: 90,
							},
						]
					} else if (name == 'want') {
						getList = getWantList
						this.columns = [{
								title: "ID",
								key: "id",
								width: 80,
							},
							{
								title: "要货单号",
								key: "want_order_id",
								minWidth: 150,
							},
							{
								title: '商品信息',
								slot: 'info',
								minWidth: 300,
							},
							{
								title: "出货门店",
								slot: "store",
								minWidth: 200,
							},
							{
								title: "要货门店",
								slot: "mystore",
								minWidth: 200,
							},
							{
								title: "状态",
								slot: "status",
								minWidth: 100,
							},

						]
					} else if (name == 'inventory') {
						getList = getInventoryList
						this.columns= [{
						title: "ID",
						key: "id",
						width: 80,
					},
					{
						title: "订单编号",
						key: "order_id",
						minWidth: 90,
					},
					{
						title: "商品种类",
						slot: "num",
						minWidth: 90,
					},
					// {
					// 	title: "所属仓库",
					// 	slot: "ware",
					// 	minWidth: 90,
					// },
					{
						title: "盘点时间",
						slot: "add_time",
						minWidth: 90,
					},
					{
						title: "状态",
						slot: "status",
						minWidth: 90,
					},
					// {
					// 	title: "备注",
					// 	key: "auth_remark",
					// 	minWidth: 90,
					// },
					// {
					// 	title: "操作",
					// 	slot: "action",
					// 	fixed: "right",
					// 	width: 200,
					// },
				]
					}
				} catch (e) {
					console.log('err', e);
					//TODO handle the exception
				}
				getList({
					wid: this.id,
					page: this.userFrom.page,
					limit: this.userFrom.limit
				}).then(res => {
					this.loading = false;
					this.total = res.data.count
					this.userLists = res.data.data

				}).catch(res => {
					this.loading = false;
				})

			}
		}
	}
</script>

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

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

	.info {
		padding-top: 10px;
		border-bottom: 1px dashed #515a6e;

		&:last-of-type {
			border: none;
		}
	}

	/deep/ .tabBox_img {
		width 36px;
		height 36px;
		border-radius: 4px cursor pointer;

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

	.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%;
				}
			}
		}
	}
</style>