<script>
export default {
  name: 'EsCascader',
  inheritAttrs: false,
  props: {
    value: [String, Array],
    data: Array,
    options: Array,
    hide: {
      type: Boolean,
      default: false
    },
    readonly: Boolean,
    plain: Boolean,
    separator: {
      type: String,
      default: '/'
    },
    props: Object,
    //Props
    trigger: {
      type: String,
      default: 'click'
    },
    multiple: Boolean,
    checkStrictly: Boolean,
    emitPath: {
      type: Boolean,
      default: true
    },
    lazy: Boolean,
    lazyLoad: Function,
    type: {
      type: String,
      default: 'object'
    },
    valueKey: {
      type: String,
      default: 'value'
    },
    labelKey: {
      type: String,
      default: 'label'
    },
    children: {
      type: String,
      default: 'children'
    },
    disabled: {
      type: String,
      default: 'disabled'
    },
    leaf: {
      type: String,
      default: 'leaf'
    }
  },
  computed: {
    model: {
      get() {
        return this.value;
      },
      set(val) {
        return val;
      }
    },
    datas() {
      return this.data || this.options;
    },
    newProps() {
      let props = {
        expandTrigger: this.trigger,
        multiple: this.multiple,
        checkStrictly: this.checkStrictly,
        emitPath: this.emitPath,
        lazy: this.lazy,
        lazyLoad: this.lazyLoad,
        type: this.type,
        value: this.valueKey,
        label: this.labelKey,
        children: this.children,
        disabled: this.disabled,
        leaf: this.leaf
      };
      if (this.props) {
        return { ...props, ...this.props };
      }
      return props;
    }
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    getLabel(val, data) {
      let label = '';
      for (let i = 0; i < data.length; i++) {
        let item = data[i];
        if (val == item[this.newProps.value]) {
          label = item[this.newProps.label];
          break;
        } else {
          if (item.children && item.children.length) {
            label = this.getLabel(val, item.children);
            if (label) {
              break;
            }
          }
        }
      }
      return label || val;
    }
  },
  render(h) {
    if (!this.hide) {
      if (this.readonly) {
        let value = '';
        if (this.model) {
          value = Array.isArray(this.model)
            ? this.model
                .map((item) => {
                  if (Array.isArray(item)) {
                    return item
                      .map((ele) => {
                        if (typeof ele === 'string') {
                          return this.getLabel(ele, this.datas);
                        } else {
                          return ele[this.newProps.label];
                        }
                      })
                      .join(this.separator);
                  } else {
                    if (typeof item === 'string') {
                      return this.getLabel(item, this.datas);
                    } else {
                      return item[this.newProps.label];
                    }
                  }
                })
                .join(this.multiple ? '，' : this.separator)
            : this.model;
        }
        return h(
          'div',
          {
            class: ['el-cascader el-input__inner', { 'es-plain': this.plain }]
          },
          [value]
        );
      }
      return h(
        'el-cascader',
        {
          attrs: {
            ...this.$attrs,
            options: this.datas,
            props: this.newProps,
            value: this.model
          },
          on: this.$listeners
        },
        [this.$slots.default]
      );
    }
  }
};
</script>
