<template>
  <div>
    <el-option :key="`${option.value}_${option.parentId}`" :label="option.label" :value="option.value" :disabled="isDisabled(option.type)">
      <span :style="iconStyle">
        <i v-if="option.type == 'org'" :class="'el-icon-school'" />
        <i v-if="option.type == 'user'" :class="'el-icon-user'" />
      </span>
      <span>{{ option.label }}{{ showLabel }}</span>
    </el-option>
    <template v-if="showChildren && option.children">
      <org-option v-for="item in option.children" :key="`${item.value}_${item.parentId}_${deep}`" :option="item" :selected="item.selected" :disabled="disabled" :deep="deep + 1" />
    </template>
  </div>
</template>

<script>
export default {
  name: 'OrgOption',
  props: {
    option: { required: true },
    disabled: Boolean,
    deep: { default: 0 },
    selected: { type: Boolean, default: false },
  },
  data(){
      return{
          showChildren:true
      }
  },
  computed: {
    iconStyle() {
      return { 'margin-left': `${this.deep * 12}px`, 'margin-right': '10px' }
    },
    iconStyle1() {
      return { 'margin-left': `${24 + (this.deep + 1) * 12}px`, 'margin-right': '10px' }
    },
    showLabel() {
      console.log(this.option, this.selected)
      return this.option.lebel
    }
  },
  methods: {
    isDisabled(type) {
      if (type == 'org') {
        return this.disabled
      }
      return false
    }
  },
  watch: {
    'option.label'(val) {
        this.showChildren = false
      console.log('sssssssssssssssssssss' + val)
    }
  }
}
</script>
