<template>
	<view class="pages flex flex_column">
		<view class="search-box">
			<u-search placeholder="请输入唯一码/手机号码" v-model="queryWord" @search="pageInit" @custom="pageInit"></u-search>
		</view>
		<view class="uuid-listbox">
			<scroll-view scroll-y style="height: 100%;width: 100%;overflow: auto;" @scrolltolower="onreachBottom">
				<view class="uuid-list">
						<view
							v-for="(item,index) in list"
							:key="item.id" 
							 @click="toDetail(item)"
						>
							<view class="flex align_center">
								<view class="uuid-info">
									<view>产品名称：{{item.productName}}</view>
									<view style="margin-top: 0.2rem;">产品编码：{{item.productCode}}</view>
								</view>
								<view class="uuid-img" v-if="item.productMsg">
									<image :src="item.productMsg"></image>
								</view>
							</view>
							<view class="uuid-info" style="width: 100%;">
								<view class="uuid" style="margin-top: 0.2rem;">唯一码：{{item.traceCode}}</view>
								<view class="uuid">质保时间：{{item.warrantyStartDate.split(' ')[0]}}至{{item.warrantyEndDate.split(' ')[0]}}</view>
								<view class="uuid">手机号码：{{item.customMobile}}</view>
							</view>
							<view class="state" :class="item.state"></view>
						</view>
						<view style="border: 0;background: none;">
								<u-empty :src="`/static/nodata.png`" icon-size="180" :text="noDataText" img-width="120" v-if="list.length==0 && status!='loading'" mode="list"></u-empty>
								<u-loadmore v-if="(total>=list.length&&list.length)||status=='loading'" :status="status" />
						</view>
				</view>
			</scroll-view>
		</view>  
	</view>
</template>

<script>
	import { getWarrantyQueryList } from "@/api/trace"
	export default {
		data() {
			return {
				queryWord: '',
				pageNo: 1,
				pageSize: 10,
				list: [],
				total: 0,
				status: 'loading',
				noDataText: '暂无数据',
			}
		},
		onLoad(opts) {
			this.queryWord = opts.mobile || ''
			this.pageInit()
		},
		methods: {
			pageInit(){
				this.status = 'loading'
				this.total = 0
				this.pageNo = 1
				uni.showLoading({
					mask:true,
					title: "正在查询..."
				})
				this.getRow()
			},
			// 查询列表
			getRow (pageNo) {
			  let _this = this
			  if (pageNo) {
			    this.pageNo = pageNo
			  }
			  // 查询条件
			  let params = {
			    pageNo: this.pageNo,
			    pageSize: this.pageSize,
				queryWord: this.queryWord
			  }
			  this.status = "loading"
			  getWarrantyQueryList(params).then(res => {
				if (res.status == 200) {
				  const retList = res.data.list
				  if(_this.pageNo>1){
					  _this.list = _this.list.concat(retList || [])
				  }else{
					  _this.list = retList || []
				  }
				  _this.total = res.data.count || 0
				} else {
				  _this.list = []
				  _this.total = 0
				  _this.noDataText = '暂无数据'
				}
				_this.status = _this.total>=_this.list.length ? "nomore" : 'loadmore'
				uni.hideLoading()
			  })
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if(this.list.length < this.total){
					this.pageNo += 1
					this.getRow()
				}else{
					this.status = "nomore"
				}
			},
			toDetail(item){
				uni.navigateTo({
					url: "/pagesA/qualityPolicy/orderDetail?id="+item.id
				})
			}
		}
	}
</script>

<style lang="less">
.pages{
	height: 100vh;
	background: #f8f8f8;
	overflow: auto;
	.search-box{
		padding: 0.6rem 1rem;
		background: #fff;
	}
	.uuid-listbox{
		flex-grow: 1;
		height: calc(100vh - 52px);
	}
	.uuid-list{
		> view{
			justify-content: space-between;
			border-bottom: 1px solid #eee;
			padding: 0.6rem 1rem;
			position: relative;
			background: #fff;
			margin-top: 0.2rem;
		}
		.state{
			background-repeat: no-repeat;
			background-size: 100%;
			background-position: center center;
			position: absolute;
			width: 4.5rem;
			height: 4.5rem;
			z-index: 1000;
			bottom: 0.5rem;
			right: 1rem;
		}
		.RUN{
			background-image: url(/pagesA/static/inhand.png);
		}
		.END{
			background-image: url(/pagesA/static/outof.png);
		}
		color: #666;
		.uuid-info{
			flex-grow: 1;
			line-height: 1.5rem;
			width: 50%;
		}
		.uuid{
			color: #000;
		}
		.uuid-img{
			width: 6rem;
			height: 6rem;
			border: 1px solid #eee;
			overflow: hidden;
			display: flex;
			align-items: center;
			margin-left: 0.5rem;
			image {
				max-width: 100%;
				max-height: 100%;
				background: #eaeaea;
			}
		}
	}
}
</style>
