<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.proName }}</span>
			</view>
			<view>
				<h5>设备类型</h5>
				<span>{{ record.typeName }}</span>
			</view>
			<view>
				<h5>规格型号</h5>
				<span>{{ record.typeModelName }}</span>
			</view>
			<view>
				<h5>领用时间</h5>
				<span>{{ record.createTime }}</span>
			</view>
			<view>
				<h5>领用数量</h5>
				<span>{{ record.num }}</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dateVal: '',
				iptVal: '',
				recordList: []
			}
		},
		methods: {
			iconClick () {
				let that = this
				console.log(that.iptVal, that.dateVal);
				this.searchRecord(that.iptVal, that.dateVal[0], that.dateVal[1])
			},
			searchRecord (keyWord, startTime, endTime) {
				let that = this
				// 查询领用记录
				that.$api.searchFetchRecord.fetchRecordList({
					keyWord,
					startTime,
					endTime
				}).then(res => {
					console.log(res);
					if (res.data.code == 200) {
						that.recordList = res.data.data
					}
				}).catch(err => {
					console.log(err);
				})
			}
		},
		onShow() {
			let that = this
			that.searchRecord('', '', '')
		}
	}
</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>
