<template>
	<view class="searchPage-wrap">
		<!-- 自定义标题 -->
		<u-navbar :is-back="false" :border-bottom="false" id="navbar">
			<view class="slot-wrap">
				<u-search class="left-icon" :focus="true" shape="square" placeholder="请输入门店名称搜索" v-model="keyword" action-text="取消" @change="change" @search="search" @custom="custom"></u-search>
			</view>
		</u-navbar>
		<!-- 列表数据 -->
		<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="yuanchengxundian" custom-prefix="xd-icon" size="40" color="#2b85e4"></u-icon>
				</view>
			</view>
			<u-empty :text="noDataText" img-width="120" v-if="list.length == 0 && status != 'loading'" :margin-top="400" mode="list"></u-empty>
		</view>
	</view>
</template>

<script>
	import { clzConfirm } from '@/libs/tools.js'
	import { findStoreList } from '@/api/store.js'
	import { queryCurrentTaskUsing } from '@/api/task.js'
	export default{
		data(){
			return{
				keyword: '',  //  关键字
				list: [],  //  数据列表
				noDataText: '暂无数据',  //  数据异常提示
				status: 'loading',  //  加载状态
			}
		},
		methods: {
			//  用户点击右侧控件时触发
			custom(val){
				// 关闭当前页面 返回列表页面
				uni.navigateBack()
			},
			//  输入框内容发生变化时触发
			change(val){
				// `debounce` 是一个限制操作频率的函数。防抖操作，在0.5秒内连续更改数据不进行查询
				this.$u.debounce(this.getStoreList, 500)
			},
			//  用户确定搜索时触发，用户按回车键，或者手机键盘右下角的"搜索"键时触发
			search(val){
				this.getStoreList()
			},
			getStoreList(){
				this.status = 'loading'
				findStoreList({ name: this.keyword }).then(res => {
					if(res.status == 200){
						this.list = res.data
						this.noDataText = '暂无数据' //  有列表数据时不显示，因此只用默认设置为无数据时所需显示的'暂无数据'即可
					}else{
						this.list = []
						this.noDataText = res.message
					}
					this.status = 'loadmore'
				})
			},
			//  选择门店
			goPage(item){
				//  校验是否有历史巡店记录
				queryCurrentTaskUsing({ storeId: item.id }).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" scoped>
	page {
		background-color: #f8f8f8;
		height: calc(100vh - 44px);
	}
	.searchPage-wrap{
		padding: 0 30upx;
		/* 自定义导航栏样式 */
		.slot-wrap {
			display: flex;
			align-items: center;
			/* 如果您想让slot内容占满整个导航栏的宽度 */
			flex: 1;
			/* 如果您想让slot内容与导航栏左右有空隙 */
			padding: 0 30rpx;
			font-size: 28upx;
			.left-icon {
				flex-grow: 1;
				font-size: 32upx;
				margin-right: 10upx;
				text-align: center;
			}
			.right-icon {
				padding-left: 50upx;
			}
			.uni-icons {
				margin-right: 10upx;
			}
		}
		.listData-con{
			.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>
