<template>
  <el-dialog
    :title="title"
    :append-to-body="true"
    :modal-append-to-body="true"
    :close-on-click-modal="false"
    :visible.sync="showWfDialog"
    :modal="false"
    custom-class="el-dialog dialog-style designer-dialog indexUse"
    width="100%"
    height="100%"
    top="0px"
    bottom="0px"
    :destroy-on-close="true"
    @close="wfClose"
  >
    <div id="containt">
      <component
        v-if="showWfContent && wfContent"
        :is="wfContent"
        visible-key="showWfContent"
        v-bind="param"
        :parent-target="_self"
        :defaultShowWfContent="true"
        :_viewType="1"
        @reload="$reloadHandle"
        @openDesignDialog="openDesingerDialogByChild"
      ></component>
      <el-drawer
        :title="$t1('表单设计({formName})', { formName })"
        :visible.sync="showDesingerDialog"
        :modal="false"
        :destroy-on-close="true"
        size="100%"
        direction="rtl"
        :before-close="closeFormDesignwinEvent"
        :append-to-body="false"
        class="designer-drawer"
        :class="[isFullscreen ? 'is-fullscreen' : '']"
        @close="handleFormDesignClose"
      >
        <el-tabs v-model="formDesTabs" type="card" class="tab-boxOnly" :stretch="true">
          <el-tab-pane :label="$t1('设计器')" name="first">
            <designer
              ref="designer"
              :formCode.sync="formCode"
              :readonly="true"
              @reflushTemplateList="reflushTemplateList"
            ></designer>
          </el-tab-pane>
        </el-tabs>
        <el-button class="isFullIcon" v-if="!isFullscreen" @click="handleFullscreen">
          <el-tooltip effect="dark" :content="$t1('全屏')" placement="top">
            <i class="iconfont icon-quanping"></i>
          </el-tooltip>
        </el-button>
        <el-button class="isFullIcon" v-else @click="handleFullscreen">
          <el-tooltip effect="dark" :content="$t1('缩小')" placement="top">
            <i class="iconfont icon-suoxiao"></i>
          </el-tooltip>
        </el-button>
      </el-drawer>
    </div>
  </el-dialog>
</template>

<script>
import indexUtil from "@base/utils";
import designer from "@base/views/user/form/vform/designer.vue";

export default {
  name: "wfContentDialog",
  props: {
    extractedRow: Object,
  },
  components: { designer },
  data() {
    return {
      param: {},
      wfContent: null,
      showWfContent: false,
      showWfDialog: true,

      showDesingerDialog: false,
      formCode: null,
      formName: null,
      isFullscreen: false,
      formDesTabs: "first",
      title: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.openWfDialog();
    });
  },
  methods: {
    wfClose() {
      this.showWfDialog = false;
      this.$emit("update:visible", false);
      this.$emit("close");
    },
    openWfDialog() {
      let obj = this.extractedRow?.obj;
      if (!obj) return;
      let objType = this.extractedRow.objType;
      let id = obj.id;
      let wfDataId = id;
      let param = {
        readonly: true,
      };

      let url;
      if (objType == "FormTemplate") {
        url = "/bd/setting/form_template/edit.vue";
        wfDataId = obj.formCode;
        this.title = this.$t1("查看表单模板");
      } else if (objType == "FormScript") {
        if (obj.scriptType == 1) {
          url = "/bd/setting/form_script/edit1.vue";
        } else {
          url = "/bd/setting/form_script/edit.vue";
        }
        this.title = this.$t1("查看表单脚本");
      } else if (objType == "TableTemplate") {
        url = "/bd/setting/table_model/edit.vue";
        this.title = this.$t1("查看数据表定义模板");
      }
      this.param = Object.assign(param, {
        _dataId: wfDataId,
        extractedObj: obj,
      });
      this.wfContent = require("@base/views" + url).default;

      this.showWfContent = true;
    },

    handleFormDesignClose() {
      this.formDesTabs = "first";
      this.showFormScriptList = false;
    },
    openDesingerDialog(row, callback) {
      this.formCode = row.formCode;
      this.formName = row.formName;
      this.currentFormTemplate = row;
      this.isFullscreen = false;
      this.showDesingerDialog = true;
      this.designerSaveCallback = callback ?? null;
    },
    openDesingerDialogByChild({ row, callback }) {
      this.openDesingerDialog(row, callback);
    },
    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;
    },
    closeFormDesignwinEvent(done) {
      this.$baseConfirm(this.$t1('请确认"已保存"报表模板，是否继续关闭？')).then(() => {
        indexUtil.removeClass(document.body, "hideMenu");
        done && done();
      });
    },
  },
};
</script>

<style scoped>
::v-deep .tab-boxOnly > .el-tabs__header {
  position: absolute;
  right: 130px;
  top: 0;
}

::v-deep .tab-boxOnly > .el-tabs__content .el-tab-pane .el-tab-pane {
  .detail-wrap .d-cont {
    height: calc(100vh - 158px) !important;
  }

  .grid-height {
    height: calc(100vh - 126px) !important;
  }
}

::v-deep
  .designer-drawer.is-fullscreen
  .tab-boxOnly
  > .el-tabs__content
  .el-tab-pane
  .el-tab-pane {
  .detail-wrap .d-cont {
    height: calc(100vh - 116px) !important;
  }

  .grid-height {
    height: calc(100vh - 84px) !important;
  }
}
</style>
