<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 form-version-compare-dialog"
      width="1200px"
      @close="dialogClose"
      v-el-drag-dialog
      v-el-dialog-center
      :fullscreen="true"
    >
      <div
        class="cont compare-dialog-cont"
        style="height: calc(100vh - 58px); overflow: auto"
      >
        <compareContent
          v-if="compareReady"
          :objType="objType"
          :objCode="objCode"
          :compareHData1="compareHData1"
          :compareHData2="compareHData2"
          :preVersion="preVersion"
          :curVersion="curVersion"
          @reverCallback="reverCallback"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "compareDialog",
  props: ["visiable", "objType", "objCode", "relationCode", "preRow", "curRow"],
  components: {
    compareContent: () => import("./compareContent.vue"),
  },
  data() {
    return {
      showDialog: true,
      falseValue: false,
      title: "",
      compareHData1: null,
      compareHData2: null,
      preVersion: null,
      curVersion: null,
      compareReady: false,
    };
  },
  created() {
    this.initTitle();
    this.initCompare();
  },
  methods: {
    initCompare() {
      if (!this.preRow?.content || !this.curRow?.content) {
        return;
      }
      this.compareHData1 = JSON.parse(this.preRow.content);
      this.compareHData2 = JSON.parse(this.curRow.content);
      this.preVersion = this.preRow.version;
      this.curVersion = this.curRow.version;
      this.compareReady = true;
    },
    initTitle() {
      const titleMap = {
        FormTemplate: "表单模板历史版本对比",
        FormScript: "逻辑脚本历史版本对比",
        SzTaMb: "数据表历史版本对比",
      };
      this.title = titleMap[this.objType] || "历史版本对比";
    },
    reverCallback() {
      this.$emit("reverCallback");
      this.dialogClose();
    },
    dialogClose() {
      this.$emit("close");
      this.$emit("update:visiable", false);
    },
  },
};
</script>
