<template>
  <!-- 输出框 -->
  <div>
    <div v-if="formItemObj.isMultiple" class="inputs">
      <div v-for="(item, index) in value" :key="index" class="input-item">
        <Input
          v-model="item.value"
          :placeholder="placeholder"
          @input="change"
        ></Input>
        <img
          class="img"
          src="@/assets/images/project/Add.png"
          @click="inputHandle('plus')"
          v-if="value.length === 1 || index > 0"
        />
        <img
          class="img"
          src="@/assets/images/project/Delete.png"
          @click="inputHandle('reduce', index)"
          v-if="value.length > 1"
        />
      </div>
    </div>
    <Input
      v-else
      v-model="value"
      :width="250"
      :placeholder="placeholder"
      :disabled="isDisabled"
      :type="formItemObj.name === '项目简介' ? 'textarea' : 'input'"
      :rows="6"
      :errorInfo="errorInfo"
      :right-button="
        unit
          ? [
              {
                id: '1',
                name: unit,
                checked: 'checked',
              },
            ]
          : []
      "
      @input="change"
    />
  </div>
</template>
<script>
export default {
  props: {
    initValue: {
      type: [String, Number, Array, Object],
      default: () => {
        return "";
      },
    },
    placeholder: {
      type: String,
      default: "请输入",
    },
    isDisabled: false,
    unit: String,
    formItemObj: {
      type: Object,
      default: () => {
        return { isMultiple: false };
      },
    },
    info: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    trueValue() {
      if (typeof this.value === "number") {
        return this.value.toString();
      }

      if (Array.isArray(this.value)) {
        return this.value.filter((i) => i.value).map((i) => i.value);
      }
      return this.value;
    },
  },
  data() {
    return {
      errorInfo: "",
      value: this.filterInitValue(this.initValue),
    };
  },
  mounted() {
    // console.log(this.formItemObj.isMultiple);
  },
  methods: {
    filterInitValue(init) {
      if (typeof init === "number") {
        return init.toString();
      }
      if (this.formItemObj.isMultiple) {
        if (typeof init === "string") {
          return [{ value: init }];
        }
        if (init.length === 0) {
          return [{ value: "" }];
        }
        return init.map((i) => {
          return {
            value: i,
          };
        });
      } else {
        return init;
      }
    },
    change(e) {
      // this.$emit("change", this.value);
      console.log(this.trueValue);
      this.errorInfo = "";
      const isNum = /^[0-9]+.?[0-9]*$/; // 是否都为数字
      const isDouble = /^[+-]?\d+(?:\.\d{1,2})?$/; // 最多两位小数,可为正负
      if (!["STRING", "TEXT"].includes(this.formItemObj.dataType)) {
        if (!isNum.test(e)) {
          this.errorInfo = "仅支持数字输入";
          return;
        }
      }

      if (!["DOUBLE"].includes(this.formItemObj.dataType)) {
        if (!isDouble.test(e)) {
          this.errorInfo = "仅支持小数点后两位";
          return;
        }
      }

      this.$emit("change", this.trueValue);
    },
    inputHandle(type, index) {
      if (type === "plus") {
        this.value.push({ value: "" });
      } else {
        if (this.value.length === 1) return;
        console.log(this.value);
        this.value.splice(index, 1);
      }
    },
  },
  watch: {
    info: {
      handler(info) {
        let pathArr = this.formItemObj.path.split(".");
        if (pathArr.length > 1 && info[pathArr[0]].hasOwnProperty(pathArr[1])) {
          this.value = this.filterInitValue(info[pathArr[0]][pathArr[1]]);
        } else if (pathArr.length === 1) {
          this.value = this.filterInitValue(info[pathArr[0]]);
        }
      },
      deep: true,
    },
  },
};
</script>
<style lang="less" scoped>
.inputs {
  display: flex;
  flex-direction: column;
  .input-item {
    display: flex;
    align-items: center;
    .img {
      &:nth-child(2) {
        margin: 0 10px;
      }
    }
    &:not(:nth-child(1)) {
      margin-top: 8px;
    }
  }
}
</style>
