<template>
  <el-drawer :title="$t1('表单设计({formName})',{formName})" :visible.sync="showDesingerDialog" :modal="false"
             :destroy-on-close="true"
             size="90%" direction="rtl"
             class="designer-drawer1" :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" :formTemplate="formTemplate" @customConfirm="customConfirm" :columnFlag="true"
                  :widgetList="widgetList" :sourceData="sourceData"></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>
</template>
<script>
// import designer from "@base/views/user/form/vform/designer.vue";
import PopupManager from 'element-ui/src/utils/popup/popup-manager.js'
export default {
  props: {
    column: Object,
    sourceData:Object
  },
  components: {
    designer: () => import("@base/views/user/form/vform/designer.vue"),
  },
  inject: ['getReportTemplate'],
  data() {
    return {
      showDesingerDialog: true,
      formDesTabs: 'first',
      showFormScriptList: false,
      isFullscreen: false,
      formCode: '',
      formName: '',
      widgetList: [],
      formTemplate: null,
      zIndex:null
    }
  },
  created() {
    let zIndex = PopupManager.nextZIndex();
    this.zIndex = zIndex;

    let formTemplate = this.getReportTemplate();
    this.formTemplate = formTemplate;
    this.formCode = formTemplate.formCode
    this.formName = formTemplate.formName

    this.widgetList = this.$baseLodash.cloneDeep(this.column.widgetList || [])
    this.showDesingerDialog = true

  },
  mounted() {
    /* this.$nextTick(() => {
      this.$refs.designer.initDesigner(this.formCode)
    }) */
  },
  methods: {
    handleFormDesignClose() {
      // this.$emit('closeFormDesignwinEvent')
      this.showDesingerDialog = false
      this.$emit('update:visiable',false)
    },
    handleFullscreen() {
      this.isFullscreen = !this.isFullscreen
    },
    closeFormDesignwinEvent() {
      this.$emit('closeFormDesignwinEvent')
    },
    reflushTemplateList() {
      this.$emit('reflushTemplateList')
    },
    customConfirm(formJson) {
      let widgetList = formJson.widgetList;
      this.handleFormDesignClose();
      this.$emit('confirm', widgetList)
    }

  }
}
</script>
<style>
<style>
.designer-drawer1{
  left: 150px;
  right: 10px;
  bottom: 10px;
  top: 32px;
}
::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-drawer1.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>
