<template>
  <section class="areaSelector">
    <ai-search-popup mode="bottom" ref="areaSelector">
      <template #btn>
        <div class="areaSelector">
          <span v-for="area in fullArea" :key="area.id" v-text="area.name"
                :class="{current:area.id==areaId}" @tap="index=area.id,getChildAreas(area.id)"/>
        </div>
      </template>
      <div class="areaSelector">
        <span v-for="area in fullArea" :key="area.id" v-text="area.name"
              :class="{current:area.id==index}"
              @click="index=area.id,getChildAreas(area.id)"/>
      </div>
      <div class="pendingItem" flex v-for="op in list" :key="op.id" @tap="handleSelect(op)">
        <div class="fill" :class="{self:index==op.id}" v-html="op.name"/>
        <u-icon name="arrow-right" color="#ddd"/>
      </div>
    </ai-search-popup>
  </section>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "areaSelector",
  props: {
    areaId: {default: ""}
  },
  computed: {
    ...mapState(['user']),
    dataRange() {
      let rules = [10, 8, 6, 3, 0], level = 2
      rules.some((e, i) => {
        let reg = new RegExp(`0{${e}}`, 'g')
        if (reg.test(this.user.areaId)) {
          return level = i
        }
      })
      return level
    }
  },
  data() {
    return {
      fullArea: [],
      index: "",
      list: []
    }
  },
  watch: {
    areaId(v) {
      v && this.getFullArea()
    }
  },
  methods: {
    getFullArea() {
      let {areaId} = this
      return areaId && this.$http.post("/admin/area/getAllParentAreaId", null, {
        params: {areaId}
      }).then(res => {
        if (res?.data) {
          this.fullArea = res.data.reverse().slice(this.dataRange)
        }
      })
    },
    getChildAreas(id) {
      id && this.$http.post("/admin/area/queryAreaByParentId", null, {
        params: {id}
      }).then(res => {
        if (res?.data) {
          this.list = res.data
          let self = this.fullArea.find(e => e.id == this.index)
          this.list.unshift(self)
        }
      })
    },
    handleSelect(op) {
      this.$emit('select', op)
      this.$refs.areaSelector?.handleSelect()
    }
  },
  created() {
    this.index = this.areaId
    this.getFullArea()
  }
}
</script>

<style lang="scss" scoped>
.areaSelector {
  ::v-deep .AiSearchPopup {
    .areaSelector {
      display: flex;
      align-items: center;

      span {
        cursor: pointer;

        &:first-of-type:before {
          content: "";
          padding: 0;
        }

        &:before {
          color: #333;
          content: "/";
          padding: 0 16px;
        }
      }

      .current {
        color: #3F8DF5;
      }
    }

    .u-drawer-content {
      position: fixed;

      .areaSelector {
        padding: 0 16px;
        box-sizing: border-box;
        border-bottom: 16px solid #f5f5f5;

        span {
          line-height: 100px;
        }
      }
    }

    .pendingItem {
      margin-left: 32px;
      padding-right: 32px;
      height: 104px;
      border-bottom: 1px solid #ddd;

      .self {
        font-weight: bold;
      }
    }
  }
}
</style>
