<template>
  <div :class="curClassName" :style="curStyle">
    <slot></slot>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";

@Component({})
export default class AppPresetCaption extends Vue {

  /**
   * 名称
   *
   * @type {string}
   * @memberof AppPresetCaption
   */
  @Prop() public name!: string;

  /**
   * 布局模型详情
   *
   * @type {*}
   * @memberof AppPresetCaption
   */
  @Prop() public layoutModelDetails: any;

  /**
   * 下标
   *
   * @type {number}
   * @memberof AppPresetCaption
   */
  @Prop({ default: 0 }) public index?: number;

  /**
   * 项名称
   *
   * @type {*}
   * @memberof AppPresetCaption
   */
  get itemName() {
    return this.index ? `${this.name}_${this.index}` : this.name;
  }

  /**
   * 类名
   *
   * @memberof AppPresetCaption
   */
  get curClassName() {
    const layoutModel = this.layoutModelDetails[this.itemName];
    if (layoutModel) {
      return `app-preset-caption ${this.itemName} ${layoutModel.sysCss}`;
    }
  }

  /**
   * 当前容器样式
   * 
   * @memberof AppPresetCaption
   */
  get curStyle() {
    const layoutModel = this.layoutModelDetails[this.itemName];
    if (layoutModel) {
      return layoutModel.getElementStyle();
    }
  }
}
</script>

<style lang='less'>
@import "./app-preset-caption.less";
</style>