<template>
	<view class="apply-history view" :style="winHeight">
		<view class="status_bar" :style="navHeight"></view>
		<view class="header-bg">
			<image class="header-bg-img" src="@/static/image/nav_bg@3x.png" mode="scaleToFill"></image>
		</view>
		<view class="apply-history-wrapper view">
			<view ref='top' id="top">
				<view class="steps">
					<view class="steps__row-container">
						<view class="steps__row-line-item">
							<view class="steps__row-line steps__row-line--before steps__row-line--hide"></view>
							<view class="steps__row-check">
								<i class="icon-dot icon-dot-active"></i>
							</view>
							<view class="steps__row-line steps__row-line--after steps__row-line--active"></view>
						</view>
						<view class="steps__row-line-item">
							<view class="steps__row-line steps__row-line--before"
								:class="{'steps__row-line--active':deliveryListBeforeLineShow}"></view>
							<view class="steps__row-check steps__row-circle">
								<i class="icon-dot" :class="{'icon-dot-active':deliveryListBeforeLineShow}"></i>
							</view>
							<view class="steps__row-line steps__row-line--after"
								:class="{'steps__row-line--active':!deliveryListAfterLineShow}"></view>
						</view>
						<view class="steps__row-line-item">
							<view class="steps__row-line steps__row-line--before"
								:class="{'steps__row-line--active':deliveryCheckLineShow}"></view>
							<view class="steps__row-check steps__row-circle">
								<i class="icon-dot " :class="{'icon-dot-active':deliveryCheckLineShow}"></i>
							</view>
							<view class="steps__row-line steps__row-line--after steps__row-line--hide"></view>
						</view>
					</view>
					<view class="steps__row-text-container">
						<view class="steps__row-text">
							<text class="steps__row-title">下单类型</text>
							<text class="steps__row-desc"></text>
						</view>
						<view class="steps__row-text">
							<text class="steps__row-title">订购产品</text>
							<text class="steps__row-desc"></text>
						</view>
						<view class="steps__row-text">
							<text class="steps__row-title">附件上传</text>
							<text class="steps__row-desc"></text>
						</view>
					</view>
				</view>
			</view>
			<component :style="componentHeight" :is="currentTabComponent" :key="currentTabComponent"
				:is-keep-data='isKeepData' @click="changeComponent" @submit="submit">
			</component>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex'

	import quotaOrder from './quota-order.nvue'
	import orderUpload from './order-upload.nvue'

	// #ifdef APP-PLUS
	const dom = weex.requireModule('dom');
	// #endif

	export default {
		components: {
			quotaOrder,
			orderUpload
		},
		data() {
			return {
				currentTabComponent: 'quotaOrder',
				topHeight: '',
				isKeepData: false
			}
		},
		computed: {
			deliveryListBeforeLineShow() {
				return this.currentTabComponent != 'deliveryPlan'
			},
			deliveryListAfterLineShow() {
				return this.currentTabComponent == 'quotaOrder'
			},
			deliveryCheckLineShow() {
				return this.currentTabComponent == 'orderUpload'
			},
			componentHeight() {
				console.log('componentHeight', `${this.sysinfo.safeArea.height - 44 - this.topHeight}px`, this.sysinfo);
				return {
					'height': `${this.sysinfo.safeArea.height - 44 - this.topHeight}px`
				}
			},
			winHeight() {
				return {
					'height': `${this.sysinfo.safeArea.height}px`
				}
			},
			navHeight() {
				return {
					'height': `${this.sysinfo.safeArea.top + 44}px`
				}
			},
			...mapState(['sysinfo'])
		},
		onReady() {
			// this.winHeight = `height:${this.sysinfo.safeArea.height}px`;
			// this.navHeight = `height:${this.sysinfo.safeArea.top + 44}px`;
			// #ifdef APP-NVUE
			let queryTabSize = uni.createSelectorQuery().in(this);
			queryTabSize.select('#top').boundingClientRect();
			queryTabSize.exec(rects => {
				console.log('rects', rects);
				rects.forEach((rect) => {
					this.topHeight = rect.height;
				})
			});
			// #endif

			// #ifdef H5
			uni.createSelectorQuery().in(this).select('#top').boundingClientRect((res) => {
				this.topHeight = res.height;
			}).exec();
			// #endif
		},
		onBackPress(event) {
			console.log('event--noquota', event, this.currentTabComponent)
			// uni.navigateBack({
			// 	delta: 1
			// })
			if (this.currentTabComponent === 'orderUpload') {
				uni.navigateTo({
					url: `/pages/no-quota/no-quota`
				});
				this.currentTabComponent = 'quotaOrder'
				return false
			} else {
				uni.switchTab({
					url: "pages/go-order/go-order"
				})
			}
			return false
		},
		methods: {
			changeComponent(com, status = false) {
				this.isKeepData = status
				this.currentTabComponent = com;
			},
			submit() {
				console.log('submit')
			}
		}

	}
</script>

<style lang="scss" scoped>
	.view {
		flex-direction: column;
	}

	.header-bg {
		height: 284rpx;
		margin-top: -88rpx;
	}

	.header-bg-img {
		width: 750rpx;
	}

	.apply-history {
		width: 750rpx;
		flex: 1;
		background: $background-color-1;
	}

	.apply-history-wrapper {
		margin-top: -164rpx;
	}

	.top {
		position: relative;
		background: $background-color-1;
	}

	.steps {
		flex: 1;
		flex-direction: column;
		margin: 28rpx 0 32rpx;
	}

	.steps__row-text-container {
		align-items: flex-end;
		flex-direction: row;
	}

	.steps__row-text {
		flex: 1;
		flex-direction: column;
	}

	.steps__row-title {
		font-size: 12px;
		line-height: 16px;
		text-align: center;
		color: $text-base-color;
	}

	.steps__row-container {
		margin-bottom: 16rpx;
	}

	.steps__row-line-item {
		flex: 1;
		height: 14px;
		line-height: 14px;
		align-items: center;
		justify-content: center;
	}

	.steps__row-line--before {
		transform: translateX(-1px);
	}

	.steps__row-line {
		flex: 1;
		height: 1px;
		background-color: #fff;
	}

	.icon-dot {
		width: 16rpx;
		height: 16rpx;
		background: #fff;
		border-radius: 50%;
	}

	.icon-dot-active {
		background: #ff1d32;
	}

	.steps__row-line--after {
		transform: translateX(1px);
	}

	.steps__row-line {
		flex: 1;
		height: 1px;
		background-color: #fff;
	}

	.steps__row-line--active {
		background: #ff3e61;
		border-radius: 1px;
	}

	.steps__row-circle {
		background: #E5E5E5;
	}

	.steps__row-line--hide {
		background-color: transparent;
	}
</style>
