<template>
  <syCommonDialog
    type="element"
    show-mask
    :visible="visible"
    @close-popup="$emit('update:visible', false)"
    element-dialog-size="big"
    :element-dialog-props="{
      title: '选择专辑',
    }"
  >
    <div v-if="visible">
      <div
        class="searchLine flex w-full items-center justify-between"
        style="
          padding-left: 16px;
          padding-right: 13px;
          margin-top: -23px;
          margin-bottom: 19px;
        "
      >
        <div class="title whitespace-nowrap" v-if="searchInput === ''">
          全部专辑
        </div>
        <div v-else>
          <span class="title">所有专辑 ></span>
          <span class="noResult">搜索结果</span>
        </div>
        <div style="width: 228px">
          <Search
            v-model="searchInput"
            placeholder="搜索专辑"
            style="
              border-radius: 4px;
              border: 1px solid #dbdfe6;
              height: 32px;
              background: #ffffff;
            "
          ></Search>
        </div>
      </div>
      <syScrollBar
        height="400px"
        @scroll-to-end="fetchNextPage"
        ref="elScrollBarRef"
        v-loading="loading"
      >
        <AlbumList
          :list="tableData"
          @select="
            (v) => {
              $emit('select', v);
              $emit('update:visible', false);
            }
          "
        ></AlbumList>
        <div
          v-if="tableData.length === 0 && debouncedSearchInput === ''"
          class="text-center"
        >
          <div class="tip" style="margin-top: 125px">
            您还未创建专辑，先去创建吧~
          </div>
          <syButton
            style="margin-top: 46px"
            mode="elementBtn"
            type="primary"
            size="large"
            @click="$router.push('/albumManagement')"
            >去创建</syButton
          >
        </div>
        <div v-if="tableData.length === 0 && debouncedSearchInput !== ''">
          <Empty
            v-show="!loading && tableData.length === 0"
            class="absolute top-1/3 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
          >
            没有找到匹配结果，尝试其他关键词搜索
          </Empty>
        </div>
      </syScrollBar>
    </div>
  </syCommonDialog>
</template>

<script setup lang="ts">
import { syCommonDialog, syButton, syScrollBar } from "cqk-sy-ui";
import { ref, watch } from "vue";
import Search from "@/components/Search/index.vue";
import AlbumList from "./AlbumList.vue";
import { useTableData } from "@/components/Table/hooks";
import { debounce } from "lodash";
import { $ajax } from "@/service";
import { URLS } from "@/service/URL";
import Empty from "@/components/Empty/index.vue";

defineProps<{
  visible: boolean;
}>();
const emit = defineEmits(["update:visible", "select"]);
const elScrollBarRef = ref<InstanceType<typeof AlbumList>>();

const searchInput = ref("");
const debouncedSearchInput = ref("");

const { tableData, fetchNextPage, refetch, loading } = useTableData({
  async fetchData({ page, page_size }: { page: number; page_size: number }) {
    const ret = await $ajax({
      url: URLS.categories,
      type: "get",
      params: {
        page,
        page_size,
        name: searchInput.value,
        ignore_empty: true,
      },
    });
    return {
      total: ret!.data.total,
      data: ret?.data.results || [],
    };
  },
});

const debouncedSearch = debounce(async (newSearch) => {
  await refetch();
  debouncedSearchInput.value = newSearch;
}, 1000);

watch(searchInput, (newSearch) => {
  debouncedSearch(newSearch);
});
</script>

<style scoped lang="scss">
.searchLine {
  height: 46px;
  background: #fafafc;
  border-radius: 4px;
  border: 1px solid #f1f2f5;
  .title {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #353535;
  }
  .noResult {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: var(--sy-gray);
  }
}
.tip {
  text-align: center;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ababab;
}
</style>
