<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);
    },
    reload(params = {}) {
      this.initSelectTreeData(params);
    },

    // 搜索方法：
    searchFun(value) {
      if (this.remoteSearch) {
        this.initSelectTreeData({ value: 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[this.matchKey[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 }/>
      );
    },
    async initSelectTreeData(params) {
      const extraDataPrams = Object.assign({}, this.extraData || {}, params || {});
      if (typeof this.requestCall === "function") {
        const { code, data, msg } = await this.requestCall(extraDataPrams);
        if (code === 200) {
          if (this.$refs.treeSelect)
            this.$refs.treeSelect.treeDataUpdateFun(data);
        } else {
          this.$message.error(msg);
        }
      } else if (Array.isArray(this.requestCall)) {
        if (this.$refs.treeSelect)
          this.$refs.treeSelect.treeDataUpdateFun(this.requestCall);
      } else if (typeof this.requestCall === "object") {
        debugger;
        const { code, data, msg } = this.requestCall;
        if (code === 200) {
          if (this.$refs.treeSelect)
            this.$refs.treeSelect.treeDataUpdateFun(data || {});
        } else {
          if (msg) this.$message.error(msg);
        }
      } else if (typeof this.requestCall === 'string') {
        const config = Object.assign(this.defaultRequestConfig, this.requestConfig)
        const reqestParams = Object.assign(this.extraData || {}, params || {});
        const response = await HttpService.executeFetch(this.requestCall, reqestParams, config.method, config);
        const { data, code, msg } = response;
        if (code === 200) {
          if (this.$refs.treeSelect)
            this.$refs.treeSelect.treeDataUpdateFun(data);
        } else {
          if (msg) this.$message.error(msg);
        }
      }
    }
  },
  watch: {
    'requestCall': {
      handler() {
        this.initSelectTreeData();
      },
      immediate: true
    }
  },
};
</script>

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