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

<script>
import supplierInfoManageApi from '@/api/enterpriseInfoManage/supplierInfoManageApi.js'
export default {
  name: 'SelectWorkTemplate',
  props: {
    isSelectAll: {
      type: Boolean,
      default () {
        return false
      }
    },
    reload: {
      type: Boolean,
      default () {
        return false
      }
    },
    multiple: {
      type: Boolean,
      default () {
        return true
      }
    },
    cascaderProps: {
      type: Object,
      default: function () {
        return {
          // 是否多选
          multiple: this.multiple,
          // 是否严格的遵守父子节点不互相关联
          checkStrictly: false
        }
      }
    },
    value: {
      type: [String, Number, Array],
      default: function () {
        return null
      }
    },
    // 分隔符
    separator: {
      type: String,
      default: function () {
        return '/'
      }
    },
    // 是否禁用修改
    disabled: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    // 是否可清除
    clearable: {
      type: Boolean,
      default: function () {
        return true
      }
    },
    // 输入框是否展示完整路径
    showAllLevels: {
      type: Boolean,
      default: function () {
        return true
      }
    },
    // 是否开启搜索功能 默认 是
    filterable: {
      type: Boolean,
      default: function () {
        return true
      }
    },
    // 搜索关键词输入的去抖延迟，毫秒
    debounce: {
      type: Number,
      default: function () {
        return 300
      }
    },
    // 多选模式下 是否折叠展示
    collapseTags: {
      type: Boolean,
      default: function () {
        return true
      }
    },
    queryParas: {
      type: Object,
      default: function () {
        return {}
      }
    },
    name: {
      type: String,
      default: function () {
        return ''
      }
    }
  },
  data () {
    return {
      // 选择数据的长度，用于判断是否全选
      len: 0,
      // 下拉数据
      options: [],
      tipTxtValueArea: ''
    }
  },
  mounted () {
    this.load()
  },
  computed: {
    showTipDisabled () {
      if (!this.tipTxtValueArea) return true
      return this.$attrs.tipdisabled || this.tipTxtValueArea.replace('<br/>', '').length === 0
    },
    // 转换绑定的选中数据，与v-model同步
    selectedOptions: {
      get: function () {
        return this.value
      },
      set: function (value) {
        this.$emit('input', value)
      }
    },
    // 总长度
    optionsLen () {
      return this.selectAll().length
    },
    api () {
      return supplierInfoManageApi.area
    }
  },
  methods: {
    load () {
      // 加载数据
      this.loadOptions().then(() => {
        let obj = []
        // 全选所有
        if (!this.value && this.isSelectAll) {
          obj = this.selectAll()
        } else {
          let a = []
          this.options.forEach(it => {
            it.children.forEach(it1 => {
              if (this.value && this.value.some(it2 => it2 === it1.value)) {
                let b = []
                b.push(it.value)
                b.push(it1.value)
                a.push(b)
                obj.push(b)
              }
            })
          })
          obj.push(a)
        }
        this.len = obj.length
        // this.selectedOptions = obj
        this.$set(this, 'selectedOptions', obj)
        // 判断是否全选
        setTimeout(() => {
          this.onBlurAddressFun(false)
        }, 50)
      })
    },
    // 当前所有节点的长度
    changeMethod (val) {
      var that = this
      that.len = val.length
      let back = []
      val.forEach(it => {
        that.options.forEach(it1 => {
          it1.children.forEach(it2 => {
            if (typeof it !== 'string') {
              if (it2.value === it[1]) {
                back.push({ areaId: it2.value, areaName: it2.label, coreEnterpriseId: it1.value, coreEnterpriseName: it1.label })
              }
            } else {
              if (it2.value === it) {
                back.push({ areaId: it2.value, areaName: it2.label, coreEnterpriseId: it1.value, coreEnterpriseName: it1.label })
              }
            }
          })
        })
      })
      that.$emit('selectChanged', val, that.name, back)
    },
    // 选择所有的数据
    selectAll () {
      let obj = []
      this.options.forEach(item => {
        let children = item.children
        // obj.push(item.value)
        if (children && children.length > 0) {
          children.forEach(it => {
            let child = []
            child.push(item.value)
            child.push(it.value)
            obj.push(child)
          })
        }
      })
      return obj
    },
    // 全选所有修改label
    onBlurAddressFun (val) {
      if (!val && this.len !== 0 && this.optionsLen === this.len) {
        if (this.$refs['cascader'].presentTags && this.$refs['cascader'].presentTags.length > 0) {
          this.$refs['cascader'].presentTags = this.$refs['cascader'].presentTags.slice(0, 1)
          this.$refs['cascader'].presentTags[0].closable = false
          this.$refs['cascader'].presentTags[0].text = '全部区域'
        }
      }
    },
    // 显示tip
    showTipView (selectValue) {
      var txt = ''
      if (this.UtilJs.isEmpty(selectValue)) return txt
      if (!this.multiple) selectValue = [selectValue]
      selectValue.forEach(it => {
        this.options.some(it1 => {
          if (!it1.children) {
            if (it1.value === it[0]) {
              txt += (!it1.label ? '' : it1.label)
              return true
            }
          } else {
            return it1.children.some(it2 => {
              if (it2.value === it[1] && it1.value === it[0]) {
                txt += it1.label + '|' + (!it2.label ? '' : it2.label)
                return true
              }
            })
          }
        })
        txt += '<br/>'
      })
      return txt
    },
    // 加载数据
    loadOptions () {
      let $this = this
      return new Promise((resolve, reject) => {
        $this.api.getList(this.queryParas).then(res => {
          $this.options = []
          if (res && res.success && res.data) {
            res.data.forEach(it => {
              let item = { value: it.areaCompanyId, label: it.areaCompanyName, children: [] }
              it.areas.forEach(it1 => {
                item.children.push({ value: it1.areaId, label: it1.areaName })
              })
              $this.options.push(item)
            })
            resolve()
          }
        }).catch(error => {
          reject(error)
        })
      })
    }
  },
  watch: {
    reload (val) {
      this.load()
    },
    selectedOptions (n, o) {
      try {
        this.tipTxtValueArea = this.showTipView(n)
      } catch (e) {}
    }
  }
}
</script>

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