<template>
  <base-form
    :label="property.label"
    :watchValue="property.value"
    :showInput="false"
    class="json-form"
  >
    <div class="lists">
      <div class="list" v-for="(i, index) in jsons" :key="index">
        <input
          class="input"
          v-model="i.key"
          @input="change"
          type="text"
          placeholder="key"
        />
        <input
          class="input"
          v-model="i.value"
          @input="change"
          type="text"
          placeholder="value"
        />
        <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>
  </base-form>
</template>

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

@Component({
  components: {
    BaseForm,
  },
})
export default class JsonForm extends Vue {
  @Prop() property!: Property;
  public jsons = [
    {
      key: "",
      value: "",
    },
  ];

  @Watch("jsons")
  jsonsChange() {
    let temp: any = {};
    this.jsons.forEach((item) => {
      temp[item.key] = item.value;
    });
    this.property.value = JSON.stringify(temp);
  }

  mounted() {
    const o = JSON.parse((this.property.value as string) || "{}");
    this.jsons = [];
    for (let i in o) {
      this.jsons.push({
        key: i,
        value: o[i],
      });
    }
    if (this.jsons.length <= 0) {
      this.jsons.push({
        key: "",
        value: "",
      });
    }
  }
  public change() {
    let temp: any = {};
    this.jsons.forEach((item) => {
      temp[item.key] = item.value;
    });
    this.property.value = JSON.stringify(temp);
  }
  public add() {
    this.jsons.push({
      key: "",
      value: "",
    });
  }
  public del(index: number) {
    if (this.jsons.length <= 1) return;

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

<style scoped lang="less">
.json-form {
  height: auto;
}
.list {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
.input {
  width: 380px;
  margin-right: 10px;
  margin-top: 0;
  flex-shrink: 0;
  height: 44px;
}

.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>
