<template>
	<view class="content">
		<view class="fenlei">
			<u-search class="flex-sub" placeholder="请输入物料名称" :focus="false" shape="square" v-model="materialName"
				:show-action="true" :animation="true" bg-color="#fff" color="#019c88" @search="onSearch()"
				action-text="搜索" @custom="onSearch()" @clear="clear">
			</u-search>
		</view>
		<!-- <mescroll-body :sticky="true" ref="mescrollRef" @up="upCallback"> -->
		<t-refresh ref="refresh" v-if="listData.length>0"  @refresh="refresh" @loadMore="loadMore" :loadingType="loadingType" :tPadding="0" >
			<template slot="content" >
				<!-- 数据列表 -->
				<view class="margin-sm padding-sm bg radius " v-for="(item,index) in listData" :key='index'>
					<view class="flex">
						<view style="width: 160upx;height: 160upx;border-radius: 20rpx;">
							<image :src="item.materiaImg?item.materiaImg:'../../static/logo.png'"
								style="width: 220upx;height: 160upx;border-radius: 20rpx;"></image>
						</view>
						<view class="u-flex-1 text-white margin-left-sm">
							<view style="color: #333333;font-size: 32upx;">{{item.recordDescribe}}</view>
							<view style="font-size: 26upx;color: #999999;margin-top: 16rpx;" class="">{{item.materialName}} - {{item.createTime}}</view>
						</view>
					</view>
				</view>
			</template>
		</t-refresh>
		
		<empty v-if="listData.length == 0"></empty>
		<!-- </mescroll-body> -->
	</view>
</template>

<script>
import empty from '@/components/empty.vue'
	import tRefresh from "@/components/t-refresh/t-refresh.vue"
	export default {
		components:{empty},
		data(){
			return{
				loadingType:0,
				page:1,
				limit:10,
				listData:[],
				createTime:'',
				materialName:'',
				artificerId:''
			}
		},
		onLoad(e) {
			console.log('物料记录');
			this.artificerId = uni.getStorageSync("artificerId");
			this.getData()
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getData();
		},
		methods:{
			getData(){
				var that=this;
				let data = {
					artificerId:that.artificerId,
					createTime:that.createTime,
					materialName:that.materialName,
					page: that.page,
					limit: that.limit,
				}
				that.$Request.getT('/app/material/selectMaterialRecord', data).then(res => {
					if (res.code == 0) {
						if (that.page == 1) that.listData = []; //如果是第一页需手动制空列表
						that.listData = [...that.listData, ...res.data.list]; //追加新数据
					} else {
						that.$queue.showToast(res.msg);
					}
				});
			},// 加载更多
			loadMore: async function() {
				this.loadingType=2
				//模拟数据请求
				setTimeout(()=>{
					console.log(1);
					this.page++;
					this.loadingType=0;
					let data = {
						artificerId:this.artificerId,
						createTime:this.createTime,
						materialName:this.materialName,
						page: this.page,
						limit: this.limit,
					}
					this.$Request.getT('/app/material/selectMaterialRecord', data).then(res => {
						if (res.code == 0) {
							if (this.page == 1) this.listData = []; //如果是第一页需手动制空列表
							if(res.data.totalPage >= this.page){
								this.listData = [...this.listData, ...res.data.list]; //追加新数据
							}else{
								this.$queue.showToast("暂无更多数据");
								this.page = res.data.totalPage
							}
							
						} else {
							this.$queue.showToast(res.msg);
						}
					});
				},1000)
			},
			clear(res) {
				let that = this
				that.listData = [];
				that.page = 1;
				that.materialName = '';
				that.getData()
			},
			onSearch(e) {
				// this.artificerName = e;
				this.page = 1;
				this.getData();
			},
		}
	}
</script>

<style scoped>
	.content{
		width: 100%;
		/* height: 100vh; */
		background-color: white;
		overflow: hidden;
	}
	 
	 .fenlei{
	 	display: flex;
	 	flex-direction: row;
	 	align-items: center;
	 	justify-content: space-between;
	 	margin-top: 10rpx;
	 	margin-bottom: 10rpx;
	 }
	.screen-button{
		// border: 1px solid #019c88;
		color: #019c88;
		padding:5rpx 10rpx;
		margin:0 18rpx;
		border-radius:6rpx;
	}
</style>