<template>
	<view class="pages flex flex_column">
		<view class="search-box">
			<u-search placeholder="请输入轮胎唯一码/手机号码" v-model="keyword"></u-search>
		</view>
		<view class="uuid-list">
			<view v-for="item in detail.uuid" :key="item.code" @click="toDetail(item)">
				<view class="flex align_center">
					<view class="uuid-info">
						<view>轮胎名称：{{item.name}}</view>
						<view class="uuid">轮胎唯一码：{{item.code}}</view>
						<view class="uuid">质保时间：2023-10-23至2026-10-23</view>
						<view class="uuid">手机号码：15349286715</view>
					</view>
					<view class="uuid-img">
						<image style="width: 100%;height: 80px;background: #eaeaea;" :src="item.img"></image>
					</view>
				</view>
				<view class="state" :class="item.state"></view>
			</view>
		</view>  
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				detail: null
			}
		},
		onLoad() {
			this.detail = this.$store.state.vuex_uuidTempData
		},
		methods: {
			toDetail(item){
				uni.navigateTo({
					url: "/pagesA/qualityPolicy/orderDetail?id="+item.code
				})
			}
		}
	}
</script>

<style lang="less">
.pages{
	height: 100vh;
	background: #f8f8f8;
	overflow: auto;
	.search-box{
		padding: 1rem;
		background: #fff;
	}
	.uuid-list{
		flex-grow: 1;
		> view{
			justify-content: space-between;
			border-bottom: 1px solid #eee;
			padding: 0.6rem 1rem;
			position: relative;
			background: #fff;
			margin-top: 0.5rem;
		}
		.state{
			background-repeat: no-repeat;
			background-size: 100%;
			background-position: center center;
			position: absolute;
			width: 5rem;
			height: 5rem;
			z-index: 1000;
			bottom: 0.5rem;
			right: 1rem;
		}
		.inhand{
			background-image: url(/pagesA/static/inhand.png);
		}
		.outof{
			background-image: url(/pagesA/static/outof.png);
		}
		color: #666;
		.uuid-info{
			flex-grow: 1;
			padding-right: 0.5rem;
			line-height: 1.5rem;
		}
		.uuid{
			color: #333;
		}
		.uuid-img{
			width: 7rem;
		}
	}
}
</style>
