<!--地区选择器-->
<template>
  <u-popup :show="show" closeable mode="bottom" @close="show = false">
    <view class="c-city-select">
      <view class="title w-flex">请选择所在地区</view>
      <view class="names">
        <view v-for="(item, index) in names" :key="item.code" :class="{ selected: item.code == listCode || (listCode==undefined && index==props.level-1) }"
          @click="clickItem(item, index)">{{ item.name }}</view>
        <view v-if="names.length < props.level" :class="{ selected: !listCode }">请选择</view>
      </view>
      <scroll-view class="list-body" scroll-y>
        <view class="list-item" hover-class="w-hover-bg" v-for="item in list" :key="item.code"
          :class="{ selected: current != undefined && current.startsWith(item.code) }" @click="change(item)">{{ item.name
          }}</view>
      </scroll-view>
    </view>
  </u-popup>
</template>

<script setup>
import { onLoad, onShow, onReady } from '@dcloudio/uni-app'
import { ref, getCurrentInstance, computed, watch } from 'vue'
import * as cityApi from '@/api/address/city'

const { proxy } = getCurrentInstance()

const lens = [2, 4, 6, 9, 12]

const props = defineProps({
  level: {
    type: Number,
    default: 5
  }
});

const show = ref(false)

const names = ref([])

const list = ref([]);
const current = ref(undefined);
const listCode = ref(undefined);

const open = async (code) => {
  show.value = true
  current.value = code
  doList(code)
}
const doList = async (code, setName = true) => {
  if (code) {
    if (setName) {
      names.value = await cityApi.names(code)
    }
    if (names.value.length >= props.level) {
      if (names.value.length == 1) {
        list.value = await cityApi.list('')
      } else {
        list.value = await cityApi.list(code.substr(0, lens[names.value.length - 2]))
      }
    } else {
      list.value = await cityApi.list(code)
    }
  } else {
    list.value = await cityApi.list('')
    if (setName) {
      names.value = []
    }

  }
}
const emit = defineEmits(['change'])

defineExpose({ open })



const change = async (item) => {
  current.value = item.code
  await doList(item.code)
  listCode.value = undefined
  if (names.value.length >= props.level) {
    show.value = false

    emit('change', { code: item.code, name: names.value.map(item => item.name).join(' '), names: names.value })
  }
}


const clickItem = async (item, index) => {
  listCode.value = item.code;
  if (index == 0) {
    await doList('', false);
  } else {
    await doList(item.code.substr(0, lens[index - 1]), false);
  }

}
</script>

<style lang="scss" scoped>
.c-city-select {
  --seleted-inner: var(--seleted, var(--w-danger));
  background-color: var(--bg-color, var(--w-bg-light));

  font-size: .8rem;

  .title {
    font-size: 1.1em;
    font-weight: bold;
    height: 3em;
  }

  .names {
    display: flex;
    flex-wrap: wrap;
    padding: 1em .5em .5em;

    &>view {
      margin: 0 0 .5em 1em;
      font-weight: bold;

      &.selected {
        color: var(--seleted-inner);
      }
    }
  }

  .list-body {
    height: 70vh;
    border-top: #0001 solid 1px;
  }

  .list-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 1em;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      height: 1px;
      width: 100%;
      left: 0;
      bottom: 0;
      background-color: #0001;
      transform: scale(1, .5);
    }

    &.selected::after {
      content: '✔';
      color: var(--seleted-inner);
      margin-left: .5em;

    }

  }
}
</style>
