<template>
	<view>
		<view class="" id="header">
			<u-navbar :is-back="true" :background="{ backgroundColor: '#F5F5F5' }" title="寄样确认"></u-navbar>
			<view class="bg_fff hs-height-70 u-flex u-row-around">
				<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>
		<view class="content" :style="{ bottom: footerHeight + 'px', top: headerHeight + 'px' }">
			<!-- 内容 -->
			<view class="u-m-20 bg_fff" style="border-radius: 20rpx;">
				<view class="hs-height-100 u-flex u-row-between 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 class="footer" id="footer">
			<view class="footer-btn">
				<!--        /* 以下形式在微信小程序会无效，APP和H5有效 */-->
				<u-button @click="toAddItem" class="custom-style" shape="circle">确定</u-button>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import dom from '@/mixins/dom';
import fabricTitle from '@/components/hs-material-thumbnail/hs-material-thumbnail.vue';
export default {
	mixins: [dom],
	components: { fabricTitle },
	data() {
		return {
			// 总数
			total: 1,
			// 当前数
			sum: 1,
			abolishIds: [],
			tableData: {}
		};
	},
	computed: {
		mdmMaterial() {
			return {
				...this.tableData
			};
		}
	},
	onLoad(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;
						this.$refs.uToast.show({
							title: '操作成功'
						});
					} else {
						this.$refs.uToast.show({
							title: '操作失败'
						});
					}
				})
				.catch(err => {
					this.$refs.uToast.show({
						title: '操作失败'
					});
				});
		},
		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;
}
.color_00004 {
	color: rgba(0, 0, 0, 0.4);
}
.color_DDA973 {
	color: #dda973;
}
</style>
<style lang="scss" scoped>
.ds_flex {
	display: flex;
}
.width_30 {
	width: 30%;
}
.content {
	position: absolute;
	width: 100%;
	height: auto;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	overflow-y: auto;
}
.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;
	}
}
.custom-style {
	color: #fff;
	background: #000;
}
.footer {
	position: fixed;
	width: 100%;
	bottom: 0;
	z-index: 998;
	background: #fff;
	box-shadow: 0px -4rpx 6rpx 0px rgba(178, 182, 214, 0.1);
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	.footer-btn {
		padding: 20rpx 30rpx;
	}
}
</style>
