<template>
	<view class="lists">
		<view class="middle upload 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>
				<text class="summary-num">{{intotalComputed}}</text>
			</view>
		</view>
		<view class="summary upload salescenter top-radius">
			<text class="mustIcon">*</text>
			<text class="top-date">营销单元</text>
			<view class="top-date-des uni-list picker-year">
				<view class="uni-list-cell">
					<view class="uni-list-cell-db">
						<picker class="picker-block" @change="bindPickerSalesCenterChange" mode="selector"
							:value="salesCenterIndex" range-key='VALUE' :range="selectedSalesCenterArr">
							<view class="uni-input">
								<text
									class="uni-input-text">{{selectedSalesCenterArr[salesCenterIndex] && selectedSalesCenterArr[salesCenterIndex].VALUE || '请选择'}}</text>
							</view>
						</picker>
					</view>
				</view>
				<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode="aspectFit"></image>
			</view>
		</view>
		<!-- <view class="top-bot-border"></view> -->
		<view class="summary upload salescenter">
			<text class="top-date">业务员</text>
			<text class="top-date-des">{{HEADINFO.ZZFLD000004_DSCR}}</text>
		</view>
		<!-- <view class="top-bot-border"></view> -->
		<view class="summary upload salescenter">
			<text class="top-date">备注</text>
		</view>
		<view class="remark bot-radius">
			<textarea class="remark-text" v-model="HEADINFO.ZZFLD000028" />
		</view>
		
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y view">
			<view class="view">
				<view class="planout-block">
					<text class="planout-block-title">计划内</text>
					<image class="planout-block-icon" src="@/static/image/order_more@3x.png" @click="addPlanout()"
						mode="aspectFit"></image>
				</view>
				<uni-swipe-action class="planout-block-lists">
					<uni-swipe-action-item v-for="(item,index) in planinnerLists" :key='index'>
						<view class="middle view planout-block-item">
							<text class="middle-date title-first__text">{{index+1}}</text>
							<view class="text-block" @click="selectProduct(index,'inner')">
								<view class="middle-margin-date">
									<text class="mustPosIcon-margin">*</text>
									<text class="middle-margin-date">产品</text>
								</view>
								<!-- <text class="mustPosIcon">*</text> -->
								<!-- <text class="middle-date">产品</text> -->
								<view class="middle-date-margin-des uni-list picker-year">
									<view class="uni-list-cell">
										<view class="uni-list-cell-db">
											<text class="middle-date-margin-des">{{item.DESCRIPTION}}</text>
										</view>
									</view>
									<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode="aspectFit">
									</image>
								</view>
							</view>
							<view class="text-block" @click="selectPlanOrder(item,index)">
								<view class="middle-date">
									<text class="mustPosIcon">*</text>
									<text class="middle-date">计划编号</text>
								</view>
								<!-- <text class="mustPosIcon">*</text> -->
								<!-- <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="middle-date-des">{{item.ZZFLD000005}}</text>
										</view>
									</view>
									<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode="aspectFit">
									</image>
								</view>
							</view>
							<view class="text-block">
								<view class="middle-date">
									<text class="mustPosIcon">*</text>
									<text class="middle-date">数量（件）</text>
								</view>
								<!-- <text class="mustPosIcon">*</text> -->
								<!-- <text class="middle-date">数量（件）</text> -->
								<input class="middle-date-des" type="number" :value="item.quantity"
									@input="calcInnerTotal($event,item,index,'qty')"
									@blur="updateQuotaData(index,'inner',item)" placeholder="请填写" />
							</view>
							<view class="text-block">
								<view class="middle-date">
									<text class="mustPosIcon">*</text>
									<text class="middle-date">数量（瓶）</text>
								</view>
								<!-- <text class="mustPosIcon">*</text> -->
								<!-- <text class="middle-date">数量（件）</text> -->
								<input class="middle-date-des" type="number" :value="item.USE_BOT"
									@input="calcInnerTotal($event,item,index,'bot')"
									@blur="updateQuotaData(index,'inner',item)" placeholder="请填写" />
							</view>
							<view class="text-block">
								<text class="middle-date">单价</text>
								<text class="middle-date-des">{{item.NET_PRICE}}</text>
							</view>
							<view class="text-block text-block-last">
								<text class="middle-date">小计</text>
								<text class="middle-date-des">{{item.NET_VALUE}}</text>
							</view>
						</view>
						<template v-slot:right>
							<view class="swipe-right-block" @click="handleDel(index,'inner')">
								<text class="swipe-right-block__text">删除</text>
							</view>
						</template>
					</uni-swipe-action-item>
				</uni-swipe-action>

			</view>

			<view class="view" v-if="planoutLists.length > 0">
				<view class="planout-block">
					<text class="planout-block-title">计划外</text>
				</view>
				<!-- <view class="text-block title-first">
					<text class="middle-date title-first__text">计划内</text>
				</view> -->

				<uni-swipe-action class="planout-block-lists">
					<uni-swipe-action-item v-for="(item,index) in planoutLists" :key='index'>
						<view class="middle view planout-block-item">
							<text class="middle-date title-first__text">{{index+1}}</text>
							<view class="text-block">
								<text class="middle-date">产品</text>
								<view class="middle-date-pro uni-list picker-year">
									<view class="uni-list-cell">
										<view class="uni-list-cell-db">
											<text class="middle-date-pro">{{item.DESCRIPTION}}</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="middle-date-des">{{item.ZZFLD000005}}</text>
										</view>
									</view>
								</view>
							</view>
							<view class="text-block">
								<text class="middle-date">数量（件）</text>
								<text class="middle-date-des">{{item.quantity}}</text>
								<!-- <input class="middle-date-des" type="number" :value="item.quantity"
									@input="calcOuterTotal($event,item,index)"
									@blur="updateQuotaData(index,'outer',item)" placeholder="请填写" /> -->
							</view>
							<view class="text-block">
								<text class="middle-date">单价</text>
								<text class="middle-date-des">{{item.NET_PRICE}}</text>
							</view>
							<view class="text-block text-block-last">
								<text class="middle-date">小计</text>
								<text class="middle-date-des">{{item.NET_VALUE}}</text>
							</view>
						</view>
						<template v-slot:right>
							<view class="swipe-right-block" @click="handleDel(index,'outer')">
								<text class="swipe-right-block__text">删除</text>
							</view>
						</template>
					</uni-swipe-action-item>
				</uni-swipe-action>

			</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="nextStep">
					<text class="btn-text">下一步</text>
				</button>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		apiInitQuotaData,
		apiUpdateQuotaData
	} from '@/servers/quotaOrder.js'

	import {
		mapMutations,
		mapState
	} from 'vuex'

	export default {
		props: {
			isKeepData: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				scrollTop: 0,
				mode: 'inner',
				selectedSalesCenterArr: [],
				selectedSalesCenter: {},
				salesCenterIndex: -1,
				planoutLists: [],
				planinnerLists: [{
					checked: false,
					"PRODUCT_ID": "",
					"ORDERED_PROD": "",
					'ZZFLD000005': '请选择',
					'DESCRIPTION': "",
					"SHORT_TEXT": "",
					'NET_PRICE': 0,
					'quantity': 0,
					'total': 0,
					NET_VALUE: 0,
					'product_info': {},
					'salesplan_info': {}
				}],
				HEADINFO: {},
				productInitInfo: {},
				Marketing: '',
				USE: null,
			}
		},
		computed: {
			...mapState(['quotaOrder', 'userInfo', 'userBpData']),
			intotalComputed() {
				let money = 0
				this.planinnerLists.length > 0 && this.planinnerLists.forEach((item) => {
					money += item.NET_VALUE * 1
				})
				this.planoutLists.length > 0 && this.planoutLists.forEach((item) => {
					money += item.NET_VALUE * 1
				})
				return money.toFixed(2)
			}
		},
		// watch: {
		// 	'isKeepData': {
		// 		handler(val) {
		// 			if (val === false) {
		// 				this.initQuotaData()
		// 			}
		// 		},
		// 		immediate: true
		// 	}
		// },
		created() {
			this.initQuotaData()
		},
		mounted() {
			console.log('监听到事件来自 onShow');
			let _this = this
			uni.$on('selectedSalePlan', function(data) {
				console.log('监听到事件来自 selectedSalePlan ，携带参数 msg 为：', data, _this.planinnerLists);
				const fromIndex = data.index * 1
				let selectedSalePlan = data.selectedSalePlan
				let selectedProductSalePlan = {}
				_this.planinnerLists = _this.planinnerLists.map((item, i) => {
					if (i === fromIndex) {
						item.salesplan_info = {
							...selectedSalePlan
						}
						item.ZZFLD000005 = selectedSalePlan.PLAN_NUMBER
						selectedProductSalePlan = {
							...item
						}
					}
					return item
				})

				_this.updateQuotaData(fromIndex, 'inner', selectedProductSalePlan);
			})
			uni.$on('selectedProduct', function(data) {
				console.log('监听到事件来自 selectedProduct ，携带参数 msg 为：', data);
				const fromIndex = data.index * 1
				const selectedProduct = data.selectedProduct
				_this.mode = data.mode

				let product = {}
				_this.planinnerLists = _this.planinnerLists.map((item, i) => {
					if (i === fromIndex) {
						item.product_info = {
							...selectedProduct
						}
						product = {
							...item
						}
					}
					return item
				})

				_this.updateQuotaData(fromIndex, data.mode, product);

			})
		},
		onUnload() {
			console.log('onUnload')
			uni.$off('selectedSalePlan')
			uni.$off('selectedProduct')
		},
		beforeDestroy() {
			console.log('onUnload2')
			uni.$off('selectedSalePlan')
			uni.$off('selectedProduct')
		},
		methods: {
			// 初始化订单数据
			async initQuotaData() {
				const params = {
					'PARTNER': this.userInfo.code
				}
				const res = await apiInitQuotaData(params)
				const {
					HEAD,
					YXDY,
					ITEM_INNER
				} = res
				this.selectedSalesCenterArr = YXDY
				if(YXDY.length === 1){
					this.salesCenterIndex = 0
					this.Marketing = this.selectedSalesCenterArr[0].VALUE
				}
				if (this.isKeepData) {
					const {
						INFO,
						ITEM_INNER: ITEM_INNER2,
						ITEM_OUTER,
						USE
					} = this.quotaOrder
					this.USE = USE
					this.HEADINFO = {
						...HEAD,
						...INFO
					}
					this.planinnerLists = ITEM_INNER2
					this.planoutLists = ITEM_OUTER
					this.salesCenterIndex = YXDY.findIndex((item) => {
						return this.HEADINFO.ZZFLD000001 === item.KEY
					})
					this.Marketing = this.selectedSalesCenterArr[this.salesCenterIndex].VALUE
					return
				}
				this.planinnerLists[0] = {
					...this.planinnerLists[0],
					...ITEM_INNER[0]
				}
				this.HEADINFO = HEAD
				// this.productInitInfo = ITEM_INNER[0]s
			},
			// 更新行项目信息
			async updateQuotaData(productIndex, mode, product) {
				console.log('updateQuotaData---entry', productIndex, mode, product)

				let item_type = ''
				let item_inner = []
				let item_outer = []

				let productAfterInit = this.updateProductByInit(productIndex, mode, product)
				console.log('productAfterInit', productAfterInit)

				// 销售计划编号、产品编号和件数 都有才请求
				if (!(productAfterInit?.product_info?.PRODUCT_ID && productAfterInit?.salesplan_info?.PLAN_NUMBER &&
						(productAfterInit?.ZZFLD000009 || productAfterInit?.USE_BOT))) {
					return
				}

				if (mode === 'inner') {
					item_type = "ITEM_INNER"
					item_outer = []
					item_inner = [productAfterInit]
				} else {
					item_type = "ITEM_OUTER"
					item_inner = []
					item_outer = []
				}

				const params = {
					"item_type": item_type,
					"info": this.HEADINFO,
					"item_inner": item_inner,
					"item_outer": item_outer
				}
				const res = await apiUpdateQuotaData(params)
				console.log('updateQuotaData', res)
				this.USE = null
				const {
					ITEM_INNER,
					ITEM_OUTER,
					INFO,
					USE
				} = res.DATA
				this.USE = USE
				this.HEADINFO = {
					...this.HEADINFO,
					...INFO
				}
				if (mode === 'inner') {
					this.planinnerLists = this.planinnerLists.map((item, i) => {
						if (i === productIndex) {
							item = {
								...item,
								...product,
								...ITEM_INNER[0]
							}
							// item.product_info = ITEM_INNER[0]
						}
						return item
					})

					// 1对1
					if (ITEM_OUTER && ITEM_OUTER[0] && product && product.salesplan_info) {
						if (this.planoutLists.length > 0) {
							let isHasOutTargetIndex = this.planoutLists.findIndex((out) => {
								return out.NUMBER_INT === ITEM_OUTER[0].NUMBER_INT
							})
							if (!isHasOutTargetIndex) {
								this.planoutLists = this.planoutLists.map((out, i) => {
									if (isHasOutTargetIndex === i) {
										out = {
											...out,
											...ITEM_OUTER[0],
											quantity: ITEM_OUTER[0].ZZFLD000009
										}
									}
									return out
								})
							} else {
								this.planoutLists.push(ITEM_OUTER)
							}
						} else {
							this.planoutLists = [{...ITEM_OUTER[0], quantity:ITEM_OUTER[0].ZZFLD000009}]
						}
					}else{
						this.planoutLists = []
					}
					console.log('planinnerLists', this.planinnerLists)
				} else {
					this.planoutLists = this.planoutLists.map((item, i) => {
						if (i === productIndex) {
							item = {
								...item,
								...product,
								...ITEM_OUTER[0]
							}
						}
						return item
					})
					console.log('planoutLists', this.planoutLists)
				}

			},
			// 更新选中的产品
			updateProductByInit(productIndex, mode, product) {
				const {
					PRODUCT_ID,
					SHORT_TEXT
				} = product.product_info
				let obj = {}
				if (mode === 'inner') {
					this.planinnerLists = this.planinnerLists.map((item, i) => {
						if (i === productIndex) {
							item.ORDERED_PROD = PRODUCT_ID
							item.DESCRIPTION = SHORT_TEXT
							item.ZZFLD000009 = item.quantity
							obj = item
						}
						return item
					})
				} else if (mode === 'outer') {
					this.planoutLists = this.planoutLists.map((item, i) => {
						if (i === productIndex) {
							item.ORDERED_PROD = PRODUCT_ID
							item.DESCRIPTION = SHORT_TEXT
							item.quantity = item.ZZFLD000009
							obj = item
						}
						return item
					})
				}
				return obj
			},
			// 计算小计
			calcInnerTotal(e, item, i,type) {
				console.log('sss', e, item, i)
				let value = 0
				if (e.target.value) {
					value = e.target.value
					e.target.value = value * 1
				} else {
					value = e.detail.value
					e.detail.value = value * 1
				}
				if(type === 'qty'){
					// 件数
					this.planinnerLists.forEach((product, index) => {
						if (i === index) {
							product.quantity = value * 1
							product.total = (value * product.ZZFLD00002W + product.USE_BOT) * item.NET_PRICE * 1 || 0
						}
					})
				}else{
					// 瓶数
					this.planinnerLists.forEach((product, index) => {
						if (i === index) {
							product.USE_BOT = value * 1
							product.total = (value + product.quantity * product.ZZFLD00002W) * item.NET_PRICE * 1 || 0
						}
					})
				}
				// value = `${value}`.replace(/[^0-9]/g, '') // 正则判断只能输入数字
			},
			// 计算小计
			calcOuterTotal(e, item, i) {
				console.log('sss', item, e)
				let value = e.target.value
				e.target.value = value * 1
				this.planoutLists.forEach((product, index) => {
					if (i === index && item.NET_VALUE) {
						// TODO 可优化接口处理  目前暂时前端处理
						product.ZZFLD000009 = value * 1
						product.quantity = value * 1
						product.total = value * item.NET_VALUE * 1 || 0
					}
				})
			},
			// 移除某个产品
			handleDel(index, mode = 'inner') {
				if (mode === 'inner') {
					this.planinnerLists.splice(index, 1)
				} else {
					this.planoutLists.splice(index, 1)
				}
			},
			// 选择销售计划
			selectPlanOrder(product, index, mode = 'inner') {
				if (this.planinnerLists && this.planinnerLists[0] && this.planinnerLists[0].ORDERED_PROD) {
					uni.navigateTo({
						url: `/pages/select-sale-plan/select-sale-plan?from=quotaOrder&product=${JSON.stringify((product))}&index=${index}&head=${JSON.stringify(this.HEADINFO)}`
					});
				} else {
					uni.showToast({
						title: '请先选择产品',
						duration: 2000,
						icon: 'none'
					});
				}
			},
			// 选择产品
			selectProduct(index, mode = 'inner') {
				this.mode = mode
				if (this.salesCenterIndex !== -1) {
					uni.navigateTo({
						url: `/pages/select-product/select-product?from=quotaOrder&mode=${mode}&index=${index*1}&head=${JSON.stringify(this.HEADINFO)}`
					});
				} else {
					uni.showToast({
						title: '请先选择营销单元',
						duration: 2000,
						icon: 'none'
					});
				}
			},
			// 新增产品
			addPlanout() {
				if (this.userBpData.ROLES[0].ROLE_ID === 'WLY001') {
					uni.showToast({
						title: '配额酒，经销商不能添加行项目',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				let product = {
					checked: false,
					"PRODUCT_ID": "",
					"ORDERED_PROD": "",
					'ZZFLD000005': '请选择',
					'DESCRIPTION': "请选择",
					"SHORT_TEXT": "",
					'NET_PRICE': 0,
					'NET_VALUE': 0,
					'quantity': 0,
					'total': 0,
					'product_info': {},
					'salesplan_info': {}
				}
				this.planinnerLists.unshift(product)
			},
			// 选择营销单元
			bindPickerSalesCenterChange(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.salesCenterIndex = e.detail.value
				this.selectedSalesCenter = this.selectedSalesCenterArr[this.salesCenterIndex]
				this.HEADINFO.ZZFLD000001 = this.selectedSalesCenter.KEY
				this.Marketing = this.selectedSalesCenter.VALUE
			},
			async updateGroupData() {
				const params = {
					"item_type": 'ITEM_INNER',
					"info": this.HEADINFO,
					"item_inner": this.planinnerLists,
					"item_outer": this.planoutLists
				}
				const res = await apiUpdateQuotaData(params)
				return res.MSGTYPE === "S"
			},
			async nextStep() {
				if (this.salesCenterIndex === -1) {
					uni.showToast({
						title: '请先选择营销单元',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				const nameFlag = this.planinnerLists.every(function(item){
								return item.DESCRIPTION 
							});
				if (!nameFlag) {
					uni.showToast({
						title: '请先选择产品',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				const planFlag = this.planinnerLists.every(function(item){
								return item.ZZFLD000005 
							});
				if (!planFlag) {
					uni.showToast({
						title: '请先选择计划编号',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				const quantityFlag = this.planinnerLists.every(function(item){
								return item.quantity 
							});
				if (!quantityFlag) {
					uni.showToast({
						title: '请先填写数量',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				
				const flag = await this.updateGroupData()
				if(!flag){
					return
				}
							
				let quotaOrder = {
					'ITEM_INNER': this.planinnerLists,
					'ITEM_OUTER': this.planoutLists,
					'item_d': [],
					'ATTACHMENT': [],
					'INFO':{ ...this.HEADINFO,Marketing:this.Marketing},
					'USE': this.USE
				}
				this.$uStore({
					name: 'quotaOrder',
					value: quotaOrder
				});
				console.log('quotaOrder', quotaOrder)
				this.$emit('click', 'orderUpload')
			},
			preStep() {
				uni.switchTab({
					url: `/pages/go-order/go-order`
				})
			},
			...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;
		border-bottom: 1px solid #f4f5f6;
	}

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

	.middle-date {
		flex: 2;
		font-size: 28rpx;
		line-height: 96rpx;
		color: #333;
		margin-left: 4rpx;
	}

	.middle-date-des {
		flex: 3;
		font-size: 28rpx;
		line-height: 96rpx;
		height: 96rpx;
		color: #888;
	}
	.middle-date-pro {
		flex: 3;
		font-size: 28rpx;
		margin-top: 10rpx;
		height: 96rpx;
		color: #888;
	}

	.picker-year {
		position: relative;
		border-radius: 4px;
		align-items: center;
	}

	.title-first {
		border-bottom: 0;
		margin-bottom: 24rpx;
	}

	.title-first__text {
		font-size: 50rpx;
		color: #333333;
		font-weight: 600;
		font-family: AvenirNext, AvenirNext-BoldItalic;
	}


	.uni-list-cell {
		flex: 1;
	}

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

	.picker-block {
		flex: 1;
	}

	.uni-input-text {
		font-size: 14px;
		color: #888;
	}

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

	.upload {
		padding: 0;
		height: 136rpx;
		padding: 48rpx;
		margin-bottom: 0;
		align-items: center;
	}

	.upload-text {
		flex: 2;
		font-size: 14px;
		color: #999;
	}

	.summary {
		background-color: #fff;
		display: flex;
		margin-bottom: 10rpx;
		height: 100rpx;
		padding: 0 48rpx 0 24rpx;
		justify-content: space-between;
	}

	.salescenter {
		height: 80rpx;
		margin-bottom: 0;
	}

	.icon_plan {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}
	.mustIcon {
		width: 16rpx;
		height: 40rpx;
		color: #FF1D32;
	}
	.mustPosIcon{
		color: #FF1D32;
		position: relative;
		top: 30rpx;
	}
	.summary-num {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
	}

	.scroll-area {
		padding-bottom: 40rpx;
	}

	.planout-block-lists {
		display: flex;
		flex-direction: column;
	}

	.uni-swipe {
		flex: 1;
		margin-bottom: 26rpx;
	}

	::v-deep  .uni-swipe_box {
		flex: 1;
	}

	.swipe-right-block {
		width: 152rpx;
		background: #ff0f00;
		border-radius: 0px 8px 8px 0px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.swipe-right-block__text {
		width: 152rpx;
		display: flex;
		align-items: center;
		color: #fff;
		font-size: 34rpx;
		font-weight: 500;
		text-align: center;
		padding-left: 24rpx;
	}

	.planout-block {
		display: flex;
		justify-content: space-between;
		height: 40rpx;
		margin-top: 38rpx;
		margin-bottom: 32rpx;
		padding: 0 24rpx;
	}

	.planout-block-title {
		font-size: 28rpx;
		color: #333;
		font-weight: 600;
	}

	.planout-block-icon {
		width: 32rpx;
		height: 40rpx;
	}

	.planout-block-item {
		flex: 1;
		width: 750rpx;
	}

	.bottom-area {
		height: 600rpx;
		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;
	}
	.remark-text {
		flex: 1;
		height: 120rpx;
		background: #f5f6f7;
		border-radius: 4px;
		padding: 12rpx 18rpx;
		margin-bottom: 40rpx;
		font-size: 28rpx;
	}
	.remark{
		background: #fff;
		padding: 0 10px;
	}
	.top-bot-border{
		border-bottom: 1px solid #f4f5f6;
		margin: 0 24px 0 12px;
	}
	.top-date {
		flex: 2;
		font-size: 28rpx;
		line-height: 80rpx;
		color: #333;
		margin-bottom: 8rpx;
		margin-left: 4rpx;
	}
	
	.top-date-des {
		flex: 3;
		font-size: 28rpx;
		line-height: 80rpx;
		height: 80rpx;
		color: #888;
	}
	.bot-radius{
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}

	.top-radius{
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
	}
	.mustPosIcon-margin{
		color: #FF1D32;
		position: relative;
		top: 20rpx;
	}
	.middle-date-margin-des{
		flex: 3;
		font-size: 28rpx;
		color: #888;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		width: 200%;
		text-align: left;
		justify-content: end;
	}
	.middle-margin-date{
		flex: 2;
		font-size: 28rpx;
		color: #333;
		margin-left: 4rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.scroll-Y {
		height: 1000rpx;
	}
</style>
