<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 EnumTableColumn from '@/components/filter/enum-table-column.vue';
  import useUserApi from '@/http/user';
  import useLoading from '@/hooks/loading';
  import { AnyObject } from '@/types/global';
  import { Form, FormItem, Space, Input, Button, TableColumn } from '@arco-design/web-vue';
  import { User } from '@/utils/model';
  import { truncate } from 'lodash';

  const { loading, setLoading } = useLoading(false);
  const filter = ref({ nick_name: '', real_name: '', status: 1 });
  const tableRef = ref();

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

  const emits = defineEmits<{ (e: 'check', value: object): void }>();
  const onQuery = async (params: AnyObject) => {
    setLoading(true);
    return useUserApi
      .get({
        ...filter.value,
        ...params,
        status: 1,
        setColumn: ['id', 'nick_name', 'real_name', 'identity', 'avatar'],
        setWith: ['styleTags:id,name', 'authTags:id,name', 'opus:id,song_name'],
        sortBy: 'id',
        sortType: 'desc',
      })
      .finally(() => setLoading(false));
  };

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

  const onReset = () => {
    filter.value = { nick_name: '', real_name: '', status: 1 };
    onSearch();
  };

  const identityOption = [
    { value: 0, label: '未认证' },
    { value: 1, label: '音乐人' },
    { value: 2, label: '经纪人' },
    { value: 3, label: '音乐人、经纪人' },
  ];

  onMounted(() => onReset());

  const onSubmit = (row: User) => {
    emits('check', {
      link_id: row.id,
      link_name: row.nick_name,
      title: truncate(row.nick_name, { length: 12 }),
      cover: row.avatar || '',
      desc1: truncate(`其它技能：${row.auth_tags?.map((item) => item.name)?.join(' ')}`, { length: 18 }),
      desc2: truncate(`擅长风格：${row.style_tags?.map((item) => item.name)?.join(' ')}`, { length: 18 }),
      desc3: truncate(`代表作：${row.opus?.map((item) => `《${item.song_name}》`)?.join('')}`, { length: 36 }),
    });
  };
</script>

<template>
  <Form :model="filter" layout="inline" size="mini">
    <FormItem label="用户艺名" show-colon>
      <Input v-model="filter.nick_name" allow-clear />
    </FormItem>
    <FormItem label="用户真名">
      <Input v-model="filter.real_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="nick_name" title="用户真名" />
    <FilterTableColumn data-index="real_name" title="用户艺名" :width="200" />
    <EnumTableColumn data-index="identity" :option="identityOption" title="用户身份" :width="120" />
    <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>