<script setup lang="ts">

import { getSlipDetail } from "/@src/service/slipApi.ts";

onBeforeMount(async ()=>{
  const result = await getSlipDetail(history.state.key)
  getDetailList(result)
})

const getDetailList = (item) => {
  console.log("getDetailList",item)
  affiliationCode.value = item.trtGubun//소속
  params.title = item.bktxt   //계약명
  params.regNm = item.lifnr  //계약상대자
  params.place = ''// 업체명
  formattedNumber.value = '' //공급가액
  taxCode.value=  item.mwskz //세금코드 ->세금계산서랑 같이 ?
  currencyCode.value = item.banks //통화
  params.regSdt = '' //증빙일
  params.regSdt2 = ''//전기일
  taxInvoiceCode.value = item.mwskz //세금계산서
  accountSubjectCode.value = item.mwskz //예산관리
  selectCostCode.value = ''//코스트센터
//코드
  //첨부파일
}

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: '',
  place: '',
  regDt: '',
  reason: '',
  regSdt: '',
  regSdt2: '',
  page: 1,
  row: 10,
  flexColumn: [],
  modalColumn: [],
})
const formattedNumber = ref(0)

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

const selectCostCode = ref('코스트센터')
const selectCostCodeOptions = [
  { text: '코스트센터', value: '코스트센터' },
  { text: 'WBS', value: 'WBS'}
]
const router = useRouter()
const cancel = () => {
  router.push('/app/contractManagement')
}

</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.place"
                      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="success">
                  정상
                </VButton>
              </td>
              <td></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>
                <VField>
                  <VSelect v-model="selectCostCode">
                    <option v-for="opt in selectCostCodeOptions" :key="opt.value" :value="opt.value">
                      {{ opt.text }}
                    </option>
                  </VSelect>
                </VField>
              </td>
              <td colspan="2">
                <VField>
                  <VControl>
                    <input
                      v-model="params.title"
                      class="input custom-text-filter"
                      placeholder="코드"
                    >
                  </VControl>
                </VField>
              </td>
              <td colspan="4"></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 @click="cancel">취 소</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%;
  }

}

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

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

.field {
  margin: 0px 0px;
}


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

</style>
