<template>
	<view class="lists">
		<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="main">
			<view class="middle view">
				<view class="text-block">
					<text class="middle-date">品牌</text>
					<view class="middle-date-des uni-list picker-year">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<text class="uni-input">{{clueDetail.wlybrand_text}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="text-block">
					<text class="middle-date">提报</text>
					<view class="middle-date-des uni-list picker-year">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<text class="uni-input">{{clueDetail.report_type_text}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="text-block">
					<text class="middle-date">门店</text>
					<view class="middle-date-des uni-list picker-year">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<text class="uni-input">{{clueDetail.cust_name}}</text>
								<!-- <text class="uni-input">{{clueDetail.cust_name}}-{{clueDetail.customer_type_text}}</text> -->
							</view>
						</view>
					</view>
				</view>
				<view class="text-block">
					<text class="middle-date">营销单元</text>
					<view class="middle-date-des uni-list picker-year">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<text class="uni-input">{{clueDetail.sal_center_name}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="text-block">
					<text class="middle-date">业务员</text>
					<view class="middle-date-des uni-list picker-year">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<text class="uni-input">{{clueDetail.sales_emp_name}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="text-block">
					<text class="middle-date">创建年月</text>
					<view class="middle-date-des uni-list picker-year">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<text class="uni-input">{{clueDetail.gjahr}}-{{clueDetail.monat}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="text-block">
					<text class="middle-date">计划类型</text>
					<view class="middle-date-des uni-list picker-year">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<text class="uni-input">{{clueDetail.plan_type_text}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="text-block">
					<text class="middle-date">总计划量</text>
					<view class="middle-date-des uni-list picker-year">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<text class="uni-input">{{clueDetail.total_qty}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="text-block">
					<text class="middle-date">初始计划量</text>
					<view class="middle-date-des uni-list picker-year">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<text class="uni-input">{{clueDetail.initplan_qty}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="text-block">
					<text class="middle-date">已开票计划量</text>
					<view class="middle-date-des uni-list picker-year">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<text class="uni-input">{{clueDetail.billing_qty}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="text-block">
					<text class="middle-date">已占用计划量</text>
					<view class="middle-date-des uni-list picker-year">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<text class="uni-input">{{clueDetail.atp_qty}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="text-block">
					<text class="middle-date">剩余可用计划量</text>
					<view class="middle-date-des uni-list picker-year">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<text class="uni-input">{{clueDetail.remain_qty}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="text-block">
					<text class="middle-date">总计划额</text>
					<view class="middle-date-des uni-list picker-year">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<text class="uni-input">{{clueDetail.total_amt}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="text-block">
					<text class="middle-date">初始计划额</text>
					<view class="middle-date-des uni-list picker-year">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<text class="uni-input">{{clueDetail.initplan_amt}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="text-block">
					<text class="middle-date">已扣减计划额</text>
					<view class="middle-date-des uni-list picker-year">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<text class="uni-input">{{clueDetail.billing_amt}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="text-block">
					<text class="middle-date">已占用计划额</text>
					<view class="middle-date-des uni-list picker-year">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<text class="uni-input">{{clueDetail.atp_amt}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="text-block">
					<text class="middle-date">剩余可用计划额</text>
					<view class="middle-date-des uni-list picker-year">
						<view class="uni-list-cell">
							<view class="uni-list-cell-db">
								<text class="uni-input">{{clueDetail.remain_amt}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-area"></view>
	</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	import {
		apiGetClueInfo,
	} from '@/servers/breakwords.js'

	export default {
		data() {
			return {
				condition: {
					id: ''
				},
				clueDetail: {},
			}
		},
		computed: {
			...mapState(['sysinfo']),
			navHeight() {
				return {
					'height': `${this.sysinfo.safeArea.top + 44}px`
				}
			},

		},
		onLoad(option) {
			this.clueDetail = JSON.parse(option.planDetail)
			uni.setNavigationBarTitle({
				title: this.clueDetail.plan_number
			});
		},
		methods: {
		}
	}
</script>

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

	.status_bar {
		height: var(--status-bar-height);
	}

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

	.header-bg-img {
		width: 100%;
	}

	.lists {
		position: relative;
		flex-direction: column;
		background: #f0f4f5;
	}

	.main {
		position: relative;
		overflow-y: scroll;
		flex-direction: column;
		margin-top: -164rpx;
		border-radius: 16rpx;
		padding: 0 16rpx;
	}

	.middle {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 0 48rpx;
		margin-bottom: 32rpx;
	}

	.text-block {
		display: flex;
		overflow: hidden;
		height: 96rpx;
		border-bottom: 1px solid #f4f5f6;
	}

	.text-block-last {
		margin-bottom: 0;
		border-bottom: 0;
	}

	.no-border {
		border: 0;
	}

	.middle-date {
		flex: 3;
		font-size: 24rpx;
		line-height: 96rpx;
		color: #999;
		margin-bottom: 8rpx;
	}

	.middle-date-des {
		align-items: center;
		flex: 5.5;
		font-size: 24rpx;
		color: $text-base-color;
		height: 96rpx;
		line-height: 96rpx;
	}

	.uni-input-placeholder {
		color: #DBDBDB;
	}

	.picker-year {
		position: relative;
		align-items: center;
		// padding-left: 14rpx;
	}

	.uni-list-cell {
		flex: 1;
		height: 100%;
		padding-right: 52rpx;
	}

	.uni-list-cell-db {
		flex: 1;
		height: 100%;
	}

	.picker-block {
		flex: 1;
		height: 100%;
	}

	.icon-arrow {
		position: absolute;
		right: 22rpx;
		top: 40rpx;
		width: 7px;
		height: 10px;
		z-index: 10;
	}

	.icon-search {
		width: 11px;
		height: 12px;
		top: 36rpx;
	}

	.remark {
		margin-bottom: 24px;
	}

	.remark-text {
		flex: 1;
		height: 180rpx;
		background: #f5f6f7;
		font-size: 24rpx;
		border-radius: 4px;
		padding: 12rpx 18rpx;
	}


	.diy-entry {
		width: 140rpx;
		height: 68rpx;
		background: #f8f8f8;
		border-radius: 8px;
		line-height: 68rpx;
		border: 1px solid #f8f8f8;
		margin-left: 16rpx;
	}

	.diy-icon {
		width: 24rpx;
		height: 20rpx;
		margin-right: 8rpx;
	}

	.diy-entry-text {
		color: #333;
		font-size: 12px;
	}

	.planout-block-item {
		margin-top: 48rpx;
	}

	.upload-area {
		padding-top: 32rpx;
		padding-bottom: 32rpx;

		.title {
			font-size: 28rpx;
			color: #333;
			font-weight: 500;
		}

		.pic-lists {
			margin-top: 24rpx;
			margin-bottom: 20rpx;
		}

		.des {
			color: #1C84FF;
			font-size: 20rpx;
		}
	}



	.bottom-area {
		height: 140rpx;
		margin-top: 12rpx;
	}
</style>
