<template>
  <div>
    <el-dialog
      :title="$t1(title)"
      :append-to-body="true"
      :modal-append-to-body="true"
      :close-on-click-modal="falseValue"
      :visible.sync="showDialog"
      :modal="falseValue"
      custom-class="dialog-style list-dialog dialog-checkbox pd_0"
      width="1200px"
      @close="dialogClose"
      v-el-drag-dialog
      v-el-dialog-center
      :fullscreen="true"
    >
      <div
        class="cont"
        id="containt"
        style="height: calc(100vh - 58px); overflow: hidden"
      >
        <el-tabs ref="xTabs" v-model="activeName" class="tab-box">
          <el-tab-pane :label="$t1('详情')" name="first">
            <component
              :is="editContent"
              v-if="showEdit"
              visible-key="showEdit"
              :hData="hData"
              :parent-target="_self"
              @reload="$reloadHandle"
              @openDesignDialog="openDesingerDialogByChild"
              @reverCallback="reverCallback"
            ></component>
          </el-tab-pane>
          <el-tab-pane :label="$t1('列表')" name="second">
            <div class="grid-height">
              <vxe-grid
                ref="table-m1"
                v-bind="vxeOption"
                @resizable-change="$vxeTableUtil.onColumnWitchChange"
                @custom="$vxeTableUtil.customHandle"
              >
                <template #form>
                  <div class="clearfix screen-btns">
                    <div class="fl">
                      <el-button
                        type="primary"
                        icon="el-icon-compare"
                        class="button-sty"
                        @click="compare"
                      >
                        {{ $t1("对比") }}
                      </el-button>
                    </div>
                    <div class="fr">
                      <vxe-button
                        icon="el-icon-brush"
                        class="button-sty"
                        @click="resetEvent"
                        type="text"
                        status="primary"
                        plain
                        >{{ $t1("重置") }}
                      </vxe-button>
                      <vxe-button
                        status="warning"
                        icon="el-icon-search"
                        class="button-sty"
                        @click="searchEvent"
                      >
                        {{ $t1("搜索") }}
                      </vxe-button>
                    </div>
                  </div>
                  <vxe-form
                    class="screen-box"
                    title-width="92px"
                    title-align="right"
                    :data="formData"
                    @submit="searchEvent"
                    @reset="resetEvent"
                  >
                    <vxe-form-item :title="$t1('版本号') + ':'">
                      <template v-slot>
                        <base-input-number v-model="formData.version" />
                      </template>
                    </vxe-form-item>
                    <vxe-form-item :title="$t1('操作日志') + ':'">
                      <template v-slot>
                        <el-input v-model="formData.remark" clearable />
                      </template>
                    </vxe-form-item>
                  </vxe-form>
                </template>
              </vxe-grid>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <formDesignerDialog
        ref="formDesignerDialog"
        v-if="showDesingerDialog"
        :visiable.sync="showDesingerDialog"
        :formName="formName"
        :formCode="formCode"
        @reflushTemplateList="reflushTemplateList"
        :readonly="designerReadonly"
        :showFormScript="false"
        :historyFlag="true"
        :jsonFlag="true"
        :formTemplate="currentFormTemplate"
      ></formDesignerDialog>
    </el-dialog>
    <compareDialog
      ref="compareDialog"
      :objType="objType"
      :objCode="objCode"
      :relationCode="relationCode"
      :preRow="preRow"
      :curRow="curRow"
      v-if="showCompareDialog"
      :visiable.sync="showCompareDialog"
      @reverCallback="reverCallback"
    ></compareDialog>
  </div>
</template>

<script>
import { selectDialogMixins } from "@base/mixins/selectDialog";

export default {
  name: "ftHistoryDialog",
  props: ["visiable", "objType", "objCode", "relationCode"],
  mixins: [selectDialogMixins],
  components: {
    formDesignerDialog: () =>
      import("@base/views/bd/setting/form_template/formDesignerDialog.vue"),
    compareDialog: () => import("@base/views/bd/setting/formVersion/compareDialog.vue"),
    FormTemplateEdit: () => import("@base/views/bd/setting/form_template/edit.vue"),
    FormScriptEdit: () => import("@base/views/bd/setting/form_script/edit.vue"),
    FormScriptEdit1: () => import("@base/views/bd/setting/form_script/edit1.vue"),
    SzTaMbEdit: () => import("@base/views/bd/setting/table_model/edit.vue"),
  },
  created() {
    this.initSetting();
    this.initTitle();
  },
  mounted() {
    this.initTableM1();
  },
  data() {
    return {
      showEdit: false,
      showDialog: true,
      falseValue: false,
      selectMulti: true,
      formData: {},
      vxeOption: {},
      showSaleOrgDialog: false,
      activeName: "second",

      editContent: null,
      hData: null,

      formCode: null,
      formName: null,
      currentFormTemplate: null,
      isFullscreen: false,
      designerReadonly: false,
      showDesingerDialog: false,

      showFormScriptList: false,
      formDesTabs: "first",
      title: "历史列表",

      showCompareDialog: false,
      preRow: null,
      curRow: null,
    };
  },
  watch: {
    formDesTabs(val) {
      if (this.showFormScriptList == false && val == "second") {
        this.showFormScriptList = true;
      }
    },
  },
  methods: {
    getCompareData(row1, row2, callback) {
      Promise.all([this.getFormVersion(row1.id), this.getFormVersion(row2.id)]).then(
        (res) => {
          let compareHData1 = res[0].objx;
          let compareHData2 = res[1].objx;
          callback && callback(compareHData1, compareHData2);
        }
      );
    },
    getFormVersion(id) {
      return this.$http({
        url: USER_PREFIX + "/formVersion/get",
        method: "post",
        data: {
          id: id,
        },
      });
    },
    compare() {
      let rows = this.$refs["table-m1"].getCheckboxRecords(true);
      if (rows.length != 2) {
        this.$message.error("请选择两个版本进行对比");
        return;
      }

      let row1 = rows[0];
      let row2 = rows[1];
      let preRow = row1.version > row2.version ? row2 : row1;
      let curRow = row1.version > row2.version ? row1 : row2;
      this.getCompareData(preRow, curRow, (compareHData1, compareHData2) => {
        this.preRow = compareHData1;
        this.curRow = compareHData2;
        this.showCompareDialog = true;
      });
    },
    initTitle() {
      let titleMap = {
        FormTemplate: "表单模板历史版本",
        FormScript: "逻辑脚本历史版本",
        SzTaMb: "数据表历史版本",
      };
      this.title = titleMap[this.objType];
    },
    initTableM1() {
      let that = this;
      let objNameTitleMap = {
        FormTemplate: "模板名称",
        FormScript: "脚本名称",
        SzTaMb: "数据表名称",
      };
      let objNameTitle = objNameTitleMap[this.objType];
      let objCodeTitleMap = {
        FormTemplate: "模板编码",
        FormScript: "脚本编码",
        SzTaMb: "数据表编码",
      };
      let objCodeTitle = objCodeTitleMap[this.objType];

      let tableOption = {
        vue: that,
        tableRef: "table-m1",
        tableName: "bd_formVersion_dialog-m1",
        path: USER_PREFIX + "/formVersion/listPage",
        param: () => {
          return {
            ...this.formData,
            objType: this.objType,
            objCode: this.objCode,
            relationCode: this.relationCode,
          };
        },
        columns: [
          { type: "checkbox", width: 48, resizable: false, fixed: "left" },
          {
            title: this.$t1(objNameTitle),
            field: "objName",
            width: 150,
            fixed: "left",
          },
          {
            title: this.$t1(objCodeTitle),
            field: "objCode",
            width: 150,
          },
          {
            title: this.$t1("版本号"),
            field: "version",
            width: 150,
          },
          {
            title: this.$t1("操作日志"),
            field: "remark",
            width: 150,
          },
          {
            title: this.$t1("创建时间"),
            field: "createDate",
            width: 150,
          },
          {
            width: 90,
            fixed: "right",
            title: "",
            sortable: false,
            slots: {
              default: ({ row }) => {
                return [
                  <div>
                    <a
                      href="javascript:void(0);"
                      class="a-link"
                      onclick={() => {
                        this.openEditView(row);
                      }}
                    >
                      <el-tooltip
                        enterable={false}
                        effect="dark"
                        content="查看"
                        placement="top"
                        popper-class="tooltip-skin"
                      >
                        <i class="el-icon-edit" />
                      </el-tooltip>
                    </a>
                  </div>,
                ];
              },
            },
          },
        ],
      };
      this.$vxeTableUtil.initVxeTable(tableOption).then((opts) => {
        that.vxeOption = opts;
      });
    },
    openEditView(row) {
      this.$http({
        url: USER_PREFIX + "/formVersion/get",
        method: "post",
        data: {
          id: row.id,
        },
        success: (res) => {
          let objx = res.objx;
          let hData = JSON.parse(objx.content);
          this.hData = hData;
          let map = {
            FormTemplate: "FormTemplateEdit",
            FormScript: "FormScriptEdit",
            SzTaMb: "SzTaMbEdit",
          };
          let scriptTypeMap = {
            0: "FormScriptEdit",
            1: "FormScriptEdit1",
          };
          if (row.objType === "FormScript") {
            this.editContent = scriptTypeMap[hData.scriptType];
          } else {
            this.editContent = map[row.objType];
          }
          this.activeName = "first";
          this.$openEditView("showEdit");
        },
      });
    },
    rever(row) {},
    openDesingerDialog(row, callback, readonly = false) {
      this.formCode = row.formCode;
      this.formName = row.formName + " - " + row.version;
      this.currentFormTemplate = row;
      this.isFullscreen = false;

      this.designerReadonly = readonly;
      this.showDesingerDialog = true;
      this.designerSaveCallback = callback ?? null;
    },
    openDesingerDialogByChild({ row, readonly, callback }) {
      this.openDesingerDialog(row, callback, readonly);
    },
    reflushTemplateList() {
      this.searchEvent();
      this.designerSaveCallback && this.designerSaveCallback();
    },
    handleFullscreen() {
      let isFullscreen = this.isFullscreen;
      if (!isFullscreen) {
        indexUtil.addClass(document.body, "hideMenu");
      } else {
        indexUtil.removeClass(document.body, "hideMenu");
      }
      this.isFullscreen = !isFullscreen;
    },
    handleFormDesignClose() {
      this.formDesTabs = "first";
      this.showFormScriptList = false;
    },
    reverCallback() {
      this.$emit("reverCallback");
      this.dialogClose();
    },
  },
};
</script>
<style scoped lang="scss">
.grid-height {
  height: calc(100vh - 110px) !important;
}
::v-deep .detail-wrap .d-cont {
  height: calc(100vh - 148px) !important;
}
</style>
