<template>
  <div class="table-box">
    <ProTable ref="proTable" :config="config" :api="pageMesage">
      <template #left_buttons>
        <el-button type="primary" @click="addNotice()">信息发布</el-button>
      </template>
    </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="text-sm pt-1" v-if="currentRow.sendTime">{{ currentRow.username }}</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>
    <sendNotice ref="sendNoticeRef" @success="query" />
  </div>
</template>

<script setup name="systemLog" lang="jsx">
  import { getUserPage } from '@/api/user';
  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 sendNotice from './sendNotice.vue';
  import { pageMesage, showMessage, sendMesage } 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 users = ref([]);
  const sendNoticeRef = ref();
  const currentRow = ref();
  const socketStore = useSocketStore();
  const router = useRouter();
  const showContent = (row) => {
    showMessage({ id: row.id }).then((res) => {
      if (res.success) {
        if (res.result.receiversIds) {
          const list = [];
          res.result.receiversIds.forEach((element) => {
            const item = users.value?.find((ii) => ii.id === element);
            if (item) {
              list.push(item);
            }
          });
          res.result.username = list.map((v) => v.username).join(',');
        }
        currentRow.value = res.result;
        showModal.value = true;
      }
    });
  };
  const handleEdit = (row) => {
    showMessage({ id: row.id }).then((res) => {
      if (res.success) {
        sendNoticeRef.value?.openModal(res.result);
      }
    });
  };
  const handleSend = (row) => {
    sendMesage({ id: row.id }).then((res) => {
      if (res.success) {
        ElMessage.success({
          message: '发送成功',
          plain: true,
        });
        query();
      }
    });
  };
  setTimeout(() => {
    getUserPage({ current: 1, size: 9999999 }).then((res) => {
      if (res.success) {
        users.value = res.result.content;
      }
    });
  });
  const addNotice = () => {
    sendNoticeRef.value?.openModal();
  };
  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,clearable: true }, span: 1, labelWidth: 75 },
        fieldNames: { label: 'label', value: 'value' },
        slots: {
          default: ({ row }) => {
            return (
              <>
                {row.status ? MessageStatus.value?.find((v) => v.value === row.status)?.label : ''}
              </>
            );
          },
        },
      },
      {
        field: 'sendTime',
        showOverflow: 'tooltip',
        title: '发送时间',
        width: 170,
      },
      {
        field: '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.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,clearable: 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,clearable: 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: 230,
        slots: {
          default: ({ row, rowIndex }) => {
            return (
              <>
                <ElButton type="primary" onClick={() => showContent(row)}>
                  查看详情
                </ElButton>
                <ElButton
                  type="primary"
                  onClick={() => handleEdit(row)}
                  disabled={row.status === 'push'}
                >
                  编辑
                </ElButton>
                <ElButton
                  type="primary"
                  onClick={() => handleSend(row)}
                  disabled={row.status === 'push'}
                >
                  发送
                </ElButton>
              </>
            );
          },
        },
      },
    ],
  });
  const query = () => proTable.value?.search();
  watch(
    () => socketStore.msg,
    (newValue, oldValue) => {
      query();
    }
  );
  onMounted(() => {
    query();
  });
</script>
