<template>
	<view class="mainBox">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="盘点工单详情" @clickLeft="back"></uni-nav-bar>
		<view class="view-container">
			<DetailView :baseInfo="infoData" :list="reportList" />
		</view>
	</view>
</template>

<script>
	import {
		getOrderInfoByPlanId,
		getReportList
	} from '@/api/warehouseManagement'
	import DetailView from './DetailView.vue'
	export default {
		components: {
			DetailView
		},
		data() {
			return {
				activeName: 1,
				baseInfo: {},
				reportList: [],
				infoData: {}
			}
		},
		onLoad({
			id,
			planId
		}) {
			if (id && planId) {
				this._getDetail(id, planId)
			}
		},
		methods: {
			async _getDetail(id, planId) {
				const data = await getOrderInfoByPlanId({
					planOrderId: id,
					planId: planId
				})
				const res = await getReportList({
					planOrderId: id,
					planId: planId,
					status: 1
				})
				console.log()
				this.reportList = res
				this.infoData = data
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabs {
		position: fixed;
		width: 100vw;
		background-color: rgba(242, 242, 242, 0.792156862745098);
		padding-top: 20rpx;

		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 20rpx;

		.tab-item {
			width: 200rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			&.active {
				background: linear-gradient(180deg, rgba(75, 121, 2, 1) 0%, rgba(255, 255, 255, 1) 12%);
			}
		}
	}

	.view-container {
		padding-bottom: 20rpx;
	}

	.footer {
		position: fixed;
		bottom: 0;
		width: 100vw;
		left: 0;

		.verify-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx;

			/deep/.u-input {
				border: 1rpx solid #ccc;
			}

			.dept {
				margin-right: 30rpx;
			}
		}
	}
</style>