<template>
  <div class="table-box">
    <ProTable ref="proTable" :config="config" :api="pageMyMesage"> </ProTable>
    <vxe-modal
      resize
      v-model="showModal"
      title="消息详情"
      height="482"
      width="550"
      show-footer
      esc-closable
    >
      <div class="w-full px-3 h-full overflow-auto py-4">
        <div class=" text-xs text-gray-400">{{currentRow.sendTime}}</div>
        <div class=" font-bold text-base pt-1">{{currentRow.title}}</div>
        <div v-html="currentRow.content" class="text-base pt-1"></div>
      </div>
    </vxe-modal>
  </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 { useRouter } from 'vue-router';
  import { pageMyMesage } from '@/api/message';
  import { useDict } from '@/hooks/useDict';
  const { MessageStatus, SendType, MessageType, ServiceType, AuditStatus, CaseStatus, ReadStatus } = useDict("MessageStatus","ReadStatus","SendType", "MessageType", "ServiceType","AuditStatus", "CaseStatus");
  const showModal = ref(false)
  const proTable = ref();
  const currentRow = ref();
  const socketStore = useSocketStore();
  const router = useRouter();
  const showContent = (row) => {
    currentRow.value = row
    showModal.value = true

  }
  const handleClick = (row) => {
    if (row.serviceUrl) {
      router.push(row.serviceUrl)
    }
  }
  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 },
      //   slots: {
      //     default: ({ row }) => {
      //       return (
      //         <div domPropsInnerHTML={row.content}>
      //         </div>
      //       );
      //     },
      //   },
      // },
      {
        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: 'readStatus',
        title: '读取状态',
        showOverflow: 'tooltip',
        width: 100,
        enum: ReadStatus,
        search: { el: 'select', props: { filterable: true }, span: 1, labelWidth: 75 },
        fieldNames: { label: 'label', value: 'value' },
        slots: {
          default: ({ row }) => {
            return (
              <ElTag type={row.readStatus == 'read' ? 'primary' : 'danger'}>
                {row.readStatus == 'read' ? '已读' : '未读'}
              </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
                  : ''}
              </>
            );
          },
        },
      },
      {
          field: 'code',
          title: '操作',
          width: 160,
          slots: {
            default: ({ row, rowIndex }) => {
              return (
                <>
                  <ElButton type="primary" onClick={() => showContent(row)}>
                    查看详情
                  </ElButton>
                  <ElButton type="primary" onClick={() => handleClick(row)}>
                    处理
                  </ElButton>
                </>
              );
            },
          },
        }
    ],
  });
  const query = () => proTable.value?.search();
  watch(
    () => socketStore.msg,
    (newValue, oldValue) => {
      query();
    }
  );
  onMounted(() => {
    query();
  });
</script>
