<template>
  <el-drawer
    :title="templateName ? templateName : '表单内容'"
    :visible.sync="dialogVisible"
    :size="isSmallViewport ? '100%' : dialogWidth"
    :custom-class="`ht-template-form-drawer ${
      isSmallViewport && 'is-small-viewport'
    }`"
    top="5vh"
    :append-to-body="appendToBody"
    :close-on-click-modal="closeOnClickModal"
  >
    <ht-template-form
      v-if="dialogVisible"
      :template-key="templateKey"
      :is-share="false"
      open-type="dialog"
      :in-dialog="true"
      :dialog-param="dialogParam"
      :data-param="dataParam"
      :action="action"
      :quit-after-saving="quitAfterSaving"
      :extend-prop="extendProp"
      :inst-id-prop="extendProp.instId"
      :edit-button-data="editButtonParam"
      :template-id="templateId"
      :template-name="templateName"
      @close="close"
    ></ht-template-form>
  </el-drawer>
</template>

<script>
  export default {
    name: 'HtTemplateFormDrawer',
    props: {
      appendToBody: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {
        dialogVisible: false,
        templateKey: '',
        action: 'get',
        dialogWidth: '70%',
        isSmallViewport: false, //视口和配置的宽度相比
        dialogParam: {},
        quitAfterSaving: false,
        dataParam: '',
        extendProp: { initFillData: false, instId: '' },
        editButtonParam: null,
        templateId: '',
        templateName: '',
        closeOnClickModal: true,
      }
    },
    created() {
      window.addEventListener('resize', () => this.handleResized())
    },
    methods: {
      show(param) {
        this.templateKey = param.templateKey
        this.action = param.action
        this.dialogParam = param.dialogParam
        this.dialogWidth = param.dialogWidth
        this.templateId = param.templateId
        this.templateName = param.templateName
        this.quitAfterSaving = !(
          !param.quitAfterSaving || param.quitAfterSaving == 'false'
        )
        this.dataParam = param.dataParam
        this.editButtonParam = param.editButtonData
        this.dialogVisible = true
        this.handleResized()
        // 按钮配置了子表回填
        if (param.initSubData) {
          this.extendProp.initFillData = param.initSubData
        }
        if (param.instId) {
          this.extendProp.instId = param.instId
        }
        if (param.closeOnClickModal != undefined) {
          this.closeOnClickModal = param.closeOnClickModal
        }
      },
      close() {
        this.dialogVisible = false
        window.removeEventListener('resize', () => this.handleResized)
        this.$emit('close')
      },
      handleResized() {
        this.isSmallViewport = false
        let width = this.dialogWidth
        if (this.dialogWidth && /px|%/.test(this.dialogWidth.toString())) {
          width = parseFloat(this.dialogWidth.replace(/%|px/g, ''))

          if (/%/.test(this.dialogWidth.toString())) {
            width = (width * window.innerWidth) / 100
          }
        }
        if (window.innerWidth < width) {
          this.isSmallViewport = true
        }
      },
    },
  }
</script>

<style>
  .ht-template-form-drawer {
    border-radius: 12px 0 0 12px;
  }
  .ht-template-form-drawer .el-drawer__header {
    margin-bottom: 0;
    padding: 14px 20px;
    font-size: 16px;
    color: #222222;
    font-weight: 550;
    border: 1px solid #ebebeb;
  }
  .ht-template-form-drawer .base-main .base-main_bottom_btn {
    text-align: center;
    box-shadow: 0px -2px 6px #ebebeb;
  }
  .ht-template-form-drawer.is-small-viewport {
    .base-main_box {
      max-width: 100vw;
      overflow: auto !important;
      display: flex;
    }
  }
</style>
