<template>
  <div class="message-reminder flex flex-col h-full">
    <div class="page-action">
      <div
        v-for="item in tabs"
        :key="item.value"
        :class="[
          'page-tab',
          {
            'is-active': params.status === item.value,
            'is-mark': item.value === 'false' && workStore.counts.message,
          },
        ]"
        @click="switchTab(item)"
        >{{ item.label }}</div
      >
    </div>
    <SearchForm :fields="fields" :params="params" :search="search">
      <template #service="{ item, params }">
        <select-service-unit
          v-model="params[item.prop]"
          clearable
        ></select-service-unit>
      </template>
    </SearchForm>
    <div v-loading="loading" class="page-wrap flex-1">
      <MessageList
        :tableData="tableData"
        :pagination="pagination"
        :onChange="onChange"
        @open="open"
      ></MessageList>
    </div>

    <t-drawer
      v-model:visible="visible"
      header="消息"
      size="80%"
      :close-btn="true"
    >
      <div class="msg-content" v-html="curMsg.content"></div>

      <template #footer>
        <t-button theme="primary" @click="visible = false">返回</t-button>
      </template>
    </t-drawer>
  </div>
</template>

<script setup name="MessageReminder">
import { reactive, computed, ref } from 'vue';
import useFetchTable from '@/hooks/useFetchTable';
import { getMyMessages, setMyMessagesRead } from '@/api/my-workbenches';
import { MESSAGE_TYPE } from '@/config/constants';
import { dictToOptionList } from '@/utils/tool';
import MessageList from './message-list.vue';
import { useWorkStore } from '@/store';
import NoticeList from '@/views/my-workbenches/workbenches/notice/notice-list.vue';
const curMsg = ref({});
const visible = ref(false);
const open = (notice) => {
  setMyMessagesRead(notice.id).then(() => {
    // search()
    workStore.updateWorkCounts();
  });
  curMsg.value = notice;
  visible.value = true;
};
const workStore = useWorkStore();
const tabs = [
  {
    label: '全部',
    value: 'undefined',
  },
  {
    label: '未读',
    value: 'false',
  },
  {
    label: '已读',
    value: 'true',
  },
];

const params = reactive({
  types: [],
  serviceId: '',
  custom: '',
  status: 'undefined',
});

const transParams = computed(() => {
  let types = params.types.join(',');
  if(types.length===0) types = Object.keys(MESSAGE_TYPE).join();
  let status = eval(params.status);
  return { ...params, types, status };
});
const {
  loading: loading,
  pagination: pagination,
  tableData: tableData,
  onChange: onChange,
  search: search,
} = useFetchTable(getMyMessages, {
  params: transParams,
});

const switchTab = (tab) => {
  params.status = tab.value;
  search();
};
const fields = ref([
  {
    prop: 'types',
    label: '消息类型',
    type: 'multipleSelect',
    labelWidth: 70,
    colSpan: 5,
    options: dictToOptionList(MESSAGE_TYPE),
    attrs: {
      clearable: true,
    },
  },
  {
    prop: 'serviceId',
    label: '服务单元',
    type: 'select',
    labelWidth: 100,
    colSpan: 5,
    cell: 'service',
  },
  {
    prop: 'custom',
    label: '客户名称',
    labelWidth: 100,
    colSpan: 5,
  },
  {
    type: 'buttons',
    colSpan: 3,
    children: [
      {
        type: 'button',
        text: '搜索',
        onClick: () => {
          search();
        },
      },
    ],
  },
]);
</script>
