<script setup lang="ts">
  import useLoading from '@/hooks/loading';
  import { AnyObject, QueryForParams } from '@/types/global';
  import { usePushMatchRecordApi } from '@/http/broker';
  import { computed, createVNode, onMounted, ref } from 'vue';
  import UserTableColumn from '@/components/filter/user-table-column.vue';
  import LinkTableColumn from '@/components/filter/link-table-column.vue';
  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
  import SpaceTableColumn from '@/components/filter/space-table-column.vue';
  import { Input, TableData, Textarea } from '@arco-design/web-vue';
  import { createFormItemVNode, createFormVNode, createModalVNode } from '@/utils/createVNode';
  import { promiseToBoolean } from '@/utils';
  import usePermission from '@/hooks/permission';

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

  const tableRef = ref();
  const filter = ref({ brokerName: '', userName: '', projectName: '', activityName: '', status: '', read_status: '' });

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

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

  const queryFilter = computed((): QueryForParams => {
    return {
      ...filter.value,
      setWith: ['activity:id,song_name', 'project:id,name', 'user:id,nick_name,identity', 'broker:id,nick_name,identity'],
      sortBy: 'id',
      sortType: 'desc',
    };
  });

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

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

  const onReset = () => {
    filter.value = { brokerName: '', userName: '', projectName: '', activityName: '', status: '', read_status: '' };
    onSearch();
  };

  onMounted(() => onReset());

  const onExport = () => usePushMatchRecordApi.getExport('运营经纪人-合作通知日志', queryFilter.value);

  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',
        hideCancel: true,
        okText: '我知道了',
        escToClose: true,
      }
    );

  const onRollback = (row: TableData) =>
    createModalVNode(`确认撤回发送通知《${row.title}》`, {
      title: '撤销',
      onBeforeOk: () => promiseToBoolean(usePushMatchRecordApi.rollback(row.id)),
      onOk: () => tableRef.value?.onFetch(),
    });

  const onSend = (row: TableData) =>
    createModalVNode(`确认立即发送通知《${row.title}》`, {
      title: '更新操作',
      onBeforeOk: () => promiseToBoolean(usePushMatchRecordApi.send(row.id)),
      onOk: () => tableRef.value?.onFetch(),
    });
</script>

<template>
  <filter-search :loading="loading" :model="filter" @search="onSearch" @reset="onReset">
    <filter-search-item label="经纪人">
      <a-input v-model="filter.brokerName" placeholder="请输入" allow-clear />
    </filter-search-item>
    <filter-search-item label="试唱用户">
      <a-input v-model="filter.userName" placeholder="请输入" allow-clear />
    </filter-search-item>
    <filter-search-item label="歌曲厂牌">
      <a-input v-model="filter.projectName" placeholder="请输入" allow-clear />
    </filter-search-item>
    <filter-search-item label="关联歌曲">
      <a-input v-model="filter.activityName" placeholder="请输入" allow-clear />
    </filter-search-item>
    <filter-search-item label="发送状态">
      <a-select v-model="filter.status" :options="statusOption" placeholder="请选择" allow-clear />
    </filter-search-item>
    <filter-search-item label="用户行为">
      <a-select v-model="filter.read_status" :options="readStatusOption" placeholder="请选择" allow-clear />
    </filter-search-item>
  </filter-search>
  <filter-table ref="tableRef" :loading="loading" :on-query="onQuery">
    <template #tool>
      <export-button :on-download="onExport" />
    </template>
    <user-table-column data-index="broker_id" title="经纪人" user="broker" show-href :width="120" />
    <filter-table-column data-index="broker_level" title="经纪人分类" :width="100">
      <template #default="{ record }: { record: { broker_level: string } }">
        <span v-if="record.broker_level">{{ record.broker_level }}</span>
        <span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
      </template>
    </filter-table-column>
    <user-table-column data-index="user_id" title="试唱用户" user="user" show-href :width="120" />
    <filter-table-column data-index="user_tag" title="试唱用户认证" :width="200" />
    <filter-table-column data-index="project.name" title="歌曲厂牌" :width="120" />
    <link-table-column
      data-index="activity_id"
      title="关联歌曲"
      :width="140"
      :formatter="(record:any) => record.activity?.song_name"
      :to="(record: any) => $router?.push({ name: 'audition-activity-show', params: { id: record.activity_id } })"
    />
    <filter-table-column data-index="content" title="通知内容" :width="240" />
    <filter-table-column data-index="send_at" title="发送时间" :width="180" />
    <enum-table-column data-index="status" title="发送状态" :option="statusOption" :width="100" />
    <filter-table-column data-index="read_at" title="用户行为" :width="100">
      <template #default="{ record }: { record: { read_at?: string } }">{{ record.read_at ? '已查看' : '未查看' }}</template>
    </filter-table-column>
    <space-table-column
      v-if="usePermission().checkPermission(['operation-broker-confirm-record-show', 'operation-broker-confirm-record-send'])"
      data-index="operation"
      title="操作"
      :width="100"
    >
      <template #default="{ record }: { record: { status: number } }">
        <a-link v-permission="['operation-broker-confirm-record-show']" class="link-hover" :hoverable="false" @click="onView(record)">
          查看
        </a-link>
        <a-link
          v-if="record.status === 1"
          v-permission="['operation-broker-confirm-record-send']"
          class="link-hover"
          :hoverable="false"
          @click="onRollback(record)"
        >
          撤销
        </a-link>
        <a-link
          v-if="[-1, 2].includes(record.status)"
          v-permission="['operation-broker-confirm-record-send']"
          class="link-hover"
          :hoverable="false"
          @click="onSend(record)"
        >
          {{ record.status === -1 ? '重试' : '发送' }}
        </a-link>
      </template>
    </space-table-column>
  </filter-table>
</template>

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