<template>
  <!-- <el-select v-model="value" placeholder="全部">
  </el-select> -->
  
    <el-cascader
      style="width: 100%"
      v-model="threeValue"
      :disabled="disabled"
      placeholder="承办单位："
      :options="threeOptions"
      :props="{ expandTrigger: 'hover', checkStrictly: true }">
      <template v-slot:default="{ data }">
        <span :class="{aaa: notUpdate}">{{data.label}}</span>
      </template>
      
    </el-cascader>
</template>

<script>
import selectComponentJs from '../select'
import { getTreeselect } from '@/request/config'
import axios from 'axios'
import { computed, ref } from 'vue'

const extObj = selectComponentJs()

const analyData = (data) => {
  return data.map(citem => {
    let item = {label: citem.name, value: citem.id, level: citem.level}
    if (citem.children&& citem.children.length) {
      item.children = analyData(citem.children)
    }
    return item
  })
}

const findData = (data, id, ret = []) => {
  for (let item of data) {
    let aret = [...ret, item.value]
    if (item.value === id) {
      return aret
    } else if (item.children) {
      let temp = findData(item.children, id, aret)
      if (temp) {
        return temp
      }
    }
  }
  return false
}
const findDataItem = (data, id) => {
  for (let item of data) {
    if (item.value === id) {
      return item
    } else if (item.children) {
      let temp = findDataItem(item.children, id)
      if (temp) {
        return temp
      }
    }
  }
  return false
}

const findItemSelect = (data, id) => {
  for (var i = 0; i < data.length; i++) {
    let item = data[i]
    if (item.value === id) {
      delete item.children
      break
    } else if (item.children) {
      let citem = findItemSelect(item.children, id)
      if (citem) {
        item.children = citem
        
        break
      }
    }

    data.splice(i--, 1)
  }

  if (i === data.length) {
    return false
  } else {
    data = [data[i]]
    return data
  }
  
}

extObj.watch = {
  ...extObj.watch,
  threeValue() {
    this.$emit('update:data', findDataItem(this.threeOptions, this.value))
  }
}


export default {
  ...extObj,
  props: [...extObj.props, 'notUpdate'],
  setup(...props) {
    let ret = extObj.setup(...props)
    let threeOptions = ref([])
    let threeValue = computed({
      get() {
        console.log('threeOptions.value',threeOptions.value)
        return findData(threeOptions.value, ret.value.value)
      },
      set(val) {
        ret.value.value = val[val.length - 1]
      }
    })

    return {...ret, threeOptions, threeValue}
  },
  async created () {
    let res = await axios.get(getTreeselect)
    let coms = Array.isArray(res.data) ? res.data : [res.data]
    if (this.showAll) {
      this.threeOptions = [{label: '全部', value: ''}].concat(analyData(coms))
    } else if (this.notUpdate){
      this.threeOptions = findItemSelect(analyData(coms), this.value)
      // this.threeOptions = []
    } else {
      this.threeOptions = analyData(coms)
    }
    console.log('threeOptions',this.threeOptions,this.showAll,this.notUpdate)
    this.options = coms.map(item => ({...item, id: item.id.toString(), sort: item.sort }))
    extObj.mounted.call(this)
  }
}
</script>

<style scoped>
.aaa::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
</style>