<template>
	<view class="lists">
		<scroll-view class="scroll-area view" show-scrollbar='false' scroll-y="true">
			<view class="main">
			<view class="middle view planout-block-item">
				<view class="text-block" @click="selectGroupClient">
					<view class="middle-date">
						<text class="mustPosIcon">*</text>
						<text class="middle-date">团购单位</text>
					</view>
					<!-- <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">
					<text class="middle-date">商机选择</text>
					<view class="middle-date-des uni-list picker-year">
						<view class="uni-list-cell" @click="selectBusiness">
							<view class="uni-list-cell-db">
								<text class="middle-date-des">{{selectedBusiness.NAME}}</text>
							</view>
						</view>
						<uni-icons v-if="selectedBusiness.NAME" class="clear-text" type="closeempty" size="14" color="#888" @click="clearName"></uni-icons>
						<!-- <image class="icon-arrow" src="@/static/image/arrow_r@3x.png" mode="aspectFit"></image> -->
					</view>
				</view>
				<view class="text-block" @click="selectAddress">
					<view class="middle-date">
						<text class="mustPosIcon">*</text>
						<text class="middle-date">收货单位</text>
					</view>
					<!-- <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 right-box">
						<checkbox-group>
							<checkbox
								color="#FF1D32"
								id="ZZFLD000099"
								type="checkbox"
								:checked="condition.ZZFLD000099"
								@tap="condition.ZZFLD000099 = !condition.ZZFLD000099"/>
						</checkbox-group>
								<!-- <picker class="picker-block" mode="selector"
									range-key='value' :value="condition.ZZFLD000099" :range="status">
									<text class="uni-input-text">{{status[condition.ZZFLD000099].value}}</text>
								</picker> -->
						<!-- <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 right-box">
						<checkbox-group @change="bindPickerYearChange">
							<checkbox
								color="#FF1D32"
								id="ZZFLD00009CX"
								type="checkbox"
								:checked="condition.ZZFLD00009CX"
								@tap="condition.ZZFLD00009CX = !condition.ZZFLD00009CX"/>
						</checkbox-group>
					</view>
				</view>
				<view class="text-block">
					<view class="middle-date">
						<text class="mustPosIcon">*</text>
						<text class="middle-date">喷码方式</text>
					</view>
					<!-- <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>
					<text class="middle-date-des">{{selectedAddress.C_O_NAME}}</text>
					<!-- <input class="middle-date-des" type="text" v-model="selectedAddress.C_O_NAME" placeholder="请填写" /> -->
				</view>
				<view class="text-block">
					<text class="middle-date">电话</text>
					<text class="middle-date-des">{{selectedAddress.TEL_NUMBER}}</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>
					<text class="middle-date-address">{{selectedAddress.STREET}}</text>
					<!-- <input class="middle-date-des" type="text" v-model="selectedAddress.STREET" placeholder="请填写" /> -->
				</view>
			</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>
		</scroll-view>
	</view>
</template>

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

	import {
		mapMutations,
		mapState
	} from 'vuex'

	export default {
		data() {
			return {
				scrollTop: 0,
				selectedBusiness: {},
				selectedGroupClient: {},
				selectedAddress: {},
				condition: {
					'GRPUTID': '', // 团购单位编码
					'BUSOPPID': '', // 商机编码
					'ZZFLD000099': false, // 是否盒外刻字
					'ZZFLD00008T': '', // 收货方 
					'ZZFLD000098': '', // 喷码内容
					'ZZFLD00002L': '', // 收货联系人
					'ZZFLD00002M': '', // 收货联系电话
					'ZZFLD00002N': '', // 收货地址
					'PENGMETHOD': '', // 喷码方式
					'ZZFLD00009CX': false, //企业内购
				},
				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: '祝福语',
					}
				],
			}
		},
		props: {
			isKeepData: {
				type: Boolean,
				default: false
			}
		},
		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(this.groupOrder,'监听到事件来自 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: {
			clearName(){
				this.selectedBusiness = {}
				this.HEADINFO.BUSOPPID = '' // 商机编码
				this.HEADINFO.BUSINAME = '' // 商机名称
				this.condition.BUSOPPID = ''
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.status.length; i++) {
					if (this.status[i].key === evt.detail.key) {
						alert(i)
						// this.current = i;
						break;
					}
				}
			},
			// 初始化订单数据
			async initGroupData() {
				const params = {
					'PARTNER': this.userInfo.code
				}
				console.log(this.isKeepData,this.groupOrder,'isKeepDataisKeepData')
				const res = await apiInitGroupData(params)
				const {
					HEAD,
					YXDY,
					ITEM
				} = res
				this.selectedSalesCenterArr = YXDY
				this.planinnerLists[0] = {
					...this.planinnerLists[0],
					...ITEM[0]
				}
				this.HEADINFO = HEAD
				if (this.isKeepData) {
					this.planinnerLists = [ ...this.groupOrder.ITEM ]
					this.selectedGroupClient = {
						'OBJNAME': this.groupOrder.INFO.GRPNAME,
						'ID': this.groupOrder.INFO.GRPUTID
					}
					this.HEADINFO.GRPUTID = this.groupOrder.INFO.GRPUTID // 团购单位编码
					this.HEADINFO.GRPNAME = this.groupOrder.INFO.GRPNAME // 团购单位名称
					this.condition.GRPUTID = this.groupOrder.INFO.GRPUTID
					// 商机选择
					this.HEADINFO.BUSOPPID = this.groupOrder.INFO.BUSOPPID // 商机编码
					this.HEADINFO.BUSINAME = this.groupOrder.INFO.BUSINAME // 商机名称
					this.condition.BUSOPPID = this.groupOrder.INFO.BUSOPPID
					this.selectedBusiness = {
						'ID': this.groupOrder.INFO.BUSOPPID,
						'NAME': this.groupOrder.INFO.BUSINAME
					}
					this.condition.ZZFLD00009CX = this.HEADINFO.ZZFLD00009CX = this.groupOrder.INFO.ZZFLD00009CX
					this.condition.ZZFLD000099 = this.HEADINFO.ZZFLD000099 = this.groupOrder.INFO.ZZFLD000099
					// 收货单位
					this.selectedAddress = {
						NAME_ORG1: this.groupOrder.INFO.ZZFLD00008T_DSCR,
						C_O_NAME: this.groupOrder.INFO.ZZFLD00002L,
						TEL_NUMBER: this.groupOrder.INFO.ZZFLD00002M,
						STREET: this.groupOrder.INFO.ZZFLD00002N,
					}
					this.HEADINFO.ZZFLD00002L = this.groupOrder.INFO.ZZFLD00002L
					this.HEADINFO.ZZFLD00002M = this.groupOrder.INFO.ZZFLD00002M
					this.HEADINFO.ZZFLD00008T = this.groupOrder.INFO.ZZFLD00008T
					this.HEADINFO.ZZFLD00008T_DSCR = this.groupOrder.INFO.ZZFLD00008T_DSCR // 组织名称
					this.HEADINFO.ZZFLD00002N = this.groupOrder.INFO.ZZFLD00002N
					this.condition.ZZFLD00008T = this.groupOrder.INFO.ZZFLD00008T
					this.condition.ZZFLD00002L = this.groupOrder.INFO.ZZFLD00002L
					this.condition.ZZFLD00002M = this.groupOrder.INFO.ZZFLD00002M
					this.condition.ZZFLD00002N = this.groupOrder.INFO.ZZFLD00002N
					// 喷码方式
					this.paintDesignPicker.forEach((ele,idx) => {
						if (ele.key === this.groupOrder.INFO.PENGMETHOD) {
							this.paintDesignIndex = idx
							this.condition.PENGMETHOD = ele.key
							this.HEADINFO.PENGMETHOD = ele.key
						}
					})
					// 喷码内容
					this.condition.ZZFLD000098 = this.groupOrder.baseinfo.ZZFLD000098
					this.HEADINFO.ZZFLD000098 = this.groupOrder.baseinfo.ZZFLD000098
					
					this.condition.BUSOPPID = this.groupOrder.INFO.BUSOPPID
				}
			},
			bindPickerYearChange(e) {
				console.log('picker发送选择改变，携带值为', e)
				this.HEADINFO.ZZFLD000098 = this.condition.ZZFLD000098 = this.groupOrder.baseinfo.ZZFLD000098 = e.detail.value.length > 0 ? '企业内购' : ''
				// this.condition.ZZFLD000099 = e.detail.value
			},
			bindPickerPaintDesignChange(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.paintDesignIndex = e.detail.value
				switch (e.detail.value) {
					case 1:
						this.condition.ZZFLD000098 = ''
						break;
					case 2:
						this.condition.ZZFLD000098 = this.selectedGroupClient.OBJNAME
						break;
					case 3:
						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() {
				if(!this.selectedGroupClient.OBJNAME){
					uni.showToast({
						title: '请先选择团购单位',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				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() {
				if(!this.selectedGroupClient.OBJNAME){
					uni.showToast({
						title: '请先选择团购单位',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				if(!this.paintDesignPicker[this.paintDesignIndex].key){
					uni.showToast({
						title: '请先选择喷码方式',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				
				if(!this.selectedAddress.C_O_NAME || !this.selectedAddress.TEL_NUMBER || !this.selectedAddress.STREET){
					uni.showToast({
						title: '请先填写收货方信息',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				let groupOrder = {
					'ITEM': this.planinnerLists,
					'ATTACHMENT': [],
					'baseinfo': {
						'YXDY': this.selectedSalesCenterArr,
						...this.condition
					},
					'INFO': {
						...this.HEADINFO,
						ZZFLD00009CX: this.condition.ZZFLD00009CX,
						ZZFLD000099: this.condition.ZZFLD000099
					},
				}
				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;
	}
	.main {
		flex-direction: column;
		border-radius: 16rpx;
	}
	.lists {
		position: relative;
		flex-direction: column;
		padding: 0 16rpx;
		background: #f0f4f5;
	}
	.scroll-area {
		flex: 1;
	}
	
	.middle {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 32rpx 64rpx 40rpx 48rpx;
		margin-bottom: 30rpx;
	}

	.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;
		margin-left: 4rpx;
	}

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

	.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;
		line-height: 50%;
	}

	.icon-arrow {
		position: absolute;
		right: 0;
		top: 38rpx;
		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;
	}
	::v-deep  .uni-checkbox-input{
		color: #FF1D32 !important;
		border-color: #FF1D32;
	}
	::v-deep  .uni-checkbox-input:hover{
		border-color: #FF1D32 !important;
	}
	.right-box{
		position: absolute;
		right: 0;
		top: 0px;
		z-index: 10;
	}
	.mustPosIcon{
	 	color: #FF1D32;
	 	position: relative;
	 	top: 30rpx;
	}
	.clear-text{
		width: 60rpx;
		text-align: right;
	}
</style>
