<template>
  <div class="table-box">
    <ProTable ref="proTable" :config="config" :api="pageMyMesage" />
    <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, showMessage } 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) => {
    showMessage({ id: row.message.id }).then((res) => {
      if (res.success) {
        currentRow.value = res.result;
        showModal.value = true;
      }
    });
  };
  const handleClick = (row) => {
    if (row.message.serviceUrl) {
      router.push(row.message.serviceUrl);
    }
  };
  const config = reactive({
    columns: [
      {
        field: 'message.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: 'message.sender.username',
        title: '发送人名称',
        showOverflow: 'tooltip',
        width: 160,
        search: { el: 'input', props: { clearable: true }, key: 'senderName', labelWidth: 75 },
      },
      {
        field: 'message.status',
        title: '状态',
        showOverflow: 'tooltip',
        width: 100,
        enum: MessageStatus,
        search: { el: 'select', props: { filterable: true,clearable: true }, span: 1, labelWidth: 75 },
        fieldNames: { label: 'label', value: 'value' },
        slots: {
          default: ({ row }) => {
            return (
              <>
                {row.message.status
                  ? MessageStatus.value?.find((v) => v.value === row.message.status)?.label
                  : ''}
              </>
            );
          },
        },
      },
      {
        field: 'readStatus',
        title: '读取状态',
        showOverflow: 'tooltip',
        width: 100,
        enum: ReadStatus,
        search: { el: 'select', props: { filterable: true,clearable: 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: 'message.sendTime',
        showOverflow: 'tooltip',
        title: '发送时间',
        width: 170,
      },
      {
        field: 'message.messageType',
        width: 100,
        showOverflow: 'tooltip',
        title: '消息类型',
        enum: MessageType,
        search: { el: 'select', props: { filterable: true,clearable: true }, span: 1, labelWidth: 75 },
        fieldNames: { label: 'label', value: 'value' },
        slots: {
          default: ({ row }) => {
            return (
              <>
                {row.message.messageType
                  ? MessageType.value?.find((v) => v.value === row.message.messageType)?.label
                  : ''}
              </>
            );
          },
        },
      },
      {
        field: 'sendType',
        width: 100,
        title: '发送方式',
        showOverflow: 'tooltip',
        enum: SendType,
        search: { el: 'select', props: { filterable: true,clearable: true }, span: 1, labelWidth: 75 },
        fieldNames: { label: 'label', value: 'value' },
        slots: {
          default: ({ row }) => {
            return (
              <>
                {row.message.sendType
                  ? SendType.value?.find((v) => v.value === row.message.sendType)?.label
                  : ''}
              </>
            );
          },
        },
      },
      {
        field: 'serviceType',
        width: 100,
        title: '业务类型',
        showOverflow: 'tooltip',
        enum: ServiceType,
        search: { el: 'select', props: { filterable: true,clearable: true  }, span: 1, labelWidth: 75 },
        fieldNames: { label: 'label', value: 'value' },
        slots: {
          default: ({ row }) => {
            return (
              <>
                {row.message.serviceType
                  ? ServiceType.value?.find((v) => v.value === row.message.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>
