<template>
	<view class="">
		<u-navbar :is-back="true" :background="{ backgroundColor: '#F5F5F5' }" title="我的面料"></u-navbar>
		<view class="content background_fff u-p-30">
			<!-- 正文内容 -->
			<u-sticky offset-top="15">
				<u-search @search="searchCli" class="" bg-color="#fff" border-color="#ececec" placeholder="请输入面料名称" :show-action="false" v-model="search"></u-search>
			</u-sticky>
			<view>
				<view class="u-m-t-30" v-for="item in fiabricList">
					<!-- 后期用公共组件 fabricTitle -->
					<hs-material-thumbnail :item="filterFiabric(item)"></hs-material-thumbnail>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import fabricTitle from '@/components/hs-material-thumbnail/hs-material-thumbnail.vue';
export default {
	components: { fabricTitle },
	data() {
		return {
			size: 5,
			search: '',
			fiabricList: [],
			total: 0
		};
	},
	onLoad() {
		this.materialList();
	},
	// 上拉加载更多
	onReachBottom() {
		if (this.total > this.fiabricList.length) {
			this.size = this.size + 5;
			this.materialList();
		}
	},
	methods: {
		filterFiabric(item) {
			return {
				...item,
				name: item.materialName,
				mdmMaterialComponent: item.materialElement,
				mdmMaterialClothWidth: item.materialDoorWidth,
				mdmMaterialCategory: item.materialCategory,
			};
		},
		searchCli() {
			this.size = 5;
			this.materialList();
		},
		// 我的面料
		materialList() {
			this.$http('orderTicket.materialList', {
				size: this.size,
				materialCode: '',
				materialName: this.search
			}).then(res => {
				let { code, data } = res;
				if (code == 200) {
					this.fiabricList = data.data;
					this.total = data.total;
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.background_fff {
	background: #fff;
}
</style>
