<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="70%"
    top="8vh"
    :show-close="false"
    :close-on-click-modal="false"
    append-to-body
    custom-class="approval-dialog"
  >
    <approval-form
      v-if="dialogVisible"
      :current-task-id="currentTaskId"
      :current-inst-id="currentInstId"
      :current-learder-id="currentLearderId"
      @close-dialog="handleCloseDialog"
    />
  </el-dialog>
</template>

<script>
  import ApprovalForm from '../ApprovalForm.vue'
  export default {
    name: 'ApprovalDialog',
    components: {
      ApprovalForm,
    },
    props: {
      currentTaskId: {
        type: String,
        default: '',
      },
      currentInstId: {
        type: String,
        default: '',
      },
      currentLearderId: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        dialogVisible: false,
      }
    },

    methods: {
      openApprovalFormDialog() {
        this.dialogVisible = true
        if (this.currentLearderId != '') {
          this.$router.currentRoute.query.leaderId = this.currentLearderId
        }
      },
      handleCloseDialog() {
        this.dialogVisible = false
        this.$emit('close-approval-dialog')
      },
    },
  }
</script>

<style lang="scss" scoped>
  ::v-deep.el-dialog__wrapper {
    .approval-dialog {
      height: calc(100% - 16vh);
      .el-dialog__header {
        padding: 0;
      }
      .el-dialog__body {
        padding: 0;
        height: 100%;
        .approval-form {
          height: 100%;
          border: 0;
          margin-bottom: 0;
          .task-form {
            // width: 95%;
            .approval-buttons {
              border-top: 1px solid $base-border-color;
            }
          }
        }
      }
    }
  }
</style>
