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

<script>
  import mobileMode from '@/mixins/mobileMode.js'
  export default {
    name: 'HtFormItem',
    componentName: 'HtFormItem',
    inject: {
      elForm: {
        default: '',
      },
    },
    mixins: [mobileMode],
    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,
      },
      customColon: {
        type: Boolean,
        default: false,
      },
      required: {
        type: Boolean,
        default: false,
      },
      fieldPath: {
        type: String,
      },
    },
    data() {
      return {
        formItemAlign: null,
        isRequired: false,
      }
    },
    computed: {
      finalLabelWidth() {
        return this.labelWidth
          ? this.labelWidth
          : this.elForm && this.elForm.labelWidth
          ? this.elForm.labelWidth
          : '100px'
      },
      formItemClass: function () {
        let _className = []
        const formItemAlignVal = this.align
          ? this.align
          : this.formItemAlign
          ? this.formItemAlign
          : ''
        /* 移动端不需要冒号 */
        if (!this.customColon && !this.isMobile) {
          _className.push('ht-form-item-colon')
        }
        switch (formItemAlignVal) {
          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.isMobile) {
          _className.push('mobile-ht-form-item')
        }
        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 (this.required) {
                _className.push('is-required')
              } else 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 (propsData.permission == 'b') {
                _className.push('is-required')
              }
              if (
                propsData.permission === 'r' &&
                _className.indexOf('is-required') != -1
              ) {
                _className = _className.filter((item) => item != 'is-required')
              }
              if (this.isRequired && !_className.includes('is-required')) {
                _className.push('is-required')
              }
              let componentNameArray = [
                'ht-date-picker',
                'ht-editor',
                'ht-file',
                'ht-hand-signature',
                'ht-image',
                'ht-opinion',
                'ht-picture',
                'ht-qrcode',
                'ht-relevant-flow',
                'ht-time-picker',
              ]
              const componentList = [
                'ht-time-picker',
                'ht-date-picker',
                'ht-date',
                'ht-checkbox',
                'ht-radio',
              ]
              if (
                componentNameArray.includes(_vNode.componentOptions.tag) &&
                this.isMobile
              ) {
                _className.push('ht-form-item-top-label')
              }

              // if (
              //   componentList.includes(_vNode.componentOptions.tag) &&
              //   this.isMobile
              // ) {
              //   _className.push('has-margin-inputs')
              // }
              break
            }
          }
        }
        return _className.join(' ')
      },
    },
    created() {
      this.$on('formExtend:update', (formExtend) => {
        this.formItemAlign = formExtend.formItemAlign
      })
      this.$root.$on('current-required-item', (val) => {
        if (val[`data.${this.fieldPath}`] === 'b') {
          this.isRequired = true
        } else if (
          ['w', 'n', 'r', 'd'].includes(val[`data.${this.fieldPath}`])
        ) {
          this.isRequired = false
        }
      })
    },
    mounted() {
      if (this.labelColor) {
        this.$el.firstElementChild &&
          (this.$el.firstElementChild.style.color = this.labelColor)
      }
    },
  }
</script>

<style scoped lang="scss">
  .ht-form-item-colon ::v-deep .el-form-item__label::after {
    content: ':';
  }
  .ht-form-item-left ::v-deep .el-form-item__label {
    text-align: left;
    span {
      margin-left: 0 !important;
    }
  }
  .ht-form-item-center ::v-deep .el-form-item__label {
    text-align: center;
    span {
      margin-left: 0 !important;
    }
  }
  .ht-form-item-right ::v-deep .el-form-item__label {
    text-align: right;
    line-height: 34px;
    span {
      margin-left: 0 !important;
    }
  }
  .ht-form-item-justify ::v-deep .el-form-item__label {
    text-align: justify;
    text-justify: distribute-all-lines;
    text-align-last: justify;
  }
  ::v-deep .el-form-item__label {
    word-break: break-all;
  }
  .mobile-ht-form-item.is-required ::v-deep .el-form-item__label::before {
    display: none;
  }
  .mobile-ht-form-item.is-required ::v-deep .el-form-item__label > span::after {
    content: '*';
    color: #f56c6c;
    margin-right: 0.10667rem;
  }
  .mobile-ht-form-item {
    ::v-deep {
      .field-tail,
      .ht-form-inputs__block {
        text-align: right;
      }
      .mobile-wangEditor-container {
        text-align: left;
      }
    }
  }
  ::v-deep .w-e-tooltip {
    display: block !important;
  }
  .mobile-ht-form-item {
    ::v-deep {
      .el-form-item__label {
        line-height: 48px;
        text-align: left;
        span {
          margin-left: 0 !important;
          display: inline-block;
          line-height: 24px;
          padding: 12px 0;
          vertical-align: middle;
        }
      }
      .el-form-item__content {
        line-height: 48px;
        .van-cell__right-icon {
          font-size: 18px;
          margin-right: -5px;
          line-height: 24px !important;
        }
      }
    }
  }
  .ht-form-item-top-label {
    ::v-deep {
      .el-form-item__label {
        text-align: left !important;
        width: 100% !important;
        line-height: 24px !important;
        margin-top: 12px !important;
        padding-top: 0;
      }
      .el-form-item__content {
        margin-left: 0 !important;
        width: 100%;
        line-height: 24px !important;
        .field-tail {
          text-align: left;
          display: inline-block;
          justify-content: flex-start !important;
          line-height: 24px;
        }
        .field-tail__wrap {
          .mobile-readonly {
            text-align: left;
            line-height: 24px;
            padding: 8px 0;
          }
        }
        .mobile-upload {
          position: absolute;
          top: 2px;
          right: 0;
          width: 150px;
        }
      }
    }
  }
</style>
