<!-- 聂黎：
	json 键值对编辑工具
	 传入一个字符串，input 框编辑key 和value两个字段，实现返回一个json对象字符串。
 -->
<template>
  <div style="width: 100%;">
    <!-- <div class="title-block">
      <span>
        参数值:
        <el-tooltip placement="top-start" effect="light">
          <div slot="content">
            支持整型，取值范围：
            <br />-2147483648 ~ 2147483647
          </div>
          <el-button type="text" class="question-button" icon="el-icon-question"></el-button>
        </el-tooltip>
      </span>
      <span>
        参数描述:
        <el-tooltip placement="top-start" effect="light">
          <div slot="content">
            支持中文、英文大小写、数字下划线和短划线，必
            <br />须以中文、英文或数字开头，不超过20个字符
          </div>
          <el-button type="text" class="question-button" icon="el-icon-question"></el-button>
        </el-tooltip>
      </span>
    </div> -->
    <div v-for="(item, index) in josnList" :key="item.key" class="item-info-block">
      <el-input
        :disabled="disabled"
        v-model="item.keys"
        :maxlength="option.leftMaxlength"
        :size="option.size"
        placeholder="编号如'0'"
        @change="inputChangeKeys"
      ></el-input>
      <span>~</span>
      <el-input
        :disabled="disabled"
        v-model="item.value"
        :maxlength="option.rightMaxlength"
        :size="option.size"
        placeholder="对该枚举选项的描述"
        @change="inputChange"
      ></el-input>
      <el-button
        type="text"
        style="font-size: 20px; margin-left: 5px;padding-top: 2px; color: #f56c6c;"
        icon="el-icon-delete"
        :disabled="disabled"
        @click="delHandel(item.key, index)"
      ></el-button>
    </div>
    <!-- <el-button type="text" @click="addHandel" icon="el-icon-plus" :disabled="disabled">添加枚举项</el-button> -->
  </div>
</template>
<script>
import { strAndNumber } from "@/utils/validate";
export default {
  name: "JsonEditor",
  props: {
    jsonString: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      option: {
        placeholder: "请输入...",
        leftMaxlength: "20",
        rightMaxlength: "30",
        size: "mini"
      },
      funKey: "",
      json: {},
      josnList: []
    };
  },
  created() {
    this.paramsToList(this.jsonString);
  },
  methods: {
    inputChangeKeys(val) {
      if (strAndNumber(val)) {
        this.listToParams(this.josnList);
      } else {
        this.$message.error("参数值不能为空，只能输入英文大小写和数字组合。");
      }
    },
    inputChange() {
      this.listToParams(this.josnList);
    },
    addHandel() {
      this.josnList.push({
        keys: this.josnList.length,
        value: ""
      });
    },
    delHandel(keys, index) {
      this.josnList.splice(index, 1);
    },
    paramsToList(val) {
      if (!val) {
        return;
      }
      var json = JSON.parse(val.replace(/\\\"/g, '"'));
      this.josnList = [];
      for (let keys in json) {
        const obj = {
          keys: keys,
          value: json[keys]
        };
        this.josnList.push(obj);
      }
    },
    listToParams(list) {
      const json = {};
      list.forEach(v => {
        if (v.keys) {
          json[v.keys] = v.value;
        }
      });
      this.$emit("event", JSON.stringify(json).replace(/\"/g, '\\"'));
    }
  },
  watch: {
    josnList(val) {
      this.listToParams(this.josnList);
    },
    jsonString(val, old) {
      this.paramsToList(val);
    }
  }
};
</script>
<style lang="scss">
.title-block {
  display: flex;
  span {
    display: block;
    width: 50%;
  }
}
.item-info-block {
  display: flex;
  .el-input {
    width: calc((100% - 45px) / 2);
  }
  span {
    display: block;
    width: 40px;
    text-align: center;
  }
}
</style>
