<template>
	<view class="shopTourRecord-wrap">
		<!-- 筛选条件 -->
		<screenModule :defaultParams="searchForm" @refresh="refresh" />
		<!-- 列表数据 -->
		<view class="list-con">
			<view class="record-con">
				<view v-show="searchForm.creatTime.length != 0" class="alert-tips">
					<text>创建时间：{{searchForm.creatTime[0]}} 至 {{searchForm.creatTime[1]}}</text>
				</view>
				<scroll-view scroll-y class="record-con-c" @scrolltolower="onreachBottom">
					<view class="record-item" v-for="(item,index) in list" :key="index" @click="getDetails(item)">
						<view class="item-head">
							<text class="item-c-tit">{{item.storeName}}</text>
							<u-tag size="mini" mode="plain" shape="circle" class="item-c-type" :text="item.status | taskStatus" :type="item.status | statusCls" />
						</view>
						<view class="item-main">
							<text class="item-tit">巡店人：</text>
							<text class="item-val">{{item.userName}}</text>
						</view>
						<view class="item-main">
							<text class="item-tit">创建时间：</text>
							<text class="item-val">{{item.startTime}}</text>
						</view>
						<view class="item-main">
							<text class="item-tit">检查方式：</text>
							<text class="item-val">{{item.typeDictValue}}</text>
						</view>
						<u-grid class="item-grid" :col="4" hover-class="none">
							<u-grid-item>
								<text class="grid-num text-blue">{{item.totalTargetCount}}</text>
								<text class="grid-text">检查项</text>
							</u-grid-item>
							<u-grid-item>
								<text class="grid-num text-green">{{item.passTargetCount}}</text>
								<text class="grid-text">合格</text>
							</u-grid-item>
							<u-grid-item>
								<text class="grid-num text-red">{{item.notPassTargetCount}}</text>
								<text class="grid-text">不合格</text>
							</u-grid-item>
							<u-grid-item>
								<text class="grid-num text-yellow">{{item.notWorkTargetCount}}</text>
								<text class="grid-text">不适用</text>
							</u-grid-item>
						</u-grid>
					</view>
					<u-empty :text="noDataText" style="height: auto;padding-top: 10vh;" img-width="120" v-if="list.length == 0 && status != 'loading'" mode="list"></u-empty>
					<view v-if="total > pageSize || status == 'loading'" style="padding:100upx 20upx;"><u-loadmore :status="status" /></view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import screenModule from './screenModule.vue'
	import { getTasksList } from '@/api/task.js'
	export default{
		components: { screenModule },
		data(){
			return{
				searchForm: {
					inspectorId: '',  //  全部（全部为空、我的巡店为巡店人id）
					typeList: [],  //  检查方式（现场巡店、视频巡店、点检任务）
					status: '',  //  状态（全部、待处理、进行中、已完成、已过期）
					creatTime: [],  //  时间区间（天）
					storeName: '',  //  门店
					userName: ''  //  巡店人
				},
				pageNo: 1,  //  当前页码
				pageSize: 15,  //  一页多少条
				total: 0,  //  总条数
				status: 'loadmore',  //  加载状态
				noDataText: '暂无数据',  //  列表数据为空时提示文字
				list: [],  //  数据列表
			}
		},
		onLoad() {
			this.range = [ this.get7day(-6), this.get7day(0) ]
			this.searchForm.creatTime = [ this.get7day(-6), this.get7day(0) ]
			this.pageInit(1)
		},
		filters: {
			// 任务类型
			taskStatus(val){
				let str = ''
				if(val == 'PENDING'){
					str = '待处理'
				}else if(val == 'RUNNING'){
					str = '进行中'
				}else if(val == 'FINISHED'){
					str = '已完成'
				}else if(val == 'EXPIRED'){
					str = '已过期'
				}
				return str
			},
			// 状态颜色标记
			statusCls(val){
				let str = ''
				if(val == 'PENDING'){
					str = 'error'
				}else if(val == 'RUNNING'){
					str = 'primary'
				}else if(val == 'FINISHED'){
					str = 'success'
				}else if(val == 'EXPIRED'){
					str = 'warning'
				}
				return str
			}
		},
		methods: {
			// 查询列表
			pageInit(pageNo){
				if (pageNo) {
					this.pageNo = pageNo
				}
				this.status = 'loading'
				let params = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					beginDate: this.searchForm.creatTime[0] ? this.searchForm.creatTime[0] : '',
					endDate: this.searchForm.creatTime[1] ? this.searchForm.creatTime[1] : '',
					storeName: this.searchForm.storeName ? this.searchForm.storeName : '',
					typeList: this.searchForm.typeList ? this.searchForm.typeList : [],
					status: this.searchForm.status ? this.searchForm.status : '', // 任务状态
					inspectorId: this.searchForm.inspectorId ? this.searchForm.inspectorId : '',
					userName: this.searchForm.userName ? this.searchForm.userName : '',
				}
				getTasksList(params).then(res => {
					if (res.status == 200) {
						if (this.pageNo > 1) {
							this.list = this.list.concat(res.data.list || [])
						} else {
							this.list = res.data.list || []
						}
						this.total = res.data.count || 0
					} else {
						this.list = []
						this.total = 0
						this.noDataText = res.message
					}
					this.status = 'loadmore'
				});
			},
			//  查看详情
			getDetails(item){
				if(item.type == 'POINT_INSPECTION'){  //  点检任务
					uni.navigateTo({
						url: '/pages/spotCheckDetails/spotCheckDetails?taskId=' + item.id
					})
				}else{  //  现场巡店、视频巡店
					uni.navigateTo({
						url: '/pages/shopTourDetails/shopTourDetails?taskId=' + item.id
					})
				}
			},
			//  筛选
			refresh(params){
				this.searchForm = params
				this.list = []
				this.total = 0
				this.pageInit(1)
			},
			//  获取近几天的数据
			get7day(day){
				let today = new Date()
				let targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
				today.setTime(targetday_milliseconds)  //注意，这行是关键代码
				let tYear = today.getFullYear()
				let tMonth = today.getMonth()
				let tDate = today.getDate()
				tMonth = this.doHandleMonth(tMonth + 1)
				tDate = this.doHandleMonth(tDate)
				return tYear + "-" + tMonth + "-" + tDate
			},
			//  月份
			doHandleMonth(month){
			    let m = month
			    if(month.toString().length == 1){
					m = "0" + month
			    }
			    return m
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				console.log('onreachBottom')
				if (this.list.length < this.total) {
					this.pageNo += 1
					this.pageInit()
				} else {
					this.status = 'nomore'
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
		height: calc(100vh - 44px);
	}
	.shopTourRecord-wrap{
		// 列表数据
		.list-con{
			.record-con{
				.alert-tips{
					padding: 20upx 30upx 10upx;
					background-color: #F8F8F8;
					border-bottom: 1px solid #EEEEEE;
					text{
						display: block;
						font-size: 24upx;
						padding: 4upx 10upx;
					}
				}
				.record-con-c{
					height: calc(100vh - 84px);
					.record-item{
						background-color: #fff;
						margin: 20upx 30upx 20upx;
						padding: 14upx 30upx 20upx;
						border-radius: 12upx;
						box-shadow: 1px 1px 3px #eee;
						.item-head{
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 10upx 0;
							.item-c-tit{
								flex-grow: 1;
								padding-right: 18upx;
								font-weight: bold;
							}
							.item-c-type{
								flex-shrink: 0;
							}
						}
						.item-main{
							font-size: 26upx;
							line-height: 48upx;
							padding: 6upx 0;
							position: relative;
							.item-tit{
								display: inline-block;
								position: absolute;
								left: 0;
								top: 8upx;
							}
							.item-val{
								display: inline-block;
								padding-left: 130upx;
							}
						}
						.item-grid{
							margin-top: 10upx;
							.text-blue{
								color: #2979ff;
							}
							.text-green{
								color: #19be6b;
							}
							.text-red{
								color: #fa3534;
							}
							.text-yellow{
								color: #ff9900;
							}
							.grid-num{
								font-weight: bold;
							}
							.grid-text{
								font-size: 26upx;
								padding-top: 10upx;
								color: #666;
							}
						}
					}
				}
			}
		}
	}
</style>
