<template>
  <div class="notice_container">
    <div class="apass_breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/user' }">
          个人中心
        </el-breadcrumb-item>
        <el-breadcrumb-item>消息通知</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main_container">
      <div class="notice_header">
        <div class="notcie_filter">
          <a :class="{ current: unread }" @click.prevent="filterAction(true)">
            <span class="btn_text">未读消息</span>
            <span class="width_num" v-text="unreadCount"></span>
          </a>
          <a :class="{ current: !unread }" @click.prevent="filterAction(false)">
            <span class="btn_text">全部消息</span>
          </a>
        </div>
        <div class="other_action">
          <a @click.prevent="readAll">
            <img :src="require('../../../assets/imgs/msg_icon_szyd.png')" />
            <span class="btn_text">全部设置为已读</span>
          </a>
          <a @click.prevent="removeAll">
            <img :src="require('../../../assets/imgs/msg_icon_qkxx.png')" />
            <span class="btn_text">清空所有消息</span>
          </a>
          <a style="cursor: text;">
            <span style="font-size: 12px;color: #d0d5e7;">|</span>
          </a>
          <a @click.prevent="setMessage">
            <img :src="require('../../../assets/imgs/msg_icon_xxsz.png')" />
            <span class="btn_text" style="color: #0f2683;">消息设置</span>
          </a>
        </div>
      </div>
      <ul class="notice_list">
        <li
          class="notice_item"
          v-for="(item, index) in list"
          :key="'item_' + index"
        >
          <div class="notice_icon">
            <img :src="getIcon(item.msg_type, item.readed)" />
          </div>
          <div class="notice_detail">
            <p class="notice_type" v-text="getType(item.msg_type)"></p>
            <p class="notice_content" v-html="item.content"></p>
            <p class="notice_time" v-text="getTime(item.create_time)"></p>
          </div>
          <div class="notice_action">
            <a @click.prevent="readItem(item)">
              <img :src="require('../../../assets/imgs/msg_icon_yidu.png')" />
            </a>
            <a @click.prevent="removeItem(item)">
              <img
                :src="require('../../../assets/imgs/msg_icon_shanchu.png')"
              />
            </a>
          </div>
        </li>
      </ul>
      <list-pagination
        :total="listTotal"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :current-page="currentPage"
        @size-change="changePageSize"
        @current-change="changeCurrentPage"
        style="margin-top: 20px;"
      ></list-pagination>
    </div>
  </div>
</template>

<script>
import ListPagination from "@/components/comments-pagination";
import helper from "@/services/helper.js";

export default {
  components: {
    ListPagination,
  },
  data: () => ({
    unread: true,
    list: [],
    listTotal: 0,
    pageSizes: [10, 20, 50],
    pageSize: 10,
    currentPage: 1,
    unreadCount: 0,
    initDisabled: false,
  }),
  methods: {
    initList() {
      let url = this.unread
        ? "/apaas/service/v3/mymsg/unread"
        : "/apaas/service/v3/mymsg/all";

      this.initDisabled = true;

      this.$http
        .get(url, {
          params: {
            size: this.pageSize,
            page: this.currentPage,
          },
        })
        .then(({ data }) => {
          if (data.success === 1) {
            this.list = data.data.data || [];
            this.listTotal = data.data.total || 0;

            if (this.unread) {
              this.unreadCount = data.data.total || 0;
            }
          } else {
            console.log("消息列表请求失败");
          }

          this.initDisabled = false;
        })
        .catch((error) => {
          console.log(error);
          this.initDisabled = false;
        });
    },
    getType(type = 0) {
      return ["系统通知", "版本更新", "平台维护", "服务推送"][type];
    },
    getIcon(type = 0, readed = false) {
      if (!readed) {
        return [
          require("@/assets/imgs/msg_ic_xttz.png"),
          require("@/assets/imgs/msg_ic_bbgx.png"),
          require("@/assets/imgs/msg_ic_ptwh.png"),
          require("@/assets/imgs/msg_ic_fwts.png"),
        ][type];
      }

      return [
        require("@/assets/imgs/msg_ic_xttz_visited.png"),
        require("@/assets/imgs/msg_ic_bbgx_visited.png"),
        require("@/assets/imgs/msg_ic_ptwh_visited.png"),
        require("@/assets/imgs/msg_ic_fwts_visited.png"),
      ][type];
    },
    getTime(date) {
      return helper.dateStringTransform(date || "");
    },
    filterAction(unread = true) {
      if (this.initDisabled) {
        return;
      }

      this.unread = unread;
      this.pageSize = 10;
      this.currentPage = 1;
      this.initList();
    },
    changePageSize(value) {
      this.pageSize = value;
      this.currentPage = 1;
      this.initList();
    },
    changeCurrentPage(value) {
      this.currentPage = value;
      this.initList();
    },
    readItem(item) {
      console.log("readItem", item.id);
    },
    removeItem(item) {
      console.log("removeItem", item.id);
    },
    readAll() {
      console.log("readAll");
    },
    removeAll() {
      console.log("removeAll");
    },
    setMessage() {
      console.log("setMessage");
    },
  },
  created() {
    this.initList();
  },
};
</script>

<style scoped>
.notice_container {
  padding: 0 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  overflow: auto;
}
.main_container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 25px 20px 20px;
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 40px;
}
.notice_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
}
.notice_header a {
  font-size: 14px;
  line-height: 24px;
  color: #8890a7;
  cursor: pointer;
}
.notice_header a + a {
  margin-left: 30px;
}
.notice_header a > * {
  display: inline-block;
  vertical-align: middle;
}
.notice_header a > *:not(:first-child) {
  margin-left: 5px;
}
.notcie_filter a .btn_text {
  position: relative;
}
.notcie_filter a .btn_text::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background-color: #e56600;
  left: 0;
  bottom: -21px;
  display: none;
}
.notcie_filter a .width_num {
  min-width: 40px;
  background-color: #8890a7;
  font-size: 10px;
  line-height: 16px;
  color: #fff;
  padding: 0 8px;
  box-sizing: border-box;
  border-radius: 8px;
  text-align: center;
  overflow: hidden;
}
.notcie_filter a.current {
  color: #e56600;
}
.notcie_filter a.current .btn_text::after {
  display: block;
}
.notcie_filter a.current .width_num {
  background-color: #e56600;
}
.notice_list {
  flex-grow: 1;
  border-top: 2px solid #f4f7fc;
  border-bottom: 2px solid #f4f7fc;
}
.notice_item {
  padding: 25px 200px 25px 40px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.notice_item:not(:first-child)::before {
  position: absolute;
  top: 0;
  right: 40px;
  left: 40px;
  content: "";
  border-top: 2px solid #f4f7fc;
}
.notice_item > .notice_icon {
  margin: 5px 20px 0 0;
  font-size: 0;
}
.notice_item > .notice_detail p {
  font-size: 16px;
  line-height: 28px;
  color: #242c43;
}
.notice_item > .notice_detail .notice_type {
  color: #58617a;
  margin-bottom: 10px;
}
.notice_item > .notice_detail .notice_time {
  color: #8890a7;
}
.notice_item:last-child {
  border-bottom: none;
}
.notice_item:hover {
  background-color: #f8f9fd;
}
.notice_action {
  position: absolute;
  top: 0;
  right: 0;
  width: 190px;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
}
.notice_action a {
  font-size: 0;
  cursor: pointer;
}
.notice_action a + a {
  margin-left: 50px;
}
.notice_item:hover::before,
.notice_item:hover + .notice_item::before {
  display: none;
}
.notice_item:hover .notice_action {
  display: flex;
}
</style>
