<!-- @desc:form-item组件封装  @auth:周兴  @time:2022/11/15 13:02 -->
<template>
  <DkCol :span="spanData">
    <FormItem ref="formItem" style="width:100%;" :show-message="false" :prop="prop">
      <div style="width: 100%;display: table;">
        <div style="position: relative;" :class="different?'different':''">
          <PrependTransparent :labelWidth="noLabel?0:labelWidthFather"
                              ref="prepend"
                              :errorMessage="this.$refs['formItem']?this.$refs['formItem'].validateMessage:''"
                              :label="noLabel?'':labelData" :required="required" :info="info" :link-flag="linkFlag"
                              @on-link="handleLink">
            <slot></slot>
          </PrependTransparent>
        </div>
      </div>
    </FormItem>
  </DkCol>
</template>

<script>
export default {
  name: 'DkFormItem',
  inject: ['rules', 'labelWidth', 'form', 'colCount'],
  props: {
    //formItem别名
    prop: {
      type: String,
      default: ''
    },
    // 是否必须输入，如果必须输入，系统会自动生成非空的校验规则
    required: {
      type: Boolean,
      default: false
    },
    // 数据类型
    dataType: {
      type: String,
      default: null,
    },
    //标签文本
    label: {
      type: String,
      default: ''
    },
    //是否自动label宽度
    autoLabelWidth: {
      type: Boolean,
      default: false
    },
    // 栅格的占位格数
    span: {
      type: [String, Number],
      default: null
    },
    // 提示信息
    info: {
      type: String,
      default: null
    },
    // 是否是链接
    linkFlag: {
      type: Boolean,
      default: false
    },
    // 是否有标题
    noLabel: {
      type: Boolean,
      default: false
    },
    different:{
      type: Boolean,
      default: false
    }
  },
  watch: {
    prop(n, o) {
      this.labelData = this.label
      if (this.label === '') {
        this.labelData = vm.$t(this.prop)
      }
    },
    required(n, o) {
      this.setRules(n);  // 设置必填项规则
    },
    label(n, o) {
     this.labelData = n;
    }
  },
  data() {
    const vm = window.vm;
    return {
      vm: vm,
      labelData: '',
      // required:false,
      labelWidthFather: null,
      spanData: 6,
    }
  },
  provide() {
    return {prop: this.prop, required: this.required, dkFormItem: this}
  },
  methods: {
    /**
     * @desc   : 链接跳转
     * @author : 周兴
     * @date   : 2023/6/6 10:16
     */
    handleLink() {
      this.$emit('on-link', {prop: this.prop});
    },
    /**
     * @desc   : 设置必须输入标识
     * @author : 周兴
     * @date   : 2022/3/4 13:17
     */
    getRequired() {
      //设置label宽度
      if (this.autoLabelWidth) {
        this.labelWidthFather = null;
      } else {
        this.labelWidthFather = this.labelWidth()
      }
    },
    /**
     * @desc   : 清除校验信息
     * @author : 周兴
     * @date   : 2023/2/28 9:40
     */
    clearValidate() {
      if (this.$refs['formItem']) {
        if (this.$refs['formItem'].validateMessage) {
          this.$refs['formItem'].validateMessage = null;
        }
        if (this.$refs['formItem'].validateState) {
          this.$refs['formItem'].validateState = null;
        }
      }
    },
    /**
     * @desc   : 设置校验规则
     * @author : 周兴
     * @date   : 2022/11/24 10:24
     */
    setRules(required) {
      if (required) {
        if (this.form) {
          let itemRule = {
            required: true,
            trigger: 'none',
            message: vm.$t('inputWords', {'search-name': this.label ? this.label : vm.$t(this.prop)}),
          }
          if (this.dataType) {
            itemRule.type = this.dataType;
          }
          this.form.setItemRule({prop: this.prop, rule: itemRule});
        }
      } else {
        // 如果不必须输入，需要清除掉原有的规则
        if (this.form) {
          this.form.removeItemRule({prop: this.prop});
        }
      }
    },
    /**
     * @desc   : 给集合赋值
     * @author : 周兴
     * @date   : 2022/12/26 11:30
     */
    setItems(item) {
      if (item && this.form) {
        this.form.items.push(item);
        // console.log('bbb3',this.form.items)
      }
    },
  },
  mounted() {
    this.setRules(this.required);  // 设置必填项规则
  },
  created() {
    this.getRequired()
    // 如果没有传标签，直接用prop进行国际化
    this.labelData = this.label
    if (this.label === '') {
      this.labelData = vm.$t(this.prop)
    }
    if (this.span) {
      this.spanData = this.span;
    } else {
      if (this.colCount && this.colCount != 0) {
        this.spanData = parseInt(24 / parseInt(this.colCount) + '');
      }
    }
  }
}
</script>
<style scoped>
.ivu-form-item {
  margin-bottom: 0 !important;
}

.err-message {
  display: flex;
  align-items: center;
  justify-content: center;
}

.err-message:before {
  content: ' ';
  position: absolute;
  border-style: solid;
  border-width: 10px 10px 10px 10px;
  top: -30%;
  z-index: 13;
  left: 15px;
  border-color: #fcf0f1 transparent transparent transparent;
}

.err-message:after {
  color: #fa6b6b;
  font-size: 10px;
  content: attr(data-err-message);
  position: absolute;
  z-index: 12;
  background: #fcf0f1;
  top: -98%;
  left: 10px;
  border-radius: 4px;
  line-height: 1;
  padding: 8px;
  box-shadow: 4px 4px 11px #cbcbcb;;
}

/deep/.different .ivu-input-group-prepend{
  background: #FFC864 !important;
}

</style>

