<template>
  <div class="popup-overlay" @click.self="$emit('close')">
    <div class="popup-content">
      <div class="card">
        <div class="card-body">
          <div class="buttons" style="margin: 3rem 0 1rem 0;">
        <button type="submit" class="btn tertiary xsm">다운로드<VerticalAlignBottomOutlined /></button>
      </div>
          <div class="form-card ">
            <h2>임금명세서</h2>
            <p class="paydate">지급일 : 2025-04-10</p>
            <form class="row g-3 needs-validation detail" :class="{ 'was-validated': formSubmitted }"
              @submit.prevent="handleRegister" novalidate>

              <div class="col-12 ">
                <div class="col-12 border-x">
                  <label for="youremail" class="form-label ">성명<p class="require"><img :src="require" alt=""></p>
                    </label>
                  <input v-model="email" type="text" name="username" class="form-control" required readonly>
                </div>

                <div class="col-12 border-x">
                  <label for="yourPassword" class="form-label">입사일</label>
                  <input v-model="password" type="password" name="password" class="form-control" required readonly>
                </div>
              </div>
              <div class="col-12 border-x">
                <div class="col-12 border-x">
                  <label for="youremail" class="form-label">부서</label>
                  <input v-model="email" type="text" name="username" class="form-control" required readonly>
                </div>

                <div class="col-12 border-x">
                  <label for="yourPassword" class="form-label">직급</label>
                  <input v-model="password" type="password" name="password" class="form-control" required readonly>
                </div>
              </div>



            </form>

            <div class="tbl-wrap " style="margin-top: 1rem;">
              <table id="myTable" class="tbl data">
                <!-- 동적으로 <th> 생성 -->
                <thead>
                  <tr class="toptitle">
                    <th colspan="5">세부내역</th>
                  </tr>
                  <tr class="middletitle">
                    <th colspan="3">지급</th>
                    <th colspan="2">공제</th>
                  </tr>
                </thead>
                <!-- 동적으로 <td> 생성 -->
                <tbody>
                  <tr>
                    <th rowspan="7">매월 지급 </th>
                    <th>임금항목</th>
                    <th>지급 금액(원)</th>
                    <th>공제 항목</th>
                    <th>공제 금액(원)</th>
                  </tr>
                  <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>

                </tbody>
                <tbody>
                  <tr>
                    <th rowspan="3">격월 또는 부정기 지급</th>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>
                  <tr>
                    <th colspan="2">지급액 계</th>
                    <td></td>
                    <th>지금액 계</th>
                    <td></td>
                  </tr>
                  <tr>
                    <td colspan="3"></td>
                    <th> 실수령액(원)</th>
                    <td></td>
                  </tr>
                </tbody>
              </table>
              <table id="myTable" class="tbl data" style="margin-top: 10px;">
                <!-- 동적으로 <th> 생성 -->
                <thead>
                  <tr class="toptitle">
                    <th colspan="3">세부내역</th>
                  </tr>
                  <tr>
                    <th>구분</th>
                    <th>산출식 또는 산출방법</th>
                    <th>지급액(원)</th>
                  </tr>
                </thead>
                <!-- 동적으로 <td> 생성 -->
                <tbody>
                  <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                  </tr>


                </tbody>

              </table>


            </div>
          </div>

        </div>
      </div>
      <button @click="$emit('close')" class="close-btn">
        <CloseCircleFilled />
      </button>
    </div>
  </div>
</template>
<script>
import { SearchOutlined, CloseCircleFilled,VerticalAlignBottomOutlined } from '@ant-design/icons-vue';

export default {
  data() {
    return {
    }
  },
  components: {
    SearchOutlined, CloseCircleFilled, VerticalAlignBottomOutlined
  },
  methods: {
    selectCar(item) {
      this.$emit('select', item); // 부모에게 데이터 전달
    },

  }
}
</script>
<style scoped>
.popup-content {
  width: 50%;

}
h2{font-size: 35px; letter-spacing: 10px;}
table{width: 100%;}
.form-control {
  border-color: #C7CFE3;
}
.paydate{text-align: end;}
</style>