<template>
  <el-tree-select
    ref="treeSelect"
    v-model.trim="inputValue"
    @searchFun="searchFun"
    @node-click="_nodeClickFun"
    :styles="Object.assign(styles, {width: '100%'})"
    :selectClass="selectClass"
    :disabled="disabled"
    :children="defaultProps.children"
    :label="defaultProps.label"
    :value="defaultProps.value"
    :placement="placement"
    :treeRenderFun=" treeRenderFun ||_renderFun"
    :filterable="filterable"
    :popoverClass="popoverClass"
    :selectParams="{
      ...Object.assign(this.defaultSelectParams, this.selectParams, {
        placeholder: this.placeholder,
        clearable: this.clearable
      })
    }"
    :treeParams="{
      ...Object.assign(this.defaultTreeParams, this.treeParams, {
        defaultExpandAll: this.defaultExpandAll,
        props: this.defaultProps,
        filterable: this.filterable,
      })
    }"
   >
  </el-tree-select>
</template>

<script>
import { CmsFormSelectTree } from "./CmsFormSelectTreeMixin";
import HttpService from "@/utils/HttpService";
export default {
  name: "CmsFormSelectTree",
  mixins: [ CmsFormSelectTree ],
  data() {
    return {
      defaultRequestConfig: {
        loading: true,
        encrypt: false,
        method: 'POST',
      }
    }
  },
  created() {
    this.$nextTick(() => {
      this.initSelectTreeData();
    })
  },
  methods: {
    treeDataUpdateFun(data) {
      this.$refs.treeSelect.treeDataUpdateFun(data);
    },

    // 搜索方法：
    searchFun(value) {
      if (this.remoteSearch) {
        this.initSelectTreeData(value)
      } else {
        // 如果是本地过滤：
        this.$refs.treeSelect.$refs.tree.filter(value);
        // 可以直接访问方法，也可以拿到 $refs.tree
        this.$refs.treeSelect.filterFun(value);
      }
      this.$emit('search')
    },
    // 下拉框修改
    _selectChange(val) {
      console.log(val, '<-select change');
    },
    // 树点击
    _nodeClickFun(data, node, vm) {
      if (this.matchKey) {
        Object.keys(this.matchKey).forEach(key => {
          this.formModel[key] = data[key];
        })
      }
      this.$emit('click', data, node, vm);
    },
    // 自定义render
    _renderFun(h, { node, data, store }) {
      const props = {
        data: data,
        node: node,
        store: store,
        defaultProps: this.defaultProps,
        groupName: this.groupName
      }
      return (
        <cms-form-select-tree-render props={ props }/>
      );
    },
    initSelectTreeData(value) {
      if (this.requestCall) {
        if (typeof this.requestCall === "function") {
          this.requestCall(Object.assign({}, this.extraData, { value: value })).then((result) => {
            if (result && result.code === 200) {
              this.$refs.treeSelect.treeDataUpdateFun(result.data);
            } else {
              this.$messageTips.error(result.msg);
            }
          }).catch((error) => {
            console.log(error);
          });
        } else if (Array.isArray(this.requestCall)) {
          this.$refs.treeSelect.treeDataUpdateFun(this.requestCall);
        } else if (typeof this.requestCall === "object") {
          const result = this.requestCall;
          if (result && result.code === 200) {
            this.$refs.treeSelect.treeDataUpdateFun(result.data);
          } else {
            this.$messageTips.error(result.msg);
          }
        } else if (typeof this.requestCall === 'string') {
          const config = Object.assign(this.defaultRequestConfig, this.requestConfig)
          HttpService.executeFetch(this.requestCall, this.extraData, config.method, config).then((res) => {
            const { data, code, msg } = res;
            console.log(data, code, msg);
          })
        }
      }
    }
  },
  watch: {},
};
</script>

<style scoped lang="scss">
/* 去除tree上面的一行高度 */
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
  height: auto;
  padding: 0;
}
</style>
