<template>
    <Transition>
        <div class="address" v-if="props.choseArea">
            <div class="address-li" @click="choseTownFn(1)" v-for="( item, index ) in 10 ">泸县</div>
        </div>
    </Transition>
</template>

<script setup>
import { defineProps, defineEmits } from "vue"
import { useRouter } from 'vue-router'
const router = useRouter()
const emit = defineEmits(['offAreaList'])
const props = defineProps({
    choseArea: Boolean,
})

// 选额镇
const choseTownFn = (id) => {
    props.choseArea = false
    emit('offAreaList')
    router.replace('/townDetail?id=' + id)
}

</script>

<style lang="scss" scoped>
.address {
    left: 1vw;
    top: 18px;
    position: absolute;
    width: 8vw;
    height: 18vh;
    background-color: #001E32;
    color: #C7DBE3;
    z-index: 9999;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 5px;

    .address-li {
        padding: 2px 5px;
        cursor: pointer;

        border-bottom: 0.1px solid #0E293C;
    }
}

.address::-webkit-scrollbar {
    width: 10px;
    background-color: #153041;
}

.address::-webkit-scrollbar-track {
    background-color: #153041;
}

::-webkit-scrollbar-thumb {
    background-color: #4AB9D0;
    border-radius: 5px;
}
</style>