<script setup lang="ts">

import axios from 'axios'
import {getContractDetail, saveContract} from "/src/service/contractApi.ts";
import type {iPbAtt} from "/@src/utils/types.ts";
import {useRouter} from "vue-router";
import {signStart} from "/@src/service/signDocApi.ts";


const registerFormOpen = ref(false)
const loading = ref(false)
const isSelectOpen = ref(false)
const notyf = useNotyf()
const router = useRouter()
const selectedCode = ref()
const priceSearchCheckBoxStatus = ref(false)
const isLoading = ref(false)

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

const params = reactive({
  cateCd: '',
  contNo: '',
  title: '',
  compNm: '',
  signDt: '',
  contAmt: '',
  contStatCd: '',
  contStat: '',
  regsabun: '',
  regNm: '',
  regDt: '',
  reason: '',
  page: 1,
  row: 10,
  flexColumn: [],
  modalColumn: [],
  contAtts: [], //첨부파일 데이터
})



const completedPriceDataParams = reactive({
  prcsNo:'',
  cateCd:'',
  cateNm:'',
  bizNo:'',
  compNm:'',
  title:'',
  content:'',
  contSdat:'',
  contEdat:'',
  signDt: '',
  regSabun:'',
  regNm:'',
  regDt:'',
  contAmt:'',
  stCd:'',
  stNm:'',
  svyDt:'',
  reason:'',
  estimates: [],
  excYn: false,
  page: 1,
  row: 5,
})

params.modalColumn = [
  { key: 'cateNm', label: '분야' },
  { key: 'title', label: '제목' },
  { key: 'regNm', label: '담당자' },
  { key: 'stNm', label: '등록상태' },
  { key: 'title', label: '비고' },
  { key: 'regNm', label: '선택' },
]

params.contAtts = [
  { prcsNo : '', bizNo : '' ,fileOrd : 0 ,logiFnm : '' ,physFnm : '',size : 0 ,data : '' ,path : '' },
]


const data = reactive({
  contractData: [],
  completedPriceSearchData: [],
})

watch(registerFormOpen, async (isOpen) => {
  if (isOpen) {
    isLoading.value = true
    // error.value = null
    try {
      const priceSearchDataRespone = await axios.get('/api/cont/prcs')
      data.completedPriceSearchData = Array.isArray(priceSearchDataRespone.data) ? priceSearchDataRespone.data : []
    }
    catch (error) {
      console.log(error)
      data.priceData = []
    }
  }
})

function getDetailList(arg){
  console.log("arg",arg)
  completedPriceDataParams.prcsNo = arg.prcsNo
  selectedCode.value = arg.cateCd
  completedPriceDataParams.bizNo = arg.bizNo
  completedPriceDataParams.compNm = arg.compNm
  completedPriceDataParams.title = arg.title
  completedPriceDataParams.contSdat = arg.contSdat // 계약기간
  completedPriceDataParams.contEdat = arg.contEdat
  completedPriceDataParams.contAmt = arg.contAmt
  priceSearchCheckBoxStatus.value = arg.excYn
  //completedPriceDataParams.svyDt = arg.signDt //계약체결일 todo
  completedPriceDataParams.reason = arg.reason
  completedPriceDataParams.signDt = arg.signDt
  params.contStatCd = arg.contStatCd
  params.contNo = arg.contNo
  console.log("params.contNo",params.contNo)
}

function formatMonthDate(dateStr) {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  return date.toLocaleDateString('ko-KR', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
  }).replace(/\./g, '-').replace(/\s/g, '').replace(/-$/, '')
}

function getDateDiff(start, end) {
  if (!start || !end) return null
  const startDate = new Date(start)
  const endDate = new Date(end)
  const diff = Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24))
  return diff >= 0 ? diff + 1 : null
}

const contractPeriod = computed(() => {
  const start = completedPriceDataParams.contSdat
  const end = completedPriceDataParams.contEdat
  const startStr = formatMonthDate(start)
  const endStr = formatMonthDate(end)
  const diff = getDateDiff(start, end)
  if (startStr && endStr && diff) {
    return `${startStr} ~ ${endStr} (${diff}일)`
  }
  else if (startStr && endStr) {
    return `${startStr} ~ ${endStr}`
  }
  else if (startStr) {
    return `${startStr} ~`
  }
  else if (endStr) {
    return `~ ${endStr}`
  }
  else {
    return ''
  }
})


function handlePriceRowClick(row) {
  completedPriceDataParams.prcsNo = row.prcsNo || ''
  completedPriceDataParams.cateCd = row.cateCd || ''
  completedPriceDataParams.cateNm = row.cateNm || ''
  completedPriceDataParams.title = row.title || ''
  completedPriceDataParams.content = row.content || ''
  completedPriceDataParams.contSdat = row.regSdat || ''
  completedPriceDataParams.contEdat = row.regEdat || ''
  completedPriceDataParams.signDt = row.signDt || ''
  completedPriceDataParams.regSabun = row.regSabun || ''
  completedPriceDataParams.regNm = row.regNm || ''
  completedPriceDataParams.regDt = row.regDt || ''
  completedPriceDataParams.stCd = row.stCd || ''
  completedPriceDataParams.stNm = row.stNm || ''
  completedPriceDataParams.svyDt = row.svyDt || ''
  completedPriceDataParams.reason = row.reason || ''

  selectedCode.value = row.cateCd || ''
  completedPriceDataParams.estimates = row.estimates || []

  if (row.estimates && row.estimates.length > 0) {
    const minEstimate = row.estimates.reduce((min, curr) => curr.amt < min.amt ? curr : min, row.estimates[0])
    completedPriceDataParams.bizNo = minEstimate.bizNo || ''
    completedPriceDataParams.compNm = minEstimate.compNm || ''
    completedPriceDataParams.contAmt = minEstimate.amt || ''
  } else {
    completedPriceDataParams.bizNo = ''
    completedPriceDataParams.compNm = ''
    completedPriceDataParams.contAmt = ''
    notyf.error("견적서가 없습니다.")
  }

  registerFormOpen.value = false
  completedPriceDataParams.estimates = row.estimates
  console.log(row)
  console.log(completedPriceDataParams.estimates)
}

const showFileInputs = ref(false)
const fileInputs = ref([
  { file: null, description: '시행 품의문' },
  { file: null, description: '소액수의계약서' },
  { file: null, description: '수의계약 체결 제한 여부 확인서' },
  { file: null, description: '퇴직자 재직여부 확인서' },
  { file: null, description: '정부권장정책 이행 구매 검토서' },
  { file: null, description: '기타' },
  { file: null, description: '인지세 납부확인서' },
])

const saveContOne = async () => {
  let res = null
  try{
    loading.value = true

    const amt = Number(String(completedPriceDataParams.contAmt).replace(/[^0-9]/g, ''))
    if (amt >= 10000000) {
      const injiFile = pbAtts.value[6]
      if (!injiFile || !injiFile.logiFnm) {
        notyf.error('계약금액이 1,000만원 이상일 경우 인지세 납부확인서 첨부가 필수입니다.')
        loading.value = false
        return
      }
    }

    const paramsCont ={
      prcsNo: completedPriceDataParams.prcsNo,
      bizNo: completedPriceDataParams.bizNo,
      cateCd: priceSearchCheckBoxStatus.value ? selectedCode.value : completedPriceDataParams.cateCd,
      compNm: completedPriceDataParams.compNm,
      title: completedPriceDataParams.title,
      contSdat: formatMonthDate(completedPriceDataParams.contSdat),
      contEdat: formatMonthDate(completedPriceDataParams.contEdat),
      contAmt: completedPriceDataParams.contAmt,
      signDt: formatMonthDate(completedPriceDataParams.signDt),
      reason: completedPriceDataParams.reason,
      excYn: priceSearchCheckBoxStatus.value, // 가격조사 예외여부 확인필요
      contAtts: params.contAtts,
    }
    console.log(pbAtts)
    res = await saveContract(paramsCont)

    if(res.request.status == '200'){
      notyf.primary('등록 되었습니다.')
      router.push({path: '/app/contractManagement'})
    }
  }catch(e){
    notyf.error(e.message)
  }finally {
    loading.value = false
  }
}

const pbAtts = ref<iPbAtt[]>(params.contAtts)

const onFileChange = (e, idx) => {
  const file = e.target.files[0]
  if (!file) return
  const reader = new FileReader()
  reader.onload = () => {
    const result = reader.result
    const pbAtt = {
      prcsNo: completedPriceDataParams.prcsNo,
      logiFnm: file.name,
      size: file.size,
      data: result.split(',')[1],
    }
    // 인덱스별로 파일 저장
    pbAtts.value[idx] = pbAtt
    console.log(pbAtts)
    console.log(pbAtts.value[idx].logiFnm)
  }
  reader.readAsDataURL(file)
}

function resetForm() {
  completedPriceDataParams.prcsNo = ''
  completedPriceDataParams.bizNo = ''
  completedPriceDataParams.compNm = ''
  completedPriceDataParams.title = ''
  completedPriceDataParams.contSdat = ''
  completedPriceDataParams.contEdat = ''
  completedPriceDataParams.signDt = ''
  completedPriceDataParams.contAmt = ''
  completedPriceDataParams.reason = ''
  selectedCode.value = ''
  pbAtts.value = []
  // 기타 입력값도 여기에 추가
}

watch(
    () => priceSearchCheckBoxStatus.value,
    () => {resetForm()}
)

function routerMove() {
  router.push({path: '/app/contractManagement'})
}

const showReasonError = computed(() =>
    priceSearchCheckBoxStatus.value &&
    (!completedPriceDataParams.reason || !completedPriceDataParams.reason.trim())
)

const estimateBizNoOptions = computed(() =>
    completedPriceDataParams.estimates.map(est => ({
      value: est.bizNo,
      text: est.bizNo
    }))
)

function onBizNoChange() {
  const selected = completedPriceDataParams.estimates.find(est => est.bizNo === completedPriceDataParams.bizNo)

  if (selected) {
    completedPriceDataParams.compNm = selected.compNm || ''
    completedPriceDataParams.contAmt = selected.amt || 0
    completedPriceDataParams.bizNo = selected.bizNo || ''
  } else {
    completedPriceDataParams.compNm =  ''
    completedPriceDataParams.contAmt = 0
    completedPriceDataParams.bizNo =  ''
  }
}

const onChangeSign = async() => {
  let res = null //todo 전자결재url 태워야 한다.
  try{
    loading.value = true
    res = await signStart(params.contNo)
    if(res.request.status == '200'){
      notyf.primary('전자결재 등록 되었습니다.')
      router.push({path: '/app/contractManagement'})
    }
  }catch(e){
    notyf.error(e.message)
  }finally {
    loading.value = false
  }
}

</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: 20%;">
            <col style="width: 20%;">
            <col style="width: 10%;">
            <col style="width: 10%;">
            <col style="width: 20%;">
            <col style="width: 10%;">
          </colgroup>
          <tbody>
          <tr>
            <td>분야</td>
            <td>
                <span class="colum">
                  <VField class="">
                    <VCodeSelect
                        v-model="selectedCode"
                        cd_grp="5"
                        :disabled="!priceSearchCheckBoxStatus"
                    /></VField>
                </span>
            </td>
            <td>
              <VButton
                  color="primary"
                  @click="registerFormOpen = true"
              >
                가격조사 가져오기
              </VButton>
              <VModal
                  is="form"
                  :open="registerFormOpen"
                  title="계약관리 등록"
                  size="contract-big"
                  actions="right"
              >
                <template #content>
                  <div class="modal-form">
                    <ComVFlexTable
                        :data="data.completedPriceSearchData"
                        :columns="params.modalColumn"
                        :compact="true"
                        :separators="true"
                        @row-click="handlePriceRowClick"
                        clickable
                    />
                  </div>
                </template>
              </VModal>
            </td>
            <td>
              <VField class="is-flex">
                <VControl raw subcontrol>
                  <VCheckbox
                      label="예외사유"
                      color="info"
                      v-model="priceSearchCheckBoxStatus"
                  />
                </VControl>
              </VField>
            </td>
            <td colspan="3">
              <div class="column is-fullhd">
                <VField>
                  <VControl>
                    <input
                        v-model="completedPriceDataParams.reason"
                        class="input custom-text-filter"
                        placeholder="가격조사 안했을 시 예외 사유 입력(필수)"
                        :class="{ 'danger-placeholder': showReasonError }"
                    >
                  </VControl>
                </VField>
              </div>
            </td>
          </tr>
          <tr>
            <td>계약명</td>
            <td colspan="6">
              <VField>
                <VControl>
                  <input
                      v-model="completedPriceDataParams.title"
                      class="input custom-text-filter"
                      placeholder="계약명"
                      :disabled="!priceSearchCheckBoxStatus"
                  >
                </VControl>
              </VField>
            </td>
          </tr>
          <tr>
            <td>계약상대자</td>
            <td>
              <VField>
                <VControl>
                  <VSelect
                      v-if="!priceSearchCheckBoxStatus"
                      v-model="completedPriceDataParams.bizNo"
                      class="input custom-text-filter"
                      @change="onBizNoChange"
                      @focus="isSelectOpen = true"
                  >
                    <option value="" disabled>사업자번호 선택</option>
                    <option
                        v-for="option in estimateBizNoOptions"
                        :key="option.value"
                        :value="option.value"
                    >
                      {{ option.text }}
                    </option>
                  </VSelect>
                </VControl>
              </VField>
            </td>
            <td>
              <VField>
                <VControl>
                  <input
                      v-model="completedPriceDataParams.compNm"
                      class="input custom-text-filter"
                      placeholder="업체명"
                      :disabled="!priceSearchCheckBoxStatus"
                  >
                </VControl>
              </VField>
            </td>
            <td>
              <VButton color="warning">
                부정당 확인
              </VButton>
            </td>
            <td>
              <VButton color="success">
                정상
              </VButton>
            </td>
            <td>
              <VButton color="warning">
                분할계약 확인
              </VButton>
            </td>
            <td>
              <VButton color="success">
                정상
              </VButton>
            </td>
          </tr>
          <tr>
            <td>계약체결일</td>
            <td>
              <VField>
                <VControl>
                  <input
                      :value="formatMonthDate(completedPriceDataParams.signDt)"
                      class="input custom-text-filter"
                      placeholder="계약체결일"
                      :disabled="!priceSearchCheckBoxStatus"
                  >
                </VControl>
              </VField>
            </td>
            <td>
              <VButton
                  color="primary"
              >
                계 약 금 액
              </VButton>
            </td>
            <td colspan="2">
              <VField>
                <VControl>
                  <input
                      v-model="completedPriceDataParams.contAmt"
                      class="input custom-text-filter"
                      placeholder="금액"
                      :disabled="!priceSearchCheckBoxStatus"
                  >
                </VControl>
              </VField>
            </td>
            <td colspan="1">
                <span class="colum">
                  <VField>
                    <VSelect>
                      <VOption value="">
                        수의계약 사유
                      </VOption>
                    </VSelect>
                  </VField>
                </span>
            </td>
            <td>
              <VButton>근거</VButton>
            </td>
          </tr>
          <tr>
            <td>계약기간</td>
            <td colspan="1">
              <div>
                <div>
                  <VDatePicker
                      v-model="completedPriceDataParams.contSdat"
                      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>
              </div>
            </td>
            <td colspan="1">
              <div class="">
                <div>
                  <VDatePicker
                      v-model="completedPriceDataParams.contEdat"
                      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>
              </div>
            </td>
            <td colspan="5">
              계약기간 : {{ contractPeriod }}
            </td>
          </tr>
          <tr>
            <td>첨부파일</td>
            <td colspan="1">
              <VButton color="info" @click="showFileInputs = !showFileInputs">
                등록
              </VButton>
            </td>
            <td colspan="5">
              <!-- 첨부파일 입력영역: 등록 버튼 클릭 시 토글 -->

            </td>
          </tr>
          <tr>
            <td></td>
            <td colspan="7">
              <div v-if="showFileInputs" class="file-upload-list" style="margin-top:10px;">
                <div
                    v-for="(input, idx) in fileInputs"
                    :key="idx"
                    style="display: flex; align-items: center; margin-bottom: 8px;"
                >
                  <!-- 파일선택 -->
                  <label class="file-label" style="margin-right: 10px;">
                    <input
                        type="file"
                        class="file-input"
                        @change="(e) => onFileChange(e, idx)"
                    />
                    <span class="file-cta">파일선택</span>
                  </label>
                  <span style="flex:1; margin-right: 10px;">
                      {{ pbAtts[idx] == null ? '' : pbAtts[idx].logiFnm }}
                    </span>
                  <span style="flex:2; color: #666;">{{ input.description }}</span>
                </div>
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="bottom-button">
        <VButton @click="saveContOne">수 정</VButton>
        <VButton v-if="params.contStatCd == '0000'" @click="onChangeSign">전자 결재(등록)</VButton>
<!--        todo 전자결재 url 태우기-->
        <VButton @click="routerMove">취 소</VButton>
      </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 12px;
    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%;
  }

  tr:nth-child(5) > td:nth-child(4) {
    color: black;
  }

  tr:nth-child(7) > td {
    padding: 0 12px;
  }
}

/* 일반 상태 */
.input::placeholder {
  color: #b0b0b0;
}

/* 에러 상태 (빨간색) */
.danger-placeholder::placeholder {
  color: #ff3860; /* Bulma 기준 빨간색 */
  opacity: 1;     /* 크롬 등에서 흐려지는 것 방지 */
}

.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-bottom: 0;
}

.file-label {
  cursor: pointer;
}
.file-input {
  display: none;
}
.file-cta {
  background: #eee;
  padding: 4px 12px;
  border-radius: 4px;
}
</style>
