<template>
  <div class="array-form">
    <div class="label flex-shrink-0">
      <Icon iconName="icondd" class="pre-tag" size="18"></Icon>
      <div class="label-text" :title="property.label">{{ property.label }}</div>
    </div>
    <div class="lists flex-grow overflow-hidden">
      <div
        class="list flex-grow flex w-full"
        v-for="(item, index) in array"
        :key="index"
      >
        <DialogInputVue
          :noBoxShadowWhenFocused="true"
          class="input"
          style="flex-grow: 1"
          v-model:value="item.value"
          type="text"
          :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 { Property } from "../types2";
import { defineComponent, PropType } from "vue";
import { ElMessage } from "element-plus";
import { GO_URLS, syDialogInput as DialogInputVue } from "cqk-sy-ui";
import Icon from "@/components/Icon/index.vue";

export default defineComponent({
  inject: ["showTip"],
  components: {
    DialogInputVue,
    Icon,
  },
  props: {
    property: {
      type: Object as PropType<Property>,
      required: true,
    },
    setPropertyValue: {
      type: Function as PropType<any>,
    },
  },
  data() {
    return {
      array: [
        {
          value: "",
        },
      ],
    };
  },
  watch: {
    array: {
      handler() {
        this.setPropertyValue(this.array.map((item) => String(item.value)));
      },
      deep: true,
    },
  },
  mounted() {
    if (!Array.isArray(this.property.value)) return;
    this.array = this.property.value.map((value: string) => {
      return { value };
    });
  },
  methods: {
    change() {
      this.setPropertyValue(this.array.map((item) => String(item.value)));
    },
    add() {
      this.array = [
        ...this.array,
        {
          value: "",
        },
      ];
    },
    del(index: number) {
      if (this.array.length <= 1) return;
      (this as any).showTip(
        "此操作将永久删除该文件, 是否继续?",
        () => {
          this.array.splice(index, 1);
          this.array = [...this.array];
          ElMessage({
            type: "success",
            message: "删除成功!",
          });
        },
        () => {
          ElMessage({
            type: "info",
            message: "已取消删除",
          });
        }
      );
    },
  },
});
</script>

<style scoped lang="scss">
.label {
  display: inline-block;
  width: 100px; /* 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: -50px;
  top: 14px;
  display: none;
}
.array-form {
  flex-shrink: 0;
  padding-left: 18px;
  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;
  box-sizing: border-box;
  outline: none;
}

.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: var(--sy-blue);
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin: 10px 0;
}
</style>
