<template>
  <div class="ed-input--array">
    <!--  初始添加  -->
    <el-button v-if="validateNull(value)" :disabled="disabled" :size="size" circle icon="el-icon-plus" type="primary"
               @click="add"></el-button>

    <!--  内容层  -->
    <div v-for="(item,index) in value" :key="index" class="array-item">
      <div class="array-item-input">
        <el-tooltip :disabled="(!isImg && !isLink) || validateNull(item)" placement="bottom">
          <div slot="content">
            <component :is="isMediaType(item)" v-if="isImg" :src="item" controls="controls" style="width: 200px"
                       @click="openImg(index)"></component>

            <el-link v-else-if="isLink" :href="item" :target="target" type="primary">{{ item }}</el-link>
          </div>
          <el-input v-model="value[index]" :disabled="disabled" :placeholder="placeholder" :size="size"
                    @blur="emitValue"></el-input>
        </el-tooltip>

        <!--  新增/删除  -->
        <template v-if="!(disabled || alone)">
          <el-button v-if="!isLimit" :disabled="disabled" :size="size" circle icon="el-icon-plus" type="primary"
                     @click="add(index)"></el-button>
          <el-button :disabled="disabled" :size="size" circle icon="el-icon-minus" type="danger"
                     @click="remove(index)"></el-button>
        </template>
      </div>
    </div>

  </div>
</template>

<script>
import {isMediaType, validateNull} from "../../../tools/utils";
import Props                       from "./Props"

export default {
  name: "EdInputArray",
  props: Props,
  computed: {
    isLimit() {
      if (validateNull(this.limit)) return false
      else if (this.textLen >= this.limit) return true
      return false
    },
    textLen() {
      return this.value.length
    },
    isImg() {
      return this.type === 'img'
    },
    isLink() {
      return this.type === 'link'
    },
  },
  methods: {
    isMediaType,
    validateNull,
    // 新增
    add(index) {
      this.value.splice(index + 1, 0, '');
    },
    // 删除
    remove(index) {
      this.value.splice(index, 1)
    },
    // 打开
    openImg() {
    },
    emitValue() {
      // this.$emit('input', value)
    }
  }
}
</script>

<style lang="scss" scoped>
.ed-input--array {

  .array-item {
    margin-bottom: 5px;

    .array-item-input {
      display: flex;

      .el-input {
        flex: auto;
      }

      .el-button {
        margin-left: 5px;
      }
    }
  }
}
</style>
