<script setup lang="ts">
  import { createVNode, onBeforeMount, onMounted, ref } from 'vue';
  import { usePushLevelRecordApi } from '@/http/broker';
  import { AnyObject, Option } from '@/types/global';
  import useLoading from '@/hooks/loading';

  import useTagApi from '@/http/Tag';
  import { Input, Select, Link, TableData, Textarea } from '@arco-design/web-vue';
  import FilterSearch from '@/components/filter/search.vue';
  import FilterSearchItem from '@/components/filter/search-item.vue';
  import FilterTable from '@/components/filter/table.vue';
  import FilterTableColumn from '@/components/filter/table-column.vue';
  import UserTableColumn from '@/components/filter/user-table-column.vue';
  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
  import SpaceTableColumn from '@/components/filter/space-table-column.vue';
  import { createFormItemVNode, createFormVNode, createModalVNode } from '@/utils/createVNode';
  import { get } from 'lodash';

  const props = defineProps<{ recordId: number }>();

  const { getChildren } = usePushLevelRecordApi;
  const { loading, setLoading } = useLoading(false);
  const filter = ref({ userName: '', authIds: [], status: '', readStatus: '' });
  const tableRef = ref();

  const statusOption = [
    { value: 0, label: '待发送' },
    { value: 1, label: '发送中' },
    { value: 2, label: '已发送' },
    { value: 3, label: '已撤销' },
    { value: -1, label: '发送失败' },
  ];

  const readStatusOption = [
    { value: 0, label: '未查看' },
    { value: 1, label: '已查看' },
  ];

  const onQuery = async (params: AnyObject) => {
    setLoading(true);
    return getChildren(props.recordId, {
      ...filter.value,
      ...params,
      setWith: ['user:id,nick_name,identity', 'user.authTags:id,name'],
    }).finally(() => setLoading(false));
  };

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

  const onReset = () => {
    filter.value = { userName: '', authIds: [], status: '', readStatus: '' };
    onSearch();
  };

  onMounted(() => onReset());

  const authTagOptions = ref<Option[]>([]);

  onBeforeMount(() => useTagApi.getOption({ type: 4 }).then((data) => (authTagOptions.value = data)));

  const onView = (row: TableData) => {
    createModalVNode(
      () =>
        createFormVNode({ model: row, autoLabelWidth: true }, [
          createFormItemVNode({ label: '通知标题' }, createVNode(Input, { modelValue: row.title })),
          createFormItemVNode(
            { label: '通知内容', rowClass: 'mb-0' },
            createVNode(Textarea, { modelValue: row.content, autoSize: { minRows: 6, maxRows: 12 } })
          ),
        ]),
      {
        title: '查看',
        titleAlign: 'center',
        footer: false,
        escToClose: true,
        maskClosable: true,
      }
    );
  };
</script>

<template>
  <FilterSearch :loading="loading" :model="filter" @search="onSearch" @reset="onReset">
    <FilterSearchItem label="经纪人">
      <Input v-model="filter.userName" placeholder="请输入" allow-clear />
    </FilterSearchItem>
    <FilterSearchItem label="认证能力">
      <Select
        v-model="filter.authIds"
        placeholder="请选择"
        :options="authTagOptions"
        multiple
        allow-clear
        allow-search
        :max-tag-count="2"
      />
    </FilterSearchItem>
    <FilterSearchItem label="发送状态">
      <Select v-model="filter.status" :options="statusOption" placeholder="请选择" allow-clear />
    </FilterSearchItem>
    <FilterSearchItem label="用户行为">
      <Select v-model="filter.readStatus" :options="readStatusOption" placeholder="请选择" allow-clear />
    </FilterSearchItem>
  </FilterSearch>
  <FilterTable ref="tableRef" :loading="loading" :on-query="onQuery">
    <UserTableColumn title="经纪人" data-index="user_id" user="user" show-href :width="160" />
    <FilterTableColumn title="认证能力" data-index="user_id" :width="200">
      <template #default="{ record }">
        <!-- eslint-disable -->
        <span v-if="get(record, 'user.auth_tags')">
          {{
            get(record, 'user.auth_tags')
              ?.map((item: any) => item.name)
              ?.join('｜') || ''
          }}
        </span>
        <!--eslint-enable-->
        <span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
      </template>
    </FilterTableColumn>
    <FilterTableColumn title="通知内容" data-index="content" :width="200" />
    <FilterTableColumn title="发送时间" data-index="send_at" :width="180" />
    <EnumTableColumn title="发送状态" data-index="status" :option="statusOption" :width="100" />
    <FilterTableColumn data-index="read_at" title="用户行为" :width="100">
      <template #default="{ record }: { record: { read_at?: string } }">{{ record.read_at ? '已查看' : '未查看' }}</template>
    </FilterTableColumn>
    <SpaceTableColumn data-index="operation" title="操作" :width="70">
      <template #default="{ record }">
        <Link class="link-hover" :hoverable="false" @click="onView(record)">查看</Link>
      </template>
    </SpaceTableColumn>
  </FilterTable>
</template>

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