<script setup lang="ts">
  import { Input, Select, Table, TableColumn, Form, FormItem, Grid } from '@arco-design/web-vue';
  import { computed, ref, toRef } from 'vue';

  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
  import NumberTableColumn from '@/components/filter/number-table-column.vue';
  import { BrokerUserConfigItem } from '@/http/broker';

  const props = defineProps<{ source: BrokerUserConfigItem[] }>();

  const source = toRef(props, 'source', []);

  const matchOption = [
    { value: 0, label: '匹配失败' },
    { value: 1, label: '已匹配' },
  ];

  const filter = ref({ nick_name: '', identifier: '', status: '' });

  const filterSource = computed((): BrokerUserConfigItem[] => {
    return source.value
      ?.filter((item) => filter.value.nick_name?.length === 0 || item.user?.nick_name?.includes(filter.value.nick_name))
      ?.filter((item) => filter.value.identifier?.length === 0 || item.identifier?.includes(filter.value.identifier))
      ?.filter((item) => filter.value.status?.length === 0 || item.status?.toString().includes(filter.value.status));
  });
</script>

<template>
  <Form :model="filter" size="small" layout="horizontal" auto-label-width style="flex-wrap: unset">
    <Grid :cols="3" :col-gap="16" :row-gap="16">
      <FormItem label="经纪人" show-colon>
        <Input v-model="filter.nick_name" placeholder="请输入" allow-clear />
      </FormItem>
      <FormItem label="分类" show-colon>
        <Input v-model="filter.identifier" placeholder="请输入" allow-clear />
      </FormItem>
      <FormItem label="匹配结果" show-colon>
        <Select v-model="filter.status" :options="matchOption" placeholder="请选择" allow-clear />
      </FormItem>
    </Grid>
  </Form>
  <Table
    style="height: 300px"
    :data="filterSource"
    size="small"
    :show-header="true"
    :bordered="false"
    :scroll="{ y: 300 }"
    :virtual-list-props="{ height: 300 }"
    row-key="user_id"
    :pagination="false"
    :table-layout-fixed="true"
  >
    <template #columns>
      <TableColumn title="经纪人ID" data-index="user_id" :width="100" />
      <TableColumn title="经纪人" data-index="user.nick_name">
        <template #cell="{ record }">
          <span v-if="record.user">{{ record.user.nick_name }}</span>
          <span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
        </template>
      </TableColumn>
      <TableColumn title="分类" data-index="identifier" />
      <NumberTableColumn title="团队歌手额度" data-index="singer_num" />
      <EnumTableColumn title="匹配结果" data-index="status" :option="matchOption" :width="120" />
    </template>
  </Table>
</template>

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