<template>
  <el-link style="float: right" @click="highOptionShow=!highOptionShow">高级选项
    <span v-if="highOptionShow"><el-icon><ElIconCaretTop /></el-icon></span>
    <span v-else><el-icon><ElIconCaretBottom /></el-icon></span>
  </el-link>
  <el-table :data="highOptionTableData" v-if="highOptionShow" max-height="350" >
    <el-table-column prop="key" label="key" >
      <template #default="scope" >
        <el-input v-model="scope.row.key" placeholder="请输入字段名" @blur="handleDataChange" />
      </template>
    </el-table-column>
    <el-table-column prop="value" label="值" >
      <template #default="scope" >
        <el-input v-model="scope.row.value" placeholder="请输入值" @blur="handleDataChange" />
      </template>
    </el-table-column>
    <el-table-column align="center" width="100">
      <template #header>
        <el-button @click="addOptions"><el-icon><ElIconPlus /></el-icon></el-button>
      </template>
      <template #default="scope">
        <el-button @click="removeOptions(scope.$index)"><el-icon><ElIconMinus /></el-icon></el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      highOptionShow: false,
      highOptionTableData: [],
      properties: {}
    }
  },
  props: {
    initData: {},
    callBack: Function,
  },
  created() {
    let obj = {};
    if (this.initData) {
      obj = typeof this.initData == 'string'
          ? JSON.parse(this.initData) : this.initData
    }
    if (Object.keys(obj).length>0) {
      for (let key in obj) {
        let data = {};
        data['key'] = key;
        data['value'] = obj[key];
        this.highOptionTableData.push(data);
      }
    }
  },
  mounted() {
  },
  watch: {

  },
  methods: {
    addOptions() {
      this.highOptionTableData.push({key:'',value:''});
      // this.handleDataChange()
    },
    removeOptions(index) {
      this.highOptionTableData.splice(index,1);
      this.handleDataChange()
    },
    handleDataChange() {
      this.covertProperties();
      this.callBack(JSON.stringify(this.properties));
    },
    covertProperties() {
      let app = this;
      app.properties = {};
      this.highOptionTableData.forEach(i=>{
        if (!(i.key && i.key!=='')) {
          return;
        }
        app.properties[i.key] = i.value;
      })
      return app.properties;
    }
  }
}
</script>

<style>

</style>