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

const props = defineProps<{
  prcs: iPrcs
}>()

const emits = defineEmits(['setData', 'setAttData'])

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

const mng = ref('홍길동')

const pbAtts = ref<iPbAtt[]>([])

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

const onFileClick = () => {
  const input = <any> document.querySelector('.file-input')
  input.click()
}

const onFileChange = (e: any) => {
  Array.from(e.target.files).forEach((file: any) => {
    const reader = new FileReader()
    reader.onload = () => {
      const url: any = reader.result
      const pbAtt = <iPbAtt>{
        logiFnm: file.name,
        size: file.size,
        data: url.split(',')[1],
      }
      pbAtts.value.push(pbAtt)
    }

    reader.readAsDataURL(file)
  })
}

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 onFilDelete = (fileOrd: number) => {
  pbAtts.value.splice(fileOrd, 1)
}

const totPrc = computed(() => {
  return estimates.value.map((item: iEstimate) => {
    item.amt = item.unitPrc * item.qty
    return item.amt.toString().replace(regex.currency, ',')
  })
})

watch(estimates.value, (newValue) => {
  emits('setData', newValue)
})

watch(pbAtts.value, (newValue) => {
  emits('setAttData', newValue)
})
</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.prcs.prcsNo }}</p>
                  </div>
                </VControl>
              </VField>
            </div>
            <div class="column is-6">
              <VField horizontal>
                <VLabel>분야</VLabel>
                <VControl>
                  <div class="content">
                    <p>{{ props.prcs.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.prcs.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.prcs.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.prcs.regSdat }} ~ {{ props.prcs.regEdat }}</p>
                  </div>
                </VControl>
              </VField>
            </div>
          </div>
          <div class="columns">
            <div class="column is-12">
              <VField>
                <VLabel>첨부파일</VLabel>
                <div
                  v-for="f in props.prcs.prcsAtts"
                  :key="f.logiFnm"
                  class="content estimate-file-wrapper"
                >
                  <!--                    <div>-->
                  <!--                      <i class="fa fa-file-pdf estimate-file-img" style="font-size:40px;" />-->
                  <!--                    </div>-->
                  <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>
                <input
                  class="file-input hide"
                  type="file"
                  multiple
                  @change="(e) => onFileChange(e)"
                >
                <VLabel>
                  견적서
<!--                  <i class="fas fa-plus-circle pl-2 mouse-pointer" @click="onFileClick" />-->
                  <VButton icon="fas fa-plus" color="info" class="file-trigger" @click="onFileClick" >
                    <span>파일업로드</span>
                  </VButton>
                </VLabel>
                <div v-if="pbAtts.length == 0" style="width:100%; height:10px;"></div>
                <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-trash estimate-file-delete" @click="onFilDelete(i)" />
                  </div>
                </div>
              </VField>
            </div>
            <div class="column is-12">
              <VField>
                <div class="datatable-wrapper">
                  <div class="table-container dtl-spec-table">
                    <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>
                        <tr v-for="(dtl, index) in props.prcs.dtlSpecs" :key="dtl.dtlSpNo">
                          <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>
                            <input
                              v-model="estimates[index].unitPrc"
                              type="number"
                              class="input custom-text-filter text-right"
                              placeholder="10,000"
                            >
                          </td>
                          <td>{{ totPrc[index] || 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>
