<template>
    <view class="addressIndex-box">
        <view class="fz30 fontBold textCenter 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">
            <text style="width: 50%;">当前出发地</text>
            <text>当前目的地</text>
        </view>
        <view class="MT30 PX53 row-aic-n">
            <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="{ height: '100%' }">
                <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: {},
            }
        },
        onLoad(options){
            
        },
        watch: {
            OriginAddressObj: {
                handler(newVal, oldval) {
                    this.SelectObj = JSON.parse(JSON.stringify(this.OriginAddressObj))
                },
                deep: true
            },
        },
        created() {},
        mounted() {
            
        },
        methods: {
            RenewalAddres(){
                this.$emit('RenewalAddres',this.SelectObj)
            },
            Clear(){
                this.ClearData(null,null,1)
            },
            ClearData(item,items,type){
                if(item||type){
                    this.SelectObj.DepartCityName = ''
                    this.SelectObj.DepartCityId = 0
                }
                if(items||type){
                    this.SelectObj.ArriveCityName = ''
                    this.SelectObj.ArriveCityId = 0
                }
            },
            getAddress(item,items){
                if(item&&items){
                    this.ClearData(item,items)
                }
                if(!items){
                    this.ClearData(item,items,1) 
                }
                this.ClearData(item,items)
                this.SelectObj.DepartCityName = item.Name
                this.SelectObj.DepartCityId = item.ID
                if(items){
                    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%;
}
</style>