<template>
	<view class="lists">
		<scroll-view class="scroll-area view" scroll-y="true">
			<view class="block-detal">
				<view class="block-detal-item">
					<text class="detal-item-label">营销单元</text>
					<text class="detal-item-value">{{quotaOrder.INFO.Marketing}}</text>
				</view>
				<view class="block-detal-item">
					<text class="detal-item-label">业务员</text>
					<text class="detal-item-value">{{quotaOrder.INFO.ZZFLD000004_DSCR}}</text>
				</view>
				<view class="block-detal-item">
					<text class="detal-item-label">创建日期</text>
					<text class="detal-item-value">{{quotaOrder.INFO.POSTING_DATE}}</text>
				</view>
				
				<view class="block-detal-item">
					<text class="detal-item-label">合计金额</text>
					<text class="detal-item-value">{{intotalComputed}}</text>
				</view>
				<view class="block-detal-item block-detal-item-last">
					<text class="detal-item-label">备注</text>
					<!-- <text class="detal-item-value">{{quotaOrder.INFO.ZZFLD000028}}</text> -->
				</view>
				<text class="remark-text">
					{{quotaOrder.INFO.ZZFLD000028}}
				</text>
			</view>
			<view class="banner-title">计划内</view>
			<view class="block-detal" v-for="item in quotaOrder.ITEM_INNER">
				<view class="block-detal-item">
					<text class="detal-item-label">产品名称</text>
					<text class="detal-item-value">{{item.DESCRIPTION}}</text>
				</view>
				<view class="block-detal-item">
					<text class="detal-item-label">数量（件）</text>
					<text class="detal-item-value">{{item.quantity}}</text>
				</view>
				<view class="block-detal-item">
					<text class="detal-item-label">单价</text>
					<text class="detal-item-value">{{item.NET_PRICE}}</text>
				</view>
				<view class="block-detal-item">
					<text class="detal-item-label">小计</text>
					<text class="detal-item-value">{{item.NET_VALUE}}</text>
				</view>
			</view>
			<view class="banner-title" v-if="quotaOrder.ITEM_OUTER.length > 0">计划外</view>
			<view class="block-detal" v-for="item in quotaOrder.ITEM_OUTER">
				<view class="block-detal-item">
					<text class="detal-item-label">产品名称</text>
					<text class="detal-item-value">{{item.DESCRIPTION}}</text>
				</view>
				<view class="block-detal-item">
					<text class="detal-item-label">数量（件）</text>
					<text class="detal-item-value">{{item.quantity}}</text>
				</view>
				<view class="block-detal-item">
					<text class="detal-item-label">单价</text>
					<text class="detal-item-value">{{item.NET_PRICE}}</text>
				</view>
				<view class="block-detal-item">
					<text class="detal-item-label">小计</text>
					<text class="detal-item-value">{{item.NET_VALUE}}</text>
				</view>
			</view>
			<view class="banner-title" v-if="quotaOrder.USE&&quotaOrder.USE.length>0">占用销售计划明细</view>
			<view class="block-detal" v-for="item in quotaOrder.USE">
				<view class="block-detal-item">
					<text class="detal-item-label">销售计划编号</text>
					<text class="detal-item-value">{{item.ZZFLD00000C}}</text>
				</view>
				<view class="block-detal-item">
					<text class="detal-item-label">计划类型</text>
					<text class="detal-item-value">{{item.ZZFLD00000D_TEXT}}</text>
				</view>
				<view class="block-detal-item">
					<text class="detal-item-label">月份</text>
					<text class="detal-item-value">{{item.ZZFLD00000G}}</text>
				</view>
				<view class="block-detal-item">
					<text class="detal-item-label">年度</text>
					<text class="detal-item-value">{{item.ZZFLD00000F}}</text>
				</view>
				<view class="block-detal-item">
					<text class="detal-item-label">总计划量</text>
					<text class="detal-item-value">{{item.ZZFLD00000H}}</text>
				</view>
				<view class="block-detal-item">
					<text class="detal-item-label">本次占用计划数量</text>
					<text class="detal-item-value">{{item.ZZFLD00000R}}</text>
				</view>
				<view class="block-detal-item">
					<text class="detal-item-label">剩余可用计划量</text>
					<text class="detal-item-value">{{item.ZZFLD00000P}}</text>
				</view>
			</view>
			<view class="middle summary">
				<view class="summary-block">
					<image class="icon_plan" src="@/static/image/icon_plan@3x.png" mode=""></image>
					<text class="upload-text">附件上传</text>
				</view>
				<view class="upload-block">
					<uni-file-picker ref='files' limit="4" :auto-upload='false' v-model="fileList" file-mediatype="image"
						:imageStyles="imageStyles" @select="select" @progress="progress" @success="success" @fail='fail'>
						<text>+</text>
					</uni-file-picker>
				</view>
			</view>

			<view class="bottom-area"></view>

			<view class="bottom">
				<button class="btn btn-l" type="default" @tap="preStep">
					<text class="btn-text btn-text-l">上一步</text>
				</button>
				<button class="btn" type="default" @tap="submit">
					<text class="btn-text">提交</text>
				</button>
			</view>

			<uni-popup ref="popup" background-color="#fff" @change="change" :mask-click='false'>
				<view class="popup-content">
				<view class="popup-content-head">
					<image class="popup-content-head__icon" src="@/static/image/order_success@3x.png" mode=""></image>
				</view>
				<view class="popup-content-content">
					<text class="popup-content-content__title">提交成功</text>
					<text class="popup-content-content__title2">订单号：{{ orderInfo.OBJECT_ID }}</text>
				</view>
				<view class="popup-content-foot">
					<text class="popup-content-foot__btn" @click="fnBackHome()">回到首页</text>
					<text class="popup-content-foot__btn popup-content-foot__sure"
						@click="fnCheckOrderByNo()">查看订单</text>
				</view>
			</view>
			</uni-popup>
		</scroll-view>
	</view>
</template>

<script>
	import {
		apiUpdateQuotaOrder
	} from '@/servers/quotaOrder.js'

	import {
		mapMutations,
		mapState
	} from 'vuex'

	export default {
		data() {
			return {
				orderNo: '',
				orderInfo: {
					OBJECT_ID: ''
				},
				fileList: [],
			}
		},
		computed: {
			...mapState(['quotaOrder', 'userInfo']),
			imageStyles() {
				return {
					width: 64,
					height: 64,
					border: {
						radius: '50%'
					}
				}
			},
			intotalComputed() {
				let money = 0
				this.quotaOrder.ITEM_INNER.length > 0 && this.quotaOrder.ITEM_INNER.forEach((item) => {
					money += item.NET_VALUE * 1
				})
				this.quotaOrder.ITEM_OUTER.length > 0 && this.quotaOrder.ITEM_OUTER.forEach((item) => {
					money += item.NET_VALUE * 1
				})
				return money.toFixed(2)
			}
		},
		methods: {
			async updateQuotaOrder() {
				let res1 = null
				try{
					const {
						INFO,
						ITEM_INNER,
						ITEM_OUTER,
						ATTACHMENT
					} = this.quotaOrder
					const params = {
						"USER_BP": this.userInfo.code,
						"ROLE": 'WLY001',
						"MODE": "SAVE",
						INFO,
						ITEM_INNER,
						ITEM_OUTER,
						// "item_d": [],
						// "USE": [],
						ATTACHMENT
					}
					res1 = await apiUpdateQuotaOrder(params)
					if(res1.MSGTYPE !== 'S'){
						return
					}
				}catch(e){
					//TODO handle the exception
				}
				try{
					const {
						ATTACHMENT: ATTACHMENT2,
						HISTORY,
						INFO: INFO2,
						ITEM_INNER: ITEM_INNER2,
						ITEM_OUTER: ITEM_OUTER2,
						USE
					} = res1.DATA
					const params2 = {
						"USER_BP": this.userInfo.code,
						"ROLE": 'WLY001',
						"MODE": "SUBMIT",
						INFO: INFO2,
						'ITEM_INNER': ITEM_INNER2,
						"ITEM_OUTER": ITEM_OUTER2,
						// "item_d": [],
						// "USE": USE,
						"ATTACHMENT": ATTACHMENT2
					}
					const res2 = await apiUpdateQuotaOrder(params2)
					if(res2.MSGTYPE !== 'S'){
						return
					}
					console.log('updateQuotaOrder', res2)
					const {
						INFO: INFO3,
						ITEM_INNER: ITEM_INNER3,
						ITEM_OUTER: ITEM_OUTER3,
						ATTACHMENT: ATTACHMENT3,
					} = res2.DATA
					this.orderInfo = INFO3
					let quotaOrder = {
						INFO: INFO3,
						ITEM_INNER: ITEM_INNER3,
						ITEM_OUTER: ITEM_OUTER3,
						ATTACHMENT: ATTACHMENT3,
					}
					this.$uStore({
						name: 'quotaOrder',
						value: quotaOrder
					});
					this.$refs.popup.open('center')
				}catch(e){
					//TODO handle the exception
				}
			},
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},
			// 选择文件
			select(e) {
				console.log('选择文件：', e, this.fileList)
			},
			// 上传成功
			success(e) {
				console.log('上传成功', e)
			},
			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},
			fnBackHome() {
				this.$refs.popup.close()
				setTimeout(() => {
					uni.switchTab({
						url: `/pages/home/home`
					})
				}, 300)
			},
			fnCheckOrderByNo() {
				this.$refs.popup.close()
				uni.redirectTo({
					url: '/pages/my-order/my-order'
				})
			},
			submit() {
				this.updateQuotaOrder()

				// this.$refs.files.upload()
			},
			preStep() {
				this.$emit('click', 'quotaOrder', true)
			},
			...mapMutations(["$uStore"]),
		}
	}
</script>

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

	.lists {
		position: relative;
		flex-direction: column;
		padding: 0 16rpx;
		overflow-y: scroll;
	}

	.middle {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx 64rpx 40rpx 48rpx;
	}

	.summary-block {
		display: flex;
		align-items: center;
	}

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

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

	.icon-arrow {
		position: absolute;
		right: 0;
		top: 16px;
		width: 12rpx;
		height: 20rpx;
		z-index: 10;
	}

	.upload-text {
		flex: 2;
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
	}

	.summary {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 32rpx;
		padding: 32rpx 48rpx 140rpx;
	}

	.icon_plan {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}

	.upload-block {
		display: flex;
		// align-items: center;
		// justify-content: center;
		// align-self: center;
		// width: 388rpx;
		height: 388rpx;
		// background: #f5f6f7;
		// border: 1px dashed #dedede;
		border-radius: 4px;
		margin-top: 90rpx;
		flex-direction: column;
	}

	.uni-file-picker {
		// width: 100%;
		// height: 100%;
	}

	/deep/ .uni-file-picker__container {
		// width: 100%;
		// height: 100%;
		// margin: 0;
	}

	.bottom-area {
		height: 140rpx;
		margin-top: 12rpx;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 10;
		width: 750rpx;
		height: 140rpx;
		padding: 0 32rpx;
		background-color: #fff;
		justify-content: space-between;
		align-items: center;
	}

	.btn {
		flex: 1;
		height: 92rpx;
		background: $wly-primary-color;
		border-radius: 46rpx;
	}

	.btn-l {
		margin-right: 30rpx;
		border: 1px solid $wly-primary-color;
		background-color: transparent;

	}

	.btn-text {
		color: #fff;
		font-size: 34rpx;
	}

	.btn-text-l {
		color: $wly-primary-color;
	}

	/deep/ .uni-popup__wrapper {
		border-radius: 20rpx;
	}

	.popup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 580rpx;
		height: 408rpx;
		background: #ffffff;
		border-radius: 24rpx;
	}

	.popup-content-head {
		margin-top: 56rpx;
		margin-bottom: 16rpx;
	}

	.popup-content-head__icon {
		width: 80rpx;
		height: 80rpx;
	}

	.popup-content-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 52rpx;
	}

	.popup-content-content__title {
		font-size: 32rpx;
		color: #444;
		font-weight: 500;
		margin-bottom: 8rpx;
	}

	.popup-content-content__title2 {
		color: #999999;
		font-size: 24rpx;
	}

	.popup-content-foot {}

	.popup-content-foot__btn {
		width: 152rpx;
		height: 60rpx;
		font-size: 22rpx;
		line-height: 60rpx;
		background: #ffedee;
		text-align: center;
		color: #ff0f00;
		font-weight: 500;
		border-radius: 32rpx;
	}

	.popup-content-foot__sure {
		margin-left: 40rpx;
		color: #fff;
		background: #ff1d32;
		border: 1px solid #ff1d32;
	}
	.block-detal {
		display: flex;
		flex-direction: column;
		background: #fff;
		border-radius: 20rpx;
		padding: 32rpx;
		margin-bottom: 20rpx;
	}
	
	.block-detal-item {
		display: flex;
		margin-bottom: 32rpx;
		justify-content: space-between;
	}
	
	.block-detal-item-last {
		margin-bottom: 0;
	}
	
	.detal-item-label {
		color: #999;
		font-size: 24rpx;
	}
	
	.detal-item-value {
		color: #333;
		font-size: 28rpx;
	}
	.remark-text {
		flex: 1;
		min-height: 100rpx;
		background: #f5f6f7;
		border-radius: 4px;
		padding: 12rpx 18rpx;
		margin-top: 10rpx;
		word-break: break-all;
		font-size: 28rpx;
	}
	.remark{
		background: #fff;
		padding: 0 10px;
	}
	.banner-title{
		background: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}
</style>
