/**
* @Description:
* @author cxg
* @date 2021/02/24
*/
<template>
  <div class="-page">
    <el-cascader
      v-model="cascaderData"
      :props="childProps"
      :options="options"
      v-bind="itemObj.component"
      @change="handleChange"
    >
      <template slot-scope="{ node, data }">
        <span>{{ itemObj.component.onlyShowValue ? data[itemObj.component.labelWord]: data.label }}</span>
      </template>
    </el-cascader>
  </div>
</template>

<script>
import _clonedeep from 'lodash.clonedeep'
import _get from 'lodash.get'
export default {
  components: {},
  props: {
    value: {
      type: [Array, String, Number],
      default: null
    },
    itemObj: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      showCascader: false,
      hasObjOptions: false,
      childProps: {},
      cascaderData: '',
      options: [],
      hasGetConfigData: false
    }
  },
  computed: {},
  watch: {
    value: {
      immediate: true,
      handler: function(val) {
        if (val) {
          if (!this.itemObj.component.multiple && this.itemObj.component.emitPath) {
            this.$set(this, 'cascaderData', this.value)
          } else {
            if (typeof val === 'number') {
              this.$set(this, 'cascaderData', this.value)
            } else {
              this.$set(this, 'cascaderData', this.value.split(','))
            }
          }
        }
      }
    },
    itemObj: {
      immediate: true,
      deep: true,
      handler: function(val) {
        if (!this.hasGetConfigData) {
          this.$set(this, 'childProps', {
            emitPath: false,
            checkStrictly: this.itemObj.component.checkStrictly ? this.itemObj.component.checkStrictly : false,
            multiple: !!this.itemObj.component.multiple
          })
          if (!val.component.optionsdic && !val.component.dicType) {
            this.options = _clonedeep(val.component.options)
          // console.log(val.component.options)
          }
          if (!this.hasObjOptions) {
            this.$set(this, 'options', [])
            const searverParams = {
            // 'open': val.component.expand,
              'sortItem': [
              // {
              //   'fieldName': 'modifyTime',
              //   'sortOrder': 'asc'
              // }
              ]
            }
            // 业务对象
            if (!val.component.dicType || val.component.dicType === '1') {
              if (val.component.searchItemsParams) {
                try {
                  if (val.component.searchItemsParams) {
                    const monmnetProject = {}
                    // if (monmnetProjectText) {
                    //   monmnetProject = JSON.parse(monmnetProjectText)
                    // }
                    const middleObj = { projectNumber: monmnetProject.projectNumber }
                    const formParams = JSON.parse(this.$utils.attachTemplateDoubleToData(val.component.searchItemsParams, middleObj))
                    if (this.$utils.isArray(formParams)) {
                      searverParams.searchItems = {
                        items: formParams
                      }
                    } else {
                      searverParams.searchItems = formParams
                    }
                  }
                } catch (error) {
                  this.$utils.showMessage('过滤参数JSON配置错误', 'warning')
                }
              }
              this.$api.searchApi(val.component.optionsObj, searverParams).then(res => {
                this.hasGetConfigData = true
                if (res.items.content) {
                  res.items.content.forEach((item) => {
                    item.value = this.itemObj.component.valueWord ? item[this.itemObj.component.valueWord] : item['id']
                    item.label = this.itemObj.component.onlyShowValue ? (this.itemObj.component.valueWord ? item[this.itemObj.component.valueWord] : item['id']) : this.formatLael(this.itemObj.component.labelWord, item)
                  })
                  this.$set(this, 'options', this.$utils.generateTree(res.items.content, { id: this.itemObj.component.selfId, pid: this.itemObj.component.pid }))
                  // if (this.value) {
                  // this.$set(this, 'cascaderData', this.value.split(','))
                  // this.cascaderData = this.value.split(',')
                  // }
                  this.showCascader = true
                }
              })
            }
            // 字典optionsdic
            if (val.component.dicType === '0' && val.component.optionsdic && val.component.optionsdic.length) {
              this.getDictOptions(val.component.optionsdic)
            }
          }
        }
      }
    }
  },
  mounted() {},
  methods: {
    async getDictOptions(optionsdic) {
      this.hasGetConfigData = true
      const dictCode = Array.isArray(optionsdic) ? optionsdic[optionsdic.length - 1] : optionsdic
      const options = this.$store.state.dictionaries && this.$store.state.dictionaries[dictCode] ? this.$store.state.dictionaries[dictCode].default : await this.$utils.getDicListByCode(dictCode)
      this.$set(this, 'options', this.$utils.generateTree(JSON.parse(JSON.stringify(options)), { id: this.itemObj.component.selfId || 'id', pid: this.itemObj.component.pid || 'parentId' }))
      this.showCascader = true
    },
    formatLael(label, obj) {
      if (label) {
        if (this.$utils.isArray(label)) {
          let resData = ''
          label.forEach((item, index) => {
            if (index > 0) {
              resData += `-${_get(obj, item)}`
            } else {
              resData += `${_get(obj, item)}`
            }
          })
          return resData
        } else {
          return _get(obj, label)
        }
      } else {
        return null
      }
    },
    handleChange(val) {
      if (!this.itemObj.component.multiple && this.itemObj.component.emitPath) {
        this.$emit('input', val)
      } else {
        this.$emit('input', Array.isArray(val) ? val.join(',') : val)
      }
      // this.$emit('input', this.itemObj.component.emitPath === false ? val : val.join(','))
      if (this.itemObj.handler && this.itemObj.handler.change) {
        this.itemObj.handler.change(val)
      }
    }
  }
}

</script>
<style lang='scss'>
</style>