<template>
  <section class="AiAreaPicker">
    <div @click="handleOpenDialog">
      <slot v-if="$scopedSlots.default" :selected="selected"/>
      <el-button v-else type="text">选择地区</el-button>
    </div>
    <ai-dialog :visible.sync="dialog" title="选择地区" @onConfirm="submit" @close="selecting=[],init()" destroy-on-close>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item v-for="(item,i) in path" :key="item.id">
          <el-button type="text" @click.native="handlePathClick(i)">{{ item.name }}</el-button>
        </el-breadcrumb-item>
      </el-breadcrumb>
      <ai-table-select class="mar-t16" v-model="selecting" :instance="instance" :action="action" :isShowPagination="false" extra="hidden" search-key="name"
                       multiple valueObj>
        <template slot="extra" slot-scope="{row}">
          <el-button v-if="row.id!=root" type="text" icon="el-icon-arrow-right" @click.stop="getChildren(row)"/>
        </template>
      </ai-table-select>
    </ai-dialog>
  </section>
</template>

<script>

export default {
  name: "AiAreaPicker",
  model: {
    prop: "value",
    event: "change"
  },
  props: {
    value: {default: ""},
    meta: {default: null},
    root: {default: ""},
    instance: {type: Function, required: true},
    multiple: Boolean
  },
  computed: {
    action() {
      let currentParent = this.path.slice(-1)?.[0]?.id
      return !!currentParent && /[^0]0{0,2}$/.test(currentParent) ? `/admin/appresident/queryAreaIdGroup?currentAreaId=${currentParent}` :
          `/admin/area/queryAreaByParentIdSelf?self=${currentParent == this.root ? 1 : ''}&id=${currentParent}`
    }
  },
  watch: {
    value(v) {
      this.dispatch('ElFormItem', 'el.form.change', [v]);
    },
    selected(v) {
      this.$emit("update:meta", v)
    }
  },
  data() {
    return {
      dialog: false,
      options: [],
      selecting: [],
      path: [],
      selected: []
    }
  },
  methods: {
    dispatch(componentName, eventName, params) {
      let parent = this.$parent || this.$root;
      let name = parent.$options.componentName;
      while (parent && (!name || name !== componentName)) {
        parent = parent.$parent;
        if (parent) {
          name = parent.$options.componentName;
        }
      }
      if (parent) {
        parent.$emit.apply(parent, [eventName].concat(params));
      }
    },
    getChildren(row) {
      let area = this.path.find(e => e.id == row.id)
      if (!area) this.path.push(row)
    },
    handlePathClick(index) {
      this.path.splice(index + 1, 10)
    },
    submit() {
      this.$emit("change", this.selecting.map(e => e.id))
      this.selected = this.$copy(this.selecting)
      this.$emit("select", this.selecting)
      this.dialog = false
    },
    init() {
      this.path = [{id: this.root, name: "可选范围"}]
    },
    handleOpenDialog() {
      let areas = this.value.filter(e => /^\d{12}$/.test(e))
      this.instance.post("/admin/area/getAreaNameByids", null, {
        params: {ids: areas?.toString()}
      }).then(res => {
        if (res?.data) {
          this.selecting = this.value.map(id => ({id, name: res.data?.[id] || id}))
          this.dialog = true
        }
      })
    },
    getAreaById(id) {
      return this.instance.post("/admin/area/queryAreaByAreaid", null, {
        params: {id}
      }).then(res => {
        if (res?.data) {
          return res.data
        }
      })
    }
  },
  created() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.AiAreaPicker {
  .mar-t16 {
    margin-top: 16px;
  }
}
</style>
