<template>
  <div class="table-box">
    <ProTable ref="proTable" :config="config" :api="pageMyMesage"> </ProTable>
  </div>
</template>

<script setup name="systemLog" lang="jsx">
  import { reactive, ref, watch } from 'vue';
  import useSocketStore from '@/stores/modules/websocket';
  import { ElMessageBox, ElMessage, ElTag } from 'element-plus';
  import { onMounted } from 'vue';
  import { pageMyMesage } from '@/api/message';
  import { useDict } from '@/hooks/useDict';
  const { MessageStatus, SendType, MessageType, ServiceType, AuditStatus, CaseStatus } = useDict("MessageStatus","SendType", "MessageType", "ServiceType","AuditStatus", "CaseStatus");

  const proTable = ref();
  const socketStore = useSocketStore();
  const config = reactive({
    columns: [
      {
        field: 'title',
        minWidth: 200,
        showOverflow: 'tooltip',
        title: '消息标题',
        search: { el: 'input', labelWidth: 75 },
      },
      {
        field: 'content',
        title: '消息内容',
        showOverflow: 'tooltip',
        width: 160,
        search: { el: 'input', props: { clearable: true }, labelWidth: 75 },
      },
      {
        field: 'sender.username',
        title: '发送人名称',
        showOverflow: 'tooltip',
        width: 160,
        search: { el: 'input', props: { clearable: true }, key: 'senderName', labelWidth: 75 },
      },
      {
        field: 'status',
        title: '状态',
        showOverflow: 'tooltip',
        width: 100,
        enum: MessageStatus,
        search: { el: 'select', props: { filterable: true }, span: 1, labelWidth: 75 },
        fieldNames: { label: 'label', value: 'value' },
        slots: {
          default: ({ row }) => {
            return (
              <ElTag type={row.status == 'normal' ? 'primary' : 'danger'}>
                {row.status == 'normal' ? '正常' : '已撤销'}
              </ElTag>
            );
          },
        },
      },
      {
        field: 'sendTime',
        showOverflow: 'tooltip',
        title: '发送时间',
        width: 170,
      },
      {
        field: 'messageType',
        width: 100,
        showOverflow: 'tooltip',
        title: '消息类型',
        enum: MessageType,
        search: { el: 'select', props: { filterable: true }, span: 1, labelWidth: 75 },
        fieldNames: { label: 'label', value: 'value' },
        slots: {
          default: ({ row }) => {
            return (
              <>
                {row.messageType
                  ? MessageType.value?.find((v) => v.value === row.messageType)?.label
                  : ''}
              </>
            );
          },
        },
      },
      {
        field: 'sendType',
        width: 100,
        title: '发送方式',
        showOverflow: 'tooltip',
        enum: SendType,
        search: { el: 'select', props: { filterable: true }, span: 1, labelWidth: 75 },
        fieldNames: { label: 'label', value: 'value' },
        slots: {
          default: ({ row }) => {
            return (
              <>{row.sendType ? SendType.value?.find((v) => v.value === row.sendType)?.label : ''}</>
            );
          },
        },
      },
      {
        field: 'serviceType',
        width: 100,
        title: '业务类型',
        showOverflow: 'tooltip',
        enum: ServiceType,
        search: { el: 'select', props: { filterable: true }, span: 1, labelWidth: 75 },
        fieldNames: { label: 'label', value: 'value' },
        slots: {
          default: ({ row }) => {
            return (
              <>
                {row.serviceType
                  ? ServiceType.value?.find((v) => v.value === row.serviceType)?.label
                  : ''}
              </>
            );
          },
        },
      },
    ],
  });
  const query = () => proTable.value?.search();
  watch(
    () => socketStore.msg,
    (newValue, oldValue) => {
      query();
    }
  );
  onMounted(() => {
    query();
  });
</script>
