<template>
	<view class="lists">
		<view class="middle view planout-block-item">
			<view class="text-block" @click="selectGroupClient">
				<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">{{selectedGroupClient.OBJNAME}}</text>
						</view>
					</view>
					<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="text-block" @click="selectBusiness">
				<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">{{selectedBusiness.NAME}}</text>
						</view>
					</view>
					<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="text-block" @click="selectAddress">
				<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">{{selectedAddress.NAME_ORG1}}</text>
						</view>
					</view>
					<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode="aspectFit"></image>
				</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">
							<picker class="picker-block" @change="bindPickerYearChange" mode="selector"
								range-key='value' :value="condition.ZZFLD000099" :range="status">
								<text class="uni-input-text">{{status[condition.ZZFLD000099].value}}</text>
							</picker>
						</view>
					</view>
					<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode="aspectFit"></image>
				</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">
							<picker class="picker-block" @change="bindPickerPaintDesignChange" mode="selector"
								range-key='value' :value="paintDesignIndex" :range="paintDesignPicker">
								<text class="uni-input-text">{{ paintDesignPicker[paintDesignIndex].value}}</text>
							</picker>
						</view>
					</view>
					<image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="text-block">
				<text class="middle-date">外箱喷码内容</text>
				<input class="middle-date-des" type="text" disabled v-model="condition.ZZFLD000098" placeholder="" />
			</view>
			<view class="text-block">
				<text class="middle-date">联系人</text>
				<input class="middle-date-des" type="text" v-model="selectedAddress.C_O_NAME" placeholder="请填写" />
			</view>
			<view class="text-block text-block-last">
				<text class="middle-date">电话</text>
				<input class="middle-date-des" type="text" v-model="selectedAddress.TEL_NUMBER" placeholder="请填写" />
			</view>
			<view class="text-block text-block-last">
				<text class="middle-date">收货地址</text>
				<input class="middle-date-des" type="text" v-model="selectedAddress.STREET" placeholder="请填写" />
			</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="nextStep">
				<text class="btn-text">下一步</text>
			</button>
		</view>
	</view>
</template>

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

	import {
		mapMutations,
		mapState
	} from 'vuex'

	export default {
		data() {
			return {
				selectedBusiness: {},
				selectedGroupClient: {},
				selectedAddress: {},
				condition: {
					'GRPUTID': '', // 团购单位编码
					'BUSOPPID': '', // 商机编码
					'ZZFLD000099': 0, // 是否盒外刻字
					'ZZFLD00008T': '', // 收货方 
					'ZZFLD000098': '', // 喷码内容
					'ZZFLD00002L': '', // 收货联系人
					'ZZFLD00002M': '', // 收货联系电话
					'ZZFLD00002N': '', // 收货地址
					'PENGMETHOD': '', // 喷码方式
				},
				designIndex: 0,
				status: [{
						key: 0,
						value: '否'
					},
					{
						key: 1,
						value: '是',
					}
				],
				selectedSalesCenterArr: [{
					KEY: -1,
					VALUE: ''
				}],
				planinnerLists: [{
					checked: false,
					'quantity': 0,
					'total': 0,
					'product_info': {},
				}],
				HEADINFO: {},
				paintDesignIndex: 0,
				paintDesignPicker: [{
						key: '',
						value: ''
					}, {
						key: 'O',
						value: '团购订单'
					},
					{
						key: 'U',
						value: '团购单位',
					},
					{
						key: "S",
						value: '祝福语',
					}
				],
			}
		},
		computed: {
			...mapState(['groupOrder', 'userInfo']),
		},
		onBackPress(event) {
			console.log('event', event)
			uni.switchTab({
				url: `/pages/go-order/go-order`
			})
			return false
		},
		created() {
			this.initGroupData()
		},
		mounted() {
			console.log('监听到事件来自 update');
			let _this = this
			uni.$on('selectedBusiness', function(data) {
				console.log('监听到事件来自 selectedBusiness ，携带参数 msg 为：', data);
				_this.selectedBusiness = {
					...data.selectedBusiness
				}
				const {
					ID,
					NAME
				} = data.selectedBusiness
				_this.HEADINFO.BUSOPPID = ID // 商机编码
				_this.HEADINFO.BUSINAME = NAME // 商机名称
				_this.condition.BUSOPPID = ID
			})

			uni.$on('selectedGroupClient2', function(data) {
				console.log('监听到事件来自 selectedGroupClient2 ，携带参数 msg 为：', data);
				const selectedGroupClient = data.selectedGroupClient
				_this.selectedGroupClient = {
					...selectedGroupClient,
					INFOTP: data.condition.INFOTP
				}

				const {
					ID,
					OBJNAME
				} = selectedGroupClient

				_this.HEADINFO.INFOTP = data.condition.INFOTP // 团购单位类型
				_this.HEADINFO.GRPUTID = ID // 团购单位编码
				_this.HEADINFO.GRPNAME = OBJNAME // 团购单位名称
				_this.condition.GRPUTID = ID
			})

			uni.$on('selectedAddress', function(data) {
				console.log('监听到事件来自 selectedAddress ，携带参数 msg 为：', data);
				const selectedAddress = data.selectedAddress
				const {
					PARTNER,
					IC_O_NAME,
					C_O_NAME,
					TEL_NUMBER,
					STREET,
					NAME_ORG1
				} = selectedAddress
				_this.selectedAddress = {
					...selectedAddress
				}
				_this.HEADINFO.ZZFLD00002L = C_O_NAME
				_this.HEADINFO.ZZFLD00002M = TEL_NUMBER
				_this.HEADINFO.ZZFLD00008T = PARTNER
				_this.HEADINFO.ZZFLD00008T_DSCR = NAME_ORG1 // 组织名称
				_this.HEADINFO.ZZFLD00002N = STREET
				_this.condition.ZZFLD00008T = PARTNER
				_this.condition.ZZFLD00002L = C_O_NAME
				_this.condition.ZZFLD00002M = TEL_NUMBER
				_this.condition.ZZFLD00002N = STREET
			})

			uni.$on('selectedPaintDesign', function(data) {
				console.log('监听到事件来自 selectedPaintDesign ，携带参数 msg 为：', data);
				_this.condition.ZZFLD000098 = data.selectedPaintDesign.zzfld000098
				_this.HEADINFO.ZZFLD000098 = data.selectedPaintDesign.zzfld000098
			})
		},
		onUnload() {
			console.log('onUnload')
			uni.$off('selectedBusiness')
			uni.$off('selectedGroupClient2')
			uni.$off('selectedAddress')
			uni.$off('selectedPaintDesign')
		},
		beforeDestroy() {
			console.log('onUnload2')
			uni.$off('selectedBusiness')
			uni.$off('selectedGroupClient2')
			uni.$off('selectedAddress')
			uni.$off('selectedPaintDesign')
		},
		methods: {
			// 初始化订单数据
			async initGroupData() {
				const params = {
					'PARTNER': this.userInfo.code
				}
				const res = await apiInitGroupData(params)
				const {
					HEAD,
					YXDY,
					ITEM
				} = res
				this.selectedSalesCenterArr = YXDY
				this.planinnerLists[0] = {
					...this.planinnerLists[0],
					...ITEM[0]
				}
				this.HEADINFO = HEAD
			},
			bindPickerYearChange(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.condition.ZZFLD000099 = e.detail.value
			},
			bindPickerPaintDesignChange(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.paintDesignIndex = e.detail.value
				switch (e.detail.value) {
					case 0:
						this.condition.ZZFLD000098 = this.condition.GRPUTID
						break;
					case 1:
						this.condition.ZZFLD000098 = this.selectedGroupClient.OBJNAME
						break;
					case 2:
						uni.navigateTo({
							url: `/pages/select-paint-design/select-paint-design`
						});
						break;
					default:
						break;
				}
				this.condition.PENGMETHOD = this.paintDesignPicker[this.paintDesignIndex].key
				this.HEADINFO.PENGMETHOD = this.paintDesignPicker[this.paintDesignIndex].key
			},
			selectGroupClient() {
				uni.navigateTo({
					url: `/pages/select-group-client/select-group-client?from=groupBaseInfo&mode=&index=`
				});
			},
			selectBusiness() {
				uni.navigateTo({
					url: `/pages/select-business/select-business`
				});
			},
			selectAddress() {
				uni.navigateTo({
					url: `/pages/address-manage/address-manage?from=groupBaseInfo&head=${JSON.stringify(this.HEADINFO)}`
				});
			},
			selectPaintDesign() {
				uni.navigateTo({
					url: `/pages/select-paint-design/select-paint-design`
				});
			},
			nextStep() {
				let groupOrder = {
					'ITEM': this.planinnerLists,
					'ATTACHMENT': [],
					'baseinfo': {
						'YXDY': this.selectedSalesCenterArr,
						...this.condition
					},
					'INFO': this.HEADINFO,
				}
				this.$uStore({
					name: 'groupOrder',
					value: groupOrder
				});
				console.log('groupBaseInfo', groupOrder)
				this.$emit('click', 'quotaOrder')
			},
			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;
		background: #f0f4f5;
	}

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

	.text-block {
		overflow: hidden;
		height: 96rpx;
		margin-bottom: 14rpx;
		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-bottom: 8rpx;
	}

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

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

	.uni-list-cell {
		flex: 1;
		height: 96rpx;
	}

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

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

	.planout-block-item {}

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