<script lang="ts" setup>
import CDropdown from '../CDropdown/CDropdown.vue'
import MDIcon from '../MDIcon/MDIcon.vue'
import { computed, ref } from 'vue'
import { blitzPaginationProps } from 'blitzar'

const props = defineProps({
  ...blitzPaginationProps,
  /**
   * テーブルデータの総数
   * @example p_TableLength: 100
   */
  p_TableLength: {
    type: Number,
  },
  /**
   * 現在の表示件数
   * @example 表示件数: 10
   */
  showDataNum: {
    type: Number,
  },
})

//表示件数Dropdownのoption
const options = [
  { label: 10, value: 10 },
  { label: 20, value: 20 },
  { label: 30, value: 30 },
  { label: 40, value: 40 },
  { label: 50, value: 50 },
]

// 表示件数の初期値
const d_Denominator = ref(props.tableMeta?.rowsPerPage.value || 10)
// 表示件数の初期値
const c_MaxNum = computed(() => props.modelValue * d_Denominator.value)

// emit
const emit = defineEmits(['update:modelValue', 'update:showDataNum'])

const getArr = () => {
  const buttonStart = 1
  let arr: number[] = []
  // ボタンの総数が5未満の時
  if (props.pageCount < 5) {
    for (let i = buttonStart + 1; i < props.pageCount; i++) {
      arr.push(i)
    }
  } else {
    const median =
      props.modelValue < 3
        ? buttonStart + 2
        : props.modelValue > props.pageCount - 2
        ? props.pageCount - 2
        : props.modelValue
    arr = [median - 1, median, median + 1]
  }
  return arr
}

const c_ButtonArr = computed(() => getArr())

// 選択されたタブのナンバーの変更
const setPageNr = (index: number) => {
  emit('update:modelValue', index)
}

const changeDenominator = (rowsPerPage: number) => {
  // eslint-disable-next-line vue/no-mutating-props
  emit('update:showDataNum', rowsPerPage)
  if (props.tableMeta) props.tableMeta.rowsPerPage.value = rowsPerPage
  d_Denominator.value = rowsPerPage
}
</script>

<template>
  <div class="_c_pager">
    <!-- 表示件数テキストエリア -->
    <div class="_number_views">
      {{ (modelValue - 1) * d_Denominator + 1 }}-{{ c_MaxNum }}(全{{
        tableMeta?.rowCount ?? p_TableLength
      }}件)
    </div>
    <CDropdown
      :p_Options="options"
      class="_denominator"
      :modelValue="d_Denominator"
      @update:modelValue="changeDenominator"
    />
    <div class="_btn_area">
      <button class="_btn" :class="{ _selectNum: modelValue === 1 }" @click="setPageNr(1)">
        <div class="_hover_effect"></div>
        {{ 1 }}
      </button>
      <div v-if="c_ButtonArr[0] != 1 + 1 && pageCount > 4" class="_ellipsis">
        <MDIcon name="more_horiz" class="_more_horiz" />
      </div>
      <button
        v-for="index in c_ButtonArr"
        :key="index"
        class="_btn"
        :class="{ _selectNum: modelValue === index }"
        @click="setPageNr(index)"
      >
        <div class="_hover_effect"></div>
        {{ index }}
      </button>
      <div
        v-if="c_ButtonArr[c_ButtonArr.length - 1] != pageCount - 1 && pageCount > 4"
        class="_ellipsis"
      >
        <MDIcon name="more_horiz" class="_more_horiz" />
      </div>
      <button
        v-if="1 < pageCount"
        class="_btn"
        :class="{ _selectNum: modelValue === pageCount }"
        @click="setPageNr(pageCount)"
      >
        <div class="_hover_effect"></div>
        {{ pageCount }}
      </button>
    </div>
  </div>
</template>
<style lang="sass">
._c_pager
  display: flex
  align-items: center

._denominator
  width: 75px
  margin-right: 5px

._number_views
  font-size: 12px
  margin-right: 10px
  white-space: nowrap

._btn_area
  height: 40px
  display: flex
  vertical-align: middle

._btn
  position: relative
  display: inline
  background: #ffffff
  border: none
  width: 40px
  height: 40px
  cursor: pointer
  box-shadow: 0 0 6px rgb(0 0 0 / 16%)

._ellipsis
  display: inline-block
  background: #ffffff
  text-align: center
  border: none
  width: 30px
  height: 40px
  box-shadow: 0 0 6px rgb(0 0 0 / 16%)

._more_horiz
  margin: calc(20px - 8px) auto
  font-size: 16px
  display: inline-block

._hover_effect
  position: absolute
  background: #EFEFEF
  opacity: 0
  height: 100%
  width: 100%
  top: 0
  left: 0

._btn:hover ._hover_effect
  opacity: .4

._selectNum
  background: var(--q-primary,#000000)
  color: #ffffff

._selectNum:hover ._hover_effect
  opacity: .15
</style>
