<template>
  <el-form-item :label="i18nt('designer.setting.treeDataEdit')">
    <el-button type="primary" plain round @click="openTreeDataEdit">{{ i18nt("designer.setting.editAction") }}
    </el-button>
    <el-dialog
      v-if="dataDialogVisible"
      custom-class="dialog-style list-dialog"
      :title="i18nt('designer.setting.treeDataEdit')"
      :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="saveTreeData" class="button-sty" icon="el-icon-check">
            {{ i18nt('designer.hint.confirm') }}
          </el-button>
        </div>
      </template>
      <code-editor mode="json" :readonly="!1" v-model="treeDataOptions"></code-editor>
    </el-dialog>
  </el-form-item>
</template>
<script>
import i18n from "../../../../../../components/xform/utils/i18n"

export default {
  name: "treeData-editor",
  mixins: [i18n],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  components: {},
  data() {
    return {dataDialogVisible: !1, treeDataOptions: []};
  },
  methods: {
    openTreeDataEdit() {
      (this.dataDialogVisible = !0),
        (this.treeDataOptions = JSON.stringify(
          this.optionModel.treeData,
          null,
          "  "
        ));
    },
    saveTreeData() {
      try {
        (this.optionModel.treeData = JSON.parse(
          this.treeDataOptions
        )),
          (this.dataDialogVisible = !1);
      } catch (o) {
        this.$message.error(
          this.i18nt("designer.hint.invalidOptionsData") +
          o.message
        );
      }
    },
  },
}
</script>
<style scoped>

</style>
