<template>
	<view class="organization-wrap">
		<!-- 组织结构根节点 -->
		<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" v-if="organizationNowList && organizationNowList.length > 0">
			<view class="organization-node-item" v-for="(item, index) in organizationNowList" :key="index" @click="clickOrganization(item, index)">
				<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>
		<!-- 门店列表 -->
		<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" @click="goPage(item)">
					<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="icon-xian-11" custom-prefix="xd-icon" size="24" color="#2b85e4"></u-icon>
					</view>
				</view>
				<u-empty :text="noDataText" img-width="120" v-if="list.length == 0 && status != 'loading'" style="padding: 150px 0 180px;background: #fff;" mode="list"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import { clzConfirm } from '@/libs/tools.js'
	import { findStoreList,findStoreVsDevice } from '@/api/store.js'
	import { queryCurrentTaskUsing } from '@/api/task.js'
	import { findUserInfo } from '@/api/atorg.js'
	export default{
		data(){
			return{
				organizationNowList: [],  //  组织机构  当前显示 列表数据
				organizationList: [],  //  组织机构  总列表数据
				nowStructure: [],  //  面包屑
				nowInd: [],  //  下标数组
				status: 'loading',  //  加载中状态
				noDataText: '暂无数据',  //  数据异常提示
				list: [],  //  门店数据列表
			}
		},
		onLoad() {
			//  权限下所有门店数据
			this.getStoreList()
			//  权限下的组织机构数据
			this.getOrgList()
		},
		methods: {
			//  权限下所有门店数据
			getStoreList(orgCode){
				this.status = 'loading'
				// 获取门店列表
				findStoreList({ orgCode: orgCode ? orgCode : '' }).then(res => {
					if(res.status == 200){
						this.list = res.data
						this.noDataText = '暂无数据'  //  有列表数据时不显示，因此只用默认设置为无数据时所需显示的'暂无数据'即可
					}else{
						this.list = []
						this.noDataText = res.message
					}
					this.status = 'loadmore'
				})
			},
			//  组织机构数据
			getOrgList(){
				findUserInfo().then(res => {
					if(res.status == 200){
						this.nowStructure.push(res.data[0].name)
						this.organizationList = res.data
						this.organizationNowList = res.data[0].children
					}else{
						this.organizationList = []
						this.organizationNowList = []
						this.nowStructure = []
					}
				})
			},
			//  组织机构  click
			clickOrganization(item, ind){
				this.nowInd.push(ind)
				if(item.children){
					this.organizationNowList = item.children
				}else{
					this.organizationNowList = []
				}
				this.nowStructure.push(item.name)
				this.getStoreList(item.code)
			},
			//  切换至当前所选的组织结构
			checkedStructure(ind){
				if(ind == 0){
					this.nowInd = []
					this.organizationNowList = this.organizationList[0].children
					this.nowStructure = []
					this.nowStructure.push(this.organizationList[0].name)
					this.getStoreList()
				}else{
					let subInd = JSON.parse(JSON.stringify(this.nowInd)).splice(0, ind)
					this.nowInd = subInd
					let code = ''  //  组织机构编码
					for(let i=0; i< subInd.length;i++){
						if(i==0){
							this.organizationNowList = this.organizationList[0].children[subInd[i]].children
							code = this.organizationList[0].children[subInd[i]].code
						}else{
							this.organizationNowList = this.organizationNowList[subInd[i]].children
							code = this.organizationNowList[subInd[i]].code
						}
					}
					this.nowStructure = JSON.parse(JSON.stringify(this.nowStructure)).splice(0, ind+1)
					this.getStoreList(code)
				}
			},
			//  开始巡店
			goPage(item){
				// 判断当前门店是否已绑定设备
				findStoreVsDevice({storeCode:item.code}).then(res=>{
					if(res.data.length){
						// 门店下的设备
						this.$u.vuex('vuex_storeVideoList',res.data)
						//  校验是否有历史巡店记录
						this.queryHasTaskUsing(item)
					}else{
						uni.showToast({
							icon: 'none',
							title: '当前门店没有绑定设备，暂时不能视频巡店'
						})
					}
				})
			},
			// 判断当前门店是否已绑定设备
			// type  VIDEO_INSPECTION:视频巡店、SPOT_INSPECTION：现场巡店、POINT_INSPECTION：点检任务
			queryHasTaskUsing(item){
				queryCurrentTaskUsing({ storeId: item.id, type: 'VIDEO_INSPECTION' }).then(res => {
					if(res.status == 200){
						if(res.data){  //  为true有历史巡店记录
							clzConfirm({
							    title: '提示',
							    content: '有进行中的巡店任务，是否继续？',
								confirmText: '继续巡店',
								cancelText: '重新开始',
								buttons: ['继续巡店','重新开始'],
							    success: function (result) {
							        if (result.confirm || result.index==0) {  //  继续巡店
										uni.navigateTo({
											url: '/pages/shopTour/shopTour?storeId=' + item.id + '&taskId='+ res.data + '&restart=0&types=video'
										})
							        }else if(result.cancel || result.index==1){  //  重新开始
										uni.navigateTo({
											url: '/pages/shopTour/shopTour?storeId=' + item.id + '&taskId='+ res.data + '&restart=1&types=video'
										})
							        }
							    }
							})
						}else{
							uni.navigateTo({
								url: '/pages/shopTour/shopTour?storeId=' + item.id + '&types=video'
							})
						}
					}else{
						uni.showToast({icon: 'none', title: res.message})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
		height: 100vh;
	}
	.organization-wrap{
		position: relative;
		.organization-root-tit{
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			padding: 20upx 30upx;
			line-height: 45upx;
			background-color: #fff;
			border-bottom: 6upx solid #f8f8f8;
			z-index: 1;
			.structure-con{
				display: inline-block;
				.structure-name{
					color: 	#2979ff;
				}
				.structure-icon{
					padding: 0 10upx;
				}
			}
		}
		.organization-node-con{
			padding: 88upx 30upx 0;
			background-color: #fff;
			.organization-node-item{
				display: flex;
				padding: 25upx 10upx 25upx 20upx;
				border-bottom: 1px solid #f8f8f8;
				&:active{
					opacity: 0.5;
				}
				&-name{
					flex-grow: 1;
				}
				&-icon{
					flex-shrink: 0;
				}
			}
		}
		// 门店列表
		.list-con{
			padding: 0 20upx;
			.list-tit{
				padding: 20upx 6upx;
				border-bottom: 1upx solid #f8f8f8;
			}
			.listData-con{
				box-sizing: border-box;
				.listData-item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 25upx;
					border-bottom: 1px solid #f8f8f8;
					background-color: #fff;
					&:active{
						opacity: 0.5;
					}
					&-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>
