<template>
  <div v-if="isMobile" @touchmove.prevent>
    <van-popup
      v-if="isMobile && dialogVisible"
      v-model="dialogVisible"
      round
      :lock-scroll="false"
      position="bottom"
      get-container="body"
      class="mobile-template-form__popup"
      :close-on-click-overlay="action == 'get' ? true : false"
      :style="{ height: '80vh' }"
    >
      <ht-template-form
        ref="mobileTemplateForm"
        class="template-form-dialog_form"
        :template-key="templateKey"
        :is-share="false"
        open-type="dialog"
        :in-dialog="true"
        is-mobile
        :dialog-param="dialogParam"
        :data-param="dataParam"
        :action="action"
        :edit-button-data="editButtonParam"
        :template-id="templateId"
        :template-name="templateName"
        :quit-after-saving="quitAfterSaving"
        @close="close"
      ></ht-template-form>
    </van-popup>
  </div>
  <el-dialog
    v-else
    :title="templateName ? templateName : '表单内容'"
    :visible.sync="dialogVisible"
    :width="dialogWidth"
    :style="{ '--dialogHeight': dialogHeight }"
    custom-class="template-form-dialog"
    top="5vh"
    :append-to-body="appendToBody"
    :close-on-click-modal="closeOnClickModal"
  >
    <span>
      <ht-template-form
        v-if="dialogVisible"
        class="template-form-dialog_form"
        :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>
    </span>
  </el-dialog>
</template>

<script>
  import mobileMode from '@/mixins/mobileMode.js'
  import popupMode from '@/mixins/popupMode.js'
  export default {
    name: 'HtTemplateFormDialog',
    mixins: [mobileMode, popupMode('dialogVisible')],
    props: {
      appendToBody: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {
        dialogVisible: false,
        templateKey: '',
        action: 'get',
        dialogWidth: '70%',
        dialogHeight: '',
        dialogParam: {},
        quitAfterSaving: false,
        dataParam: '',
        extendProp: { initFillData: false, instId: '' },
        editButtonParam: null,
        templateId: '',
        templateName: '',
        closeOnClickModal: true,
      }
    },
    methods: {
      showDialog(param) {
        this.templateKey = param.templateKey
        this.action = param.action
        this.dialogParam = param.dialogParam
        this.dialogHeight = param.dialogHeight
        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
        // 按钮配置了子表回填
        if (param.initSubData) {
          this.extendProp.initFillData = param.initSubData
        }
        if (param.instId) {
          this.extendProp.instId = param.instId
        } else {
          this.extendProp.instId = ''
        }
        if (param.closeOnClickModal != undefined) {
          this.closeOnClickModal = param.closeOnClickModal
        }
      },
      close() {
        this.dialogVisible = false
        this.$emit('close')
      },
    },
  }
</script>

<style lang="scss" scoped>
  ::v-deep {
    .template-form-dialog {
      height: var(--dialogHeight);
      .el-dialog__body {
        height: calc(100% - 84px);
        overflow: auto;
        box-sizing: border-box;
        padding: 15px 10px;
        .el-button {
          //margin-right: 10px;
        }
        .template-form-dialog_form {
          width: 100%;
          padding: 0;
          .base-main_box {
            box-sizing: border-box;
            margin: 0;
            width: 100%;
            height: 100%;
            padding: 0 20px;
            #printData {
              // max-height: calc(var(--dialogHeight) - 170px);
              overflow-y: auto;
            }
          }
        }
      }
    }
  }
</style>
