<script>
export default {
  name: "mm-description-item",
  props: {
    span: {
      type: Number,
      default: 1,
    },
    label: {
      type: String,
      default: "",
    },
  },
  inject: {
    description: {
      from: "mm-description",
      default: () => ({}),
    },
  },
  computed: {
    labelStyle() {
      const style = {}
      if (this.labelWidth && this.description.layout !== "vertical") {
        style.width = this.labelWidth
      }
      return style
    },
    labelWidth() {
      return typeof this.description.labelWidth === "number"
        ? `${this.description.labelWidth}px`
        : this.description.labelWidth
    },
    labelSuffix() {
      return this.description.labelSuffix
    },
    column() {
      return this.description.column
    },
    realLabel() {
      return this.label ? `${this.label}${this.labelSuffix}` : undefined
    },
  },
  render() {
    const containerClass =
      typeof this.column === "number"
        ? [`mm-description-item-${this.column}-${this.span}`]
        : this.description.responseSize.map(
          size =>
            `mm-description-item-${size}-${this.column[size]}-${this.span}`
        )

    return (
      <div class={["mm-description-item", ...containerClass]}>
        <span class="mm-description-item-label" style={this.labelStyle}>{this.$slots.label || this.realLabel}</span>
        <span class="mm-description-item-content">{this.$slots.default}</span>
      </div>
    )
  },
}
</script>
