<template>
  <div>
    <form-item
      :prop="name"
      :error="error"
      :required="required"
      :rules="rules"
      :class="classes"
      :label-width="isShowCaption ? !Object.is(labelPos, 'TOP') ?  labelWidth : null : 0"
      :ref="name"
    >
      <span
        v-if="isShowCaption && labelWidth > 0"
        slot="label" :class="labelclasses"
      >{{isEmptyCaption ? '' : caption}}</span>
      <div class="app-editor-contant">{{$slots.default}}</div>
      <div
        v-if="_formitem && _formitem.validateState && Object.is(_formitem.validateState, 'error')"
        class="app-error-tip"
      >
        <poptip trigger="hover" placement="left" width="300" word-wrap="true" transfer="true">
          <icon type="ios-information-circle-outline" color="#ed4014" size="20"></icon>
          <div slot="content" class="app-form-item-error-info">
            <div class="icon">
              <icon type="ios-information-circle-outline" color="#ed4014" size="20"></icon>
            </div>
            <div class="contant">{{_formitem.validateMessage}}</div>
          </div>
        </poptip>
      </div>
    </form-item>
  </div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch } from "vue-property-decorator";

@Component({})
export default class AppFormItem2 extends Vue {
  /**
   * 名称
   *
   * @type {string}
   * @memberof AppFormItem2
   */
  @Prop() public caption!: string;

  /**
   * 错误信息
   *
   * @type {string}
   * @memberof AppFormItem2
   */
  @Prop() public error?: string;

  /**
    * label样式
    *
    * @type {string}
    * @memberof AppFormItem2
    */
  @Prop() public labelStyle?: string;

  /**
   * 标签位置
   *
   * @type {(string | 'BOTTOM' | 'LEFT' | 'NONE' | 'RIGHT' | 'TOP')}
   * @memberof AppFormItem2
   */
  @Prop() public labelPos?:
    | string
    | "BOTTOM"
    | "LEFT"
    | "NONE"
    | "RIGHT"
    | "TOP";

  /**
   * 标签宽度
   *
   * @type {number}
   * @memberof AppFormItem2
   */
  @Prop({}) public labelWidth!: number;

  /**
   * 是否显示标题
   *
   * @type {boolean}
   * @memberof AppFormItem2
   */
  @Prop() public isShowCaption?: boolean;

  /**
   * 标签是否空白
   *
   * @type {boolean}
   * @memberof AppFormItem2
   */
  @Prop() public isEmptyCaption?: boolean;

  /**
   * 表单项名称
   *
   * @type {string}
   * @memberof AppFormItem2
   */
  @Prop() public name!: string;

  /**
   * 内置样式
   *
   * @type {string}
   * @memberof AppFormItem2
   */
  @Prop() public uiStyle?: string;

  /**
   * 表单项值规则
   *
   * @type {string}
   * @memberof AppFormItem2
   */
  @Prop() public itemRules!: any;

  /**
   * 值规则数组
   *
   * @type {any[]}
   * @memberof AppFormItem2
   */
  public rules: any[] = [];

  /**
   * 是否必填
   *
   * @type {boolean}
   * @memberof AppFormItem2
   */
  public required: boolean = false;

  /**
   * 表单项值规则监控
   *
   * @param {*} newVal
   * @param {*} oldVal
   * @memberof AppFormItem2
   */
  @Watch("itemRules")
  onItemRulesChange(newVal: any, oldVal: any) {
    if (newVal) {
      try {
        this.rules = [];
        const _rules: any[] = newVal;
        this.rules = [..._rules];
        this.rules.some((rule: any) => {
          if (rule.hasOwnProperty("required")) {
            this.required = rule.required;
            return true;
          }
          return false;
        });
      } catch (error) {}
    }
  }

  /**
   * 计算样式
   *
   * @readonly
   * @type {string[]}
   * @memberof AppFormItem2
   */
  get classes(): string[] {
    return [
      "app-form-item2",
      Object.is(this.labelPos, "TOP") ? "app-form-item-label-top" : ""
    ];
  }

  /**
    * label样式
    *
    * @readonly
    * @type {string}
    * @memberof AppFormItem2
    */
  get labelclasses():string{
      return this.labelStyle?this.labelStyle:'';
  }

  /**
   * vue 生命周期
   *
   * @memberof AppFormItem2
   */
  public mounted() {
    if (this.itemRules) {
      try {
        const _rules: any[] = this.itemRules;
        this.rules = [..._rules];
        this.rules.some((rule: any) => {
          if (rule.hasOwnProperty("required")) {
            this.required = rule.required;
            return true;
          }
          return false;
        });
      } catch (error) {}
    }
  }
}
</script>
<style lang="less">
@import "./app-form-item2.less";
</style>