<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">
			<view class="home_con_content_order u-m-t-30" v-for="item in fiabricList">
				<image style="width: 160rpx;height: 160rpx;" src="../../static/images/home/2.png" mode=""></image>
				<view class="order_tit">
					<view class="u-font-32">{{ item.materialName }}</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.materialDoorWidth }}</span>
						|
						<span class="u-m-l-10">{{ item.materialElement }}</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			value: '',
			size: 5,
			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;
}
.home_con_order {
	padding: 0 30rpx;
}
.home_con_content_order {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 160rpx;
	border-radius: 8rpx;
	overflow: hidden;
	.order_tit {
		flex-direction: column;
		display: flex;
		justify-content: center;
		padding: 20rpx;
		flex: 1;
		height: 100%;
		background: rgba(172, 166, 166, 0.5);
	}
}
</style>
