<!--
@zname: 行政区域组件-template写法
@author: 张泽贤
@time: 2023-02-03
@doc:
-->
<template>
  <!-- :treeCheckStrictly="true" -->
  <a-tree-select
    v-model="value"
    class="tms-tree-select"
    dropdownClassName="p-tree"
    multiple
    :maxTagCount="1"
    :treeCheckable="true"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    :tree-data="treeData"
    :replaceFields="{ key: 'zoneid', title: 'zname', value: 'zoneid' }"
    placeholder="请选择行政区域"
    allow-clear
    :filterTreeNode="filterTreeNode"
    :disabled="disabled"
    @change="areaTreeChange"
    :load-data="onLoadData"
  >
    <a-icon slot="suffixIcon" theme="filled" type="folder" />
  </a-tree-select>
</template>

<script>
import { axios } from '@/utils/request';
import { UPCLOUD_RDC_TMS_MAINDATA_SERVICE } from '@/config/serviceSettings.js';
const PinyinMatch = require('pinyin-match').default;

export default {
  props: {
    areaId: {
      type: Array,
      default: () => [],
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    areaId(v) {
      this.value = v.map((item) => item.zoneid);
    },
  },
  data() {
    return {
      treeData: [],
      treeDefaultExpandedKeys: [],
      value: [],
      list: [],
    };
  },
  created() {
    this.getByPid({ fatherid: '01' }).then((res) => {
      if (res.success) {
        this.treeData = [...res.data];
        // this.value = this.areaId
        //   ? this.areaId.map((item) => {
        //       return { value: item };
        //     })
        //   : [];
      } else {
        this.$exception(res);
      }
    });
  },
  methods: {
    getByPid(data) {
      return axios.post(UPCLOUD_RDC_TMS_MAINDATA_SERVICE + '/zone/get-by-pid', data);
    },
    filterTreeNode(inputValue, treeNode) {
      return PinyinMatch.match(treeNode.data.props.title, inputValue).length > 0 && treeNode;
    },
    areaTreeChange(value, label, extra) {
      this.list = [];
      if (value.length) {
        this.getList(extra.allCheckedNodes);
      }
      this.$emit('getAreaChange', this.list);
    },
    getList(list) {
      list.forEach((item) => {
        if (item.children) {
          this.getList(item.children);
        }
        this.list.push({
          zoneid: item.node.data.props.zoneid,
          zlevel: item.node.data.props.zlevel,
        });
      });
    },
    areaTreeSelect(value, node, extra) {
      // console.log(extra, 'areaTreeSelect');
      let list = extra.checkedNodes.map((item) => {
        return {
          zoneid: item.data.props.value,
          zlevel: item.data.props.zlevel,
        };
      });
      this.$emit('getAreaSelect', list);
    },
    onLoadData(treeNode) {
      return new Promise((resolve) => {
        if (treeNode.dataRef.zlevel === 5) {
          resolve();
          return;
        }
        this.getByPid({ fatherid: treeNode.dataRef.zoneid }).then((res) => {
          if (res.success) {
            treeNode.dataRef.children = [...res.data];
            this.treeData = [...this.treeData];
            resolve();
          } else {
            this.$exception(res);
          }
        });
      });
    },

    onReset() {
      this.value = [];
    },
  },
};
</script>