<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 -->
					<view class="home_con_content_order" @click="click">
						<image style="width: 100%;height: 160rpx;" src="@/static/images/home/1@2x.png" mode=""></image>
						<view class="order_tit">
							<view class="u-flex justify-between u-font-32">
								<span class="color_DDA973 u-line-1">{{ item.materialName }}</span>
					   <span><u-icon size="24" color="#fff" name="arrow-right"></u-icon></span>
							</view>
							<view class="u-font-24 u-m-t-20 color_6F6F72">
								<span class="u-m-r-10">{{ item.materialCategory }}</span>
								|
								<span class="u-m-l-10 u-m-r-10">{{ item.materialClothWidth }}cm</span>
								|
					  	<span class="u-m-l-10">{{ item.materialComponent }}</span>
							</view>
						</view>
					</view>
				</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: {
		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>
