<template>
  <!-- <div> -->
  <el-form-item
    class="fedexFormItem"
    :label="itemLabel"
    :prop="prop"
    :required="required"
    :error="error"
    :id="'inputOuter-' + type + '-' + prop"
    style="pointer-events: auto"
    @click="formItemClick"
  >
    <slot name="title" slot="label"></slot>
    <el-tooltip
      v-if="toolyipShow"
      class="item"
      effect="dark"
      :content="content"
      :disabled="tooltipDisabled"
      placement="top"
    >
      <slot></slot>
    </el-tooltip>
    <slot v-else></slot>
    <template v-slot:error="scoped">
      <div class="formError">{{ scoped.error }}</div>
    </template>
  </el-form-item>
  <!-- </div> -->
</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: "",
    },
    disabled: {
      type: Boolean,
      default: true,
    },
    toolyipShow: {
      type: Boolean,
      default: false,
    },
    eventType: {
      type: Boolean,
      default: false,
    },
    rules: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      itemLabel: this.label,
      inputFocusType: false,
      content: "",
      tooltipDisabled: true,
    };
  },
  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
    let dateEditor = document.querySelector(".el-date-editor");
    if (inputInner) {
      if (inputInner.disabled && this.eventType) {
        inputInner.style = "pointer-events:none";
      }
      //通过input得id是否存在判断效果是否激活
      this.activeType ? inputInner.classList.add("inputFocus") : "";
      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
          this.itemLabel = this.label;
          !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
          this.itemLabel = this.label;
          !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");
        }
        this.content = inputInner.value;
      });
    } else {
      if (dateEditor) {
        this.activeType
          ? document
              .querySelector(".inputInner-" + this.type + "-" + this.prop)
              .classList.add("inputFocus")
          : "";
        if (
          document.querySelector(".inputInner-" + this.type + "-" + this.prop)
        ) {
          let dataInner = document
            .querySelector(".inputInner-" + this.type + "-" + this.prop)
            .getElementsByClassName("el-range-input");
          dataInner[0].addEventListener("focus", (e) => {
            this.inputFocusType = true;
            dataInner[0].classList.add("inputFocus");
            outInput.classList.add("activeBorder");
          });

          dataInner[1].addEventListener("focus", (e) => {
            this.inputFocusType = true;
            dataInner[1].classList.add("inputFocus");
            outInput.classList.add("activeBorder");
          });

          dataInner[0].addEventListener("blur", (e) => {
            if (!e.target.value && !e.target.placeholder) {
              // input失焦时如果无内容则移除active class
              this.itemLabel = this.label;
              !this.activeType
                ? dataInner[0].classList.remove("inputFocus")
                : "";
            } else {
              dataInner[0].classList.add("inputFocus");
            }
            this.inputFocusType = false;
            outInput.classList.remove("activeBorder");
          });

          dataInner[1].addEventListener("blur", (e) => {
            if (!e.target.value && !e.target.placeholder) {
              // input失焦时如果无内容则移除active class
              this.itemLabel = this.label;
              !this.activeType
                ? dataInner[1].classList.remove("inputFocus")
                : "";
            } else {
              dataInner[1].classList.add("inputFocus");
            }
            this.inputFocusType = false;
            outInput.classList.remove("activeBorder");
          });
        }
      }
    }
  },
  updated() {
    let inputInner = document.querySelector(
      "#inputInner-" + this.type + "-" + this.prop
    ); //获取input
    let outInput = document.querySelector(
      "#inputOuter-" + this.type + "-" + this.prop
    ); //获取formitem
    let dateEditor = document.querySelector(".el-date-editor");
    this.$nextTick(() => {
      if (inputInner) {
        if (
          inputInner.value != undefined &&
          inputInner.value != "" &&
          inputInner.value != null
        ) {
          inputInner.classList.add("inputFocus");
        } else {
          !this.inputFocusType ? inputInner.classList.remove("inputFocus") : "";
          this.activeType ? inputInner.classList.add("inputFocus") : "";
        }
      } else {
        if (dateEditor) {
          if (this.activeType) {
            document.querySelector(".inputInner-" + this.type + "-" + this.prop)
              .classList
              ? document
                  .querySelector(".inputInner-" + this.type + "-" + this.prop)
                  .classList.add("inputFocus")
              : "";
          }
        }
      }
      if (
        inputInner &&
        inputInner.offsetWidth &&
        inputInner.offsetWidth < inputInner.scrollWidth
      ) {
        this.content = inputInner.value;
        !this.disabled
          ? (this.tooltipDisabled = false)
          : (this.tooltipDisabled = true);
      }
    });
  },
  methods: {
    formItemClick() {
      this.$emit("event", this.prop);
    },
    getDateEditorNode() {
      let dateInput = document.getElementsByClassName("el-date-editor");
      dateInput.forEach((item) => {
        item.querySelector(".el-input__suffix")
          ? 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'
      });
    },
    onMouseOver(str) {
      if (this.$refs[str]) {
        const parentWidth = this.$refs[str].parentNode.offsetWidth;
        const contentWidth = this.$refs[str].offsetWidth;
        // 判断是否开启tooltip功能
        if (contentWidth > parentWidth) {
          this.isShowTooltip = false;
        } else {
          this.isShowTooltip = true;
        }
      }
    },
  },
};
</script>

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