<template>
  <div>
    <el-popover
      placement="bottom"
      width="320"
      trigger="manual"
      :popper-class="`popover${dataKey}`"
      v-model="textareaVisible"
    >
      <el-input
        :name="`${dataKey}${curKey}-textarea`"
        type="textarea"
        :rows="5"
        :id="`popoverInput${dataKey}${curKey}`"
        class="inputShadow textareaPopover"
        v-model="formData[dataKey]"
        resize="none"
        maxlength="13000"
        placeholder=""
        @blur="textareaBlur"
        @input="input"
      ></el-input>
      <el-input
        slot="reference"
        :name="dataKey"
        type="textarea"
        :rows="1"
        class="inputShadow"
        :id="`inputInner--${dataKey}`"
        v-model="formData[dataKey]"
        resize="none"
        placeholder=""
        @focus="textareaFocus"
        @input="input"
      ></el-input>
    </el-popover>
    <el-badge
      v-if="
        !textareaVisible &&
        textareaLength({
          key: dataKey,
          value: formData[dataKey],
        }) > 1
      "
      type="info"
      :value="`+${textareaLength({
        key: dataKey,
        value: formData[dataKey],
      })}`"
      class="item texttareaTip"
    />
  </div>
</template>

<script>
export default {
  props: {
    formData: {
      type: Object,
      default: null,
    },
    dataKey: {
      type: String,
      default: "",
    },
    curKey: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      textareaVisible: false,
    };
  },
  watch: {
    formData: {
      handler(val) {
        if (!val[this.dataKey] || val[this.dataKey].length <= 0) {
          this.textareaVisible = false;
          let inputInner = document.querySelector(
            "#inputInner--" + this.dataKey
          );
          inputInner.classList.remove("inputFocus");
        }
      },
      deep: true,
    },
  },

  methods: {
    //文本域展示状态切换
    textareaFocus(val) {
      this.textareaVisible = true;
      this.$nextTick(() => {
        document
          .querySelector(`#popoverInput${this.dataKey}${this.curKey}`)
          .focus();
        document.querySelector("#inputInner--" + this.dataKey).style.display =
          "none";
      });
    },
    textareaBlur(val) {
      let inputInner = document.querySelector("#inputInner--" + this.dataKey);
      this.textareaVisible = false;
      inputInner.style.display = "block";
      this.$nextTick(() => {
        inputInner.blur();
        if (
          inputInner.value != undefined &&
          inputInner.value != "" &&
          inputInner.value != null
        ) {
          inputInner.classList.add("inputFocus");
        } else {
          inputInner.classList.remove("inputFocus");
        }
      });
      let arr = [];
      this.formData[this.dataKey]
        .replace(/[\n\，\；\;]/g, ",")
        .replace(/[\t]/g, "")
        .split(",")
        .forEach((str, index) => {
          if (str != null && str != "" && index <= 1000) {
            arr.push(str.trim());
          }
        });
      this.formData[this.dataKey] = arr.join("\n");
      this.$emit("formChange", this.formData);
      this.$forceUpdate();
    },
    //文本域输入内容数量处理
    textareaLength(val) {
      if (val.value != "" && val.value != null) {
        let arr = [];
        val.value
          .trim()
          .replace(/[\n\，\；\;]/g, ",")
          .split(",")
          .forEach((item) => {
            if (item != "" && item != null) {
              arr.push(item);
            }
          });
        return arr.length;
      } else {
        return 0;
      }
    },
    input() {
      this.$forceUpdate();
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/assets/styles/variables.scss";
.texttareaTip {
  position: absolute;
  top: 52%;
  right: 20px;
  transform: translate(0, -50%);
  z-index: 10;
}
</style>