<template>
	<view class="organization-wrap">
		<u-sticky>
			<!-- 组织结构根节点 -->
			<view class="organization-root-tit">
				<view class="structure-con" v-for="(item,index) in nowStructure" :key="index">
					<text class="structure-name" @click="checkedStructure(index)">{{item}}</text>
					<u-icon class="structure-icon" name="arrow-right" color="#999" size="28"></u-icon>
				</view>
				
			</view>
			<!-- 组织结构子节点 -->
			<view class="organization-node-con">
				<view class="organization-node-item" v-for="(item, index) in organizationNowList" :key="index" @click="clickOrganization(item)">
					<text class="organization-node-item-name">{{item.name}}</text>
					<u-icon class="organization-node-item-icon" name="arrow-right" color="#999" size="28"></u-icon>
				</view>
			</view>
		</u-sticky>
		<!-- 门店列表 -->
		<view class="list-con">
			<view class="list-tit">门店列表</view>
			<!-- 列表数据 -->
			<view class="listData-con">
				<view class="listData-item" v-for="(item, index) in list" :key="index">
					<view class="listData-item-l">
						<u-icon class="listData-item-l-icon" name="mendian" custom-prefix="xd-icon" size="40" color="#888"></u-icon>
						<text class="listData-item-l-name">{{item.name}}</text>
					</view>
					<view class="listData-item-r">
						<u-icon class="listData-item-r-icon" name="yuanchengxundian" custom-prefix="xd-icon" size="40" color="#2b85e4"></u-icon>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				list: [  //  门店列表
					{ name: '常青二路店' },
					{ name: '常青二路店常青青二路店常路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店常青青二路店常路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店常青青二路店常路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
					{ name: '常青二路店' },
				],
				organizationNowList: [  //  组织机构  当前显示 列表数据
					{ name: '陕西区域', id: 1, children: [{name: '西安', id: 11},{name: '咸阳', id: 111},{name: '宝鸡', id: 1111},{name: '渭南', id: 11111},] },
					{ name: '宁夏区域', id: 2, children: [{name: '银川', id: 21},{name: '中卫', id: 211},{name: '固原', id: 2111},] },
					{ name: '甘肃区域', id: 3, children: [{name: '兰州', id: 31},{name: '金昌', id: 311},{name: '白银', id: 3111},{name: '天水', id: 31111},] },
				],
				organizationList: [  //  组织机构  总列表数据
					{ name: '陕西区域', id: 1, children: [{name: '西安', id: 11},{name: '咸阳', id: 111},{name: '宝鸡', id: 1111},{name: '渭南', id: 11111},] },
					{ name: '宁夏区域', id: 2, children: [{name: '银川', id: 21},{name: '中卫', id: 211},{name: '固原', id: 2111},] },
					{ name: '甘肃区域', id: 3, children: [{name: '兰州', id: 31},{name: '金昌', id: 311},{name: '白银', id: 3111},{name: '天水', id: 31111},] },
				],
				nowStructure: [  //  面包屑
					'西安车领主网络科技有限公司'
				],
				nowInd: []
			}
		},
		methods: {
			//  组织机构  click
			clickOrganization(item){
				if(item.children){
					this.organizationNowList = item.children
				}else{
					this.organizationNowList = []
				}
				this.nowStructure.push(item.name)
			},
			//  切换至当前所选的组织结构
			checkedStructure(ind){
				
				if(ind == 0){
					this.nowStructure = ['西安车领主网络科技有限公司']
				}else{
					this.organizationNowList = this.organizationList[ind - 1].children
					this.nowStructure = this.nowStructure.slice(0,ind+1)
				}
			}
		},
		watch: {
			nowStructure(val){
				if(val.length == 1){
					this.nowStructure[0] = '西安车领主网络科技有限公司'
				}else{
					this.nowStructure[0] = '车领主'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f8f8f8;
		height: calc(100vh - 44px);
	}
	.organization-wrap{
		.organization-root-tit{
			padding: 20upx 30upx;
			background-color: #fff;
			border-bottom: 20upx solid #f8f8f8;
			.structure-con{
				display: inline-block;
				.structure-name{
					color: 	#2979ff;
				}
				.structure-icon{
					padding: 0 10upx;
				}
			}
		}
		.organization-node-con{
			padding: 0 30upx;
			background-color: #fff;
			.organization-node-item{
				display: flex;
				padding: 20upx 0;
				border-bottom: 1upx dashed #f8f8f8;
				&-name{
					flex-grow: 1;
				}
				&-icon{
					flex-shrink: 0;
				}
			}
		}
		// 门店列表
		.list-con{
			background-color: #fff;
			margin-top: 20upx;
			.list-tit{
				padding: 20upx 30upx;
				border-bottom: 1upx solid #f8f8f8;
			}
			.listData-con{
				padding: 0 30upx;
				.listData-item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20upx 0;
					border-bottom: 1upx dashed #f8f8f8;
					&-l{
						flex-grow: 1;
						padding-right: 10upx;
						position: relative;
						padding-left: 50upx;
						&-icon{
							vertical-align: sub;
							padding-right: 8upx;
							position: absolute;
							left: 0;
							top: -4upx;
						}
					}
					&-r{
						flex-shrink: 0;
					}
				}
			}
		}
	}
</style>
