<script setup lang="ts">
import { getPriceList } from '/@src/service/priceApi'
import { formatDate } from '/@src/utils/common/comfunc'
const router = useRouter()

onBeforeMount(async () => {
  await getPriceListData()
  const userSession = useUserSession()
  params.sessionUser = userSession.user.data
})

const masks = ref({
  modelValue: 'YYYY-MM-DD',
})
const searchParamsList = reactive({
  cateCd : '', //분야코드
  stCd : '', //등록상태
  regNm : '', //담당자
  regSdt: '',//등록시작일
  regEdt: '',//등록종료일
  page: 1,//페이지
  row: 5 //아이템갯수
})
const params = reactive({
  sessionUser:'',
  priceData: [],
  felxColumn: [
    { key: 'cateNm', label: '분야' },
    { key: 'title', label: '제목' },
    { key: 'regNm', label: '담당자' },
    { key: 'regDt', label: '등록일' },
    { key: 'stNm', label: '등록 상태' },
  ]
})

async function getPriceListData(){
  const today = new Date()

  const before30 = new Date()
  before30.setDate(today.getDate() - 30)

  const after30 = new Date()
  after30.setDate(today.getDate() + 30)
  const priceBase = {
    params:{
      regSdt: formatDate(before30),
      regEdt: formatDate(after30),
      page: searchParamsList.page,
      row: searchParamsList.row
    }
  }
  const result = await getPriceList(priceBase)
  params.priceData = result.content
}

const searchPrice = async () => {
  const searchParams = {
    params: {
      cateCd : searchParamsList.cateCd, //분야코드
      stCd : searchParamsList.stCd, //등록상태
      regNm : searchParamsList.regNm, //담당자
      regSdt: searchParamsList.regSdt,//등록시작일
      regEdt: searchParamsList.regEdt,//등록종료일
      page: 1,//페이지
      row: 3 //아이템갯수
    }
  }
  const result = await getPriceList(searchParams)
  params.priceData = result.content
}

function getPriceDetail(){
  //stCd 결재상태 코드 [등록전:0000, 등록중:0100, ]
  if(params.sessionUser.sabun == arguments[0].regSabun && arguments[0].stCd == '0000'){
    router.push({ path: '/app/priceUpdate', state: { key: arguments[0].prcsNo }})
  }else{
    router.push({ path: '/app/priceDetail', state: { key: arguments[0].prcsNo }})
  }
}
</script>

<template>
  <div class="page-content is-navbar-lg">
    <div>
      <div class="datatable-toolbar">
        <div class="column is-2">
          <VField class="pr-2">
            <VLabel class="has-fullwidth">
              분야
            </VLabel>
            <VCodeSelect
                cd_grp=5
                v-model="searchParamsList.cateCd"
                placeholder="전체"/>
          </VField>
        </div>
        <div class="column is-2">
          <VField class="pr-2">
            <VLabel class="has-fullwidth">
              등록상태
            </VLabel>
            <VCodeSelect
                cd_grp=1
                v-model="searchParamsList.stCd"
                placeholder="전체"/>
          </VField>
        </div>
        <div class="column is-2">
          <VField class="pr-2">
            <VLabel class="has-fullwidth">
              담당자
            </VLabel>
            <VControl>
              <input
                  v-model="searchParamsList.regNm"
                  class="input custom-text-filter"
                  placeholder="담당자"
              >
            </VControl>
          </VField>
        </div>
        <div class="column is-5">
          <VField class="pr-2">
            <VLabel class="has-fullwidth">
              등록기간
            </VLabel>
            <VControl>
              <div class="columns">
                <div class="column is-6">
                  <VDatePicker
                      v-model.string="searchParamsList.regSdt"
                      color="green"
                      :masks="masks"
                      trim-weeks
                  >
                    <template #default="{ inputValue, inputEvents }">
                      <VField>
                        <VControl icon="lucide:calendar">
                          <input
                              class="input v-input"
                              type="text"
                              :value="inputValue"
                              v-on="inputEvents"
                              placeholder="시작일"
                          >
                        </VControl>
                      </VField>
                    </template>
                  </VDatePicker>
                </div>
                <div style="transform: translateY(15px)">~</div>
                <div class="column is-6">
                  <VDatePicker
                      v-model.string="searchParamsList.regEdt"
                      color="green"
                      :masks="masks"
                      trim-weeks
                  >
                    <template #default="{ inputValue, inputEvents }">
                      <VField>
                        <VControl icon="lucide:calendar">
                          <input
                              class="input v-input"
                              type="text"
                              :value="inputValue"
                              v-on="inputEvents"
                              placeholder="종료일"
                          >
                        </VControl>
                      </VField>
                    </template>
                  </VDatePicker>
                </div>
              </div>
            </VControl>
          </VField>
        </div>
        <div class="column is-1">
          <div style="padding-top:20px;float:right;">
            <VButtons>
              <VButton
                  color="primary"
                  elevated
                  icon="fas fa-search"
                  @click.stop="searchPrice"
              >
                검색
              </VButton>
            </VButtons>
          </div>
        </div>
      </div>
      <div class="datatable-wrapper">
        <ComVFlexTable
            :data="params.priceData"
            :columns="params.felxColumn"
            :separators="true"
            :clickable="true"
            :compact="true"
            @rowClick="getPriceDetail"
        />
        </div>
    </div>
      <VButtons class="v-buttons-right-align">
        <VButton
            color="primary"
            icon="fas fa-plus"
            elevated
            to="/app/PriceInsert"
        >
          등록
        </VButton>
      </VButtons>
  </div>
</template>

<style scoped lang="scss">
.v-buttons-right-align {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem; // 필요 시 간격 추가
}

</style>
