<template>
  <tree-select
    name="demo"
    :multiple="multiple"
    :clearable="clearable"
    :disabled="disabled"
    :options="options"
    :flat="multiple"
    :value-consists-of="'ALL_WITH_INDETERMINATE'"
    :flatten-search-results="true"
    :default-expand-level="1"
    zIndex="9999"
    @input="inputEvent"
    @select="selectEvent"
    @deselect="deselectEvent"
    v-model="inputValue"
    v-on="listeners"
    :always-open="alwaysOpen"
    :normalizer="normalizer"
    :noOptionsText="'暂时无数据'"
    :shouldShowCount="true"
    :noResultsText="'未匹配到相应的结果'"
    v-bind="$attrs"
  >
    <label
      slot="option-label"
      slot-scope="{ node, shouldShowCount, count, labelClassName, countClassName }"
      :class="labelClassName">
      <span v-if="group">{{ node.raw[optionLabel.id] }}/</span> {{ node.raw[optionLabel.label] }}
      <span v-if="shouldShowCount" :class="countClassName">({{ count }})</span>
      <slot name="option-label" :node="node"></slot>
    </label>
  </tree-select>
</template>

<script>
// import the component
import TreeSelect from "@riophae/vue-treeselect";
// import the styles
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "CmsFormTree",
  components: { TreeSelect },
  data() {
    let { ...listeners } = this.$listeners;
    return {
      listeners: listeners,
      options: [],
    };
  },
  computed: {
    inputValue: {
      get() {
        return this.value;
      },
      set(val) {
        console.log("===============", val);
        this.$emit("input", val);
      },
    },
  },
  activated() {

  },
  created() {
    this.$nextTick(() => {
      if (this.requestCall) {
        if (typeof this.requestCall === "string") {
        } else if (typeof this.requestCall === "function") {
          this.requestCall(this.queryParams || {}).then((res) => {
            if (res) {
              this.options = res.data;
            }
          });
        } else if (Array.isArray(this.requestCall)) {
          this.options = this.requestCall;
          console.log('====this.options===', this.options)
        }
      }
    })
  },
  methods: {
    normalizer(node) {
      return {
        id: node[this.props.id],
        label: node[this.props.label],
        children: node[this.props.children ? this.props.children : "children"],
      };
    },
    inputEvent(value) {
      this.$emit("change", value);
    },
    selectEvent(node) {
      const matchKey = this.matchKey;
      for (let key in matchKey) {
        this.formModel[key] = node[matchKey[key]]
      }
      this.$emit("on-select", node);
    },
    deselectEvent(node) {
      console.log(node);
    },
  },
  watch: {
    'requestCall': {
      handler(data) {
        if (Array.isArray(data)) {
          this.options = data;
          console.log('====this.options===', this.options)
        }
      },
      immediate: true,
      deep: true
    }
  },
  props: {
    value: {
      type: [ String, Boolean, Number, Array ],
      default: undefined,
    },
    requestCall: {
      type: [ Function, String, Array ],
      default: undefined,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
    group: {
      type: Boolean,
      default: true,
    },
    props: {
      type: Object,
      default: () => {
        return {
          id: "id",
          label: "label",
          children: "children",
        };
      },
    },
    optionLabel: {
      type: Object,
      default: () => {
        return {
          id: "id",
          label: "label",
        };
      },
    },
    formModel: {
      type: Object,
      default: undefined,
    },
    queryParams: {
      type: Object,
      default: undefined,
    },
    matchKey: {
      type: Object,
      default: undefined,
    },
    clearable: {
      type: Boolean,
      default: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    alwaysOpen: {
      type: Boolean,
      default: false,
    },
    limit: {
      type: Number,
      default: undefined,
    },
  },
};
</script>

<style lang="scss">
.vue-treeselect__placeholder {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 5px;
  padding-right: 5px;
  position: absolute;
  right: 0;
  bottom: 0;
  top: 4px;
  left: 0;
  line-height: 32px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

.vue-treeselect__single-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 5px;
  padding-right: 5px;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  line-height: 32px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

.vue-treeselect__control {
  height: 40px;
  line-height: 40px;
}

.vue-treeselect__value-container {
  height: 20px;
  line-height: 20px;
}

.vue-treeselect__single-value, .vue-treeselect__single-value {
  // top: 3px !important;
  height: 40px;
  line-height: 40px;
}

.vue-treeselect__multi-value-item-container {
  padding-top: 2px;
  padding-bottom: 2px;
}

.vue-treeselect__multi-value {
  height: 35px !important;

}

.vue-treeselect__multi-value-item * {
  line-height: 28px !important;
}

.vue-treeselect--has-value .vue-treeselect__input {
  vertical-align: middle;
  line-height: 30px !important;
  height: 30px !important;
}
</style>
