<template>
  <div class="app-container">
    <div class="app-container__item">
      <div class="app-container__item-h1">选择城市</div>
      <div class="app-container__item-body">
        <div class="app-container__item-body-value">
          <xd-json-view :data="ranges"></xd-json-view>
        </div>
        <xd-region-path
          v-model="ranges"
          :multiple="false"
          search-wdith="auto"
          @lazyLoad="getDataRegionList"
        ></xd-region-path>
      </div>
    </div>

  </div>
</template>

<script>
import XdRegionPath from "@/components/XdRegionPath";
import XdJsonView from "@/components/XdJsonView";

export default {
  name: 'index',
  components: {
    XdJsonView,
    XdRegionPath
  },
  data(){
    return {
      ranges: {},
      city: {
        0: [{"city_code":"1","name":"\u5317\u4eac","parent_id":"0"},{"city_code":"31","name":"\u65b0\u7586","parent_id":"0"},{"city_code":"4","name":"\u91cd\u5e86","parent_id":"0"},{"city_code":"19","name":"\u5e7f\u4e1c","parent_id":"0"},{"city_code":"3","name":"\u5929\u6d25","parent_id":"0"},{"city_code":"15","name":"\u6d59\u6c5f","parent_id":"0"},{"city_code":"52993","name":"\u6e2f\u6fb3","parent_id":"0"},{"city_code":"20","name":"\u5e7f\u897f","parent_id":"0"},{"city_code":"11","name":"\u5185\u8499\u53e4","parent_id":"0"},{"city_code":"30","name":"\u5b81\u590f","parent_id":"0"},{"city_code":"21","name":"\u6c5f\u897f","parent_id":"0"},{"city_code":"32","name":"\u53f0\u6e7e","parent_id":"0"},{"city_code":"14","name":"\u5b89\u5fbd","parent_id":"0"},{"city_code":"24","name":"\u8d35\u5dde","parent_id":"0"},{"city_code":"27","name":"\u9655\u897f","parent_id":"0"},{"city_code":"8","name":"\u8fbd\u5b81","parent_id":"0"},{"city_code":"6","name":"\u5c71\u897f","parent_id":"0"},{"city_code":"29","name":"\u9752\u6d77","parent_id":"0"},{"city_code":"22","name":"\u56db\u5ddd","parent_id":"0"},{"city_code":"12","name":"\u6c5f\u82cf","parent_id":"0"},{"city_code":"5","name":"\u6cb3\u5317","parent_id":"0"},{"city_code":"26","name":"\u897f\u85cf","parent_id":"0"},{"city_code":"84","name":"\u9493\u9c7c\u5c9b","parent_id":"0"},{"city_code":"16","name":"\u798f\u5efa","parent_id":"0"},{"city_code":"9","name":"\u5409\u6797","parent_id":"0"},{"city_code":"2","name":"\u4e0a\u6d77","parent_id":"0"},{"city_code":"17","name":"\u6e56\u5317","parent_id":"0"},{"city_code":"23","name":"\u6d77\u5357","parent_id":"0"},{"city_code":"25","name":"\u4e91\u5357","parent_id":"0"},{"city_code":"28","name":"\u7518\u8083","parent_id":"0"},{"city_code":"18","name":"\u6e56\u5357","parent_id":"0"},{"city_code":"13","name":"\u5c71\u4e1c","parent_id":"0"},{"city_code":"7","name":"\u6cb3\u5357","parent_id":"0"},{"city_code":"10","name":"\u9ed1\u9f99\u6c5f","parent_id":"0"}],
        1: [{"city_code":"jfb1","name":"\u5317\u4eac","parent_id":"1"},{"city_code":"bj-test1","name":"\u5317\u4eac-\u6d4b\u8bd5","parent_id":"1"}],
        jfb1: [{"city_code":"2812","name":"\u987a\u4e49\u533a","parent_id":"jfb1"},{"city_code":"2807","name":"\u95e8\u5934\u6c9f","parent_id":"jfb1"},{"city_code":"2803","name":"\u5d07\u6587\u533a","parent_id":"jfb1"},{"city_code":"2810","name":"\u5927\u5174\u533a","parent_id":"jfb1"},{"city_code":"2814","name":"\u6000\u67d4\u533a","parent_id":"jfb1"},{"city_code":"2801","name":"\u897f\u57ce\u533a","parent_id":"jfb1"},{"city_code":"2804","name":"\u5ba3\u6b66\u533a","parent_id":"jfb1"},{"city_code":"2953","name":"\u5e73\u8c37\u533a","parent_id":"jfb1"},{"city_code":"2816","name":"\u5bc6\u4e91\u533a","parent_id":"jfb1"},{"city_code":"3065","name":"\u5ef6\u5e86\u533a","parent_id":"jfb1"},{"city_code":"2802","name":"\u4e1c\u57ce\u533a","parent_id":"jfb1"},{"city_code":"2901","name":"\u660c\u5e73\u533a","parent_id":"jfb1"},{"city_code":"2805","name":"\u4e30\u53f0\u533a","parent_id":"jfb1"},{"city_code":"72","name":"\u671d\u9633\u533a","parent_id":"jfb1"},{"city_code":"2806","name":"\u77f3\u666f\u5c71\u533a","parent_id":"jfb1"},{"city_code":"2808","name":"\u623f\u5c71\u533a","parent_id":"jfb1"},{"city_code":"2800","name":"\u6d77\u6dc0\u533a","parent_id":"jfb1"},{"city_code":"2809","name":"\u901a\u5dde\u533a","parent_id":"jfb1"}],
        2812: [{"city_code":"51130","name":"\u5149\u660e\u8857\u9053","parent_id":"2812"},{"city_code":"51125","name":"\u5317\u77f3\u69fd\u9547","parent_id":"2812"},{"city_code":"51147","name":"\u6768\u9547\u5730\u533a","parent_id":"2812"},{"city_code":"51126","name":"\u5317\u52a1\u9547","parent_id":"2812"},{"city_code":"51141","name":"\u4ec1\u548c\u5730\u533a","parent_id":"2812"},{"city_code":"51139","name":"\u5357\u6cd5\u4fe1\u5730\u533a","parent_id":"2812"},{"city_code":"51134","name":"\u674e\u9042\u9547","parent_id":"2812"},{"city_code":"51138","name":"\u5357\u5f69\u9547","parent_id":"2812"},{"city_code":"51127","name":"\u5317\u5c0f\u8425\u9547","parent_id":"2812"},{"city_code":"51136","name":"\u9a6c\u5761\u5730\u533a","parent_id":"2812"},{"city_code":"51135","name":"\u9f99\u6e7e\u5c6f\u9547","parent_id":"2812"},{"city_code":"51140","name":"\u725b\u680f\u5c71\u5730\u533a","parent_id":"2812"},{"city_code":"51142","name":"\u80dc\u5229\u8857\u9053","parent_id":"2812"},{"city_code":"51146","name":"\u65fa\u6cc9\u8857\u9053","parent_id":"2812"},{"city_code":"51131","name":"\u540e\u6c99\u5cea\u5730\u533a","parent_id":"2812"},{"city_code":"51133","name":"\u674e\u6865\u9547","parent_id":"2812"},{"city_code":"51128","name":"\u5927\u5b59\u5404\u5e84\u9547","parent_id":"2812"},{"city_code":"51149","name":"\u8d75\u5168\u8425\u9547","parent_id":"2812"},{"city_code":"51137","name":"\u6728\u6797\u9547","parent_id":"2812"},{"city_code":"51143","name":"\u77f3\u56ed\u8857\u9053","parent_id":"2812"},{"city_code":"51132","name":"\u7a7a\u6e2f\u8857\u9053","parent_id":"2812"},{"city_code":"51129","name":"\u9ad8\u4e3d\u8425\u9547","parent_id":"2812"},{"city_code":"51144","name":"\u53cc\u4e30\u8857\u9053","parent_id":"2812"},{"city_code":"51145","name":"\u5929\u7afa\u5730\u533a","parent_id":"2812"},{"city_code":"51148","name":"\u5f20\u9547","parent_id":"2812"},{"city_code":"qweq123","name":"\u5e73\u65b9\u8857\u9053","parent_id":"2812"}]
      }
    }
  },
  methods:{
    /**
     * @description 获取配送区域
     * @param node 上级城市对象
     * @param resolve 回调地址
     */
    getDataRegionList(node, resolve) {
      let params = {city_code: 0, page_size: 10000};
      if (node.level > 0) {
        params['city_code'] = node['value'];
      }
      if(this.city[params['city_code']]) {
        let res = this.city[params['city_code']];
        if (node['level'] === 0) {
          res.splice(0, 0, {
            name: '全国',
            city_code: '0',
            leaf: true
          })
        }
        let temp = this.$xdHelper.idToSelectData(res, 'name', 'city_code', false);
        temp.filter(item => {
          if (!item['leaf']) {
            item['leaf'] = false;
            //街道下无子节点
            if (node.level === 3) {
              item['leaf'] = true;
            }
          }
          return item;
        });
        console.log(temp);
        resolve(temp)
      }
      else {
        resolve([]);
      }
    },
  }
}
</script>

<style lang="scss" scoped>
  .app-container {
    padding: 20px;
  }
</style>
