<script setup lang="ts">
  import useLoading from '@/hooks/loading';
  import { ref } from 'vue';
  import { AnyObject } from '@/types/global';
  import { useApplyApi } from '@/http/activity';

  const { loading } = useLoading(false);
  const filter = ref<AnyObject>({});
  const tableRef = ref();

  const onSearch = () => tableRef.value?.onPageChange(1);

  const onReset = () => {
    filter.value = { songName: '', userName: '', projectName: '', tagName: '', auditStatus: '', createBetween: [] };
    onSearch();
  };
</script>

<template>
  <page-view has-card has-bread>
    <filter-search :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
      <filter-search-item field="song_name" label="歌曲名称">
        <a-input v-model="filter.songName" :allow-clear="true" placeholder="请输入" />
      </filter-search-item>
      <filter-search-item field="projectName" label="厂牌名称">
        <a-input v-model="filter.projectName" :allow-clear="true" placeholder="请输入" />
      </filter-search-item>
      <filter-search-item field="tagName" label="标签名称">
        <a-input v-model="filter.tagName" :allow-clear="true" placeholder="请输入" />
      </filter-search-item>
      <filter-search-item field="userName" label="创建人">
        <a-input v-model="filter.userName" :allow-clear="true" placeholder="请输入" />
      </filter-search-item>
      <filter-search-item field="createBetween" label="创建时间">
        <a-range-picker v-model="filter.createBetween" :allow-clear="true" />
      </filter-search-item>
      <filter-search-item field="audit_status" label="状态">
        <a-select v-model="filter.auditStatus" :options="useApplyApi.statusOption" placeholder="请选择" />
      </filter-search-item>
    </filter-search>
  </page-view>
</template>

<style scoped lang="less"></style>