<template>
  <div class="vee-label-edit-item" v-if="!model.hideInEditor">
    <vee-model-tooltip :model="model" :propPath="propPath">
      <span class="vee-label-edit-title"
        :style="{width: labelWidth}">{{model.nickname}}</span>
    </vee-model-tooltip>
    <div class="vee-label-edit-content vee-label-edit-content-overflow">
      <VeeEditItem :model="model" :parentPropPath="parentPropPath" :objShowTitle="false"></VeeEditItem>
    </div>
  </div>
</template>
<script>

import VeeModelTooltip from './VeeModelTooltip'
import VeeEditItem from './VeeEditItem'

export default {
  name: 'VeeLabelEditItem',
  components: {
    VeeModelTooltip,
    VeeEditItem,
  },
  props: {
    labelWidth: {
      type: String,
      default: '90px'
    },
    model: {
      type: Object,
      default () {
        return {}
      }
    },
    parentPropPath: {
      type: String,
      default: ''
    }
  },
  computed: {
    propPath () {
      return `${this.parentPropPath}.${this.model.name}`
    }
  }
}
</script>
<style lang="scss">
</style>
