<template>
  <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"
          @reflushTemplateList="reflushTemplateList"
          :readonly="readonly"
          :historyFlag="historyFlag"
          :widgetList="widgetList"
          :columnFlag="columnFlag"
          :sourceData="sourceData"
          :formTemplate="formTemplate"
          :jsonFlag="jsonFlag"
        ></designer>
      </el-tab-pane>
      <el-tab-pane :label="$t1('后端脚本')" name="second" v-if="showFormScript">
        <formScriptList
          :formCode="formCode"
          :formTemplate="formTemplate"
          v-if="showFormScriptList"
        ></formScriptList>
      </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>
</template>
<script>
import indexUtil from "@base/utils";
export default {
  props: {
    visiable: {
      type: Boolean,
      default: false,
    },
    formName: {
      type: String,
      default: "",
    },
    formCode: {
      type: String,
      default: "",
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    formTemplate: {
      type: Object,
      default: () => {},
    },
    showFormScript: {
      type: Boolean,
      default: true,
    },
    historyFlag: {
      type: Boolean,
      default: false,
    },
    jsonFlag: {
      type: Boolean,
      default: false,
    },
    widgetList: Array,
    columnFlag: Boolean,
    sourceData: Object,
  },
  components: {
    designer: () => import("@base/views/user/form/vform/designer.vue"),
    formScriptList: () => import("@base/views/bd/setting/form_script/form_list.vue"),
  },
  data() {
    return {
      showDesingerDialog: true,
      isFullscreen: false,
      formDesTabs: "first",
      currentFormTemplate: {},
      designerReadonly: false,
      showFormScriptList: false,
    };
  },
  watch: {
    formDesTabs(val) {
      if (this.showFormScriptList === false && val === "second") {
        this.showFormScriptList = true;
      }
    },
  },
  methods: {
    handleFormDesignClose() {
      this.showDesingerDialog = false;
      this.formDesTabs = "first";
      this.showFormScriptList = false;
      this.$emit("close");
      this.$emit("update:visiable", false);
    },
    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();
      });
    },
    reflushTemplateList() {
      this.$emit("reflushTemplateList");
    },
  },
};
</script>
<style scoped lang="scss">
::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>
