<script setup lang="ts">
import type { iDtlSpec, iEstimate, UserData, iPbAtt } from '/@src/utils/types'
import regex from '/@src/utils/regex'

const props = defineProps<{
  estimate: iEstimate
}>()

const userSession = useUserSession()
const user = <UserData>userSession.user

const mng = ref('홍길동')

const pbAtts = ref<iPbAtt[]>(props.estimate.pbAtts)

const estimates = ref<iEstimate[]>(props.estimate.dtlSpecs.map((spec: iDtlSpec) => {
  return <iEstimate> {
    estNo: spec.estimate.estNo,
    prcsNo: spec.prcsNo,
    dtlSpNo: spec.dtlSpNo,
    bizNo: user.bizNo,
    mngNm: mng.value,
    unitPrc: spec.estimate.unitPrc,
    qty: spec.qty,
    amt: spec.estimate.amt,
    estDocs: spec.estimate.estDocs,
  }
}))

const onPrcsFileDownload = (prcsNo: string, fileOrd: number, logiFnm: string) => {
  api.downloadPrcsFile(prcsNo, fileOrd).then((res) => {
    const url = window.URL.createObjectURL(res)
    const link = document.createElement('a')
    link.href = url
    link.setAttribute('download', logiFnm)
    document.body.appendChild(link)
    link.click()
    link.remove()
  })
}

const onPbAttDownload = (prcsNo: string, bizNo: string, fileOrd: number, logiFnm: string) => {
  api.downloadPbAtt(prcsNo, bizNo, fileOrd).then((res) => {
    const url = window.URL.createObjectURL(res)
    const link = document.createElement('a')
    link.href = url
    link.setAttribute('download', logiFnm)
    document.body.appendChild(link)
    link.click()
    link.remove()
  })
}

const totPrc = computed(() => {
  return estimates.value.map((item: iEstimate) => {
    item.amt = item.unitPrc * item.qty
    return item.amt
  })
})
</script>

<template>
  <form
    method="post"
    novalidate
    class="form-layout"
  >
    <div class="form-body">
      <div class="form-fieldset">
        <div class="form-outer">
          <div class="fieldset-heading">
            <h4>가격조사</h4>
          </div>

          <div class="columns">
            <div class="column is-6">
              <VField horizontal>
                <VLabel>No</VLabel>
                <VControl>
                  <div class="content">
                    <p>{{ props.estimate.prcsNo }}</p>
                  </div>
                </VControl>
              </VField>
            </div>
          </div>
          <div class="columns">
            <div class="column is-6">
              <VField horizontal>
                <VLabel>분야</VLabel>
                <VControl>
                  <div class="content">
                    <p>{{ props.estimate.cateNm }}</p>
                  </div>
                </VControl>
              </VField>
            </div>
          </div>
          <div class="columns">
            <div class="column is-12">
              <VField horizontal>
                <VLabel>제목</VLabel>
                <VControl>
                  <div class="content">
                    <p>{{ props.estimate.title }}</p>
                  </div>
                </VControl>
              </VField>
            </div>
          </div>
          <div class="columns">
            <div class="column is-12">
              <VField horizontal>
                <VLabel>내용</VLabel>
                <VControl>
                  <div class="content">
                    <p class="text-pre-line">
                      {{ props.estimate.content }}
                    </p>
                  </div>
                </VControl>
              </VField>
            </div>
          </div>
          <div class="columns">
            <div class="column is-12">
              <VField horizontal>
                <VLabel>등록기간</VLabel>
                <VControl>
                  <div class="content">
                    <p>{{ props.estimate.regSdat }} ~ {{ props.estimate.regEdat }}</p>
                  </div>
                </VControl>
              </VField>
            </div>
          </div>
          <div class="columns">
            <div class="column is-12">
              <VField>
                <VLabel>첨부파일</VLabel>
                <div
                  v-for="f in props.estimate.prcsAtts"
                  :key="f.logiFnm"
                  class="content estimate-file-wrapper"
                >
                  <div class="estimate-file-name">
                    {{ f.logiFnm }} ({{ Math.ceil(f.size / 1024) }}kb)
                  </div>
                  <div>
                    <i class="fa fa-download estimate-file-download" @click="onPrcsFileDownload(f.prcsNo, f.fileOrd, f.logiFnm)" />
                  </div>
                </div>
              </VField>
            </div>
          </div>
          <div class="fieldset-heading">
            <h4>상세 규격</h4>
          </div>
          <div class="columns is-multiline">
            <div class="column is-12">
              <VField>
                <VLabel>
                  견적서
                </VLabel>
                <div
                  v-for="(f, i) in pbAtts"
                  :key="f.logiFnm"
                  class="content estimate-file-wrapper"
                >
                  <div class="estimate-file-name">
                    {{ f.logiFnm }} ({{ Math.ceil(f.size / 1024) }}kb)
                  </div>
                  <div>
                    <i class="fa fa-download estimate-file-download" @click="onPbAttDownload(f.prcsNo, f.bizNo, f.fileOrd, f.logiFnm)" />
                  </div>
                </div>
              </VField>
            </div>
            <div class="column is-12">
              <VField>
                <div class="datatable-wrapper">
                  <div class="table-container">
                    <table class="table datatable-table is-fullwidth">
                      <colgroup>
                        <col width="50px"/>
                        <col width="200px"/>
                        <col/>
                        <col width="50px"/>
                        <col width="80px"/>
                        <col width="120px"/>
                        <col width="100px"/>
                      </colgroup>
                      <thead>
                        <th>순번</th>
                        <th>품명</th>
                        <th>규격</th>
                        <th>수량</th>
                        <th>단위</th>
                        <th>단가(원)</th>
                        <th>금액(원)</th>
                      </thead>
                      <tbody v-for="(dtl, index) in props.estimate.dtlSpecs" :key="dtl.dtlSpNo">
                        <tr>
                          <td class="text-center">{{ index + 1 }}</td>
                          <td :title="dtl.itemNm">{{ dtl.itemNm }}</td>
                          <td :title="dtl.spec">{{ dtl.spec }}</td>
                          <td :title="dtl.qty" class="text-center">{{ dtl.qty }}</td>
                          <td :title="dtl.unit" class="text-center">{{ dtl.unit }}</td>
                          <td class="text-right">{{ String(estimates[index].unitPrc).replace(regex.currency, ',') }}</td>
                          <td>{{ String(totPrc[index]).replace(regex.currency, ',') || 0 }}</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </VField>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</template>

<style lang="scss" scoped>
@import '/@src/scss/abstracts/all';
@import '/@src/scss/components/forms-outer';
@import '/@src/scss/components/custom-contract';

</style>
