<template>
	<view class="videoShopTour-wrap">
		<!-- 搜索方式 -->
		<u-grid :col="2" class="search-type-con" hover-class="none">
			<u-grid-item class="search-module" @click="goSearch">
				<u-icon class="search-icon" name="xundianguanli" custom-prefix="xd-icon" size="80" color="#2b85e4"></u-icon>
				<view class="search-txt">按门店名称查询</view>
			</u-grid-item>
			<u-grid-item class="search-module" @click="goOrgSearch">
				<u-icon class="search-icon" name="zuzhijigou" custom-prefix="xd-icon" size="80" color="#19be6b"></u-icon>
				<view class="search-txt">按组织机构查询</view>
			</u-grid-item>
		</u-grid>
		<!-- 门店列表 -->
		<view class="list-con">
			<view class="list-tit">门店列表</view>
			<!-- 列表数据 -->
			<scroll-view class="listData-con" scroll-y>
				<view class="listData-item" v-for="(item, index) in list" :key="item.id" @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="height: auto;padding-top: 10vh;" mode="list"></u-empty>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { clzConfirm } from '@/libs/tools.js'
	import { findStoreList,findStoreVsDevice } from '@/api/store.js'
	import { queryCurrentTaskUsing } from '@/api/task.js'
	export default{
		data(){
			return{
				noDataText: '暂无数据',  //  数据异常提示
				status: 'loadmore',  //  加载中状态
				list: [],  //  数据列表
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			//  初始
			init(){
				this.status = 'loading'
				// 获取门店列表
				findStoreList({}).then(res => {
					if(res.status == 200){
						this.list = res.data || []
						this.noDataText = '暂无数据'  //  有列表数据时不显示，因此只用默认设置为无数据时所需显示的'暂无数据'即可
					}else{
						this.list = []
						this.noDataText = res.message
					}
					this.status = 'loadmore'
				})
			},
			//  按门店名称查询
			goSearch(){
				uni.navigateTo({
					url: '/pages/searchPage/searchPage'
				})
			},
			//  按组织机构查询
			goOrgSearch(){
				uni.navigateTo({
					url: '/pages/organization/organization'
				})
			},
			//  开始巡店
			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: calc(100vh - 44px);
	}
	.videoShopTour-wrap{
		height: 100%;
		// 搜索方式
		.search-type-con{
			.search-module{
				.search-txt{
					font-size: 26upx;
					padding-top: 6upx;
				}
			}
		}
		// 门店列表
		.list-con{
			.list-tit{
				padding: 20upx 30upx;
				border-bottom: 1upx solid #f8f8f8;
			}
			.listData-con{
				padding: 0 30upx;
				height: calc(100vh - 190px);
				box-sizing: border-box;
				.listData-item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 25upx 15upx;
					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>
