<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-if="unreadMessageCount > 0"
              v-text="unreadMessageCount"
            ></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>
          <span style="font-size: 12px;color: #d0d5e7;">|</span>
          <a class="set_notice_btn">
            <span>
              <img :src="require('../../../assets/imgs/msg_icon_xxsz.png')" />
              <span class="btn_text" style="color: #0f2683;">消息设置</span>
            </span>
            <set-notice></set-notice>
          </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 v-if="item.readed === 1" class="disabled">
              <img :src="require('../../../assets/imgs/msg_icon_yidu.png')" />
            </a>
            <a v-else @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 setNotice from "./setNotice";
import helper from "@/services/helper.js";
import { mapState, mapMutations } from "vuex";

export default {
  components: {
    ListPagination,
    setNotice,
  },
  data: () => ({
    unread: true,
    list: [],
    listTotal: 0,
    pageSizes: [10, 20, 50],
    pageSize: 10,
    currentPage: 1,
    initDisabled: false,
  }),
  computed: {
    ...mapState({
      unreadMessageCount: "unreadMessageCount",
    }),
  },
  methods: {
    ...mapMutations({
      setUnreadMessageCount: "setUnreadMessageCount",
    }),
    initList() {
      let _self = this;

      this.initDisabled = true;

      this.getMessage({
        unread: this.unread,
        callback(data) {
          _self.list = data.data || [];
          _self.listTotal = data.total || 0;
        },
        finallyCallback() {
          _self.initDisabled = false;
        },
      });
    },
    getMessage({ unread, callback, finallyCallback }) {
      let url = unread
        ? "/apaas/service/v3/mymsg/unread"
        : "/apaas/service/v3/mymsg/all";

      this.$http
        .get(url, {
          params: {
            size: this.pageSize,
            page: this.currentPage,
          },
        })
        .then(({ data }) => {
          if (data.success === 1) {
            if (unread) {
              this.setUnreadMessageCount(data.data.total || 0);
            }
            typeof callback === "function" && callback(data.data);
          }
          typeof finallyCallback === "function" && finallyCallback();
        })
        .catch((error) => {
          console.log(error);
          typeof finallyCallback === "function" && finallyCallback();
        });
    },
    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();
    },
    refreshList() {
      this.initList(); // 刷新列表

      if (!this.unread) {
        console.log("刷新未读消息数");
        this.getMessage({
          unread: true,
        });
      }
    },
    readAction(ids) {
      this.$http
        .post("/apaas/service/v3/mymsg/setread", ids)
        .then(({ data }) => {
          if (data.success === 1) {
            this.$message.success("操作成功");
            this.refreshList();
          } else {
            this.$message.error(data.errMsg || "操作失败");
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("操作失败");
        });
    },
    removeAction(ids) {
      this.$http
        .post("/apaas/service/v3/mymsg/clear", ids)
        .then(({ data }) => {
          if (data.success === 1) {
            this.$message.success("操作成功");
            this.refreshList();
          } else {
            this.$message.error(data.errMsg || "操作失败");
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("操作失败");
        });
    },
    readItem(item) {
      this.readAction([item.id]);
    },
    removeItem(item) {
      this.removeAction([item.id]);
    },
    readAll() {
      this.readAction([]);
    },
    removeAll() {
      this.removeAction([]);
    },
  },
  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;
}
.notice_container a.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.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 > div > * + * {
  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: 30px;
  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;
}
.set_notice_btn {
  position: relative;
}
.set_notice_btn::after {
  content: "";
  position: absolute;
  right: 0;
  top: 100%;
  width: 100%;
  height: 30px;
  z-index: 665;
}
.set_notice_btn > .set_notice {
  position: absolute;
  top: 40px;
  right: 0;
  z-index: 666;
  display: none;
}
.set_notice_btn:hover > .set_notice {
  display: block;
}
</style>
