<template>
  <el-form-item
    class="ht-form-item"
    :label="label"
    :label-width="labelWidth"
    :class="formItemClass"
  >
    <slot></slot>
    <slot name="label" slot="label"></slot>
  </el-form-item>
</template>

<script>
export default {
  name: "ht-form-item",
  props: {
    label: {
      type: String,
      default: ""
    },
    align: {
      type: String,
      validator: function(value) {
        return ["left", "center", "right","justify"].indexOf(value) !== -1;
      }
    },
    labelColor: {
      type: String
    },
    labelWidth: {
      type: String,
      default: "100px"
    },
    customColon: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    formItemClass: function() {
      let _className = [this.align];
      if (!this.customColon) {
        _className.push("ht-form-item-colon");
      }
      switch (this.align) {
        case "left":
          _className.push("ht-form-item-left");
          break;
        case "center":
          _className.push("ht-form-item-center");
          break;
        case "right":
          _className.push("ht-form-item-right");
          break;
        case "justify":
           _className.push("ht-form-item-justify");
      }
      if (this.$slots.default) {
        for (let i = 0; i < this.$slots.default.length; i++) {
          let _vNode = this.$slots.default[i];
          if (_vNode.componentOptions && _vNode.componentOptions.propsData) {
            let propsData = _vNode.componentOptions.propsData;
            let _validate = propsData.validate;

            if (!_validate && _vNode.data.directives) {
              let validateArry = _vNode.data.directives.filter(
                item => item.name == "validate"
              );
              if (validateArry && validateArry.length > 0) {
                _validate = validateArry[0].value;
              }
            }
            if (
              _validate &&
              _validate.constructor == Object &&
              _validate.required
            ) {
              _className.push("is-required");
            } else if (
              _validate &&
              _validate.constructor == String &&
              _validate.indexOf("required") != -1
            ) {
              _className.push("is-required");
            } else if (
              _validate &&
              _validate.constructor == String &&
              _validate.indexOf("required") != -1
            ) {
              _className.push("is-required");
            } else if (propsData.permission == "b") {
              _className.push("is-required");
            }
            if (
              propsData.permission === "r" &&
              _className.indexOf("is-required") != -1
            ) {
              _className = _className.filter(item => item != "is-required");
            }
            break;
          }
        }
      }
      return _className.join(" ");
    }
  },
  mounted() {
    if (this.labelColor) {
      this.$el.firstElementChild &&
        (this.$el.firstElementChild.style.color = this.labelColor);
    }
  }
};
</script>

<style scoped>
.ht-form-item-colon >>> .el-form-item__label::after {
  content: ":";
}
.ht-form-item-left >>> .el-form-item__label {
  text-align: left;
}
.ht-form-item-center >>> .el-form-item__label {
  text-align: center;
}
.ht-form-item-right >>> .el-form-item__label {
  text-align: right;
}
.ht-form-item-justify >>> .el-form-item__label {
  text-align: justify;
  text-justify: distribute-all-lines;
  text-align-last: justify;
}
  
</style>
