<script setup lang="ts">
import type { SelectProps } from "ant-design-vue";
import { ref } from "vue";
import type { PropType } from "vue";
import type { SearchResult } from "@/types/search.types";
import type { Pagination, ResultMode } from "@/types/search.types";
import IconSimpleList from "@/components/icons/IconSimpleList.vue";
import IconDetailList from "@/components/icons/IconDetailList.vue";

// 排序选择项列表
const sortOptions = ref<SelectProps["options"]>([
  { value: "Relevance", label: "按相关度排序" },
  { value: "DateDesc", label: "按时间由近到远排序" },
  { value: "DateAsc", label: "按时间由远到近排序" },
  { value: "CitedDesc", label: "按被引量排序" },
]);

defineProps({
  data: {
    type: Object as PropType<SearchResult>,
    required: true,
  },
  sort: {
    type: String,
    required: true,
    validator(value: string) {
      return ["Relevance", "DateDesc", "DateAsc", "CitedDesc"].includes(value);
    }
  },
  pagination: {
    type: Object as PropType<Pagination>,
    default() {
      return {page: 1, size: 10} as Pagination
    }
  }
});

const emits = defineEmits<{
  (e: "paginationChange", field: string, keyword: string): void;
  (e: "update:sort", sort: string): void;
  (e: "modeChange", mode: ResultMode): void;
}>();

/**
 * 排序方式改变监听函数
 * @param value 排序方式
 */
function handleSortChange(value: string) {
  emits("update:sort", value);
}

function onPageChange(size: string, page: string) {
  emits("paginationChange", size, page);
}

const resultMode = ref('detail');

function onModeChange(mode: ResultMode) {
  resultMode.value = mode;
  emits("modeChange", mode);
}
</script>

<template>
  <div class="search-result-toolbar">
    <a-space>
      <span>搜索结果：共 {{ data.total }} 条</span>
      <a-divider type="vertical"></a-divider>
      <span style="display: flex; justify-items: center; align-items: center;">
        <span>显示：</span>
        <span @click="onModeChange('brief')" class="list-icon" :class="{'list-icon-active': resultMode == 'brief'}">
          <IconSimpleList style="cursor: pointer;" />
        </span>
        <span @click="onModeChange('detail')" class="list-icon" :class="{'list-icon-active': resultMode == 'detail'}">
          <IconDetailList style="cursor: pointer;" />
        </span>
      </span>
      <a-divider type="vertical"></a-divider>
      <a-select
        ref="select"
        :value="sort"
        style="width: 160px"
        size="small"
        :options="sortOptions"
        @change="handleSortChange"
      ></a-select>
    </a-space>
    <a-pagination
      :current="pagination.page"
      :pageSize="pagination.size"
      :total="data.total"
      show-size-changer
      size="small"
      @change="onPageChange"
    />
  </div>
</template>

<style scoped lang="scss">
.search-result-toolbar {
  display: flex;
  padding-top: 5px;
  justify-content: space-between;
}

.list-icon {
  display: flex;
  align-items: center;

  &.list-icon-active {
    color: #0079C2;
  }
}
</style>
