<template>
	<view class="product">
		<view class="header">
			<uni-datetime-picker type="date" :clear-icon="false" start-placeholder='BeginSingle'
				v-model="BeginSingle" @change='change' />
				至
			<uni-datetime-picker type="date" :clear-icon="false" start-placeholder='FinishSingle'
				v-model="FinishSingle" @change='change' />
		</view>
		<view class="search">
			<input class="uni-input" v-model="name" placeholder="请输入姓名"  @input="input"/>
			<view class="btn" @click="search()">搜索</view>
		</view>
		<view class="content">
			<view class="hint" v-if="data.length <= 0">
				暂无记录
			</view>
			<view class="list" v-for="(v,i) in data" :key="i">
				<view class="top">
					<view class="name">
						姓名: {{v.name}}
					</view>
					<view class="tlee">
						电话: {{v.phone}}
					</view>
				</view>
				<view class="bom">
					<view class="time">
						时间: {{v.opTime}}
					</view>
					<view class="code">
						瓶码: {{v.bottleId}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {record} from '../../api/product.js'
	export default {
		data() {
			return {
				BeginSingle: '2023-04-24', // 开始时间
				FinishSingle: '2023-04-24', // 结束时间
				name: '', // 搜索
				data:''
			};
		},
		created() {
			this.getData(this.BeginSingle,this.FinishSingle,this.name)
		},
		methods:{
			change(){
				this.getData(this.BeginSingle,this.FinishSingle,this.name)
			},
			async getData(beginTime,finishTime,name){
				uni.showLoading({
					title: '加载中'
				});
				const res = await record({
					startTime: beginTime,
					endTime: finishTime,
					name: name,
					num: 10,
					page: 1,
					accessToken:  uni.getStorageSync('tokenInfo'),
					account: uni.getStorageSync('account')
				})
				uni.hideLoading();
				this.data = res.data.list
			},
			// 搜索
			search(){
				this.getData(this.beginTime,this.finishTime,this.name)
			}
		}
	}
</script>

<style lang="scss">
.product{
	height: 100%;
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	.header{
		display: flex;
		align-items: center;
	}
	.search{
		height: 80rpx;
		display: flex;
		border: 1rpx solid #dfdfdf;
		margin: 20rpx 0;
		.uni-input{
			flex: 1;
			height: 100%;
			padding-left: 20rpx;
		}
		.btn{
			width: 20%;
			height: 100%;
			line-height: 80rpx;
			text-align: center;
			font-size: 30rpx;
			background-color: #aaaaaa;
		}
	}
	.content{
		flex: 1;
		overflow-y: scroll;
		.hint{
			text-align: center;
		}
		.list{
			border-bottom: 1px solid #dfdfdf;
			.top,.bom{
				display: flex;
				padding: 20rpx 0;
				view{
					width: 50%;
				}
			}
		}
	}

}
</style>
