<template>
  <div class="notice 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.notice,
          },
        ]"
        @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">
      <NoticeList
        :loading="loading"
        :tableData="tableData"
        :pagination="pagination"
        :onChange="onChange"
        @open="open"
      ></NoticeList>
    </div>

    <t-drawer
      v-model:visible="visible"
      header="通知公告"
      size="80%"
      :close-btn="true"
    >
      <h2 class="text-center notice-title">{{ curNotice.title }}</h2>
      <div class="text-center notice-subtitle"
        >发布时间：{{ dateFormat(curNotice.sendTime, 'yyyyMM-dd') }}</div
      >
      <div class="notice-content" v-html="curNotice.content"></div>

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

<script setup name="Notice">
import { reactive, computed, ref } from 'vue';
import useFetchTable from '@/hooks/useFetchTable';
import { getMyMessages, setMyMessagesRead } from '@/api/my-workbenches';
import NoticeList from './notice-list.vue';
import { omit } from 'lodash';
import { dateFormat } from '@/utils/tool';
import { useWorkStore } from '@/store';

const workStore = useWorkStore();

const curNotice = ref({});
const visible = ref(false);
const open = (notice) => {
  curNotice.value = notice;
  visible.value = true;
  setMyMessagesRead(curNotice.value.id).then(() => {
    search();
    workStore.updateWorkCounts();
  });
};

const tabs = [
  {
    label: '全部',
    value: 'undefined',
  },
  {
    label: '未读',
    value: 'false',
  },
  {
    label: '已读',
    value: 'true',
  },
];

const params = reactive({
  types: ['SYSTEM'],
  title: '',
  time: [],
  status: 'undefined',
});
const transParams = computed(() => {
  let types = params.types.join(',');
  let status = eval(params.status);
  return {
    ...omit(params, 'time'),
    types,
    status,
    startTime: params.time[0],
    endType: params.time[1],
  };
});
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: 'time',
    label: '发送日期',
    type: 'daterange',
    labelWidth: 70,
    colSpan: 10,
    attrs: {
      clearable: true,
      valueType: 'time-stamp',
    },
  },

  {
    prop: 'query',
    label: '标题关键字',
    labelWidth: 100,
    colSpan: 5,
  },
  {
    type: 'buttons',
    colSpan: 3,
    children: [
      {
        type: 'button',
        text: '搜索',
        onClick: () => {
          search();
        },
      },
    ],
  },
]);
</script>

<style lang="less" scoped>
.notice {
  .notice-title {
    color: #333;
    font-size: 20px;
  }
  .notice-subtitle {
    font-size: 13px;
    margin-top: 6px;
  }
  //.notice-content {
  //  font-size: 14px;
  //  margin-top: 10px;
  //  text-indent: 2em;
  //}
}
</style>
