<template>
  <div :class="curClassName" :style="curStyle">
    <alert v-show="value" type="error" show-icon>{{ value }}</alert>
  </div>
</template>

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

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

  /**
   * 模型
   *
   * @type {any}
   * @memberof AppLoginMessage
   */
  @Prop() public layoutModelDetails: any;

  /**
   * 值
   *
   * @type {string}
   * @memberof AppLoginMessage
   */
  @Prop() public value!: string;

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

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

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

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

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

}
</script>

<style lang='scss'>
@import "./app-login-message.scss";
</style>