<script setup lang="ts">
import dateFormat from '/@src/utils/dateFormat'
import type { iEstimatePageable, iCode } from '/@src/utils/types.ts'
import regex from '/@src/utils/regex'
import {number} from "zod";
export type MinimalTheme = 'darker' | 'light'

const props = withDefaults(
  defineProps<{
    estimateList: iEstimatePageable
    total: number
    length: number
    page: number
    row: number
  }>(),
  {
    total: 0,
    length: 0,
    page: 0,
    row: 0,
  },
)

const emits = defineEmits(['on-search', 'on-tr-click'])

const cates = ref<iCode[]>([])
const changePage = ref<number>(1)

onMounted(() => {
  api.getCode(4).then((res: iCode[]) => {
    cates.value = res
  })
})

const params = {
  estiStatCd: '',
  title: '',
  mngNm: '',
  page: props.page,
  row: props.row,
}

function onTabOver(e: any) {
  const tr = e.target.closest('tr')
  tr.classList.add('tab-active')
}

function onTabLeave(e: any) {
  const tr = e.target.closest('tr')
  tr.classList.remove('tab-active')
}

watch(changePage, (newParams) => {
  params.page = newParams
  emits('on-search', params)
})

</script>

<template>
  <div>
    <div class="datatable-toolbar">
      <div class="columns">
        <div class="column is-2">
          <VField class="pr-2">
            <VLabel class="has-fullwidth">
              진행상태
            </VLabel>
            <VControl>
              <VSelect v-model="params.estStatCd">
                <VOption value="">
                  전체
                </VOption>
                <VOption v-for="cate in cates" :value="cate.cd">
                  {{ cate.nm }}
                </VOption>
              </VSelect>
            </VControl>
          </VField>
        </div>
        <div class="column is-6">
          <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-3">
          <VField class="pr-2">
            <VLabel class="has-fullwidth">
              담당자
            </VLabel>
            <VControl>
              <input
                  v-model="params.mngNm"
                  class="input custom-text-filter"
                  placeholder="담당자"
              >
            </VControl>
          </VField>
        </div>
        <div class="column is-1" style="position:relative;">
          <div style="padding-top:25px;">
            <VButtons>
              <VButton
                color="primary"
                elevated
                icon="fas fa-search"
                @click.stop="emits('on-search', params)"
              >
                검색
              </VButton>
            </VButtons>
          </div>
        </div>
      </div>
    </div>
    <div class="datatable-wrapper">
      <div class="table-container has-slimscroll-x">
        <table class="table datatable-table is-fullwidth">
          <colgroup>
            <col width="180px"/>
            <col/>
            <col width="130px"/>
            <col width="110px"/>
            <col width="150px"/>
            <col width="180px"/>
          </colgroup>
          <thead>
            <th>가격조사번호</th>
            <th>제목</th>
            <th class="text-right">조사금액(원)</th>
            <th>담당자</th>
            <th>등록일시</th>
            <th>진행상태</th>
          </thead>
          <tbody>
            <tr
              :key="estimate.prcsNo"
              v-for="estimate in props.estimateList?.content"
              @click.stop="emits('on-tr-click', estimate)"
              class="mouse-pointer"
              @mouseover="onTabOver"
              @mouseleave="onTabLeave"
            >
              <td :title="estimate.prcsNo">{{ estimate.prcsNo }}</td>
              <td :title="estimate.title">{{ estimate.title }}</td>
              <td :title="estimate.totAmt.toString().replace(regex.currency, ',')" class="text-right">{{ estimate.totAmt.toString().replace(regex.currency, ',') }}</td>
              <td :title="estimate.mngNm" class="text-center">{{ estimate.mngNm }}</td>
              <td :title="estimate.estDt" class="text-center">{{ dateFormat.millisecondsRemove(estimate.estDt) }}</td>
              <td :title="estimate.estStat">{{ estimate.estStat }} <span v-if="estimate.estStatCd === '0300' || estimate.estStatCd === '0400'">({{ dateFormat.converterDate(estimate.svyDt) }})</span></td>
            </tr>
          </tbody>
        </table>
      </div>
      <VPlaceholderPage
        v-if="length === 0"
        larger
        subtitle="입력하신 검색어와 일치하는 결과를 찾을 수 없습니다.
        다른 검색어나 조건으로 조회해 보세요."
        title="일치하는 결과를 찾을 수 없습니다."
      >
<!--        <template #image>-->
<!--          <img-->
<!--            alt=""-->
<!--            class="light-image"-->
<!--            src="/images/illustrations/placeholders/search-7.svg"-->
<!--          >-->
<!--          <img-->
<!--            alt=""-->
<!--            class="dark-image"-->
<!--            src="/images/illustrations/placeholders/search-7-dark.svg"-->
<!--          >-->
<!--        </template>-->
      </VPlaceholderPage>
    </div>
    <!--Table Pagination-->
    <VFlexPagination
      v-if="total > params.row"
      v-model:current-page="changePage"
      :item-per-page="params.row"
      :max-links-displayed="10"
      :total-items="total"
      class="mt-4"
      no-router
    />
  </div>
</template>

<style lang="scss">

.is-navbar {
  .datatable-toolbar {
    padding-top: 30px;
  }
}

.table-container {
  border-radius: 0.3rem;
  border: 1px solid var(--fade-grey);
  thead {
    background-color: var(--primary) !important;
    th {
      color: #fff;
      text-align:center !important;
      border: 1px solid #ededed;
    }
  }
}
.inner-content {
  .field {
    padding: 3px 0 3px 10px;
  }
}
.datatable-toolbar {
  //display: flex;
  align-items: center;
  margin-bottom: 50px;
  background-color: var(--white);
  border: 1px solid var(--fade-grey);
  border-radius: 0.75rem;
  padding: 20px;
  color: var(--modal-text);
  &.is-reversed {
    flex-direction: row-reverse;
  }

  .field {
    margin-bottom: 0;

    label {
      font-weight:bold;
    }

    .control {
      .button {
        color: var(--modal-text);

        &:hover,
        &:focus {
          background: var(--primary);
          border-color: var(--primary);
          color: var(--primary--color-invert);
        }
      }
    }
  }

  .buttons {
    margin-left: auto;
    margin-bottom: 0;

    .v-button {
      margin-bottom: 0;
    }
  }
}

.is-dark {
  .datatable-toolbar {
    background: color-mix(in oklab, var(--dark-sidebar), white 6%);
    .field {
      .control {
        .button {
          background: var(--dark-sidebar) !important;
          color: var(--modal-text);

          &:hover,
          &:focus {
            background: var(--primary) !important;
            border-color: var(--primary) !important;
            color: var(--smoke-white) !important;
          }
        }
      }
    }
  }
}

.datatable-wrapper {
  width: 100%;

  .datatable-container {
    background: var(--white);
    border: none !important;
    overflow-x: auto;

    .table,
    table {
      width: 100%;
    }

    &::-webkit-scrollbar {
      height: 8px !important;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 10px !important;
      background: rgb(0 0 0 / 20%) !important;
    }
  }
}

.datatable-table {
  border: 1px solid var(--fade-grey);
  border-collapse: collapse;
  border-radius: 0.75rem;
  border-style: hidden;
  table-layout: fixed;

  th {
    padding: 16px 20px;
    font-family: var(--font-alt);
    font-size: 0.9rem;
    color: var(--modal-text);
    text-transform: uppercase;
    border: 1px solid var(--fade-grey);
    font-weight: 600;

    &:last-child {
      text-align: right;
    }
  }

  td {
    font-family: var(--font);
    vertical-align: middle;
    padding: 12px 20px;
    border-bottom: 1px solid var(--fade-grey);
    //border: 1px solid var(--fade-grey);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    &:last-child {
      text-align: right;
    }

    &.datatables-empty {
      opacity: 0;
    }
  }

  .light-text {
    color: var(--modal-text);
  }

  .flex-media {
    display: flex;
    align-items: center;

    .meta {
      margin-left: 10px;
      line-height: 1.3;

      span {
        display: block;
        font-size: 0.8rem;
        color: var(--modal-text);
        font-family: var(--font);

        &:first-child {
          font-family: var(--font-alt);
          color: var(--modal-text);
        }
      }
      h3 {
        color: var(--modal-text) !important;
        font-weight:bold;
      }
    }
  }

  .row-action {
    display: flex;
    justify-content: flex-end;
  }

  .checkbox {
    padding: 0;
  }

  .product-photo {
    width: 80px;
    height: 80px;
    object-fit: contain;
  }

  .file-icon {
    width: 46px;
    height: 46px;
    object-fit: contain;
  }

  .drinks-icon {
    display: block;
    max-width: 48px;
    border-radius: var(--radius-rounded);
    border: 1px solid var(--fade-grey);
  }

  .negative-icon,
  .positive-icon {
    .iconify {
      height: 16px;
      width: 16px;
    }
  }

  .positive-icon {
    .iconify {
      color: var(--success);

      * {
        stroke-width: 4px;
      }
    }
  }

  .negative-icon {
    &.is-danger {
      .iconify {
        color: var(--danger) !important;
      }
    }

    .iconify {
      color: var(--modal-text);

      * {
        stroke-width: 4px;
      }
    }
  }

  .price {
    color: var(--modal-text);
    font-weight: 500;

    &::before {
      content: '$';
    }

    &.price-free {
      color: var(--modal-text);
    }
  }

  .status {
    display: flex;
    align-items: center;

    &.is-available {
      .iconify {
        color: var(--success);
      }
    }

    &.is-busy {
      .iconify {
        color: var(--danger);
      }
    }

    &.is-offline {
      .iconify {
        color: var(--modal-text);
      }
    }

    .iconify {
      margin-right: 8px;
      font-size: 8px;
    }

    span {
      font-family: var(--font);
      font-size: 0.9rem;
      color: var(--modal-text);
    }
  }
}

.is-dark {
  .datatable-wrapper {
    .datatable-container {
      border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
      background: color-mix(in oklab, var(--dark-sidebar), white 6%);
    }
  }

  .datatable-table {
    border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);

    th,
    td {
      border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
      color: var(--modal-text);
    }

    .drinks-icon {
      border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
    }
  }
}
</style>
