<template>
	<view class="shopTourCompleted-wrap">
		<view class="info-con">
			<view class="inspection-info">
				<view class="info-main">
					<text class="info-tit">门店：</text>
					<text class="info-val">常青二路店常青二路店常青二路店常青二路店常青二路店常青二路店常青二路店常青二路店常青二路店常青二路店常青二路店常青二路店常青二路店</text>
				</view>
				<view class="info-main">
					<text class="info-tit">巡店人：</text>
					<text class="info-val">常青二路店</text>
				</view>
				<view class="info-main">
					<text class="info-tit">创建时间：</text>
					<text class="info-val">2020-9-7 11:12</text>
				</view>
				<view class="info-main">
					<text class="info-tit">完成时间：</text>
					<text class="info-val">2020-9-7 16:20</text>
				</view>
				<view class="info-main">
					<text class="info-tit">耗时：</text>
					<text class="info-val">5小时8分</text>
				</view>
			</view>
			<view class="inspection-items">
				<u-grid :col="4" hover-class="none">
					<u-grid-item>
						<text class="grid-num text-blue">18</text>
						<text class="grid-text">检查项</text>
					</u-grid-item>
					<u-grid-item>
						<text class="grid-num text-green">13</text>
						<text class="grid-text">合格</text>
					</u-grid-item>
					<u-grid-item>
						<text class="grid-num text-red">3</text>
						<text class="grid-text">不合格</text>
					</u-grid-item>
					<u-grid-item>
						<text class="grid-num text-yellow">2</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>
	export default{
		data(){
			return{
				
			}
		},
		methods: {
			//  我的巡店记录
			goMyShopTour(){
				uni.navigateTo({
					url: '/pages/myShopTour/myShopTour'
				})
			},
			// 查看明细
			goShopTourDetails(){
				uni.navigateTo({
					url: '/pages/shopTourDetails/shopTourDetails'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	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>
