<template>
	<view>
		<view>
			<view class="setFlex">
				<view class="deom-flex" :style="'height:'+height*0.82+'px'">
					<view class="defa" :class="{'active': rSelectY.indexOf(index)!=-1}"
						v-for="(item,index) in addressData" :key="index" @tap="tapInfo(index)">
						<text class="Tcenter">
							{{item.label}}
							<text class="radius" :class="{'show': item.count==0}">{{item.count}}</text>
						</text>

					</view>
				</view>
				<view class="deom-flex" :style="'height:'+height*0.82+'px'">
					<view class="defa" :class="{'active': rSelectM.indexOf(index)!=-1}" v-for="(item,index) in city"
						:key="index" @tap="tapInfoM(index)">
						<text class="Tcenter">
							{{item.label}}
						</text>
						<text class="radius" :class="{'show': item.count==0}">{{item.count}}</text>
					</view>
				</view>
				<view class="uni-list" :style="'height:'+height*0.82+'px'">
					<checkbox-group @change="checkboxChange">
						<label v-for="(item,index) in area" :key="index">
							<view class="uni-label" :class="{'activeC': item.checked==true}">
								<view style="display: inline;margin-right: 10rpx;">
									<checkbox :value="item.value" :checked="item.checked" color="red" />
								</view>
								<view style="display: inline;">{{item.label}}</view>
							</view>
						</label>
					</checkbox-group>
				</view>


			</view>
		</view>
		<view class="container">
			<view class="editTable">
				<u-button hover-class="none" :custom-style="btnStyle" shape="circle" @click="bottomBtn">
					提交
				</u-button>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getAddress,
		edit
	} from '../../../api/apis.js'
	import {
		loading,
		hidden
	} from '../../../tips/myTips.js'
	export default {
		//xxxxxxx
		mounted() {
			let that = this;
			getAddress().then((res) => {
				if (res.data.code == 0) {
					//初始化数据
					console.log("地图数据:", res)
					that.addressData = res.data.result
					that.city = that.addressData[0].children
					that.area = that.city[0].children
					that.cityCount = that.city[0]
					that.provinceCount = that.addressData[0]
					that.FEntityPROVINCE_ID = that.addressData[0].value
					that.FEntityPROVINCE = that.addressData[0].label
					that.FEntityCITY_ID = that.city[0].value
					that.FEntityCity = that.city[0].label
					//获取用户已选中区域，并为表添加count属性

					for (let i = 0, len = that.addressData.length; i < len; i++) {
						const Pitem = that.addressData[i]
						let Pcount = 0
						that.$set(Pitem, 'count', 0)
						for (let i = 0, len = Pitem.children.length; i < len; i++) {
							const Citem = Pitem.children[i]
							let Ccount = 0
							that.$set(Citem, 'count', 0)
							for (let i = 0, len = Citem.children.length; i < len; i++) {
								const Aitem = Citem.children[i]
								if (that.Uarea) {
									for (let i = 0, len = that.Uarea.length; i < len; i++) {
										const Uitem = that.Uarea[i]
										if (Uitem.FEntityCOUNTY_ID === Aitem.value) {
											that.$set(Aitem, 'checked', true)
											if (Uitem.FEntityPROVINCE_ID === Pitem.value) {
												Pcount += 1
											}
											if (Uitem.FEntityCITY_ID === Citem.value) {
												Ccount += 1
											}
											that.select = {}
											that.select.FEntityPROVINCE_ID = Uitem.FEntityPROVINCE_ID
											that.select.FEntityPROVINCE = Uitem.FEntityPROVINCE
											that.select.FEntityCITY_ID = Uitem.FEntityCITY_ID
											that.select.FEntityCity = Uitem.FEntityCity
											that.select.FEntityCOUNTY_ID = Uitem.FEntityCOUNTY_ID
											that.select.FEntityCOUNTY = Uitem.FEntityCOUNTY
											that.choice.push(that.select)
										}
									}
								}
							}

							that.$set(Citem, 'count', Ccount)
							Ccount = 0
						}
						that.$set(Pitem, 'count', Pcount)
						Pcount = 0
					}
					console.log(1)
				} else {
					console.log("出现错误", res)
				}
			});
			this.width = this.$store.state.sysInfo.windowWidth
			this.height = this.$store.state.sysInfo.screenHeight
			this.id = this.$store.state.userInfo.Id
			this.Uarea = this.$store.state.userInfo.FServiceArea
			if(this.Eflag==true){
				this.Uarea=false
			}
		},
		onLoad() {
			uni.$u.mpShare.title = '页面分享';
		},
		onshow() {

		},
		props: ['Eflag','FID'],
		data() {
			return {
				rSelectY: [0],
				rSelectM: [0],
				addressData: [],
				province: [],
				provinceCount: [],
				city: [],
				cityCount: [],
				area: [],
				FEntityPROVINCE_ID: "",
				FEntityPROVINCE: "",
				FEntityCITY_ID: "",
				FEntityCity: "",
				FEntityCOUNTY_ID: "",
				FEntityCOUNTY: "",
				choice: [],
				width: "",
				height: "",
				postdata: {
					IsDeleteEntry: true,
					Model: {
						FID: 1,
						FServiceArea: [],
						IsDeleteEntry: true
					}
				},
				id: "",
				btnStyle: {
					background: "#7D5AFC",
					color: "#FFFFFF"
				},
				Uarea: [],
				select: {
					FEntityPROVINCE_ID: "",
					FEntityPROVINCE: "",
					FEntityCITY_ID: "",
					FEntityCity: "",
					FEntityCOUNTY_ID: "",
					FEntityCOUNTY: "",
				}

			}
		},
		methods: {
			//获取省列表的下标，并给省id赋值，传递该省所含的市列表
			tapInfo(e) {
				if (this.rSelectY.indexOf(e) !== -1) {
					this.city = this.addressData[e].children
				} else {
					this.rSelectY.shift()
					this.rSelectY.unshift(e)
					this.city = this.addressData[e].children
					if (this.city) {
						this.provinceCount = this.addressData[e]
						this.cityCount = this.city[0]
						this.area = this.city[0].children
						this.rSelectM = [0]
						this.FEntityCITY_ID = this.city[0].value
						this.FEntityCity = this.city[0].label
						this.FEntityPROVINCE_ID = this.addressData[e].value
						this.FEntityPROVINCE = this.addressData[e].label
					} else {
						this.area = null
						this.city = null
					}
				}
			},
			tapInfoM(e) {
				//获取市列表的下标，并给市id赋值，传递该市所含的区列表
				if (this.rSelectM.indexOf(e) !== -1) {
					this.area = this.city[e].children
				} else {
					this.rSelectM.shift()
					this.rSelectM.unshift(e)
					this.area = this.city[e].children
					this.cityCount = this.city[e]
					this.FEntityCITY_ID = this.city[e].value
					this.FEntityCity = this.city[e].label
				}
			},
			//检查所选地区是否重复，不重复则添加进数组。
			inspectChoice(value) {
				let choice = this.choice
				this.select = {}
				let a = 0
				for (var i = 0, len = choice.length; i < len; i++) {

					if (value == choice[i].FEntityCOUNTY_ID) {
						a = 1
					}
				}
				if (a != 1) {
					this.select.FEntityPROVINCE_ID = this.FEntityPROVINCE_ID
					this.select.FEntityPROVINCE = this.FEntityPROVINCE
					this.select.FEntityCITY_ID = this.FEntityCITY_ID
					this.select.FEntityCity = this.FEntityCity
					this.select.FEntityCOUNTY_ID = this.FEntityCOUNTY_ID
					this.select.FEntityCOUNTY = this.FEntityCOUNTY


					choice.push(this.select)
				}
			},
			//删除数组中取消选中的数据。
			deleteChoice(value) {
				let choice = this.choice
				let len = choice.length
				for (var i = 0; i < len; i++) {
					if (choice[i].FEntityCOUNTY_ID == value) {
						choice.splice(i, 1); //删除下标为i的元素
						return choice;
					}
				}
			},
			checkboxChange(e) {
				//判断哪些区被选中，并将选中的区传递进数组。
				var items = this.area,
					values = e.detail.value;
				var count = e.detail.value.length;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
						this.FEntityCOUNTY = item.label
						this.FEntityCOUNTY_ID = item.value
						this.inspectChoice(item.value)
					} else {
						this.$set(item, 'checked', false)
						this.deleteChoice(item.value)
					}
				}
				//判断选中区域的数量，数量大于0则为对应市对象添加count属性并赋值数量，小于0则删除count属性。
				if (count > 0) {
					this.$set(this.cityCount, 'count', count)
				} else {
					this.$set(this.cityCount, 'count', 0)
				}
				this.checkPcount()

			},
			//省列表获取每个市中选中的区域数量，数量大于0则为对省市对象添加count属性并赋值数量，小于0则删除count属性
			checkPcount() {
				var Pcount = 0
				var Ccity = this.city
				for (var i = 0, len = Ccity.length; i < len; i++) {
					const item = Ccity[i]
					if (item.count) {
						Pcount += item.count
					}
				}
				if (Pcount > 0) {
					this.$set(this.provinceCount, 'count', Pcount)
				} else {
					this.$set(this.provinceCount, 'count', 0)
				}

			},
			bottomBtn() {
				this.postdata.Model.FServiceArea = this.choice
				this.postdata.Model.FID = this.id
				console.log(this.postdata)
				console.log(this.Eflag)
				if (this.Eflag == true) {
					this.postdata.Model.FID=this.FID
					loading()
					edit(this.postdata).then((res) => {
						hidden()
						if (res.data.code == 0) {
							console.log(res)
							uni.switchTab({
								url: '/pages/index/index'
							})
						} else {
							console.log("error")
							uni.switchTab({
								url: '/pages/index/index'
							})
						}

					})
				} else {
					loading()
					edit(this.postdata).then((res) => {
						hidden()
						if (res.data.code == 0) {
							console.log(res)
							uni.switchTab({
								url: '/pages/my/my'
							})
						} else {
							console.log("error")
							uni.switchTab({
								url: '/pages/my/my'
							})
						}

					})
				}


			},


		},
	}
</script>
<style scoped>
	.deom-flex {
		flex-direction: column;
		overflow-y: scroll;
		font-size: 35rpx;
		flex: 1;
		border-right: 0.5rpx solid #ecedef;
		color: #a3a3a3;
	}

	.defa {
		/* 		width: 250rpx; */
		height: 100rpx;
		overflow: hidden;
		text-align: center;
		vertical-align: middle;
		white-space: nowrap;
		text-overflow: ellipsis;
		padding-top: 20rpx;

	}

	.active {
		/* 		width: 250rpx; */
		height: 100rpx;
		border: 1px solid #f7f8f9;
		background-color: #f7f8f9;
		overflow: hidden;
		text-align: center;
		vertical-align: middle;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.uni-list {
		font-size: 35rpx;
		overflow-y: scroll;
		flex: 1;
		color: #a3a3a3;
	}

	.uni-label {
		padding-top: 20rpx;
		/* 		width: 250rpx; */
		height: 100rpx;
		display: block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		padding-left: 20rpx;
	}

	.activeC {
		border: 1px solid #f7f8f9;
		background-color: #f7f8f9;
		padding-top: 20rpx;
		/* 		width: 250rpx; */
		height: 100rpx;
		display: block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		padding-left: 20rpx;
		color: red;
	}

	.setFlex {
		display: flex;
	}

	.flexh {
		flex-direction: row
	}

	.bottom {
		position: fixed;
		bottom: 0rpx;
	}

	.radius {
		display: inline-block;
		width: 45rpx;
		height: 45rpx;
		border: 3rpx none #ff1f02;
		background-color: #ff1f02;
		color: white;
		border-radius: 50%;
	}

	.show {
		display: none;
	}
</style>
