<template>
	<view>
		<view class="page-cont">
			<!-- <uni-datetime-picker style="margin-bottom: 15rpx;" v-model="dateVal" type="daterange"/> -->
			<uni-easyinput suffixIcon="search" v-model="iptVal" placeholder="请输入关键字" @iconClick="iconClick"></uni-easyinput>
		</view>
		<view 
			class="single-record"
			v-for="(record, index) in recordList"
			:key="index"
		>
			<h4 style="margin-bottom: 15rpx; font-size: 16px;">{{ record.unitName }}</h4>
			<view>
				<h5>协议号</h5>
				<span>{{ record.agreementCode }}</span>
			</view>
			<view>
				<h5>往来单位</h5>
				<span>{{ record.unitName }}</span>
			</view>
			<view>
				<h5>工程名称</h5>
				<span>{{ record.proName }}</span>
			</view>
			<view>
				<h5>机具名称</h5>
				<span>{{ record.typeName }}</span>
			</view>
			<view>
				<h5>规格名称</h5>
				<span>{{ record.typeModelName }}</span>
			</view>
			<view>
				<h5>单位</h5>
				<span>{{ record.unit }}</span>
			</view>
			<view>
				<h5>租赁数量</h5>
				<span>{{ record.outNum }}</span>
			</view>
			<view>
				<h5>归还数量</h5>
				<span>{{ record.backNum }}</span>
			</view>
			<view>
				<h5>在用数量</h5>
				<span>{{ record.usNum }}</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageNum: 1,
				pageSize: 10,
				pageTotal: 0,
				dateVal: '',
				iptVal: '',
				recordList: []
			}
		},
		methods: {
			iconClick () {
				let that = this
				console.log(that.iptVal);
				that.recordList = []
				this.searchRecord(that.iptVal)
			},
			searchRecord (keyWord) {
				let that = this
				// 查询工程记录
				that.$api.searchProjUsing.fetchProjUsingList({
					keyWord,
					pageNum: that.pageNum,
					pageSize: that.pageSize
				}).then(res => {
					console.log(res);
					if (res.data.code == 200) {
						that.pageTotal = res.data.data.total
						that.recordList = [...that.recordList, ...res.data.data.rows]
					}
				}).catch(err => {
					console.log(err);
				})
			}
		},
		onShow() {
			let that = this
			that.searchRecord(that.iptVal)
		},
		onReachBottom() {
			if (this.recordList.length >= this.pageTotal) return;
			this.pageNum++
			this.searchRecord(this.iptVal)
		}
	}
</script>

<style lang="scss">
	.page-cont{
		width: 90%;
		margin: 40rpx auto;
	}
	.single-record{
		width: 100%;
		display: flex;
		flex-direction: column;
		border-bottom: 1px solid #CDCDCD;
		box-sizing: border-box;
		padding: 20rpx;
		view{
			width: 100%;
			margin-bottom: 15rpx;
			display: flex;
			align-items: center;
			h5{
				width: 30%;
				font-size: 14px;
				color: #B0B0B0;
			}
			span{
				font-size: 14px;
			}
		}
		view:last-child{
			margin-bottom: 0;
		}
	}
	.single-record:last-child{
		border-bottom: 0;
	}
</style>
