import { Cascader, Icon } from 'ant-design-vue'
// console.log(Cascader.props)
export default {
  name: 'pCascaderZone',
  //extends: Cascader,
  props: {
    ...Cascader.props,
    url: { type: String, default: '/api/oms-std-maindata/zone/get-by-pid' },
    placeholder: { type: String, default: '省/市/区/乡(镇)街道' },
    method: { type: String, default: 'post' },
    paramKey: { type: String, default: 'fatherid' },
    baseId: { type: String, default: '01' },
    paramValue: { type: String | Array },
    fieldNames: {
      type: Object,
      default() {
        return { label: 'zname', value: 'zoneid', children: 'children' }
      }
    }
  },

  data() {
    return {
      vOptions: this.options,
      vParams: { [this.paramKey]: this.paramValue },
      inputValue: this.value,
      ext: true,
      loading: false,
      visible: false
    }
  },

  created() {},
  watch: {
    paramValue(v) {
      this.getTreeList && this.getTreeList([this.baseId, ...v])
    },
    options(value) {
      this.vOptions = value
    }
  },
  mounted() {
    if (this.paramValue && this.options.length == 0) {
      this.getTreeList([this.baseId, ...this.paramValue])
    } else if (this.options.length == 0) {
      this.getTreeList([this.baseId])
    }
  },
  methods: {
    resultTreeNodes(data, key) {
      let map = {}
      data.forEach(item => {
        delete item.children
        map[item[key]] = item
      })
      let value = []
      data.forEach(item => {
        var p = map[item[this.paramKey]]
        if (p) {
          if (!p.children) {
            p.children = []
          }
          p.children.push(item)
        } else {
          if (item[this.paramKey] == this.baseId) {
            value.push(item)
          }
        }
      }, this)
      return value
    },
    getTreeList(params) {
      this.getZone({ [this.paramKey]: params.join(',') }).then(data => {
        this.vOptions = this.resultTreeNodes(data, this.fieldNames.value)
      })
    },

    getZone(params) {
      let _this = this

      const { url, method } = this
      let config = {
        url,
        method
      }

      if (method == 'post') {
        config.data = params
      } else if (method == 'get') {
        config.params = params
      }
      this.loading = true
      return this.axios(config)
        .then(respose => {
          this.loading = false
          if (respose.success) {
            respose.data.forEach(item => {
              if (item.zlevel < 5) {
                item.isLeaf = false
              } else {
                item.isLeaf = true
              }
            })
            return respose.data
          } else {
            _this.$error({ content: respose.message })
          }
        })
        .catch(err => {
          _this.$error({ content: JSON.stringify(err) })
        })
    },
    handleLoadData(selectedOptions) {
      let targetOption = null
      if (selectedOptions.length > 0) {
        targetOption = selectedOptions[selectedOptions.length - 1]
        targetOption.loading = true
        this.vParams = { [this.paramKey]: targetOption[this.fieldNames.value] }
      }

      return this.getZone(this.vParams).then(data => {
        if (targetOption && selectedOptions.length > 0) {
          targetOption.loading = false
          targetOption.children = data
          this.vOptions = [...this.vOptions]
        } else {
          this.vOptions = data
        }
        this.$emit('loadData', this.vOptions)
      })
    },
    onChange(...args) {
      this.$emit('change', args)
    },

    onPopupVisibleChange(open) {
      if (this.disabled) return
      this.visible = open
      this.$emit('popupVisibleChange', this.visible)
    }
  },
  render(h) {
    const { fieldNames, placeholder, value, disabled } = this.$props
    let config = {
      props: {
        ...this.$props,
        disabled,
        options: this.vOptions,
        placeholder,
        fieldNames,
        changeOnSelect: true,
        value,
        popupVisible: this.visible,
        loadData: this.handleLoadData
      },
      scopedSlots: {
        suffixIcon: () => {
          return this._c(Icon, {
            props: {
              type: this.loading ? 'loading' : this.visible ? 'up' : 'down'
            }
          })
        }
      },
      on: {
        change: this.onChange,
        popupVisibleChange: this.onPopupVisibleChange
      }
    }

    return h(Cascader, config)
  }
}
