<template>
	<view class="apply-history view" :style="winHeight">
		<view class="status_bar" :style="navHeight"></view>
		<view class="apply-history-wrapper view">
			<component :style="componentHeight" :orderItem='detail' :is="currentTabComponent" @click="changeComponent" @submit="submit"></component>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex'
	import { initAppWantGoods } from '@/servers/purchaseList.js'

	import purchaseMain from '../purchase-main/purchase-main'
	import purchaseReceive from '../purchase-receive/purchase-receive'
	
	// #ifdef APP-PLUS
	const dom = weex.requireModule('dom');
	// #endif

	export default {
		components: {
			purchaseMain,
			purchaseReceive,
		},
		data() {
			return {
				currentTabComponent: 'purchaseMain',
				topHeight: '',
				detail: {},
				orderItem: {
					ticketTypeVal: '',
					deliveryPlanCode: '',
					deliveryPlanName: ' ',
					channelTypeCode: '',
					channelTypeName: ' ',
					marketPlaceCode: '',
					marketPlaceName: ' ',
					quantity: '',
					shuntTypeCode: '',
					shuntTypeName: ' ',
					shuntCode: '',
					shuntName: ' ',
					receiveUnitName: ' ',
					contactNumber: '',
					contacPerson: '',
					receiveAddress: '',
					shuntingCustomer: '',
					shuntingCustomerAdress: ''
				},
			}
		},
		computed: {
			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--quota', event, this.currentTabComponent)
			// uni.navigateBack({
			// 	delta: 1
			// })
			if (this.currentTabComponent === 'purchaseReceive') {
				uni.navigateTo({
					url: `/pages/purchase/purchase-apply`
				});
				this.currentTabComponent = 'purchaseMain'
				return false
			} else {
				uni.switchTab({
					url: "pages/purchase/purchase"
				})
			}
			return false
		},
		onLoad(option) {
			this.orderItem = {
				// ...this.orderItem,
				...JSON.parse(option.order)
			}
		},
		created() {
			this.getDetail()
		},
		methods: {
			async getDetail(){
				const res = await initAppWantGoods(this.orderItem)
				for(let k in res.data){res.data[k] = res.data[k]===null?'':res.data[k]}
				this.detail = {'shuntTypeName': ' ','shuntName': ' ','channelTypeName': '',...res.data}
			},
			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>
