<template>
  <div class="message-center">
    <a-tabs v-model="type" tab-position="left">
      <a-tab-pane key="NOTICE" :tab="$t('NOTICE')">
        <MomTable
          ref="MomTable"
          row-key="id"
          :columns="tableColumns"
          :data-source="tableData"
          :query-param="queryForm"
          :query-param-item="queryFormItem"
          :total="total"
          :page.sync="page"
          :auto-adaptive-width="false"
          :mega-extend="{
            rowAction: false,
          }"
          @beforeSearch="beforeSearch"
          @search="searchPageData"
        >
          <template slot="msgTitle" slot-scope="text, record">
            <div class="titleContent" @click="handView(record)">
              <span>{{ record.msgTitle }}</span>
            </div>
          </template>
          <template slot="isRead" slot-scope="text, record">
            <span
              :style="
                record.isRead === 'N' ? 'color: #d45f5f' : 'color: #0fd19c'
              "
              >{{ formatData(isReadList, record.isRead) }}</span
            >
          </template>
        </MomTable>
      </a-tab-pane>
      <a-tab-pane key="MESSAGE" :tab="$t('MESSAGE')">
        <MomTable
          ref="MomTable"
          row-key="id"
          :columns="tableColumnsMessage"
          :data-source="tableDataMessage"
          :query-param="queryFormMessage"
          :query-param-item="queryFormItemMessage"
          :total="totalMessage"
          :page.sync="pageMessage"
          :auto-adaptive-width="false"
          :mega-extend="{
            rowAction: false,
          }"
          @beforeSearch="beforeSearch"
          @search="searchPageDataMessage"
        >
          <template slot="msgTitle" slot-scope="text, record">
            <div class="titleContent" @click="handView(record)">
              <span>{{ record.msgTitle }}</span>
            </div>
          </template>
          <template slot="isRead" slot-scope="text, record">
            <span :style="record.isRead === 'N' ? 'color: #d45f5f' : ''">{{
              formatData(isReadList, record.isRead)
            }}</span>
          </template>
        </MomTable>
      </a-tab-pane>
      <a-tab-pane key="TODO" :tab="$t('NEED_DEALT')">
        <MomTable
          ref="MomTable"
          row-key="id"
          :columns="tableColumnsTodo"
          :data-source="tableDataTodo"
          :query-param="queryFormTodo"
          :query-param-item="queryFormItemTodo"
          :total="totalTodo"
          :page.sync="pageTodo"
          :auto-adaptive-width="false"
          :mega-extend="{
            rowAction: false,
          }"
          @beforeSearch="beforeSearch"
          @search="searchPageDataTodo"
        >
          <template slot="msgTitle" slot-scope="text, record">
            <div class="titleContent" @click="handView(record)">
              <span>{{ record.msgTitle }}</span>
            </div>
          </template>
          <template slot="isRead" slot-scope="text, record">
            <span :style="record.isRead === 'N' ? 'color: #d45f5f' : ''">{{
              formatData(isReadList, record.isRead)
            }}</span>
          </template>
        </MomTable>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
import ApiConstant from "@/api/ApiConstant";

export default {
  data() {
    return {
      tableData: [],
      tableDataMessage: [],
      tableDataTodo: [],
      page: 1, // 分页第几页
      total: 0, // 数据表格总条数
      pageMessage: 1, // 消息分页第几页
      totalMessage: 0, // 消息数据表格总条数
      pageTodo: 1, // 代办分页第几页
      totalTodo: 0, // 代办数据表格总条数
      // 查询的表单的配置项
      queryForm: {
        msgTitle: "",
        isRead: "",
      },
      // 消息查询
      queryFormMessage: {
        msgTitle: "",
        isRead: "",
      },
      isReadList: [],
      // 代办查询
      queryFormTodo: {
        msgTitle: "",
        isRead: "",
      },
      type: this.$route.query.type ? this.$route.query.type : "NOTICE",
    };
  },
  computed: {
    queryFormItem() {
      return this.$observable("queryFormItem", {
        msgTitle: {
          label: () => this.$t("NOTICE_TITLE"),
        },
        isRead: {
          itemType: "select",
          label: () => this.$t("STATUS"), // 状态
          options: [],
          optionsProps: {
            label: "label",
            value: "value",
          },
        },
      });
    },
    queryFormItemMessage() {
      return this.$observable("queryFormItemMessage", {
        msgTitle: {
          label: () => this.$t("MESSAGE_TITLE"),
        },
        isRead: {
          itemType: "select",
          label: () => this.$t("STATUS"), // 状态
          options: [],
          optionsProps: {
            label: "label",
            value: "value",
          },
        },
      });
    },
    queryFormItemTodo() {
      return this.$observable("queryFormItemTodo", {
        msgTitle: {
          label: () => this.$t("AGENCY_TITLE"),
        },
        isRead: {
          itemType: "select",
          label: () => this.$t("STATUS"), // 状态
          options: [],
          optionsProps: {
            label: "label",
            value: "value",
          },
        },
      });
    },
    tableColumns() {
      return [
        {
          dataIndex: "msgTitle",
          title: () => this.$t("NOTICE_TITLE"),
          sorter: false,
          scopedSlots: { customRender: "msgTitle" },
        },
        {
          dataIndex: "isRead",
          sorter: false,
          title: () => this.$t("STATUS"),
          width: 100,
          scopedSlots: { customRender: "isRead" },
        },
        // 更新人员
        {
          dataIndex: "updateBy",
          sorter: false,
          title: () => this.$t("UPDATE_BY"),
          width: 200,
        },
        // 更新时间
        {
          dataIndex: "updateTime",
          sorter: false,
          title: () => this.$t("UPDATE_TIME"),
          width: 200,
        },
      ];
    },
    tableColumnsMessage() {
      return [
        {
          dataIndex: "msgTitle",
          title: () => this.$t("MESSAGE_TITLE"),
          sorter: false,
          scopedSlots: { customRender: "msgTitle" },
        },
        {
          dataIndex: "isRead",
          sorter: false,
          title: () => this.$t("STATUS"),
          width: 100,
          scopedSlots: { customRender: "isRead" },
        },
        // 更新人员
        {
          dataIndex: "updateBy",
          sorter: false,
          title: () => this.$t("UPDATE_BY"),
          width: 200,
        },
        // 更新时间
        {
          dataIndex: "updateTime",
          sorter: false,
          title: () => this.$t("UPDATE_TIME"),
          width: 200,
        },
      ];
    },
    tableColumnsTodo() {
      return [
        {
          dataIndex: "msgTitle",
          title: () => this.$t("AGENCY_TITLE"),
          sorter: false,
          scopedSlots: { customRender: "msgTitle" },
        },
        {
          dataIndex: "isRead",
          sorter: false,
          title: () => this.$t("STATUS"),
          width: 100,
          scopedSlots: { customRender: "isRead" },
        },
        // 更新人员
        {
          dataIndex: "updateBy",
          sorter: false,
          title: () => this.$t("UPDATE_BY"),
          width: 200,
        },
        // 更新时间
        {
          dataIndex: "updateTime",
          sorter: false,
          title: () => this.$t("UPDATE_TIME"),
          width: 200,
        },
      ];
    },
  },
  watch: {
    "$route.query": {
      handler({ type }) {
        this.type = type;
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    beforeSearch() {
      this.getDictByCode("DIC:MSG:CENTER_STATUS").then((res) => {
        this.queryFormItem.isRead.options = res.data.data;
        this.isReadList = res.data.data;
      });
    },
    // 格式化数据
    formatData(data, status) {
      const result = data?.find((item) => item.value === status.toString());
      return result ? result.label : "";
    },
    searchPageData(params) {
      const req = {
        ...params,
        type: this.$route.query.type ? this.$route.query.type : "NOTICE",
      };
      this.$axios
        .get(`${ApiConstant.PREFIX_CORE}/api/center/search-more`, {
          params: req,
        })
        .then((res) => {
          this.tableData = res.data.data.records;
          this.total = parseFloat(res.data.data.total);
        });
    },
    // 消息表格查询
    searchPageDataMessage(params) {},
    // 代办表格查询
    searchPageDataTodo(params) {},
    handView(record) {
      this.$router.push({
        path: "/messageCenter/view",
        query: {
          id: record.id,
        },
      });
    },
  },
};
</script>
<style lang="less" scoped>
.message-center {
  padding: 20px;
}
.titleContent {
  color: #3dc2e5;
  text-decoration: underline;
  cursor: pointer;
}
</style>
