<script setup lang="ts">
  import useLoading from '@/hooks/loading';
  import { onMounted, ref } from 'vue';
  import { AnyObject } from '@/types/global';
  import { Card, Input, Link, Select } from '@arco-design/web-vue';
  import NumberTableColumn from '@/components/filter/number-table-column.vue';
  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
  import FilterTableColumn from '@/components/filter/table-column.vue';
  import useProjectApi from '@/http/project';
  import { Project } from '@/utils/model';

  const props = defineProps<{ selectKey: number }>();
  const emits = defineEmits<{ (e: 'onChange', value: { link_id: number; link_name: string }): void }>();

  const { loading, setLoading } = useLoading(false);
  const { get, promoteStatusOption } = useProjectApi;

  const filter = ref({ name: '', is_promote: '', status: 1, setWith: ['master:id,nick_name'] });
  const tableRef = ref();

  const onQuery = async (params: AnyObject) => {
    setLoading(true);
    return get({ ...filter.value, ...params }).finally(() => setLoading(false));
  };

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

  const onReset = () => {
    filter.value = { name: '', is_promote: '', status: 1, setWith: ['master:id,nick_name'] };
    onSearch();
  };

  onMounted(() => onReset());

  const onClick = (record: Project) => {
    emits('onChange', record.id === props.selectKey ? { link_id: 0, link_name: '' } : { link_id: record.id, link_name: record.name });
  };
</script>

<template>
  <Card :bordered="false">
    <FilterSearch :loading="loading" :model="filter" :inline="true" @search="onSearch" @reset="onReset">
      <FilterSearchItem label="厂牌名称">
        <Input v-model="filter.name" allow-clear placeholder="请输入" />
      </FilterSearchItem>
      <FilterSearchItem label="确认分享人">
        <Select v-model="filter.is_promote" :options="promoteStatusOption" allow-clear placeholder="请输入" />
      </FilterSearchItem>
    </FilterSearch>
    <FilterTable ref="tableRef" :loading="loading" :on-query="onQuery" :page-size="10">
      <FilterTableColumn title="厂牌名称" data-index="name" :width="200" />
      <FilterTableColumn title="简介" data-index="intro" :width="240" />
      <EnumTableColumn title="确认分享人" data-index="is_promote" :option="promoteStatusOption" :dark-value="0" :width="130" />
      <NumberTableColumn title="上架歌曲数" data-index="activity_up_count" :dark-value="0" :width="110" />
      <NumberTableColumn title="已匹配歌曲数" data-index="activity_match_count" :dark-value="0" :width="110" />
      <NumberTableColumn title="已发行歌曲数" data-index="activity_send_count" :dark-value="0" :width="110" />
      <FilterTableColumn title="主理人" data-index="master.nick_name" :width="160" />
      <FilterTableColumn title="操作" :width="100">
        <template #default="{ record }: { record: Project }">
          <Link @click="onClick(record)">{{ record.id !== selectKey ? '选择' : '取消选择' }}</Link>
        </template>
      </FilterTableColumn>
    </FilterTable>
  </Card>
</template>

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