<template>
  <div class="mu-form-item" :class="{inline: inline, form: !!label}" v-if="label || !!prop">
    <label class="item-label" :class="{'is-required': validators.includes('required')}" v-if="label">
      {{label}}
      <el-tooltip v-if="tip" :visible-arrow="false" placement="right" popper-class="mu-tooltip">
        <div slot="content" v-html="tip"></div>
        <i class="icon-help"></i>
      </el-tooltip>
      <slot name="more"></slot>
    </label>
    <div class="form-content">
      <el-form-item v-if="!!prop" :prop="prop" :rules="currentRules">
        <slot></slot>
        <span class="table-input-error" slot="error" slot-scope="scope" v-if="!label">
          <mu-tooltip :config="{tip: scope.error}">
             <i class="el-icon-warning"></i>
          </mu-tooltip>
        </span>
      </el-form-item>
      <slot v-else></slot>
    </div>
  </div>
  <div v-else>
    <slot></slot>
  </div>
</template>

<script lang="ts">
  import Vue from 'vue';
  import { Component, Prop } from 'vue-property-decorator';
  import Rules from './rules/form.validator';
  // import DtTooltip from "src/components/Tooltip/index.vue";

  @Component({
    // components: { DtTooltip }
  })
  export default class muFormItem extends Vue {
    @Prop(String) private label?: string;
    @Prop(String) private tip?: string;
    @Prop({ default: false }) private inline?: boolean;
    @Prop() private prop?: string;
    @Prop({ default: 'blur' }) private trigger?: string;
    @Prop(String) private type?: string;
    @Prop({ default: () => [] }) private validators?: any;

    // 当前校验
    get currentRules() {
      // {type:'', message:'', pattern:'', validator:'', trigger:'blur'}
      if (!this.validators || this.validators.length === 0) return [];
      const resultRules: any = [];
      this.validators.forEach((ruleItem: any) => {
        let result;
        if (typeof (ruleItem) === "object") {
          result = (ruleItem.validator || !ruleItem.type) ? ruleItem : Rules.validObject(ruleItem);
        } else {
          result = Rules[ruleItem] ? Rules[ruleItem] : Rules.validString(ruleItem);
        }
        result && resultRules.push({
          ...result,
          trigger: ruleItem.trigger || this.trigger
        });
      });
      return resultRules;
    }

  }
</script>

<style lang="scss" scoped>
  .mu-form-item {

    &.inline {
      display: flex;

      .item-label {
        margin-right: 8px;
        word-break: keep-all;
      }
    }

    .item-label {
      padding: 0;
      line-height: 28px;
      font-size: 12px;
      box-sizing: border-box;
      position: relative;
      font-weight: normal;

      &.is-required {
        padding-left: 8px;
      }

      &.is-required:before {
        content: '*';
        color: 'red';
        position: absolute;
        left: 0;
      }

      i {
        color: #999;
        cursor: pointer;
        font-size: 13px;
      }

      i:hover {
        color: #ff6400;
      }
    }

    .form-content {
      position: relative;
      font-size: 12px;
      width: 100%;

      .table-input-error {
        position: absolute;
        right: 6px;
        top: 4px;
      }

      .el-icon-warning {
        color: 'red';
      }
    }

    .icon-help {
      color: #999;
    }
  }

</style>
