<template>
    <view class="addressIndex-box">
        <view class="fz30 fontBold MB30 PX53 relative">选择出发地/目的地
            <text v-if="SelectObj.DepartCityId||SelectObj.ArriveCityId" class="fz24 color9999A5 absolute PX10" 
            style="right: 53rpx;top: 0;bottom: 0;" @click="Clear">清空</text>
        </view>
        <view class="fz30 fontBold MB30 PX53 row-aic-n" v-if="false">
            <text style="width: 50%;">当前出发地</text>
            <text>当前目的地</text>
        </view>
        <view class="MT30 PX53 row-aic-n" v-if="false">
            <view style="width: 50%;">
                <view class="addressIndex-Orientation inlineblock bgF5 row-ajc-n textCenter" style="width: auto; padding: 15rpx 50rpx;">
                    <img class="inlineblock MR10" mode="widthFix" style="width: 18rpx;height: 22rpx"
                    src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696743247000_254.png"/>
                    <text class="fz30">
                        <template v-if="SelectObj.DepartCityName">
                            {{SelectObj.DepartCityName}}
                        </template>
                        <template v-else>
                            --
                        </template>
    
                    </text>
                </view>
            </view>
            <view>
                <view class="addressIndex-Orientation inlineblock bgF5 row-ajc-n textCenter" style="width: auto; padding: 15rpx 50rpx;">
                    <img class="inlineblock MR10" mode="widthFix" style="width: 18rpx;height: 22rpx"
                    src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1696743247000_254.png"/>
                    <text class="fz30">
                        <template v-if="SelectObj.ArriveCityName">
                            {{SelectObj.ArriveCityName}}
                        </template>
                        <template v-else>
                            --
                        </template>
    
                    </text>
                </view>
            </view>
        </view>
        <view class="height-line1 MT25" ></view>
       <!-- <view class="fz30 fontBold MT20 PX53 MB20 row-aic-n">
            <view style="width: 150rpx;">出发地</view>
            <view class="flexG">目的地</view>
        </view> -->
        <view class="hidden" style="height: calc(100vh - 60vh);">
            <scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" style="padding:0 20px;" :style="{ height: '100%' }">
				<view class="air-city-box">
					<view class="air-city-item" :class="{'active':i==active}" @click="changeHandler(i)" v-for="(x,i) in dataList" :key="i">
						{{x.Name}}出发
					</view>
				</view>
				<view class="air-arrcity-box">
					<view class="air-arrcity-item" @click="getAddress(i)" 
                    :class="{'currentCity':SelectObj.ArriveCityId==x.ID && SelectObj.DepartCityId==dataList[active].ID}" 
                    v-for="(x,i) in dataList[active].CityList">{{x.Name}}</view>
				</view>
                <!-- <template v-for="(item,index) in dataList">
                    <view class="addressIndex-toponym row-aic-n" :key="item.ID">
                        <view style="width: 150rpx;"
                        :class="[SelectObj.DepartCityId==item.ID?'colorDEBF7B':'']"
                        @click="getAddress(item)">
                            {{item.Name}}
                        </view>
                        <view class="flexG row-aic-w">
                            <view class="addressIndex-toponym-box" v-for="(items,index) in item.CityList" :key="items.ID">
                                <view class="addressIndex-Orientation inlineblock textCenter MT10 fz30"
                                :class="[SelectObj.ArriveCityId==items.ID?'bgDEBF7B':'bgF5']"
                                @click="getAddress(item,items)">{{items.Name}}</view>
                            </view>
                        </view>
                    </view>
                    <view class="height-line1 MT10" ></view>
                </template> -->
				
            </scroll-view>
        </view>
        <view class="AirplanePassengerList-footer fixedFooter bgFFF fixed z-index2">
            <view
            class="AirplanePassengerList-buttom bgDEBF7B fz32 fontBold textCenter"
            @click="RenewalAddres">
                确认
            </view>
       </view>
    </view>
</template>
<script>
    export default {
        props:['OriginAddressObj','dataList'],
        data() {
            return {
                SelectObj: {},
				active:0
            }
        },
        onLoad(options){
            
        },
        watch: {
            OriginAddressObj: {
                handler(newVal, oldval) {
                    this.SelectObj = JSON.parse(JSON.stringify(this.OriginAddressObj))
                },
                deep: true
            },
        },
        created() {},
        mounted() {
            
        },
        methods: {
			changeHandler(i) {
				console.log(i)
				this.active=i
			},
            RenewalAddres(){
                this.$emit('RenewalAddres',this.SelectObj)
            },
            Clear(){
                this.ClearData()
            },
            ClearData(){
                this.SelectObj.DepartCityName = ''
                this.SelectObj.DepartCityId = 0
                this.SelectObj.ArriveCityName = ''
                this.SelectObj.ArriveCityId = 0
            },
            getAddress(i){
				let item = this.dataList[this.active]
				let items = this.dataList[this.active].CityList[i]
                this.SelectObj.DepartCityName = item.Name
                this.SelectObj.DepartCityId = item.ID
                this.SelectObj.ArriveCityName = items.Name
                this.SelectObj.ArriveCityId = items.ID
                this.$forceUpdate()
            },
            
        }
    }
</script>
<style scoped>
@import url("@/asset/css/flex.css");
@import url("../../style.css");
.addressIndex-box{
    padding: 46rpx 0 139rpx 0;
}
.addressIndex-Orientation{
    width: 160rpx;
    padding: 15rpx 0;
    border-radius: 30rpx;
}
.addressIndex-toponym{
    padding: 0 0 0 53rpx;
}
.addressIndex-toponym-box{
    flex: 0 0 33.33%;
}
.air-city-box{
	display: flex;
	width: auto;
	align-items: center;
	overflow-x: auto;
	margin:10px 0 15px 0;
}
.air-city-box .air-city-item{
	height: 50px;
	line-height: 50px;
	font-size: 15px;
	transition-duration: 0.5s;
	padding: 0 15px;
	font-weight: bold;
	position: relative;
}
.air-city-box .air-city-item::after{
	display: block;
	content: ' ';
	position: absolute;
	bottom: 16px;
	z-index: -1;
	height: 8px;
	left: 10px;
	right: 10px;
	border-radius: 4px;
}
.air-city-box .air-city-item.active::after{
	background-color: #DFBE6E;
}
.air-arrcity-box{
	display: flex;
	flex-wrap: wrap;
	height: auto;
}
.air-arrcity-box .air-arrcity-item{
	margin-bottom: 20px;
	margin-right: 20px;
	flex-shrink: 0;
	width: 26%;
	background-color: #e4e2db;
	border-radius: 10px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
}
.air-arrcity-box .air-arrcity-item.currentCity{
	background-color: #1f1f1f;
	color:#FFF;
}
</style>