<template>
  <div class="app-form-json">
    <div :id="id" :innerHTML="id"></div>
  </div>
</template>
<script lang='tsx'>
import { Component, Vue, Prop, Model, Watch } from "vue-property-decorator";
import { VNode, CreateElement } from "vue";
import { interval, Subject, Subscription } from "rxjs";
import { Http, Util } from "@/utils";
import JSONEditor from "@json-editor/json-editor";
import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
import CodeListService from "@/codelist/codelist-service";
import AppFormJson from "./app-form-json.vue";

@Component({
  components: {},
})
export default class AppFormJsonDim extends AppFormJson {
  public codeListService: CodeListService = new CodeListService({
    $store: this.$store,
  });

  public async getSchema(): Promise<any> {
    let _schema = {
      title: "维度",
      type: "array",
      format: "table",
      required: ["field", "dict", "recursive"],
      default: [
        {
          field: "",
          dict: "",
          recursive: 0,
        },
      ],
      items: {
        id: "arr_dim",
        title: "维度",
        type: "object",
        format: "grid",
        properties: {
          id: {
            grid_columns: 6,
            type: "string",
            title: "标识",
            template: "{{field}}",
            watch: {
              field: "arr_dim.field",
            },
            options: {
              hidden: true,
              input_width: 200,
            },
            propertyOrder: 8,
          },
          buildid: {
            grid_columns: 6,
            type: "string",
            title: "Build",
            options: {
              hidden: true,
            },
            enumSource: [
              {
                source: [{ id: this.data.buildid, text: this.data.buildname }],
                title: "{{item.text}}",
                value: "{{item.id}}",
              },
            ],
            propertyOrder: 9,
          },
          modelid: {
            grid_columns: 6,
            type: "string",
            title: "模型",
            options: {
              hidden: true,
            },
            enumSource: [
              {
                source: [{ id: this.data.modelid, text: this.data.modelname }],
                title: "{{item.text}}",
                value: "{{item.id}}",
              },
            ],
            propertyOrder: 3,
          },
          name: {
            type: "selectnew",
            title: "实体",
            watch: {
              modelid: "arr_dim.modelid",
            },
            enumSource: [
              {
                source: [...[{ label: "--", id: "" }]],
                p0: "modelid",
                url: "/dst/datamodels/${p0}/propertys",
                title: "{{item.label}}",
                value: "{{item.id}}",
              },
            ],
            options: {
              select2_options: {
                width: 350,
                value: "",
              },
            },
            propertyOrder: 4,
          },
          field: {
            type: "selectnew",
            title: "维度属性",
            watch: {
              modelid: "arr_dim.modelid",
              entity: "arr_dim.name",
            },
            enumSource: [
              {
                source: [...[{ label: "--", id: "" }]],
                p0: "modelid",
                p1: "entity",
                url: "/dst/datamodels/${p0}/propertys/${p1}/fields",
                title: "{{item.label}}",
                value: "{{item.id}}",
              },
            ],
             

            options: {
              select2_options: {
                width: 250,
                value: "",
              },
            },
            propertyOrder: 5,
          },

          dict: {
            title: "数据字典",
            type: "string",
            options: {
              grid_columns: 4,
            },
            propertyOrder: 6,
          },
          recursive: {
            title: "逐层核算",
            type: "number",
            enumSource: [
              {
                source: [
                  { id: 1, label: "是" },
                  { id: 0, label: "否" },
                ],
                title: "{{item.label}}",
                value: "{{item.id}}",
              },
            ],
            options: {
              grid_columns: 4,
            },
            propertyOrder: 7,
          },
        },
      },
    };

    return _schema;
  }

  /**
   * 编辑器生成
   *
   * @memberof AppFormJson
   */
  public async renderJsoneditor() {
    var _this = this;
    var element = document.getElementById(_this.id);
    if (this.editor) {
      this.editor.destroy();
    }

    let opt: any = await _this.getOptions();
    this.editor = new JSONEditor(element, opt);

    this.editor.on("change", () => {
      let value = _this.editor.getValue();
      _this.CurrentVal = value;
    });
  }

  public async getOptions(): Promise<any> {
    let _options = {
      theme: "bootstrap3",
      iconlib: "fontawesome4",
      disable_edit_json: true,
      display_required_only: true,
      disable_collapse: true,
      disable_array_delete_last_row: true,
      ajax: true,
    };

    _options["schema"] = await this.getSchema();

    if (this.CurrentVal) {
      _options["startval"] = this.CurrentVal;
    }

    if (this.options) {
      return Object.assign({}, _options, this.options);
    }
    return _options;
  }
}
</script>