<template>
  <div class="hsInputBox" :id='elId'>
     <div class="inputTitle" v-if='title'>{{title}}</div>
     <div class="inputCurr" v-if="cascaderShow">
          <el-cascader
            :show-all-levels="show_all_levels"
            :clearable="clearable"
            :change-on-select="change_on_select"
            @active-item-change="handleItemChange"
            :expand-trigger="expand_trigger"
            :placeholder="placeholder"
            :filterable="filterable"
            :size="size"
            :disabled="disabled"
            :props="configProps"
            :options="options"
            v-model="value_inner"
            @change="handleChange">
          </el-cascader>
     </div>
    <jsoneditor v-model='jsoneditorVisible'
                :elInfo='elInfo'
                :layout='layout'
                :jsoneditorData='editData'
                :jsoneditorCloseAfter='jsoneditorCloseAfter'
                :jsoneditorOpenAfter='jsoneditorOpenAfter'
                >
    </jsoneditor>
  </div>
</template>
<script>
import mockData from '../common/initDbConfigDataJson'
import ucComponent from '../ucClass/uc_component'
import uuidv1 from 'uuid/v1'
import jsoneditor from '../common/jsoneditor'
export default {
  mixins: [ucComponent],
  components: {
    jsoneditor
  },
  name: 'hsCascader',
  props: {
    allSourceData: {
      type: Object,
      default() {
        return {}
      }
    },
    elInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    value: {
      type: Array,
      default() {
        return []
      }
    },
    layout: {},
    jsoneditorCloseAfter: {
      type: Function,
      default() {
        return () => {}
      }
    },
    jsoneditorOpenAfter: {
      type: Function,
      default() {
        return () => {}
      }
    }
  },
  data() {
    return {
      value_inner: [],
      editData: {
        config: {},
        sourceData: [],
        sql: ''
      },
      options: [],
      elId: '',
      jsoneditorVisible: false,
      title: '',
      placeholder: '请选择',
      clearable: false,
      show_all_levels: false,
      change_on_select: false,
      configProps: {},
      filterable: false,
      expand_trigger: 'click',
      size: 'small',
      cascaderShow: false,
      disabled: false
    }
  },
  watch: {
    value: {
      handler(newValue, oldValue) {
        this.value_inner = newValue
      },
      deep: true
    },
    allSourceData: {
      handler: function(newVal, oldVal) {
        this.initData(newVal)
      },
      deep: true
    }
  },
  created() {
    this.elId = uuidv1() // 获取随机id
  },
  mounted() {
    this.initData(this.allSourceData)
    this.$nextTick(() => {
      this.value_inner = this.value
    })
  },
  methods: {
    initConfig(config) {
      if (typeof config !== 'object') return
      const { placeholder, title, clearable, show_all_levels, change_on_select, configProps, filterable, expand_trigger, size, disabled } = config
      if (!this.checkUndefinedOrNullOrStr(placeholder)) {
        this.placeholder = placeholder
      }
      if (!this.checkUndefinedOrNullOrStr(title)) {
        this.title = title
      }
      if (!this.checkUndefinedOrNullOrStr(clearable)) {
        this.clearable = clearable
      }
      if (!this.checkUndefinedOrNullOrStr(show_all_levels)) {
        this.show_all_levels = show_all_levels
      }
      if (!this.checkUndefinedOrNullOrStr(change_on_select)) {
        this.change_on_select = change_on_select
      }
      if (!this.checkUndefinedOrNullOrStr(configProps)) {
        this.configProps = configProps
      }
      if (!this.checkUndefinedOrNullOrStr(filterable)) {
        this.filterable = filterable
      }
      if (!this.checkUndefinedOrNullOrStr(expand_trigger)) {
        // bug:修改不生效,使用v-if更新
        this.expand_trigger = expand_trigger
        this.cascaderShow = true
      }
      if (!this.checkUndefinedOrNullOrStr(size)) {
        this.size = size
      }
      if (!this.checkUndefinedOrNullOrStr(disabled)) {
        this.disabled = disabled
      }
    },
    initData(allSourceData) {
      const { config, sourceData } = allSourceData
      if (!sourceData || !sourceData.length) {
        this.initMockData()
      } else {
        this.initConfig(config)
        this.options = Array.isArray(sourceData) ? sourceData : []
      }
    },
    initMockData() {
      this.initMockSelectData(this.elInfo.el)
    },
    initMockSelectData(type) {
      const mockData_ = mockData[type]
      if (!mockData_) return
      this.editData.config = mockData_.config
      this.editData.sourceData = mockData_.sourceData
      this.options = mockData_.sourceData
      this.cascaderShow = true
    },
    checkUndefinedOrNullOrStr(val) {
      const result = [undefined, null, '']
      return result.includes(val)
    },
    handleChange(value) {
      this.$emit('change_callback', value)
    },
    handleItemChange(value) {
      this.$emit('changeItem_callback', value)
    }
  }
}
</script>
<style scoped>
.hsInputBox{
  padding: 1px;
  width:100%;
  height:100%;
  display: flex;
}
.inputTitle{
  flex:1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.inputCurr{
  flex: 3;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
