<template>
	<view class="lists">
		<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' :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>
	</view>
</template>

<script>
	import {
		apiUpdateGroupOrder
	} from '@/servers/groupOrder.js'

	import {
		mapMutations,
		mapState
	} from 'vuex'

	export default {
		data() {
			return {
				orderNo: '',
				orderInfo: {
					OBJECT_ID: ''
				},
				fileList: [],
			}
		},
		computed: {
			...mapState(['groupOrder', 'userInfo']),
			imageStyles() {
				return {
					width: 64,
					height: 64,
					border: {
						radius: '50%'
					}
				}
			},
		},
		methods: {
			async updateGroupOrder() {
				const {
					INFO,
					ITEM,
					ATTACHMENT
				} = this.groupOrder
				const params = {
					"MODE": "SAVE",
					INFO,
					ITEM,
					ATTACHMENT,
					"USER_BP": this.userInfo.code || "0081000010",
					"ROLE": "WLYALL"
				}
				const res = await apiUpdateGroupOrder(params)

				const {
					ATTACHMENT: ATTACHMENT2,
					HISTORY,
					INFO: INFO2,
					ITEM: ITEM2
				} = res.DATA

				const params2 = {
					"MODE": "SUBMIT",
					"INFO": INFO2,
					'ITEM': ITEM2,
					"ATTACHMENT": ATTACHMENT2,
					"USER_BP": this.userInfo.code || "0081000010",
					"ROLE": "WLYALL"
				}
				const res2 = await apiUpdateGroupOrder(params2)
				console.log('apiUpdateGroupOrder', res2)

				const {
					INFO: INFO3,
					ITEM: ITEM3,
					ATTACHMENT: ATTACHMENT3,
				} = res2.DATA
				this.orderInfo = INFO3
				let groupOrder = {
					...this.groupOrder,
					INFO: INFO3,
					ITEM: ITEM3,
					ATTACHMENT: ATTACHMENT3,
				}
				this.$uStore({
					name: 'groupOrder',
					value: groupOrder
				});
				this.$refs.popup.open('center')
			},
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			// 获取上传进度
			progress(e) {
				console.log('上传进度：', e)
			},
			// 选择文件
			select(e) {
				console.log('选择文件：', 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.navigateTo({
					url: '/pages/my-order/my-order'
				})
			},
			submit() {
				this.updateGroupOrder()
			},
			preStep() {
				this.$emit('click', 'quotaOrder')
			},
			...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: 344rpx;
		height: 344rpx;
		background: #f5f6f7;
		border: 1px dashed #dedede;
		border-radius: 4px;
		margin-top: 90rpx;
	}

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

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

	/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: 20rpx;
	}

	.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;
		line-height: 60rpx;
		background: #ffedee;
		text-align: center;
		color: #ff0f00;
		font-weight: 500;
		border-radius: 32rpx;
		font-size: 22rpx;
	}

	.popup-content-foot__sure {
		margin-left: 40rpx;
		color: #fff;
		background: #ff1d32;
		border: 1px solid #ff1d32;
	}
</style>
