<template>
	<view class="ps_relative">
		<u-navbar :is-back="true" :background="{ backgroundColor: '#F5F5F5' }" title="寄样确认"></u-navbar>
		<view class="content">
			<view class="bg_fff sample_sum">
				<view @click="previousCli" :class="{ color_ccc: sum == 1 }">上一个</view>
				<view class="">{{ sum }}/{{ total }}</view>
				<view @click="nextCli" :class="{ color_ccc: sum == total }">下一个</view>
			</view>
			<!-- 内容 -->
			<view class="u-m-20 bg_fff" style="border-radius: 20rpx;">
				<view class="sample_title u-p-l-30 u-p-r-30">
					<span class="u-font-32">委托单信息</span>
					<span class="u-font-28">委托发布日期：{{ tableData.releaseDate }}</span>
				</view>
				<view class="bd_split_line"></view>
				<view class="sample_info u-p-l-30 u-p-r-30 u-p-b-30">
					<view class="u-font-32 u-m-t-24 u-m-b-20">寄样信息</view>
					<view class="u_flex justify-center flex-direction">
						<view class="ds_flex u-m-t-10">
							<view class="width_30 color_00004">联系人</view>
							<view class="flex-sub">小明</view>
						</view>
						<view class="ds_flex u-m-t-10">
							<view class="width_30 color_00004">手机号</view>
							<view class="flex-sub">15757159237</view>
						</view>
						<view class="ds_flex u-m-t-10">
							<view class="width_30 color_00004">寄样地址</view>
							<view class="flex-sub">广州市海珠区天天街道众生创汇蓝天大厦b</view>
						</view>
					</view>
					<view class="">
						<view class="u-border-top u-font-32 u-m-t-24 u-p-t-24">
							<span class="u-font-28">所选面料</span>
							<span class="u-font-24 color_DDA973">（新建面料，已同步面料建模）</span>
						</view>
						<view class="u-m-t-30">
							<hs-material-thumbnail :item="mdmMaterial"></hs-material-thumbnail>
						</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 {
			// 总数
			total: 1,
			// 当前数
			sum: 1,
			abolishIds: [],
			tableData: {}
		};
	},
	computed: {
		mdmMaterial() {
			return {
				// name: this.tableData.mdmMaterialName,
				...this.tableData
			};
		}
	},
	onLoad(option) {
		console.log(option);
		this.abolishIds = option.abolishIds.split(',');
		this.total = this.abolishIds.length;
		this.detail();
	},
	methods: {
		detail() {
			let i = this.sum - 1;
			this.$http('orderTicket.detail', this.abolishIds[i]).then(res => {
				let { code, data } = res;
				if (code === 200) {
					this.tableData = data;
				}
			});
		},
		previousCli() {
			if (this.sum == 1) return;
			this.sum == --this.sum;
			this.detail();
		},
		nextCli() {
			if (this.sum == this.total) return;
			this.sum == ++this.sum;
			this.detail();
		}
	}
};
</script>
<style>
.bg_fff {
	background: #fff;
}
.color_ccc {
	color: #ccc;
}
</style>
<style lang="scss" scoped>
@import './index.css';
.sample_sum {
	display: flex;
	justify-content: space-around;
	height: 70rpx;
	align-items: center;
}
.sample_title {
	height: 100rpx;
	align-items: center;
	display: flex;
	justify-content: space-between;
}
.bd_top {
	border-top: 1px solid #f6f6f6;
}
.bd_split_line {
	width: 90%;
	border-top: 1px solid #f6f6f6;
	margin: auto;
	position: relative;
	&::before {
		content: ' ';
		position: absolute;
		left: -50rpx;
		top: -15rpx;
		display: block;
		width: 30rpx;
		height: 30rpx;
		background: #f6f6f6;
		border-radius: 100rpx;
	}
	&::after {
		content: ' ';
		position: absolute;
		right: -50rpx;
		top: -15rpx;
		display: block;
		width: 30rpx;
		height: 30rpx;
		background: #f6f6f6;
		border-radius: 100rpx;
	}
}
</style>
