<script setup lang="ts">
import {getDetailPrcs, updatePrcsNo, putSurveyPrcsNo} from '/src/service/priceApi'
import { type Person } from '/@src/utils/types'
import {formatDatefromString, formatCurrency, formatDateHourMinutefromString} from "/@src/utils/common/comfunc.ts";


const notyf = useNotyf()
const loading = ref(false)
const router = useRouter()

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


onBeforeMount(async ()=>{
  let result;
  if(history.state.key === undefined) {
    result = await getDetailPrcs(props.prcsNo)
  } else {
    result = await getDetailPrcs(history.state.key)
  }
  getDetailList(result)
})

const detailActionsOpen = ref(false)
const apprLine = defineModel<Person[]>()

const generalParams = reactive({
  title: "",
  content: "",
  regSdat: "",
  regEdat: "",
  prvYn: true,
  prvRsn : "",
  prvPwd : "",
  aiYn: true,
})

const params = reactive({
  cateSelect: '',
  prcsNo: '', // 키값
  stCdFalg: false, // 버튼 컴포넌트화
  svyYn: false,
  stCd:'',//결재상태 코드{ 등록중:0100[회수버튼]
          // 회수: 0300, 반려: 0400, 등록 완료: 0200[가격조사 완료], }
  prcsAttsColumn:[ //첨부파일 입력
    { key: 'logiFnm', label: '구분'},
    { key: 'data', label: '데이터'}
  ],
  prcsAtts: [], //첨부파일 데이터
  felxColumn: [
    { key: 'gubunNm', label: '구분'},
    { key: 'deptNm', label: '부서' },
    { key: 'sabun', label: '사번' },
    { key: 'name', label: '이름' },
    { key: 'attendNm', label: '비고' },
    { key: 'apprStat', label: '결재상태'},
    { key: 'apprDt', label: '승인일자'},
  ],
  priceData:[],
  prcsBizsColumn: [],
  prcsBizs: [], //견적사 입력 데이터
  dtlSpecsColumn: [
    { key: 'num', label: '번호', editable: false },
    { key: 'itemNm', label: '품명', editable: true },
    { key: 'spec', label: '규격', editable: true },
    { key: 'unit', label: '단위', editable: true },
    { key: 'qty', label: '수량', editable: true },
    { key: 'unitPrc', label: '단가(VAT별도)', editable: false },
    { key: 'amt', label: '금액(VAT별도)', editable: false },
  ],
  dtlSpecs: [], //상세 규격 입력 데이터
  minAmt: null,
  minAmtComp: [],
})

params.prcsBizsColumn = computed(() => {
  const baseColumns = [
  { key: 'email', label: '이메일', editable: true},
  { key: 'bizNo', label: '사업자번호', editable: true, cellClass: 'is-justify-content-center'},
  { key: 'bizNm', label: '사업자명', editable: true, cellClass: 'is-justify-content-left'},
  { key: 'mngNm', label: '담당자', editable: true, cellClass: 'is-justify-content-left'},
  { key: 'totAmt', label: '금액', editable: true, cellClass: 'is-justify-content-right'},
  { key: 'sendYn', label: '전송여부', editable: true, cellClass: 'is-justify-content-center'},
  { key: 'retransmitYn', label: '재전송여부', editable: true, cellClass: 'is-justify-content-center'},
  ]

  if(params.svyYn) {
    return baseColumns.filter(col => col.key !== 'sendYn' && col.key !== 'retransmitYn')
  }
  return baseColumns
})


function getDetailList(arg){
  console.log("arg",arg)//svy_yn


  if(!props.prcsNo){
    params.stCdFalg = true
  }
  params.prcsNo = arg.prcsNo
  params.stCd = arg.stCd
  params.cateSelect = arg.cateNm
  generalParams.title = arg.title
  generalParams.content = arg.content
  params.prcsBizs = arg.prcsBizs
  params.dtlSpecs = arg.dtlSpecs
  generalParams.regSdat = formatDatefromString(arg.regSdat)
  generalParams.regEdat = formatDatefromString(arg.regEdat)

  params.prcsBizs = arg.prcsBizs.map(biz => ({
    ...biz,
    mngNm: biz.estimates[0]?.mngNm || '-'
  }))

  // console.log('dtlSpecs1', params.dtlSpecs)
  // params.dtlSpecs = arg.prcsBizs.map(biz => ({
  //   ...biz,
  //   unitPrc: biz.estimates[0]?.unitPrc || 0,
  //   amt: biz.estimates[0]?.amt || 0
  // }))
  // console.log('dtlSpecs2', params.dtlSpecs)

  apprLine.value = arg.apprMst.apprReqs.map(req => ({
    gubunNm: req.gubunNm,
    deptCd: req.deptCd,
    deptNm: req.deptNm,
    sabun: req.sabun,
    name: req.name,
    apprNo: req.apprNo,
    apprOrd: req.apprOrd,
    apprStat: req.apprStat,
    apprDt: formatDateHourMinutefromString(req.apprDt),
    attendNm: req.attendNm
  }))  //비고 데이터 없음, 승인일자 없음 todo
  params.prcsAtts = arg.prcsAtts
  params.svyYn = arg.svyYn

  minAmtCalc(params.prcsBizs)
}

const updateState = async () => {
  let res = null
  try {
    loading.value = true
    const paramsPrice = {
      prcsNo : params.prcsNo
    }
    res = await updatePrcsNo(paramsPrice.prcsNo)
    notyf.dismissAll()
    if (res.request.status === 200) {
      notyf.primary('회수 되었습니다.')
      router.push({path: '/app/priceManagement'})
    }
  } catch (e) {
    notyf.error(e.message)
  } finally {
    loading.value = false
  }
}

const onChangeFinal = async () => {
  let res = null
  try {
    loading.value = true
    res = await putSurveyPrcsNo(params.prcsNo)
    if (res.request.status === 200) {
      notyf.primary('가격조사 완료 되었습니다.')
    }
  } catch (e) {
    notyf.error(e.message)
  } finally {
    loading.value = false
  }
}

const onPrcsFileDownload = async (prcsNo: string, fileOrd: number, logiFnm: string) => {
  const link = document.createElement('a')
  link.href = `https://svcm.hmsn.ink/api/prcs/${prcsNo}/${fileOrd}` //todo
  link.setAttribute('download', logiFnm)
  link.setAttribute('target', '_blank')
  document.body.appendChild(link)
  link.click()
}

function minAmtCalc (est) {
  const totAmts = est.map(value => value.totAmt)
  if(totAmts.length === 0) {
    return {minAmt : null, bizNo : []};
  }
  const minAmt = Math.min(...totAmts);
  const bizNo = est.filter(value => value.totAmt === minAmt).map(value => value.bizNo);
  params.minAmt = minAmt;
  params.minAmtComp = bizNo;
}


</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: 7%;">
            <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: 13%;">
          </colgroup>
          <tbody>
          <tr>
            <td>분야</td>
            <td colspan="2">
                <span class="column is-7">
                  <input
                      :readonly=true
                      v-model="params.cateSelect"
                      class="input custom-text-filter"
                      placeholder="제목"
                      disabled
                  >
                </span>
            </td>
            <td>제목</td>
            <td colspan="6">
              <div class="column is-fullhd">
                <VField class="pr-2">
                  <VControl>
                    <input
                        :readonly=true
                        v-model="generalParams.title"
                        class="input custom-text-filter"
                        placeholder="제목"
                        disabled
                    >
                  </VControl>
                </VField>
              </div>
            </td>
          </tr>
          <tr>
            <td>내용</td>
            <td colspan="10">
              <div class="column is-fullhd">
                <VField class="pr-2">
                  <VControl>
                      <textarea
                          :readonly=true
                          v-model="generalParams.content"
                          class="input custom-text-filter"
                          placeholder="내용"
                          style="height: 100px;"
                          disabled
                      />
                  </VControl>
                </VField>
              </div>
            </td>
          </tr>
          <tr>
            <td>규격입력</td>
            <td colspan="2">
              <span class="column is-7">
              <VButton
                  color='success'
                  icon="fas"
                  elevated
                  @click="detailActionsOpen = true"
              >
               <span> 상세 규격 등록 완료</span>
              </VButton>
              <VModal
                  :open="detailActionsOpen"
                  actions="center"
                  title="상세 규격 입력"
                  size="contract-big"
                  cancelLabel="닫기"
                  @close="detailActionsOpen = false"
              >
                <template #content>
                  <ComVFlexTable
                      :key="params.dtlSpecs.length"
                      :data="params.dtlSpecs"
                      :columns="params.dtlSpecsColumn"
                      :separators="true"
                  >
                    <template #body-cell="{ row, column, index, value }">
                      <!-- 예: 특정 컬럼이면 input, 아니면 그냥 값 출력 -->
                      <div>
                        <input
                            :readonly=true
                            v-if="column.editable"
                            v-model="row[column.key]"
                            class="input custom-text-filter"
                            disabled
                        />
                        <span v-else-if="column.key=='num'">{{index+1}}</span>
                        <span v-else>{{ value }}</span>
                      </div>
                    </template>
                  </ComVFlexTable>
                </template>
                <template #cancel>
                </template>
              </VModal>
              </span>
            </td>
            <td>등록기간</td>
            <td colspan="6">
              <div class="columns">
                <div class="column is-2">
                  <input
                      :readonly=true
                      v-model="generalParams.regSdat"
                      class="input custom-text-filter"
                      disabled
                  >
                </div>
                <span style="margin: 0.5rem 0.5rem">~</span>
                <div class="column is-2">
                  <input
                      :readonly=true
                      v-model="generalParams.regEdat"
                      class="input custom-text-filter"
                      disabled
                  >
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td>첨부파일</td>
            <td colspan="3">
              <div class="column is-12">
                <VField>
                  <VControl>
                    <div
                        v-for="f in params.prcsAtts"
                        :key="f.logiFnm"
                        class="content estimate-file-wrapper"
                    >
                      <div class="estimate-file-name ml-2">
                        {{ f.logiFnm }}{{" ("}}{{Math.ceil(f.size / 1024)}}kb{{")"}}
                      </div>
                      <div>
                        <i class="fa fa-download estimate-file-download pr-2" @click="onPrcsFileDownload(f.prcsNo, f.fileOrd, f.logiFnm)" />
                      </div>
                    </div>
                  </VControl>
                </VField>
              </div>
            </td>
            <td colspan="6"></td>
          </tr>
          <tr>
            <td>견적서확인</td>
            <td colspan="6">
              <div>
                <ComVFlexTable
                    :key="params.prcsBizs.length"
                    :data="params.prcsBizs"
                    :columns="params.prcsBizsColumn"
                    :compact="true"
                    :separators="true"
                >
                  <template #body-cell-totAmt="{ value}">
                    <div>
                      {{formatCurrency(value) }}
                    </div>
                  </template>
                  <!-- sendYn 컬럼 커스텀 렌더링 -->
                  <template #body-cell-sendYn="{ row }">
                    <div>
                      <span v-if="!row.sendYn" style="color: red;">실패</span>
                      <span v-else>전송완료</span>
                    </div>
                  </template>
                  <template #body-cell-retransmitYn="{ row }">
                    <div>
                      <VButton
                          v-if="!row.sendYn && params.stCd == '0200'"
                          color="info"
                          size="small"
                      >
                        재전송
                      </VButton>
                    </div>
                  </template>
                  <!-- 나머지 컬럼만 이 슬롯 사용 -->
                  <template #body-cell="{ column, index, value, row }">
                    <div>
                      <span v-if="column.key=='num'">{{index + 1}}</span>
                      <span v-else>{{ value }}</span>
                    </div>
                  </template>
                </ComVFlexTable>
              </div>
            </td>
            <td colspan="3">
              <slot name="status"
                    v-if="params.stCd === '0200'&& !params.svyYn">
                <div>
                  <VButton
                      color="info"
                      icon="fas fa-circle"
                      elevated
                      @click="onChangeFinal"
                  >
                    가격조사 완료
                  </VButton>
                </div>
              </slot>
            </td>
          </tr>
          <tr>
            <td>최소견적서</td>
            <td colspan="7">
              <div class="columns">
              <div class="column is-2">사업자명 : {{params.minAmtComp.join(',')}}</div>
              <div class="column is-2">견적 금액 : {{formatCurrency(params.minAmt)}}원</div>
              </div>
            </td>
            <td colspan="2">
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="is-12">
        <VField class="">
          <VLabel class="has-fullwidth">
            결재선
          </VLabel>
        </VField>
        <ComVFlexTable
          :data="apprLine"
          :columns="params.felxColumn"
          :separators="true"
          :compact="true">
          <template #body-cell="{ row, column, index, value }">
            <!-- 예: 특정 컬럼이면 input, 아니면 그냥 값 출력 -->
            <div>
              <span v-if="column.key=='attendNm' && !value">{{'재중'}}</span>
              <span v-else>{{value}}</span>
            </div>
          </template>
        </ComVFlexTable>
      </div>
      <slot name="button" v-if="params.stCdFalg">
        <div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px;">
          <VButton
              v-if="params.stCd === '0100'"
              color="warning"
              @click.stop="updateState"
          >
            회수
          </VButton>
          <VButton
              to="/app/priceManagement"
              v-if="params.stCd === '0100' || '0200' || '0300' || '0400'"
              color="info"
          >
            닫기
          </VButton>
        </div>
      </slot>
    </div>
  </div>
</template>

<style scoped lang="scss">
/*css 추가 start*/
.estimate-file-wrapper{
  padding: 0;
  margin: 0.25rem 0;
}



.flex-table {
  .flex-table-header {
    padding: 1rem !important;
    min-height: 40px;
  }


  .flex-table-item {
    padding: 0.1rem !important;
    min-height: 40px;

    .column {
      min-height: 40px;
      padding: 0.1rem !important;
    }

    &:last-child {
      border-bottom-left-radius: .75rem;
      border-bottom-right-radius: .75rem;
    }
  }
}

.table-container {
  overflow:hidden;
  .control {
    width: 100%;
  }
  td {
    padding: 4px 10px;
    .columns {
      margin-inline-start : 0
    }
    .column {
      padding: 0
    }
  }
}

.text-center {
  text-align:center;
}
.table tbody td {
  color: var(--smoke-white);
}

.datatable-table  {
  td:nth-child(1) {
    background-color: var(--primary);
  }
  tr:nth-child(1) > td:nth-child(3) {
    background-color: var(--primary);
  }
  tr:nth-child(3) > td:nth-child(3) {
    background-color: var(--primary);
  }
}
</style>