<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';
  const statusOpt = [
    { label: '正常', value: 'normal' },
    { label: '已撤销', value: 'cancel' },
  ];
  const messageTypeOpt = [
    { label: '通知', value: 'system' },
    { label: '任务消息', value: 'task' },
  ];
  const sendTypeOpt = [
    { label: '群发', value: 'all' },
    { label: '指定用户发送', value: 'user' },
    { label: '指定角色发送', value: 'role' },
    { label: '指定调节中心发送', value: 'tentant' },
  ];
  const serviceTypeOpt = [
    { label: '流程', value: 'bpm' },
    { label: '提示', value: 'tip' },
  ];
  const proTable = ref();
  const socketStore = useSocketStore();
  const config = reactive({
    columns: [
      { field: 'title', minWidth: 200, title: '消息标题', search: { el: 'input' } },
      {
        field: 'content',
        title: '消息内容',
        width: 160,
        search: { el: 'input', props: { clearable: true } },
      },
      {
        field: 'sender.username',
        title: '发送人名称',
        width: 160,
        search: { el: 'input', props: { clearable: true }, key: 'senderName' },
      },
      {
        field: 'status',
        title: '状态',
        width: 100,
        enum: statusOpt,
        search: { el: 'select', props: { filterable: true }, span: 1 },
        fieldNames: { label: 'label', value: 'value' },
        slots: {
          default: ({ row }) => {
            return (
              <ElTag type={row.status == 'normal' ? 'primary' : 'danger'}>
                {row.status == 'normal' ? '正常' : '已撤销'}
              </ElTag>
            );
          },
        },
      },
      {
        field: 'sendTime',
        title: '发送时间',
        width: 170,
      },
      {
        field: 'messageType',
        width: 100,
        title: '消息类型',
        enum: messageTypeOpt,
        search: { el: 'select', props: { filterable: true }, span: 1 },
        fieldNames: { label: 'label', value: 'value' },
        slots: {
          default: ({ row }) => {
            return (
              <>
                {row.messageType
                  ? messageTypeOpt.find((v) => v.value === row.messageType).label
                  : ''}
              </>
            );
          },
        },
      },
      {
        field: 'sendType',
        width: 100,
        title: '发送方式',
        enum: sendTypeOpt,
        search: { el: 'select', props: { filterable: true }, span: 1 },
        fieldNames: { label: 'label', value: 'value' },
        slots: {
          default: ({ row }) => {
            return (
              <>{row.sendType ? sendTypeOpt.find((v) => v.value === row.sendType).label : ''}</>
            );
          },
        },
      },
      {
        field: 'serviceType',
        width: 100,
        title: '业务类型',
        enum: serviceTypeOpt,
        search: { el: 'select', props: { filterable: true }, span: 1 },
        fieldNames: { label: 'label', value: 'value' },
        slots: {
          default: ({ row }) => {
            return (
              <>
                {row.serviceType
                  ? serviceTypeOpt.find((v) => v.value === row.serviceType).label
                  : ''}
              </>
            );
          },
        },
      },
    ],
  });
  const query = () => proTable.value?.search();
  watch(
    () => socketStore.msg,
    (newValue, oldValue) => {
      query();
    }
  );
  onMounted(() => {
    query();
  });
</script>
