<template>
	<view class="ps_relative">
		<u-navbar :is-back="true" :background="{ backgroundColor: '#F5F5F5' }" title="面料详情"></u-navbar>
		<!-- 背景图 -->
		<view class="back_img"></view>
		<view class="content u-p-30">
			<!-- 面料基本信息 -->
			<view class="fabric_tit u-p-30">
				<view class="color_DDA973 u-font-32">{{ materialInfo.materialName }}</view>
				<view class="u-font-24 u-m-t-20 color_fff08">
					<span class="u-m-r-10">{{ materialInfo.category }}</span>
					|
					<span class="u-m-l-10 u-m-r-10">{{ materialInfo.clothWidth }} cm</span>
					|
					<span class="u-m-l-10">{{ materialInfo.component }}</span>
				</view>
				<view class="u-m-t-20"><image v-for="item in materialInfo.materialPictureList" class="img_120 u-m-r-30" :src="item.fileCode" mode=""></image></view>
			</view>
			<!-- 建模信息 -->
			<view class="modeling_tit u-p-30">
				<view class="tit_date u-font-32">
					<span class="u-font-28 ft-wt-700">建模委托信息</span>
					<span class="u-font-24">
						{{ fabricObj.completionDate }}
						<u-icon size="28" class="u-m-l-5" color="#ccc" name="arrow-right"></u-icon>
					</span>
				</view>
				<view class="ds_flex jt_con_center fx_dir_column ht_136">
					<view class="ds_flex">
						<span class="width_30 color_00004">检测服务商</span>
						<!-- TODO  后期修改 -->
						<span class="flex-sub">{{ fabricObj.supplierId }}</span>
					</view>
					<view class="ds_flex u-m-t-8">
						<span class="width_30 color_00004">项目价格</span>
						<span class="flex-sub">{{ fabricObj.price }}元</span>
					</view>
				</view>
			</view>
			<!-- 检测委托信息 -->
			<view class="modeling_tit bd_rad_8 u-m-t-30 u-p-30">
				<view class="tit_date">
					<span class="u-font-28 ft-wt-700">检测委托信息</span>
					<span class="u-font-24">
						2021年12月12日
						<u-icon size="28" class="u-m-l-5" color="#ccc" name="arrow-right"></u-icon>
					</span>
				</view>
				<view class="ds_flex jt_con_center fx_dir_column ht_136">
					<view class="ds_flex">
						<span class="width_30 color_00004">检测服务商</span>
						<span class="flex-sub">上海天飞智慧科技有限公司</span>
					</view>
					<view class="ds_flex u-m-t-8">
						<span class="width_30 color_00004">项目价格</span>
						<span class="flex-sub">1200.32元</span>
					</view>
				</view>
			</view>
			<!-- 已提交款式 -->
			<view class="modeling_tit bd_rad_8 u-m-t-30 u-p-30">
				<view class="u-font-28 ft-wt-700 u-m-b-24">已提交款式</view>
				<u-search bg-color="#fff" border-color="#ececec" placeholder="请输入面料名称" :show-action="false" v-model="searchFabric"></u-search>
				<view class="ds_flex fx_wrap jt_con_sp_between txt_center">
					<view @click="seeStyleDetails(item)" v-for="(item, index) in tableList" class="u-m-t-30">
						<image class="bd_dashed img_300" src="../../static/images/home/yanyi1@2x.png" mode=""></image>
						<view class="u-font-24">卡其色长款风衣</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchFabric: '',
			fabricObj: {},
			id: '',
			tableList: [1, 2, 3, 4, 5]
		};
	},
	onLoad(option) {
		this.id = option.id;
		this.materialDetail();
	},
	computed: {
		materialInfo() {
			return this.fabricObj.materialInfo || {};
		}
	},
	methods: {
		seeStyleDetails(item) {
			this.$Router.push('/pages/home/styleDetails');
		},
		materialDetail() {
			this.$http('orderTicket.materialDetail', this.id).then(res => {
				let { code, data } = res;
				if (code === 200) {
					this.fabricObj = data;
				}
			});
		}
	}
};
</script>
<style>
.width_30 {
	width: 30%;
}
.ht_136 {
	height: 136rpx;
}
.color_DDA973 {
	color: #dda973;
}
.color_6F6F72 {
	color: #6f6f72;
}
.color_fff08 {
	color: rgba(255, 255, 255, 0.8);
}
.color_00004 {
	color: rgba(0, 0, 0, 0.4);
}
.ft-wt-700 {
	font-weight: 700;
}
.background_fff {
	background: #fff;
}
.ds_flex {
	display: flex;
}
.fx_wrap {
	flex-wrap: wrap;
}
.fx_dir_column {
	flex-direction: column;
}
.jt_con_center {
	justify-content: center;
}
.jt_con_sp_between {
	justify-content: space-between;
}
.bd_rad_8 {
	border-radius: 8rpx !important;
}
.txt_center {
	text-align: center;
}
.ps_relative {
	position: relative;
}
.ps_absolute {
	position: absolute;
}
.bd_dashed {
	position: relative;
}
.bd_dashed:after {
	border-width: 1px;
}
.bd_dashed-bottom:after,
.bd_dashed-left:after,
.bd_dashed-right:after,
.bd_dashed-top-bottom:after,
.bd_dashed-top:after,
.bd_dashed:after {
	content: ' ';
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
	box-sizing: border-box;
	transform-origin: 0 0;
	width: 199.8%;
	height: 199.7%;
	transform: scale(0.5, 0.5);
	border: 1px dashed #e4e7ed;
	z-index: 2;
}
</style>
<style scoped lang="scss">
.fabric_tit {
	width: 100%;
	border-radius: 8rpx 8rpx 0 0;
	background: rgba(0, 0, 0, 0.6);
}
.modeling_tit {
	width: 100%;
	background: #fff;
	border-radius: 0 0 8rpx 8rpx;
}
.tit_date {
	width: 100%;
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1rpx solid #ccc;
}
.content {
	position: absolute;
	top: 200rpx;
}
.back_img {
	position: absolute;
	width: 100%;
	height: 600rpx;
	background-image: url(../../static/images/home/exhibition.png);
}
.img_120 {
	width: 120rpx;
	height: 120rpx;
}
.img_300 {
	width: 300rpx;
	height: 300rpx;
}
</style>
