<template>
  <div>
    <template v-if="['old', 'new'].includes(options.subOpenType)">
      <div>
        <slot></slot>
      </div>
    </template>

    <el-dialog
      v-else-if="options.subOpenType === 'dialog' && visible"
      id="subDialogs"
      :title="dialogTitle"
      :visible.sync="visible"
      :close-on-click-modal="false"
      :style="{ '--dialogHeight': dialogHeight }"
      :width="dialogWidth"
      :before-close="beforeClose"
      custom-class="template-subtable-dialog"
    >
      <slot></slot>
    </el-dialog>
    <el-drawer
      v-else-if="options.subOpenType !== 'dialog' && visible"
      id="subDialogs"
      :title="dialogTitle"
      :visible.sync="visible"
      :direction="options.subOpenType"
      :close-on-click-modal="false"
      custom-class="ht-template-form-drawer"
      :size="options.subOpenType === 'btt' ? dialogHeight : dialogWidth"
      :before-close="beforeClose"
    >
      <slot></slot>
    </el-drawer>
  </div>
</template>

<script>
  export default {
    name: 'HtTemplateSubtable',
    props: {
      title: {
        type: String,
        default: '',
      },
      options: {
        type: Object,
        default: () => ({}),
      },
      visible: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        dialogTitle: '',
        dialogHeight: '50%',
        dialogWidth: '50%',
      }
    },
    mounted() {
      this.dialogTitle = this.title || this.options.title
      this.dialogHeight =
        this.options.dialogHeight + this.options.sizeType || 'px'
      this.dialogWidth =
        this.options.dialogWidth + this.options.sizeType || 'px'
    },
    methods: {
      beforeClose() {
        this.$emit('before-close')
      },
    },
  }
</script>

<style lang="scss" scoped>
  ::v-deep {
    .template-subtable-dialog {
      height: var(--dialogHeight);
      display: flex;
      flex-direction: column;
      .el-dialog__body {
        overflow-y: auto;
      }
    }
  }
</style>
