<template>
  <el-form-item
    class="fedexFormItem"
    :label="itemLabel"
    :prop="prop"
    :required="required"
    :error="error"
    :id="'inputOuter-' + type + '-' + prop"
  >
    <slot name="title" slot="label"></slot>
    <slot></slot>
    <template v-slot:error="scoped">
      <div class="formError">{{ scoped.error }}</div>
    </template>
  </el-form-item>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      default: "",
    },
    prop: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "",
    },
    activeType: {
      type: Boolean,
      default: false,
    },
    required: {
      type: Boolean,
      default: false,
    },
    error: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      itemLabel: this.label,
      inputFocusType: false,
    };
  },
  watch: {
    label(val) {
      this.itemLabel = val;
    },
  },
  mounted() {
    this.getDateEditorNode();
    let inputInner = document.querySelector(
      "#inputInner-" + this.type + "-" + this.prop
    ); //获取input
    let outInput = document.querySelector(
      "#inputOuter-" + this.type + "-" + this.prop
    ); //获取formitem
    if (inputInner) {
      //通过input得id是否存在判断效果是否激活
      inputInner.addEventListener("focus", (e) => {
        this.inputFocusType = true;
        inputInner.classList.add("inputFocus");
        outInput.classList.add("activeBorder");
      });

      inputInner.addEventListener("blur", (e) => {
        if (!e.target.value && !e.target.placeholder) {
          // input失焦时如果无内容则移除active class
          if (this.labelInput) {
            this.itemLabel = this.label;
            // labelInputInner_parentNode.style.display = 'inline-block'
          } else {
            !this.activeType ? inputInner.classList.remove("inputFocus") : "";
          }
        } else {
          inputInner.classList.add("inputFocus");
        }
        this.inputFocusType = false;
        outInput.classList.remove("activeBorder");
      });

      inputInner.addEventListener("change", (e) => {
        if (!e.target.value && !e.target.placeholder) {
          // input失焦时如果无内容则移除active class
          if (this.labelInput) {
            this.itemLabel = this.label;
            // labelInputInner_parentNode.style.display = 'inline-block'
          } else {
            !this.activeType ? inputInner.classList.remove("inputFocus") : "";
          }
        } else {
          inputInner.classList.add("inputFocus");
        }
        this.inputFocusType = false;
        outInput.classList.remove("activeBorder");
      });

      if (inputInner.attributes.disabled) {
        if (inputInner.value) {
          inputInner.classList.add("inputFocus");
        } else {
          !this.activeType ? inputInner.classList.remove("inputFocus") : "";
        }
      }
      this.$nextTick(() => {
        if (inputInner.value) {
          inputInner.classList.add("inputFocus");
        }
      });
    }
  },
  updated() {
    let inputInner = document.querySelector(
      "#inputInner-" + this.type + "-" + this.prop
    ); //获取input
    let outInput = document.querySelector(
      "#inputOuter-" + this.type + "-" + this.prop
    ); //获取formitem
    this.$nextTick(() => {
      if (inputInner && inputInner.value) {
        inputInner.classList.add("inputFocus");
      } else {
        !this.inputFocusType ? inputInner?.classList.remove("inputFocus") : "";
      }
    });
  },
  methods: {
    getDateEditorNode() {
      let dateInput = document.getElementsByClassName("el-date-editor");
      dateInput.forEach((item) => {
        item
          .querySelector(".el-input__suffix")
          .children[0].children[0].classList.add("el-icon-date");
      });
      let selectInput = document.getElementsByClassName("el-select");
      selectInput.forEach((item) => {
        // item.querySelector('.el-input__suffix').children[0].children[0].style.display = 'none'
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>