<template>
    <view class="addressIndex-box">
        <view class="fz30 fontBold textCenter MB30 PX53 relative">选择{{AddressType==1?'出发地':'目的地'}}
            <text v-if="SelectObj.ID" class="fz24 color9999A5 absolute PX10" style="right: 53rpx;top: 0;bottom: 0;" @click="Clear">清空</text>
        </view>
        <view class="fz30 fontBold MB30 PX53">当前{{AddressType==1?'出发地':'目的地'}}</view>
        <view class="MT30 PX53">
            <view class="addressIndex-Orientation inlineblock bgF5 row-ajc-n textCenter">
                <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">{{SelectObj.Name?SelectObj.Name:'--'}}</text>
            </view>
        </view>
        <view class="fz30 fontBold MT45 PX53">地址</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%' }">
                <view class="addressIndex-toponym row-aic-w">
                    <view class="addressIndex-toponym-box row-ajc-n" v-for="(item,index) in dataList">
                        <view class="addressIndex-Orientation inlineblock textCenter MT30 fz30"
                        :class="[SelectObj.ID==item.ID?'bgDEBF7B':'bgF5']"
                        @click="getAddress(item)">{{item.Name}}</view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>
<script>
    export default {
        props:['AddressType','OriginAddressObj','dataList'],
        data() {
            return {
                SelectObj: {
                    Name: '',
                    ID: 0
                },
            }
        },
        onLoad(options){
            
        },
        watch: {
            AddressType: {
                handler(newVal, oldval) {
                    if(newVal==1){
                        this.SelectObj.Name = this.OriginAddressObj.DepartCityName
                        this.SelectObj.ID = this.OriginAddressObj.DepartCityId
                    }else{
                        this.SelectObj.Name = this.OriginAddressObj.ArriveCityName
                        this.SelectObj.ID = this.OriginAddressObj.ArriveCityId
                    }
                    
                },
                deep: false
            },
            OriginAddressObj: {
                handler(newVal, oldval) {
                    if(this.AddressType==1){
                        this.SelectObj.Name = newVal.DepartCityName
                        this.SelectObj.ID = newVal.DepartCityId
                    }else{
                        this.SelectObj.Name = newVal.ArriveCityName
                        this.SelectObj.ID = newVal.ArriveCityId
                    }
                    
                },
                deep: true
            },
        },
        created() {},
        mounted() {
            
        },
        methods: {
            Clear(){
                this.SelectObj = {
                    Name: '',
                    ID: 0,
                }
                this.$emit('RenewalAddres',this.SelectObj ,this.AddressType)
            },
            getAddress(item){
                if(item.ID==this.SelectObj.ID){
                    this.SelectObj = {
                        Name: '',
                        ID: 0,
                    } 
                }else{
                    this.SelectObj = {
                        Name: item.Name,
                        ID: item.ID,
                    } 
                }
                this.$emit('RenewalAddres',this.SelectObj ,this.AddressType)
                // 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: 190rpx;
    padding: 15rpx 0;
    border-radius: 30rpx;
}
.addressIndex-toponym{
    padding: 0 22rpx;
}
.addressIndex-toponym-box{
    flex: 0 0 33.33%;
}
</style>