<template>
  <div class="tree-list-dw">
    <div class="list-box">
      <ul>
        <li v-for="item in list" :key="item.id">
          <div class="li-item-left" v-if="item.deptArr && item.deptArr.length>0">
            <el-input-number @change="inputChange(item,titles)" v-model="getDeptDisabled(item).fraction" :precision="0" :max="item.label - 0" :disabled="getDeptDisabled(item).disabled" :placeholder="getDeptDisabled(item).placeholder"></el-input-number>
          </div>
          <div class="li-item-right" v-else>
            <ul class="li-item-right" v-if="item.childrens && item.childrens.length>0">
              <tree-list-dw :list="item.childrens" :titles="titles" v-on="$listeners"></tree-list-dw>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'treeListDw',
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    titles: {
      type: Object,
      default: () => {
        return {}
      }
    },
  },
  data() {
    return {
      
    }
  },
  mounted() {
    
  },
  methods: {
    getDeptDisabled(item) {
      let dept = item.deptArr.find(obj => obj.deptId == this.titles.prop)
      if (dept) {
        dept.fraction = dept.disabled ? undefined  : dept.fraction
        dept.placeholder = dept.disabled ? '不可编辑' : '请输入'
      } else {
        dept = {fraction : undefined, disabled: false, placeholder: '请输入'}
      }
      return dept
    },
    inputChange(item,titles) {
      this.$emit('input-change',item,titles)
    },
  }
}
</script>

<style lang="scss" scoped>

</style>