<template>
	<view class="apply-history view" :style="winHeight">
		<view class="status_bar" :style="navHeight"></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" @click="changeComponent" @submit="submit"></component>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex'

	import deliveryPlan from './apply-delivery-plan'
	import deliveryList from './apply-delivery-list'
	import deliveryCheckIn from './apply-delivery-checkin'
	
	// #ifdef APP-PLUS
	const dom = weex.requireModule('dom');
	// #endif

	export default {
		components: {
			deliveryPlan,
			deliveryList,
			deliveryCheckIn
		},
		data() {
			return {
				currentTabComponent: 'deliveryPlan',
				topHeight:''
			}
		},
		computed: {
			deliveryListBeforeLineShow() {
				return this.currentTabComponent != 'deliveryPlan' 
			},
			deliveryListAfterLineShow() {
				return this.currentTabComponent == 'deliveryCheckIn' 
			},
			deliveryCheckLineShow(){
				return this.currentTabComponent == 'deliveryCheckIn' 
			},
			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() {
			uni.navigateBack({
				delta: 1
			})
		},
		methods: {
			changeComponent(com) {
				this.currentTabComponent = com;
			},
			submit() {
				console.log('submit')
			}
		}

	}
</script>

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

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

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

	.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: #999;
	}

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

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

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

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

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

	.steps__row-circle {
		background: #E5E5E5;
	}

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