<script setup lang="ts">
import { getPriceList } from '/@src/service/price'

onBeforeMount(async () => {
  await getPriceListData()
})

const selectedCode = ref()
const paymentCode = ref()


const emits = defineEmits(['on-tr-click'])
const masks = ref({
  modelValue: 'YYYY-MM-DD',
})

const params = reactive({
  priceData: [],
  felxColumn: [
    { key: 'cateNm', label: '분야' },
    { key: 'title', label: '제목' },
    { key: 'regNm', label: '담당자' },
    { key: 'regSdat', label: '최초등록일' },
    { key: 'stNm', label: '등록 상태' },
    { key: 'title', label: '비고' }
  ],
  prcsParams: []
})

async function getPriceListData(){
  params.prcsParams = {
    params:{
      regSdt: '1970-01-01',
      regEdt: '2070-01-01',
      page: '1',
      row: '3'
    }
  }
  const result = await getPriceList(params.prcsParams)
  params.priceData = result.content
}

const searchPrice = () => {

}
</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="selectedCode"/>
          </VField>
        </div>
        <div class="column is-2">
          <VField class="pr-2">
            <VLabel class="has-fullwidth">
              결제상태
            </VLabel>
            <VCodeSelect
                cd_grp=2
                v-model="paymentCode"/>
          </VField>
        </div>
        <div class="column is-2">
          <VField class="pr-2">
            <VLabel class="has-fullwidth">
              담당자
            </VLabel>
            <VControl>
              <input
                  v-model="params.title"
                  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="params.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="params.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"
        />
      </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>
