<template>
	<view>
		<statusBar />
		<!-- 展示图 -->
		<view class="home_top">
			<image src="../../static/images/home/exhibition@2x.png" style="width: 100%;height: 100%;" mode=""></image>
			<view class="home_top_out">
				<view class="out"><image style="width: 100%;height: 100%;" src="../../static/images/home/zuojiantou@2x.png" mode=""></image></view>
				<view @click="searchCli" class="search"><image style="width: 100%;height: 100%;" src="../../static/images/home/search@2x.png" mode=""></image></view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="home_btn">
			<view class="" v-for="item in buts">
				<image class="img" :src="item.img" mode=""></image>
				<view class="u-m-t-8">{{ item.name }}</view>
			</view>
		</view>
		<!-- 提示信息 -->
		<view v-if="abolishIds.length > 0" class="u-m-t-20 tips background_d5aa7a u-font-28">
			<view @click="entrustmentCli">
				{{ abolishIds.length }}个委托单
				<span class="color_fff">等待确认寄样，请尽快确认！</span>
			</view>
			<view class="color_fff btn" @click="sampleConfirm">寄样确认</view>
		</view>
		<!-- 具体内容  我的面料 -->
		<view class="home_con u-m-t-20">
			<view class="home_con_tit">
				<view>
					<span class="u-font-32">我的面料</span>
					<span style="line-height: 0;" class="u-m-l-10 color_000 u-font-24">MY FABRIC</span>
				</view>
				<view class="u-font-24 color_d5aa7a" @click="seeFabric">查看更多</view>
			</view>
			<view class="home_con_fabric">
				<view class="home_con_content u-m-t-24" @click="detailFabric(item)" v-for="item in fiabricList">
					<view class="home_con_content_font ov_hiden">{{ item.name }}</view>
				</view>
			</view>
		</view>
		<!-- 具体内容  我的订单 -->
		<view class="home_con u-m-t-20">
			<view class="home_con_tit">
				<view>
					<span class="u-font-32">我的订单</span>
					<span class="u-m-l-10 color_000 u-font-24">MY FABRIC</span>
				</view>
				<view class="u-font-24 color_d5aa7a">查看更多</view>
			</view>
			<view class="home_con_order">
				<view class="home_con_content_order u-m-t-24" v-for="item in 2">
					<image style="width: 160rpx;height: 160rpx;" src="../../static/images/home/2.png" mode=""></image>
					<view class="order_tit">
						<view class="u-font-32">加厚荷兰绒绒布布料备份</view>
						<view class="u-font-24 u-m-t-20">
							<span>针织</span>
							｜
							<span>180cm</span>
							｜
							<span>100%面备份</span>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import statusBar from '@/components/statusBar.vue';
export default {
	components: {
		statusBar
	},
	data() {
		return {
			quantityNum: 0,
			exceptionNum: 0,
			abolishIds: [],
			fiabricList: [
				{
					name: '加厚荷兰绒绒布布料布布料布布料布'
				},
				{
					name: '加厚荷兰绒绒布布料布布料布'
				},
				{
					name: '加厚荷兰绒绒布布料布布料布'
				},
				{
					name: '加厚荷兰绒绒布布料布'
				}
			],
			buts: [
				{
					name: '面料建模',
					img: '../../static/images/home/fabricModeling@2x.png'
				},
				{
					name: '款式委托',
					img: '../../static/images/home/styleEntrustment@2x.png'
				},
				{
					name: '检测委托',
					img: '../../static/images/home/styleManageme@2x.png'
				},
				{
					name: '款式管理',
					img: '../../static/images/home/testCommission@2x.png'
				}
			]
		};
	},
	onLoad() {
		this.toBeSelectedQuantity();
		this.orderTicketExceptionNum();
		this.abolishByIds();
	},
	methods: {
		toBeSelectedQuantity() {
			this.$http('plm.toBeSelectedQuantity', {}).then(res => {
				let { code, data } = res;
				if (code == 200) {
					this.quantityNum = data;
				}
			});
		},
		orderTicketExceptionNum() {
			this.$http('plm.orderTicketExceptionNum', {}).then(res => {
				let { code, data } = res;
				if (code == 200) {
					this.exceptionNum = data;
				}
			});
		},
		abolishByIds() {
			this.$http('plm.abolishByIds', {}).then(res => {
				let { code, data } = res;
				if (code == 200) {
					this.abolishIds = data;
				}
			});
		},
		searchCli() {
			this.$Router.push('/pages/home/search');
		},
		seeFabric() {
			this.$Router.push('/pages/home/fabricList');
		},
		detailFabric(data) {
			this.$Router.push('/pages/home/fabricDetails');
		},
		sampleConfirm() {
			this.$Router.push('/pages/home/sampleConfirmation');
		},
		entrustmentCli() {
			this.$Router.push('/pages/home/styleEntrustment');
		}
	}
};
</script>
<style lang="scss" scoped>
.statusBar {
	height: var(--status-bar-height);
	width: 100%;
	position: fixed;
	background-color: #fff;
	top: 0;
	z-index: 999;
}
.home_top {
	position: relative;
	width: 100%;
	height: 486rpx;
	.home_top_out {
		position: absolute;
		top: 20rpx;
		width: 100%;
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.out {
			width: 32rpx;
			height: 32rpx;
		}
		.search {
			width: 60rpx;
			height: 60rpx;
		}
	}
}
.tips {
	display: flex;
	height: 80rpx;
	align-items: center;
	justify-content: space-around;
	padding: 0 20rpx;
}
.home_btn {
	width: 100%;
	height: 180rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
	text-align: center;
	background: #fff;
}
.home_con {
	width: 100%;
	box-sizing: border-box;
	padding: 30rpx;
	background: #fff;
	.home_con_tit {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
	.home_con_fabric {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.home_con_order {
		// display: flex;
		// flex-wrap: wrap;
		// justify-content: space-between;
	}
}
.home_con_content {
	position: relative;
	width: 48%;
	height: 160rpx;
	border-radius: 8rpx;
	overflow: hidden;
	background-image: url(../../static/images/home/1@2x.png);
	.home_con_content_font {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		box-sizing: border-box;
		padding: 0 10rpx;
		background: rgba(255, 255, 255, 0.8);
	}
}
.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);
	}
}
.ov_hiden {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.btn {
	line-height: 50rpx;
	text-align: center;
	width: 120rpx;
	height: 50rpx;
	border: 1rpx solid #fff;
}
.img {
	width: 56rpx;
	height: 56rpx;
}
.color_000 {
	color: rgba(0, 0, 0, 0.2);
}
.color_d5aa7a {
	color: #d5aa7a;
}
.color_dda973 {
	color: #dda973;
}
.color_fff {
	color: #fff;
}
.background_d5aa7a {
	background: #d5aa7a;
}
</style>
