<template>
  <div>
    <el-cascader
      v-model="inputValue"
      v-bind="$attrs"
      style="width: 100%;"
      @change="change"
      :disabled="disabled"
      :clearable="true"
      :options="options"
      :placeholder="placeholder"
      :show-all-levels="true"
      :filterable="filterable"
      :separator="separator"
      :props="defaultConfig"
      :filter-method="filterMethod"
      :before-filter="beforeFilter">
      <template slot-scope="{ node, data }">
        <slot :node="node" :data="data">
          <span style="float: left">{{ data.areaName }}</span>
          <span style="float: right">{{ data.areaCode }}</span>
        </slot>
      </template>
    </el-cascader>
<!--    <cms-form-input v-model="inputValue" v-else disabled placeholder="正在加载中..."/>-->
  </div>
</template>
<script>

export default {
  name: 'CmsCascaderSelect',
  data() {
    let { ...listeners } = this.$listeners;
    return {
      listeners: listeners,
      loading: true,
    };
  },
  methods: {
    filterMethod(node, keyword) {
      console.log('-----------filterMethod-----', node, keyword);
    },
    beforeFilter(value) {
      console.log('-----------beforeFilter-----', value);
    },
    change(value) {
      this.$emit('change', value);
    },
    reload() {
      this.loading = false
      setTimeout(() => {
        this.loading = true
      }, 1000)
    },
    lazyLoad(node, resolve) {
      this.loading = true;
      const { level, data } = node;
      let params = { parentCode: undefined, parentId: undefined, areaType: (level + 1) }
      params = Object.assign(params, { parentId: data ? data.id : undefined })
      this.requestCall({ ...params }).then(({ data }) => {
        debugger;
        this.loading = false;
        console.log('----------->>>>>>>>>this.loading: ', this.loading)
        const nodes = Array.from(data || []).map((item) => ({
          value: item[this.defaultConfig.value],
          label: item[this.defaultConfig.label],
          leaf: level >= 2,
          ...item
        }));
        resolve(nodes);
      })
    }
  },
  computed: {
    inputValue: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit('input', value);
      }
    },
    defaultConfig() {
      return Object.assign({
        value: 'value',
        label: 'label',
        children: 'children',
        disabled: 'disabled',
        expandTrigger: 'click',
        leaf: 'leaf',
        lazy: this.lazy,
        lazyLoad: this.lazyLoad
      }, this.props || {})
    }
  },
  props: {
    value: [ Array ],
    options: [ Array ],
    requestCall: Function, // 请求函数
    disabled: Boolean,
    placeholder: String,
    props: {
      type: Object,
      default: () => {
        return {
          value: 'value',
          label: 'label',
          children: 'children',
          disabled: 'disabled',
          leaf: 'leaf'
        }
      }
    },
    clearable: {
      type: Boolean,
      default: true
    },
    lazy: {
      type: Boolean,
      default: false
    },
    filterable: {
      type: Boolean,
      default: false
    },
    separator: {
      type: String,
      default: '-'
    },
  }
};
</script>
