<template>
  <div>
    <el-form-item label="关联表格ID">
      <el-input type="text" v-model="eventConfig.tableRef"></el-input>
    </el-form-item>
    <el-form-item label="默认表格数据">
      <el-button type="primary" plain="" round="" @click="openTableDataEdit">{{
          i18nt('designer.setting.editAction')
        }}
      </el-button>
    </el-form-item>
    <el-dialog
      v-if="dataDialogVisible"
      custom-class="dialog-style list-dialog"
      :title="i18nt('designer.setting.tableDataEdit')"
      :visible.sync="dataDialogVisible"
      :show-close="!0"
      append-to-body=""
      :close-on-click-modal="!1"
      :close-on-press-escape="!1"
      :destroy-on-close="!0"
      width="75%"
      v-dialog-drag
    >
      <template slot="footer">
        <div class="dialog-footer">
          <el-button type="" @click="dataDialogVisible = !1" class="button-sty" icon="el-icon-close">
            {{ i18nt('designer.hint.cancel') }}
          </el-button>
          <el-button type="primary" @click="saveTableData" class="button-sty" icon="el-icon-check">
            {{ i18nt('designer.hint.confirm') }}
          </el-button>
        </div>
      </template>
      <code-editor mode="json" :readonly="!1" v-model="tableDataOptions"></code-editor>
    </el-dialog>
  </div>
</template>

<script>
import i18n from "../../../../../../components/xform/utils/i18n"

export default {
  mixins: [i18n],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  inject:['defaultClickBindEventConfig'],
  data(){
    return {
      dataDialogVisible:false,
      tableData:[],
      tableDataOptions:null
    }
  },
  computed:{
    eventConfig(){
      return this.optionModel.addTableDataConfig || {};
    }
  },
  created() {

  },
  methods:{
    openTableDataEdit: function () {
      this.tableDataOptions = JSON.stringify(this.eventConfig.tableData, null, '  ');
      this.dataDialogVisible = !0;
    },
    saveTableData: function () {
      try {
        this.eventConfig.tableData = JSON.parse(this.tableDataOptions);
        this.dataDialogVisible = !1;
      } catch (e) {
        this.$message.error(this.i18nt('designer.hint.invalidOptionsData') + e.message);
      }
    },
  }
}
</script>

<style scoped>

</style>
