<template>
	<view class="shopTourCompleted-wrap" v-if="detail">
		<view class="info-con">
			<view class="inspection-info">
				<view class="info-main">
					<text class="info-tit">门店：</text>
					<text class="info-val">{{detail.storeName}}</text>
				</view>
				<view class="info-main">
					<text class="info-tit">巡店人：</text>
					<text class="info-val">{{detail.userName}}</text>
				</view>
				<view class="info-main">
					<text class="info-tit">创建时间：</text>
					<text class="info-val">{{detail.createDate}}</text>
				</view>
				<view class="info-main">
					<text class="info-tit">完成时间：</text>
					<text class="info-val">{{detail.endTime}}</text>
				</view>
				<view class="info-main">
					<text class="info-tit">耗时：</text>
					<text class="info-val">{{detail.spendTime|formatTime}}</text>
				</view>
			</view>
			<view class="inspection-items">
				<u-grid :col="4" hover-class="none">
					<u-grid-item>
						<text class="grid-num text-blue">{{detail.totalTargetCount}}</text>
						<text class="grid-text">检查项</text>
					</u-grid-item>
					<u-grid-item>
						<text class="grid-num text-green">{{detail.passTargetCount}}</text>
						<text class="grid-text">合格</text>
					</u-grid-item>
					<u-grid-item>
						<text class="grid-num text-red">{{detail.notPassTargetCount}}</text>
						<text class="grid-text">不合格</text>
					</u-grid-item>
					<u-grid-item>
						<text class="grid-num text-yellow">{{detail.notWorkTargetCount}}</text>
						<text class="grid-text">不适用</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<view class="btn-con">
			<u-button type="primary" shape="circle" class="btn" @click="goShopTourDetails">查看明细</u-button>
			<u-button shape="circle" class="btn" @click="goMyShopTour">我的巡店记录</u-button>
		</view>
	</view>
</template>

<script>
	import moment from "moment"
	import { getTaskDetail } from '@/api/task.js'
	export default{
		data(){
			return{
				taskId: '',
				detail: null
			}
		},
		onLoad(opts) {
			this.taskId = opts.taskId
			this.getTaskDetail()
		},
		filters:{
			formatTime(s){
				let time = ''
				if(moment.duration(s*1000).hours()){
					time += moment.duration(s*1000).hours() + '时'
				}
				if(moment.duration(s*1000).minutes()){
					time += moment.duration(s*1000).minutes() + '分'
				}
				if(moment.duration(s*1000).seconds()){
					time += moment.duration(s*1000).seconds() + '秒'
				}
				return time
			}
		},
		methods: {
			// 查询任务明细
			getTaskDetail(){
				getTaskDetail({id:this.taskId}).then(res => {
					 if(res.status == 200){
						 this.detail = res.data
					 }
				})
			},
			//  我的巡店记录
			goMyShopTour(){
				uni.navigateTo({
					url: '/pages/myShopTour/myShopTour'
				})
			},
			// 查看明细
			goShopTourDetails(){
				uni.navigateTo({
					url: '/pages/shopTourDetails/shopTourDetails?taskId='+this.taskId
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f8f8f8;
		height: calc(100vh - 44px);
	}
	.shopTourCompleted-wrap{
		height: 100%;
		padding: 20upx 30upx 0;
		box-sizing: border-box;
		.info-con{
			.inspection-info{
				background-color: #fff;
				padding: 20upx 30upx;
				.info-main{
					font-size: 28upx;
					line-height: 48upx;
					padding: 10upx 0;
					position: relative;
					.info-tit{
						display: inline-block;
						position: absolute;
						left: 0;
						top: 10upx;
					}
					.info-val{
						display: inline-block;
						padding-left: 150upx;
					}
				}
			}
			.inspection-items{
				.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;
				}
			}
		}
		.btn-con{
			margin-top: 90upx;
			.btn{
				width: 60%;
				margin-top: 40upx;
			}
		}
	}
</style>
