<!--
 * @Author: 曹捷
 * @Date: 2020-04-14 16:28:00
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-09-09 14:00:59
 * @Description: 改造cascader modal  是数组，实际使用是最后一级
 -->
<template>
  <a-tree-select :disabled="disabled" :treeData="treeData"
    :replaceFields="{children, title:label, key:valueName, value: valueName }	" :placeholder="placeholder"
    @change="cascChange" :changeOnSelect="changeOnSelect" clearable v-if="loading" v-model:value="cascValue">
  </a-tree-select>
</template>

<script>
// import { Cascader } from 'ant-design-vue'
import { util } from 'obit-wui/entery'
import { getCurrentInstance, onMounted, reactive, toRefs, watch } from 'vue'

export default {
  components: {
    // ACascader: Cascader
  },
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    // 数据tree
    treeData: {
      type: Array,
      default: []
    },
    // 子集字段名
    children: {
      type: String,
      default: 'children'
    },
    // value 值字段名
    valueName: {
      type: String,
      default: 'value'
    },
    // 展示字段名
    label: {
      type: String,
      default: 'label'
    },
    // 上级id 字段名
    parentId: {
      type: String,
      default: 'parentId'
    },
    placeholder: {
      type: String,
      default: '请选择'
    },
    changeOnSelect: {
      type: Boolean,
      default: false
    }
  },
  setup (props, context) {
    let _data = reactive({
      cascValue: [],
      casList: [],
      loading: false,
      pData: { children: props.children, title: props.label, key: props.valueName, value: props.valueName }
    })
    let _methods = {
      cascChange (param) {
        let value = param.slice(-1)[0]
        context.emit('update:value', value)
      },
      // 将tree数据转为1维数组
      initCasList () {
        let arr = util.util.cloneObj(props.treeData)
        console.log('🚀 ~ file: obit-cascader.vue ~ line 100 ~ initCasList ~ arr', arr)

        let list = [].concat(arr)
        let childrenName = props.children
        function getCasList (arr) {
          arr.forEach(element => {
            if (element[childrenName] && element[childrenName].length > 0) {
              list = list.concat(element[childrenName])
              getCasList(element[childrenName])
            }
          })
        }
        getCasList(arr)
        list.forEach(element => {
          element[props.children] = []
        })
        _data.casList = list
      },
      // 在1维数组里面 遍历找上级id
      getParentIdList (value) {
        if (!value) {
          return []
        }
        let list = [value]
        function getParentId (value) {
          for (let i = 0; i < _data.casList.length; i++) {
            let item = _data.casList[i]

            if (item[_data.valueName] == value) {
              list.unshift(item[_data.parentId])
              getParentId(item[_data.parentId])
            }
          }
        }
        getParentId(value)
        if (list[0] === 0 || list[0] === null || list[0] === 'null') {
          list.shift()
        }
        return list
      }
    }
    watch(() => props.value, (newValue, oldValue) => {
      if (!oldValue && newValue) {
        _methods.getParentIdList(newValue)
      }
    })
    watch(() => props.treeData, (newValue, oldValue) => {
      _methods.initCasList()
    })
    onMounted(() => {
      _data.loading = true
      _methods.initCasList()
      _data.cascValue = _methods.getParentIdList(props.value)
    })
    return {
      ...toRefs(_data),
      ..._methods
    }
  },
}
</script>

<style>
</style>