<template>
  <base-form
    :label="property.label"
    :watchValue="propertyValue"
    :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 BaseForm from "./BaseForm.vue";
import { Property } from "../types2";
import { defineComponent, PropType } from "vue";
import { ElMessage } from "element-plus";

export default defineComponent({
  inject: ["showTip"],
  components: {
    BaseForm,
  },
  props: {
    property: {
      type: Object as PropType<Property>,
      required: true,
    },
    setPropertyValue: Function as PropType<any>,
  },

  data() {
    return {
      jsons: [
        {
          key: "",
          value: "",
        },
      ],
    };
  },
  computed: {
    propertyValue() {
      return this.property.value as string;
    },
  },
  watch: {
    jsons() {
      let temp: any = {};
      this.jsons.forEach((item) => {
        temp[item.key] = item.value;
      });
      // this.property.value = JSON.stringify(temp);
      this.setPropertyValue(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: "",
      });
    }
  },
  methods: {
    change() {
      let temp: any = {};
      this.jsons.forEach((item) => {
        temp[item.key] = item.value;
      });
      // this.property.value = JSON.stringify(temp);
      this.setPropertyValue(JSON.stringify(temp));
    },
    add() {
      this.jsons.push({
        key: "",
        value: "",
      });
    },
    del(index: number) {
      if (this.jsons.length <= 1) return;

      (this as any).showTip(
        "此操作将永久删除该文件, 是否继续?",
        () => {
          this.jsons.splice(index, 1);
          ElMessage({
            type: "success",
            message: "删除成功!",
          });
        },
        () => {
          ElMessage({
            type: "info",
            message: "已取消删除",
          });
        }
      );
    },
  },
});
</script>

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