<template>
  <div class="popup-overlay" @click.self="handleClose">
    <div class="popup-content">
      <div class="card">
        <div class="card-body">
          <h2 class="card-title">반려 사유</h2>
          <textarea v-model="rejectionReason" class="form-control" placeholder="반려 사유를 입력해주세요." />
          <div class="buttons">
            <button type="button" class="btn sm primary" @click="handleConfirm" :disabled="!isValidReason">등록</button>
            <button type="button" class="btn sm tertiary" @click="handleClose"> 취소 </button>
          </div>
        </div>
      </div>
      <button @click="handleClose" class="close-btn">
        <CloseCircleFilled />
      </button>
    </div>
  </div>
</template>
<script>
import { CloseCircleFilled } from '@ant-design/icons-vue';

export default {
  components: {
    CloseCircleFilled
  },

  emits: ['close', 'confirm'],

  data() {
    return {
      rejectionReason: ''
    }
  },

  computed: {
    isValidReason() {
      return this.rejectionReason.trim().length > 0;
    }
  },

  methods: {
    handleClose() {
      this.$emit('close');
    },

    handleConfirm() {
      if (this.isValidReason) {
        this.$emit('confirm', this.rejectionReason.trim());
      }
    },
  }
}
</script>
<style scoped>
.popup-content {
  width: 50%;
}

.form-control {
  border-color: #C7CFE3;
  min-height: 20rem;
}
</style>