<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import FilterTable from '@/components/filter/table.vue';
  import FilterTableColumn from '@/components/filter/table-column.vue';
  import NumberTableColumn from '@/components/filter/number-table-column.vue';

  import useLoading from '@/hooks/loading';
  import { AnyObject } from '@/types/global';
  import { Form, FormItem, Space, Input, Button, TableColumn } from '@arco-design/web-vue';
  import useProjectApi from '@/http/project';
  import { Project } from '@/utils/model';
  import { truncate } from 'lodash';

  const { loading, setLoading } = useLoading(false);
  const filter = ref({ name: '' });
  const tableRef = ref();

  defineProps<{ userKey?: number }>();

  const emits = defineEmits<{ (e: 'check', value: object): void }>();
  const onQuery = async (params: AnyObject) => {
    setLoading(true);
    return useProjectApi
      .get({ ...filter.value, status: 1, setWithCount: ['activity_up'], ...params, sortBy: 'weight', sortType: 'desc' })
      .finally(() => setLoading(false));
  };

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

  const onReset = () => {
    filter.value = { name: '' };
    onSearch();
  };

  onMounted(() => onReset());

  const onSubmit = (row: Project) => {
    emits('check', {
      link_id: row.id,
      link_name: row.name,
      title: truncate(row.name, { length: 12 }),
      cover: row.cover,
      desc1: '',
      desc2: `上架歌曲：${row.activity_up_count}首`,
      desc3: truncate(row.intro, { length: 36 }),
    });
  };
</script>

<template>
  <Form :model="filter" layout="inline" size="mini">
    <FormItem label="厂牌名称" show-colon>
      <Input v-model="filter.name" allow-clear />
    </FormItem>
    <FormItem hide-label>
      <Space>
        <Button type="primary" @click="onSearch">搜索</Button>
        <Button @click="onReset">重置</Button>
      </Space>
    </FormItem>
  </Form>
  <FilterTable
    ref="tableRef"
    size="mini"
    :loading="loading"
    :on-query="onQuery"
    style="height: 300px; margin-top: 10px"
    :scrollbar="true"
    :scroll="{ y: 300 }"
    :simple-page="true"
  >
    <FilterTableColumn data-index="name" title="厂牌名称" />
    <NumberTableColumn data-index="activity_up_count" title="上架歌曲数" :width="100" />
    <TableColumn title="操作" :width="80">
      <template #cell="{ record }">
        <Button size="mini" type="primary" @click="onSubmit(record)">
          {{ record.id === userKey ? '更新' : '选择' }}
        </Button>
      </template>
    </TableColumn>
  </FilterTable>
</template>

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