<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">{{noQuotaOrder.INFO.Marketing}}</text>
				</view>
				<view class="block-detal-item">
					<text class="detal-item-label">业务员</text>
					<text class="detal-item-value">{{noQuotaOrder.INFO.ZZFLD000004_DSCR}}</text>
				</view>
				<view class="block-detal-item">
					<text class="detal-item-label">创建日期</text>
					<text class="detal-item-value">{{noQuotaOrder.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">{{noQuotaOrder.INFO.ZZFLD000028}}</text> -->
				</view>
				<text class="remark-text">
					{{noQuotaOrder.INFO.ZZFLD000028}}
				</text>
			</view>
			<view class="banner-title">订购产品</view>
			<view class="block-detal" v-for="item in noQuotaOrder.ITEM">
				<view class="block-detal-item">
					<text class="detal-item-label">产品名称</text>
					<text class="detal-item-des">{{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="middle summary">
				<view class="summary-block">
					<image class="icon_plan" src="@/static/image/icon_plan@3x.png" mode=""></image>
					<text class="upload-text">附件上传(最多上传4张图片)</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' @delete='deletes' >
						<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 {
		apiUpdateNoQuotaOrder
	} from '@/servers/noQuotaOrder.js'

	import {
		formatToUnit16Array,
		base64ToHex
	} from '@/utils/index.js'

	import {
		mapMutations,
		mapState
	} from 'vuex'
	import { pathToBase64, base64ToPath } from 'image-tools'

	export default {
		data() {
			return {
				orderNo: '',
				orderInfo: {
					OBJECT_ID: ''
				},
				fileList: [],
				imgFileBase64: [],
				flag: false
			}
		},
		computed: {
			...mapState(['noQuotaOrder', 'userInfo']),
			imageStyles() {
				return {
					width: 64,
					height: 64,
					border: {
						radius: '50%'
					}
				}
			},
			intotalComputed() {
				let money = 0
				this.noQuotaOrder.ITEM.forEach((item) => {
					money += item.NET_VALUE * 1
				})
				return money.toFixed(2)
			}
		},
		methods: {
			async updateQuotaOrder() {
				if(this.flag){
					return
				}
				this.flag = true
				let res1 = null
				try{
					const {
						INFO,
						ITEM,
					} = this.noQuotaOrder
					let ATTACHMENT = this.noQuotaOrder.ATTACHMENT

					ATTACHMENT = [...ATTACHMENT, ...this.imgFileBase64]

					const params = {
						"USER_BP": this.userInfo.code,
						"ROLE": 'WLY001',
						"MODE": "SAVE",
						INFO,
						ITEM,
						// "item_d": [],
						// "USE": [],
						ATTACHMENT
					}
					res1 = await apiUpdateNoQuotaOrder(params)
					if(res1.MSGTYPE !== 'S'){
						this.flag = false
						return
					}
					this.flag = false
					const {
						INFO: INFO3,
						ITEM: ITEM3,
						ATTACHMENT: ATTACHMENT3,
					} = res1.DATA
					this.orderInfo = INFO3
					let noQuotaOrder = {
						INFO: { ...INFO3, Marketing: this.noQuotaOrder.INFO.Marketing},
						ITEM: ITEM3,
						ATTACHMENT: ATTACHMENT3,
					}
					this.$uStore({
						name: 'noQuotaOrder',
						value: noQuotaOrder
					});
					this.$refs.popup.open('center')
				}catch(e){
					//TODO handle the exception
				}
				// try{
				// 	const {
				// 		ATTACHMENT: ATTACHMENT2,
				// 		HISTORY,
				// 		INFO: INFO2,
				// 		ITEM: ITEM2
				// 	} = res1.DATA

				// 	const params2 = {
				// 		"USER_BP": this.userInfo.code,
				// 		"ROLE": 'WLY001',
				// 		"MODE": "SUBMIT",
				// 		"info": INFO2,
				// 		'ITEM': ITEM2,
				// 		// "item_d": [],
				// 		"attachment": ATTACHMENT2
				// 	}
				// 	const res2 = await apiUpdateNoQuotaOrder(params2)
				// 	console.log('updateQuotaOrder', res2)
				// 	if(res2.MSGTYPE !== 'S'){
				// 		return
				// 	}
				// 	const {
				// 		INFO: INFO3,
				// 		ITEM: ITEM3,
				// 		ATTACHMENT: ATTACHMENT3,
				// 	} = res2.DATA
				// 	this.orderInfo = INFO3
				// 	let noQuotaOrder = {
				// 		INFO: INFO3,
				// 		ITEM: ITEM3,
				// 		ATTACHMENT: ATTACHMENT3,
				// 	}
				// 	this.$uStore({
				// 		name: 'noQuotaOrder',
				// 		value: noQuotaOrder
				// 	});
				// 	this.$refs.popup.open('center')
				// }catch(e){
				// 	//TODO handle the exception
				// }
			},
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},
			deletes(e){
				if(e.tempFile.uuid){
					const arr = this.imgFileBase64.filter(item => item.uuid !== e.tempFile.uuid )
					this.imgFileBase64 = [ ...arr ]
				}else{
					this.imgFileBase64 = []
				}
				
			},
			// 选择文件
			async select(e) {
				let _this = this
				let fileObj = null
				console.log('选择文件：', e)
				e.tempFilePaths.forEach((url,idx)=>{
					pathToBase64(url).then(base64 => {
						fileObj = {
							uuid: e.tempFiles[idx].uuid,
							FILENAME: e.tempFiles[idx].name,
							MIMETYPE: '',
							DOC_TYPE: e.tempFiles[idx].fileType,
							XCONTENT: base64ToHex(base64),
							FILELENGTH: e.tempFiles[idx].size,
							ZZFLD00002D: _this.userInfo.code,
							ZZFLD00002D_DSCR: _this.userInfo.name,
						}
						_this.imgFileBase64.push(fileObj);
						console.log('_this.imgFileBase64', _this.imgFileBase64)
					})
					.catch(error => {
						console.error(error)
					})
				})

			},
			// async select(e) {
			// 	console.log('选择文件：', e, this.fileList)
			// 	let _this = this
			// 	const unit16Array = await formatToUnit16Array(e.tempFiles[0].file)
			// 	let reader = new FileReader();
			// 	let fileObj = {
			// 		FILENAME: e.tempFiles[0].name,
			// 		MIMETYPE: '',
			// 		DOC_TYPE: e.tempFiles[0].fileType,
			// 		XCONTENT: unit16Array,
			// 		FILELENGTH: e.tempFiles[0].size,
			// 		ZZFLD00002D: this.userInfo.code,
			// 		ZZFLD00002D_DSCR: this.userInfo.name,
			// 	}
			// 	reader.readAsDataURL(e.tempFiles[0].file);
			// 	reader.onload = function(e) {
			// 		// fileObj.XCONTENT = e.target.result;
			// 		_this.imgFileBase64.push(fileObj);
			// 		console.log('2222', e)
			// 	}
			// },
			// 上传成功
			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 10rpx;
	}

	.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;
	}

	::v-deep  .uni-file-picker {
		// display: flex;
		// flex-direction: column;
	}

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

	.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;
	}

	::v-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 {
		flex: 2;
		color: #999;
		font-size: 24rpx;
	}
	
	.detal-item-value {
		flex: 3;
		color: #333;
		font-size: 28rpx;
	}
	.detal-item-des {
		flex: 3;
		font-size: 28rpx;
		color: #333;
		width: 200%;
	}
	.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>
