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

const list = ref([
  {
    name: '泸县'
  },
  {
    name: '江阳'
  },
  {
    name: '龙马潭'
  },
  {
    name: '通滩'
  },
  {
    name: '纳溪'
  },
  {
    name: '合面'
  },
  {
    name: '叙永'
  },
])

// 选镇
const choseTownFn = (item) => {
  emit('offAreaList', item);
  props.choseArea = false;
}

</script>

<template>
  <transition name="fade">
    <div class="address" v-if="props.choseArea">
      <div
        class="address-li"
        @click="choseTownFn(item)"
        v-for="(item, index) in list"
        :key="index"
      >
        {{ item.name }}
      </div>
    </div>
  </transition>
</template>

<style lang="scss" scoped>
.address {
  left: 1vw;
  top: 18px;
  position: absolute;
  width: 10vw;
  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;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>