<script setup lang="ts">

const affiliationCode = ref()
const taxCode = ref('')
const currencyCode = ref('KRW')
const taxInvoiceCode = ref()
const accountSubjectCode = ref()
const params = reactive({
  cateCd: '',
  contNo: '',
  title: '',
  compNm: '',
  signDt: '',
  contAmt: 0,
  contStatCd: '',
  contStat: '',
  regsabun: '',
  regNm: '',
  regDt: '',
  reason: '',
  page: 1,
  row: 10,
  flexColumn: [],
  modalColumn: [],
})
const selected = ref('cost')
const formattedNumber = ref(0)

function onInput(event) {
  let onlyNumber = event.target.value.replace(/[^0-9]/g, '')
  formattedNumber.value = onlyNumber ? Number(onlyNumber).toLocaleString() : ''
}

</script>

<template>
  <div class="page-content is-navbar-lg">
    <div class="datatable-wrapper">
      <div class="table-container">
        <table class="table datatable-table is-fullwidth">
          <colgroup>
            <col style="width: 10%;">
            <col style="width: 10%;">
            <col style="width: 10%;">
            <col style="width: 10%;">
            <col style="width: 10%;">
            <col style="width: 10%;">
            <col style="width: 10%;">
            <col style="width: 10%;">
            <col style="width: 10%;">
            <col style="width: 10%;">
          </colgroup>
          <tbody>
            <tr>
              <td>소속</td>
              <td colspan="2">
                <VField>
                  <VCodeSelect
                    v-model="affiliationCode"
                    cd_grp=11 >
                  </VCodeSelect>
                </VField>
              </td>
              <td colspan="7" />
            </tr>
            <tr>
              <td>계약명</td>
              <td colspan="9">
                <VField>
                  <VControl>
                    <input
                      v-model="params.title"
                      class="input custom-text-filter"
                      placeholder="계약명"
                    >
                  </VControl>
                </VField>
              </td>
            </tr>
            <tr>
              <td>계약상대자</td>
              <td colspan="2">
                <VField>
                  <VControl>
                    <input
                      v-model="params.regNm"
                      class="input custom-text-filter"
                      placeholder="사업자번호"
                    >
                  </VControl>
                </VField>
              </td>
              <td colspan="2">
                <VField>
                  <VControl>
                    <input
                      v-model="params.title"
                      class="input custom-text-filter"
                      placeholder="업체명"
                    >
                  </VControl>
                </VField>
              </td>
              <td>
                <VButton color="danger">
                  구매처 확인
                </VButton>
              </td>
              <td>
                <VButton color="success">
                  정상
                </VButton>
              </td>
              <td colspan="2" />
            </tr>
            <tr>
              <td>공급가액</td>
              <td colspan="2">
                <VField>
                  <VControl>
                    <input
                      :value="formattedNumber"
                      placeholder="금액"
                      @input="onInput"
                      class="input custom-text-filter"
                    >
                  </VControl>
                </VField>
              </td>
              <td style="color: black">(부가세 별도)</td>
              <td style="background-color: var(--primary); text-align: center">
                <span>세금코드</span>
              </td>
              <td colspan="2">
                <VField>
                  <VCodeSelect v-model="taxCode" cd_grp="12">
                    <template #code="{ item }">
                      {{ item.cd }}
                    </template>
                  </VCodeSelect>
                </VField>
              </td>
              <td style="background-color: var(--primary); text-align: center">통화</td>
              <td colspan="2">
                <VField>
                  <VCodeSelect v-model="currencyCode" cd_grp="13">
                    <template #code="{ item }">
                      {{ item.cd }}
                    </template>
                  </VCodeSelect>
                </VField>
              </td>
            </tr>
            <tr>
              <td>증빙일</td>
              <td colspan="2">
                <div>
                  <VDatePicker
                    v-model="params.regSdt"
                    color="green"
                    trim-weeks
                  >
                    <template #default="{ inputValue, inputEvents }">
                      <VField>
                        <VControl icon="lucide:calendar">
                          <input
                            class="input v-input"
                            type="text"
                            :value="inputValue"
                            placeholder="증빙일"
                            v-on="inputEvents"
                          >
                        </VControl>
                      </VField>
                    </template>
                  </VDatePicker>
                </div>
              </td>
              <td />
              <td style="background-color: var(--primary); text-align: center">
                <span>전기일</span>
              </td>
              <td colspan="2">
                <div>
                  <VDatePicker
                    v-model="params.regSdt2"
                    color="green"
                    trim-weeks
                  >
                    <template #default="{ inputValue, inputEvents }">
                      <VField>
                        <VControl icon="lucide:calendar">
                          <input
                            class="input v-input"
                            type="text"
                            :value="inputValue"
                            placeholder="전기일"
                            v-on="inputEvents"
                          >
                        </VControl>
                      </VField>
                    </template>
                  </VDatePicker>
                </div>
              </td>
            </tr>
            <tr>
              <td>계좌관리</td>
              <td>
                <VField>
                  <VControl>
                    <input
                      v-model="params.title"
                      class="input custom-text-filter"
                      placeholder="계약번호"
                    >
                  </VControl>
                </VField>
              </td>
              <td colspan="2">
                <VField>
                  <VControl>
                    <input
                      v-model="params.title"
                      class="input custom-text-filter"
                      placeholder="계좌번호"
                    >
                  </VControl>
                </VField>
              </td>
              <td>
                <VButton color="info">
                  계좌조회
                </VButton>
              </td>
              <td >
                <VButton color="warning">
                  계좌확인중
                </VButton>
              </td>
              <td>
                <VButton color="success">
                  정상
                </VButton>
              </td>
              <td style="background-color: var(--primary); text-align: center">
                <span>세금계산서</span>
              </td>
              <td colspan="2">
                <VField>
                  <VCodeSelect
                    v-model="taxInvoiceCode"
                    cd_grp=12 >
                  </VCodeSelect>
                </VField>
              </td>
            </tr>
            <tr>
              <td>예산관리</td>
              <td>
                <VButton
                  color="primary"
                  @click="centeredActionsOpen = true"
                >
                  G/L계정
                </VButton>
              </td>
              <td colspan="2">
                <VField>
                  <VCodeSelect
                    v-model="accountSubjectCode"
                    cd_grp=12 >
                  </VCodeSelect>
                </VField>
              </td>
              <td>
                <VButton
                  color="info"
                  @click="selected = 'cost'"
                  :class="{ 'disabled-button': selected === 'wbs' }"
                >
                  코스트센터
                </VButton>
              </td>
              <td>
                <VButton
                  color="info"
                  @click="selected = 'wbs'"
                  :class="{ 'disabled-button': selected === 'cost' }"
                >
                  WBS
                </VButton>
              </td>
              <td colspan="2">
                <VField>
                  <VControl>
                    <input
                      v-model="params.title"
                      class="input custom-text-filter"
                      placeholder="코드"
                    >
                  </VControl>
                </VField>
              </td>
            </tr>
            <tr>
              <td>첨부파일</td>
              <td colspan="1">
                <VButton color="info">
                  등록
                </VButton>
              </td>
              <td colspan="5">
                <div>('준공보고서' 또는 '검수보고서' 등)</div>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="bottom-button">
          <VButton>전 표 생 성</VButton>
          <VButton>취 소</VButton>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.table tbody td {
  color: var(--smoke-white);

}

.datatable-table  {
                td{
                  font-family: var(--font),serif;
                  vertical-align: middle;
                  padding: 4px 20px;
                  border-bottom: 1px solid var(--fade-grey);
                }

  td:nth-child(1) {
    background-color: var(--primary);
    text-align: center;
  }

  tr:nth-child(3) {
    text-align: center;
  }

  tr td button{
    width: 100%;
  }

}

.bottom-button {
  text-align: center;
  button {
    background-color: cornflowerblue;
    margin: 10px;
    font-weight: bold;
    border-color: var(--primary);
    color: white;
  }
}
button:nth-child(2) {
  background-color: #AB9A6c;
}
button:nth-child(3) {
  background-color: silver;
}

.field {
  margin: 0px 0px;
}

.button.v-button {
  padding: 0px 0px;
}

 .disabled-button {
   //opacity: 0.5;
   background-color: #ccc;
   cursor: not-allowed;
   //transition: all 0.2s;
 }

</style>
