<template>
  <el-tooltip placement="top" :disabled="showTipDisabled">
    <div slot="content" style="max-height: 100px; overflow-y: auto;margin: -10px">
      <div style="margin: 10px"><span v-html="this.tipTxtValueModify"></span></div>
    </div>
    <div class="block">
      <el-cascader
        ref="cascader"
        @change="changeMethod"
        @visible-change="onBlurAddressFun"
        :options="options"
        v-model="selectedOptions"
        :key="isResouceShow"
        :separator="separator"
        :disabled="disabled"
        :clearable="clearable"
        :show-all-levels="showAllLevels"
        :debounce="debounce"
        :collapse-tags="collapseTags"
        :props="cascaderProps"
        :filterable="filterable"
        class="component-width">
      </el-cascader>
    </div>
  </el-tooltip>
</template>

<script>
import vueCompApi from '@/api/enterpriseInfoManage/vueCompApi.js'
import mixin from './mixin.js'
export default {
  name: 'SelectWorkTemplateCorePlatModify.vue',
  mixins: [mixin],
  props: {
    // 是否禁用修改
    disabled: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    // 是否开启搜索功能 默认 是
    filterable: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    // 是否可清除
    clearable: {
      type: Boolean,
      default: function () {
        return true
      }
    },
    // 搜索关键词输入的去抖延迟，毫秒
    debounce: {
      type: Number,
      default: function () {
        return 300
      }
    },
    // cascader配置选项
    cascaderProps: {
      type: Object,
      default: function () {
        return {
          // 是否多选
          multiple: true,
          // 是否严格的遵守父子节点不互相关联
          checkStrictly: false
        }
      }
    },
    // 输入框是否展示完整路径
    showAllLevels: {
      type: Boolean,
      default: function () {
        return true
      }
    },
    // 多选模式下 是否折叠展示
    collapseTags: {
      type: Boolean,
      default: function () {
        return true
      }
    },
    // 分隔符
    separator: {
      type: String,
      default: function () {
        return '/'
      }
    },
    // 全部选择的变量
    allDefalut: {
      type: String,
      default: function () {
        return '-1'
      }
    },
    optionList: {
      type: Array,
      default: function () {
        return []
      }
    },
    name: {
      type: String,
      default: function () {
        return ''
      }
    },
    value: {
      type: [String, Number, Array],
      default: function () {
        return null
      }
    },
    // 重新加载数据（每次取非即可）
    reload: {
      type: Boolean,
      default: function () {
        return false
      }
    }
  },
  // mounted () {
  //   console.log(this.optionList)
  //   if (!this.isMounted && (this.optionList.length === 0)) {
  //     ++this.isResouceShow
  //     this.getLoadOption()
  //     this.isMounted = true
  //   }
  // },
  data () {
    return {
      isAllValue: true,
      // 判断是否已挂载
      // isMounted: false,
      isResouceShow: 0,
      tipTxtValueModify: '',
      // selectedOptions: [],
      loadData: [],
      options: []
    }
  },
  computed: {
    // api接口
    api () {
      return vueCompApi.platApi
    },
    selectedOptions: {
      get: function () {
        return this.value
      },
      set: function (value) {
        this.$emit('input', value)
        this.tipTxtValueModify = this.showTipView(value)
      }
    },
    showTipDisabled () {
      if (!this.tipTxtValueModify) return true
      return this.$attrs.tipdisabled || this.tipTxtValueModify.replace('<br/>', '').length === 0
    }
  },
  methods: {
    // 显示全部
    showAll () {
      return [[this.allDefalut]]
    },
    onBlurAddressFun () {
    },
    // change事件
    changeMethod (data) {
      var isErArray = true
      if (data.length > 0 && !Array.isArray(data[0])) {
        isErArray = false
        data = [data]
      }
      this.clearDisable()
      var b = this.arrayToTree(data)
      var c = this.checkAllOption(b)
      var selectOption = this.selectOptionFunction(c)
      var d = this.treeToArray(c)
      this.disabledItem(c)
      if (!isErArray) {
        this.selectedOptions = d[0]
      } else {
        this.selectedOptions = d
      }
      // this.$emit('input', this.selectedOptions)
      // 选中的数据
      this.$emit('selectChanged', this.selectedOptions, this.name, selectOption)
    },
    // 选中的option
    selectOptionFunction (data) {
      var result = []
      var lcoalOption = JSON.parse(JSON.stringify(this.options))
      if (data.some(it => it.value === this.allDefalut)) {
        result = lcoalOption
      } else {
        data.forEach(it => {
          var a = lcoalOption.filter(it1 => it1.value === it.value)
          if (a.length > 0) {
            var b = JSON.parse(JSON.stringify(a[0]))
            delete b.children
            delete b.fincrmBusinessAreaCompanyRelDTOList
            if (a[0].children) {
              var a1 = a[0].children.filter(it1 => it.children && it.children.some(it2 => it2.value === it1.value))
              if (a1.some(it => it.value === this.allDefalut)) {
                b.children = a[0].children
                b.fincrmBusinessAreaCompanyRelDTOList = a[0].fincrmBusinessAreaCompanyRelDTOList
              } else {
                if (a1.length > 0) {
                  b.children = []
                  b.fincrmBusinessAreaCompanyRelDTOList = []
                  a1.forEach(it11 => {
                    b.children.push(it11)
                    b.fincrmBusinessAreaCompanyRelDTOList.push(it11)
                  })
                }
              }
            }
            result.push(b)
          }
        })
      }
      return result
    },
    // 加载数据
    getLoadOption () {
      var $this = this
      var attrs = this.$attrs.attrsQueryParas || {}
      $this.api.getBigAreaInfoList(attrs).then(res => {
        if (res && res.success && res.data) {
          this.customParameters(res.data)
        }
      })
    },
    customParameters (data) {
      // if (data.length === 0) return []
      if (data.length !== 0) {
        var ww = JSON.parse(JSON.stringify(data))
        ww.forEach(it => {
          if (it.value !== this.allDefalut) {
            this.$set(it, 'value', it.areaParent + '-' + it.keyId)
            this.$set(it, 'label', it.areaParentName + '-' + it.areaName)
            if (!this.UtilJs.isEmpty(it.fincrmBusinessAreaCompanyRelDTOList) && it.fincrmBusinessAreaCompanyRelDTOList.length > 0) {
              it.children = it.fincrmBusinessAreaCompanyRelDTOList
              it.children.forEach(it1 => {
                if (it1.value !== this.allDefalut) {
                  this.$set(it1, 'value', it1.companyId)
                  this.$set(it1, 'label', it1.companyName)
                }
              })
              if (!it.children.some(it => it.value === this.allDefalut)) {
                it.children.unshift({ value: this.allDefalut, label: '全部' })
              }
            }
          }
        })
        if (!ww.some(it => it.value === this.allDefalut)) {
          ww.unshift({ value: this.allDefalut, label: '全部' })
        }
        this.options = ww
      } else {
        this.options = []
      }
      if ((this.selectedOptions && this.selectedOptions.length > 0) && this.isAllValue) {
        this.changeMethod(this.selectedOptions)
      } else {
        if (!this.$attrs.isShowAll) {
          this.changeMethod(this.showAll())
        }
      }
      return ww
    }
  },
  watch: {
    reload: {
      deep: true,
      handler (n, o) {
        // 加载数据
        // if (this.isMounted) {
        ++this.isResouceShow
        this.getLoadOption()
        // }
      }
    },
    optionList: {
      deep: true,
      handler (n, old) {
        ++this.isResouceShow
        this.isAllValue = !(old.length !== 0 && JSON.stringify(n) !== JSON.stringify(old))
        this.customParameters(n)
      }
    }
  }
}
</script>

<style scoped lang="scss">
  @import '~@/styles/enterpriseInfoManage/supplierInfoManage/SelectWorkTemplate.scss';
</style>
