<template>
  <div class="array-form">
    <div class="label">
      <img class="pre-tag" src="../../../assets/images/template/pre-tag.png" />
      <div class="label-text" :title="property.label">{{ property.label }}</div>
    </div>
    <div class="lists">
      <div class="list" v-for="(item, index) in array" :key="index">
        <input
          @change="change"
          class="input"
          type="text"
          v-model="item.value"
          :placeholder="'请输入' + property.label"
        />
        <div class="del" @click="del(index)">
          <i class="iconfont iconshanchu-"></i>
        </div>
      </div>

      <div class="add" @click="add">
        <i class="iconfont icontianjia"></i>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { Property } from "@/plugins/types2";

@Component
export default class ImageUrlForm extends Vue {
  @Prop() property!: Property;

  public array = [
    {
      value: "",
    },
  ];

  @Watch("array")
  public arrayChange() {
    this.property.value = this.array.map((item) => String(item.value));
  }

  mounted() {
    if (!Array.isArray(this.property.value)) return;
    this.array = this.property.value.map((value: string) => {
      return { value };
    });
  }

  public change(inputValue: string) {
    this.property.value = this.array.map((item) => String(item.value));
  }

  public add() {
    this.array.push({
      value: "",
    });
  }

  public del(index: number) {
    if (this.array.length <= 1) return;
    this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        this.array.splice(index, 1);
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      })
      .catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      });
  }
}
</script>

<style scoped lang="less">
.label {
  display: inline-block;
  width: 150px; /* 104 - 18 */
  flex-shrink: 0;
  height: 44px;
  cursor: pointer;
  line-height: 44px;
  color: #797d84; /* todo ui图颜色不一致 */
  font-size: 14px;
  font-weight: 300;
  position: relative;
}
.pre-tag {
  position: absolute;
  left: -30px;
  top: 14px;
  display: none;
}
.array-form {
  flex-shrink: 0;
  padding-left: 18px;
  line-height: 65px;
  height: auto;
  font-size: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.list {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
.input {
  margin-right: 10px;
  margin-top: 0;
  flex-shrink: 0;
  height: 44px;
  width: 770px;
  box-sizing: border-box;
  min-height: 44px;
  border-radius: 4px;
  border: 1px solid #dcdfe6; /* todo 边框、背景色ui图颜色不一致 */
  outline: none;
  padding-left: 24px;
  font-size: 14px;
  font-weight: 300;
  &::-webkit-input-placeholder {
    color: #bababa;
  }
  &::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #bababa;
  }

  &:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #bababa;
  }
}

.del {
  height: 34px;
  display: flex;
  color: #eaeaea;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  .iconfont {
    font-size: 20px;
  }
}

.add {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: white;
  display: flex;
  background-color: #3f79fe;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin: 10px 0;
}
</style>
