<template>
	<!-- 搜索界面 -->
	<view class="">
		<u-navbar :is-back="true" :background="{ backgroundColor: '#F5F5F5' }" title="">
			<view class="slot-wrap">
				<view class="search-wrap">
					<u-search @search="searchCli" bg-color="#fff" border-color="#d5aa7a" placeholder="请输入面料名称" :show-action="false" v-model="value"></u-search>
				</view>
			</view>
		</u-navbar>
		<!-- 列表 -->
		<view class="home_con_order u-p-l-30 u-p-r-30">
			<view class="u-m-t-30" v-for="item in fiabricList"><hs-material-thumbnail @click="detailFabric(item)" :item="filterFiabric(item)"></hs-material-thumbnail></view>
		</view>
	</view>
</template>

<script>
import home from './mixin/index.js';
export default {
	mixins: [home],
	data() {
		return {
			value: '',
			size: 5,
			total: 0,
			fiabricList: []
		};
	},
	// 上拉加载更多
	onReachBottom() {
		if (this.total > this.fiabricList.length) {
			this.size = this.size + 5;
			this.materialList();
		}
	},
	methods: {
		outCli() {
			this.$router.push('/pages/home/index');
		},
		searchCli() {
			this.size = 5;
			this.materialList();
		},
		// 我的面料
		materialList() {
			this.$http('orderTicket.materialList', {
				size: this.size,
				materialCode: '',
				materialName: this.value
			}).then(res => {
				let { code, data } = res;
				if (code == 200) {
					this.fiabricList = data.data;
					this.total = data.total;
				}
			});
		},
	}
};
</script>
<style lang="scss" scoped>
.slot-wrap {
	display: flex;
	align-items: center;
	flex: 1;
}
.search-wrap {
	margin: 0 20rpx;
	flex: 1;
}
</style>
