<template>
  <q-btn icon="more_horiz" flat round>
    <q-menu class="pi-menu" :offset="[0, 4]">
      <q-list :style="{minWidth: '200px'}">
        <template v-for="(action, index) in actions" :key="`action-${index}`">
          <template v-if="true">
            <q-separator class="bg-accent" v-if="action.separator" />
            <o-common-item v-bind="action"
                           class="text-tips"
                           :class="{ 'active': action.selected }"
                           @click="onAction(action)"
                           clickable
                           closable
                           right-side>
              <template #side>
                <q-icon :name="orderDesc ? 'south' : 'north'"
                        v-if="action.sortable" />
              </template>
            </o-common-item>
          </template>
        </template>
      </q-list>
    </q-menu>
  </q-btn>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import useCommon from 'core/hooks/useCommon'
const emit = defineEmits(['view', 'sort'])

const { t } = useCommon()
const orderField = ref('recent')
const orderDesc = ref(true)

const actions = computed(() => {
  return [
    {
      label: t('sortBy.recent'),
      value: 'recent',
      icon: 'schedule',
      selected: orderField.value === 'recent',
      sortable: true,
      separator: false
    },
    {
      label: t('sortBy.pageNumber'),
      value: 'page',
      icon: 'format_list_numbered_rtl',
      sortable: true,
      selected: orderField.value === 'page',
    },
  ]
})

function onAction (action :any) {
  const value = action.value
  switch (value) {
    case 'recent':
      if (orderField.value === value) {
        orderDesc.value = !orderDesc.value
      } else {
        orderDesc.value = true
      }
      orderField.value = value
      emit('sort', { updateTime: orderDesc.value ? 'desc' : 'asc' })
      break
    case 'page':
      if (orderField.value === value) {
        orderDesc.value = !orderDesc.value
      } else {
        orderDesc.value = false
      }
      orderField.value = value
      emit('sort', { page: orderDesc.value ? 'desc' : 'asc' })
      break
    default:
      break
  }
}
</script>
