<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"
        :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: 'SelectWorkTemplatePlatModify',
  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'
      }
    },
    value: {
      type: [String, Number, Array],
      default: function () {
        return null
      }
    },
    name: {
      type: String,
      default: function () {
        return ''
      }
    },
    optionList: {
      type: Array,
      default: function () {
        return null
      }
    },
    // 重新加载数据（每次取非即可）
    reload: {
      type: Boolean,
      default: function () {
        return null
      }
    }
  },
  data () {
    return {
      // 判断是否有值
      isAllValue: true,
      // 判断是否已挂载
      isMounted: false,
      isResouceShow: 0,
      tipTxtValueModify: '',
      loadData: [],
      options: []
    }
  },
  computed: {
    // api接口
    api () {
      return vueCompApi.selectWorkTemplate
    },
    selectedOptions: {
      get: function () {
        return this.value
      },
      set: function (value) {
        this.$emit('input', value)
        try {
          this.tipTxtValueModify = this.showTipView(value)
        } catch (e) {}
      }
    },
    showTipDisabled () {
      if (!this.tipTxtValueModify) return true
      return this.$attrs.tipdisabled || this.tipTxtValueModify.replace('<br/>', '').length === 0
    }
  },
  methods: {
    // 显示全部
    showAll () {
      return [[this.allDefalut]]
    },
    // 改变重新计算
    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.transOption(c)
      var d = this.treeToArray(c)
      this.disabledItem(c)
      if (!isErArray) {
        this.selectedOptions = d[0]
      } else {
        this.selectedOptions = d
      }
      this.$emit('selectChanged', this.selectedOptions, this.name, selectOption)
    },
    // 选中的值转换为option
    transOption (data) {
      var result = []
      if (data.some(it => it.value === this.allDefalut)) {
        result = JSON.parse(JSON.stringify(this.options))
      } else {
        data.forEach(it => {
          var a = this.options.filter(it1 => it1.value === it.value)
          if (a.length > 0) {
            var b = JSON.parse(JSON.stringify(a[0]))
            delete b.children
            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
              } else {
                if (a1.length > 0) {
                  b.children = []
                  a1.forEach(it11 => {
                    var c = JSON.parse(JSON.stringify(it11))
                    delete c.children
                    if (it11.children) {
                      var a2 = it11.children.filter(it1 => it.children.some(it2 => it2.children.some(it3 => it3.value === it1.value)))
                      if (a2.some(it => it.value === this.allDefalut)) {
                        c.children = it11.children
                      } else {
                        if (a2.length > 0) {
                          c.children = []
                          a2.forEach(it2 => {
                            c.children.push(it2)
                          })
                        }
                      }
                    }
                    b.children.push(c)
                  })
                }
              }
            }
            result.push(b)
          }
        })
      }
      return result
    },
    // 加载数据
    getLoadOption () {
      var $this = this
      // if ($this.$attrs.isload) {
      $this.api.getList(this.queryParas).then(res => {
        if (res && res.success && res.data) {
          this.customParameters(res.data)
        }
      })
      // }
    },
    // 处理
    customParameters (data) {
      var a = JSON.parse(JSON.stringify(data))
      this.deleteEmptyTree({ children: a })
      if (this.$attrs.isShowThree) {
        a = this.isShowThreeFun(a)
      }
      this.options = a
      if ((this.selectedOptions && this.selectedOptions.length > 0) && this.isAllValue) {
        this.selectedOptions = this.handlerAllData(this.selectedOptions)
        this.changeMethod(this.selectedOptions)
      } else {
        if (!this.$attrs.isShowAll) {
          this.changeMethod(this.showAll())
        }
      }
    },
    // 处理全部
    handlerAllData (data) {
      var LocalOptions = JSON.parse(JSON.stringify(this.options))
      var ww = data.filter(it => {
        return (it.length === 2 && LocalOptions.some(it1 => it1.value === it[0] && it1.children && it1.children.some(it1 => it1.value === it[1] && it1.children)))
      })
      if (ww.length > 0) {
        ww.forEach(it => {
          it.push(this.allDefalut)
        })
      }
      return data
    },
    // 判断是否存在第三级
    isShowThreeFun (data) {
      data.forEach(it => {
        if (it.children) {
          it.children.forEach(it1 => {
            if (it1.children) delete it1.children
          })
        }
      })
      return data
    },
    // 删除子元素为空的
    deleteEmptyTree (nodes) {
      if (nodes && nodes.children) {
        if (nodes.children.length === 0) {
          delete nodes.children
        } else {
          if (!nodes.children.some(it => it.value === this.allDefalut)) {
            nodes.children.unshift({
              label: '全部',
              value: this.allDefalut,
              children: []
            })
          }
          for (let i = 0; i < nodes.children.length; i++) {
            let child = nodes.children[i]
            this.deleteEmptyTree(child)
          }
        }
      }
    }
  },
  watch: {
    reload: {
      deep: true,
      handler (n, o) {
        this.$nextTick(() => {
          ++this.isResouceShow
          this.getLoadOption()
        })
      }
    },
    optionList: {
      deep: true,
      handler (n, old) {
        ++this.isResouceShow
        if (old.length !== 0 && JSON.stringify(n) !== JSON.stringify(old)) {
          this.isAllValue = false
        } else {
          this.isAllValue = true
        }
        this.customParameters(n)
      }
    }
  }
}
</script>

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