<template>
  <div class="formitem">
    <!-- 标题 -->
    <div class="label" :style="{ width: labelWidth + 'px' }">
      {{ label }}
      <!-- 提示 -->
      <Popover v-if="showPop" type="base" placement="top-left">
        <template #content>
          <article>
            {{ popText }}
          </article>
        </template>
        <Icon class="icon" :name="'tagError'" />
      </Popover>
      :
    </div>
    <!-- 输出框 -->
    <Input
      v-if="formType === 'input'"
      v-model="value"
      :width="250"
      :placeholder="placeholder"
      :disabled="isDisabled"
    ></Input>
    <!-- 输出框带单位 -->
    <Input
      v-if="formType === 'input-unit'"
      v-model="value"
      :placeholder="placeholder"
      :right-button="[
        {
          id: '1',
          name: unit,
          checked: 'checked',
        },
      ]"
    />
    <!-- 选择框 -->
    <MSelect
      v-if="formType === 'select'"
      width="180"
      v-model="value"
      :data="selectData"
    />
    <!-- 上传图片 -->
    <section class="list" v-if="formType === 'upload'">
      <ImageUpload
        hosts="http://47.95.122.141:8209/domita/backend"
        action="/base/attachment/uploadX"
        :defaultFileList="value"
        :previewMode="false"
        :multiple="true"
      />
    </section>
    <!-- 输入域 -->
    <Input
      v-if="formType === 'textarea'"
      v-model="value"
      type="textarea"
      :rows="6"
      :autofocus="false"
      :max-length="10"
      :placeholder="placeholder"
    />
    <!-- 增减输入框 -->

    <div v-if="formType === 'input-handle'" class="inputs">
      <div v-for="(item, index) in value" :key="index" class="input-item">
        <Input v-model="item.value" :placeholder="placeholder"></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>
  </div>
</template>
<script>
export default {
  props: {
    label: String,
    formType: {
      type: String,
      default: "input",
    },
    initValue: [String, Number, Array, Object],
    placeholder: {
      type: String,
      default: "请输入",
    },
    isDisabled: false,
    labelWidth: {
      type: Number,
      default: 120,
    },
    unit: String,
    selectData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    showPop: {
      type: Boolean,
      default: false,
    },
    popText: String,
  },
  data() {
    return {
      value: this.initValue,
    };
  },
  methods: {
    inputHandle(type, index) {
      if (type === "plus") {
        this.value.push({ value: "" });
      } else {
        if (this.value.length === 1) return;
        this.value.splice(index, 1);
      }
    },
  },
  watch: {
    initValue(val, old) {
      if (val !== old) {
        this.value = val;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.formitem {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  .label {
    font-size: 14px;
    text-align: right;
    color: #646c73;
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .icon {
      width: 11.5px;
      height: 11.5px;
      /deep/ .v-svg-tagError {
        width: 11.5px !important;
        height: 11.5px !important;
      }
    }
  }
  .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>
