/*
 *@description:消息中心
 *@author: hudw
 *@date: 2023-04-03 13:57:43
*/
<template>
  <p-modal :draggable="true" :footer="null" :destroyOnClose="true" :enlargeable="true" v-model="sVisible" ok-text="确认" width="64vw" :bodyStyle="{ height: '70vh', padding: 0 }" cancel-text="取消">
    <a-space slot="title"> <p-icon type="bell" />消息中心</a-space>
    <a-layout style="height: 100%">
      <a-layout-sider theme="light">
        <a-menu mode="inline" style="height: 100%" :selectedKeys="openKeys" @select="menuSelect">
          <a-menu-item key="A">
            <a-icon type="alert" />
            <a-space
              >预警消息
              <span v-if="count.A > 0" class="item-badge">{{ count.A }}</span>
            </a-space>
          </a-menu-item>
          <a-menu-item key="B">
            <a-icon type="message" />
            <a-space>
              <span>业务消息</span>
              <span v-if="count.B > 0" class="item-badge">{{ count.B }}</span>
            </a-space>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>
      <a-layout style="height: 100%; overflow: hidden; display: flex; flex-direction: column">
        <a-layout-header style="background-color: #fff; flex: 0; padding: 0 20px">
          <a-space>
            <a-button size="large" :type="defBtn === 0 ? 'primary' : 'default'" @click="btnToggle(btnTabType[0], 0)">待处理 </a-button>
            <a-button size="large" :type="defBtn === 1 ? 'primary' : 'default'" @click="btnToggle(btnTabType[1], 1)"> 全部 </a-button>
          </a-space>
          <a-space style="float: right;" >

          <a-button :type="'default'" @click="setAllRead(defBtn)"> 设为全部已读 </a-button>
        </a-space>
        </a-layout-header>

        <a-layout-content style="padding: 10px; overflow-y: auto">
          <a-list v-if="remindList" :loading="loading">
            <a-list-item class="msg-panel-item" @click="handleClick($event, item)" v-for="(item, index) in remindList" :key="index">
              <p-card style="width: 100%">
                <a-badge slot="title" :offset="[5]" :dot="isShow(item.whetherRead)">
                  <span class="f-14">{{ '有' + msgTypeName[openKeys[0]] + '消息到达' }}</span></a-badge
                >
                <b slot="extra" style="color: red"> {{ msgTypeName[openKeys[0]] + '类型：' + item.messageTypeName }}</b>
                <p class="f-14">{{ item.content }}</p>
                <p style="color: #999">
                  创建人：{{ item.createperson }}
                  <br />
                  创建时间：{{ item.createtime }}
                </p>
                <template slot="actions">阅读详情 </template>
              </p-card>
            </a-list-item>
          </a-list>
          <a-empty v-else style="margin-top: 15%" />
        </a-layout-content>
        <a-layout-footer v-if="remindData && ~~remindData.totalCount > remindData.pageSize" style="background-color: #fff; padding: 10px; text-align: center">
          <a-pagination :total="+remindData.totalCount" @change="onLoadMore" :current="remindData.pageNum"></a-pagination>
        </a-layout-footer>
      </a-layout>
    </a-layout>
  </p-modal>
</template>
<script>
import {resetPage, setMessageRead ,setReadAll} from './api.js';

export default {
  props: {
    visible: {
      type: Boolean,
    },
  },
  watch: {
    visible(v) {
      this.sVisible = v;
      if (v) {

        this.$store.dispatch('resetRemind', {
          ...this.page,
          ...this.btnTabType[this.defBtn],
          noticeType: this.openKeys[0]
        });
      }
    },
    sVisible(v) {
      this.$emit('update:visible', v);
    },
  },
  computed: {
    count() {
      return this.$store.state.business.count;
    },
    remindData() {
      return this.$store.state.business.remindData;
    },

    remindList() {
      return this.remindData?.list ?? null;
    },
  },
  data() {
    this.msgTypeName = {
      A: '预警',
      B: '消息',
    };
    this.btnTabType = {
      0: { whetherRead: 'N' },
      1: {},
    };
    return {
      loading: false,
      defBtn: 0,

      page: {
        pageNum: 1,
        pageSize: 10,
      },
      openKeys: ['A'],
      sVisible: this.visible,
    };
  },
  mounted() {},
  methods: {
    resetPage() {
      return resetPage(this)
    },
    setAllRead() {
      setReadAll(this, { noticeType: this.openKeys[0] ,...this.btnTabType[this.defBtn]})

    },
    onLoadMore(page, pageSize) {
      let params = { ...this.btnTabType[this.defBtn] };
      params.pageNum = page;
      this.btnToggle(params, this.defBtn);
    },
    btnToggle(params = {}, num) {
      this.loading = true;
      const { pageNum, pageSize } = this.remindData;
      this.$store.dispatch('resetRemind', { pageNum, pageSize, ...params, noticeType: this.openKeys[0] }).finally(() => {
        this.loading = false;
        this.defBtn = num;
      });
    },
    menuSelect({ item, key, selectedKeys }) {
      if (key !== this.openKeys[0]) {
        this.page = {
          pageNum: 1,
          pageSize: 10,
        };
        this.loading = true;
        this.$store.dispatch('resetRemind', { ...this.page, ...this.btnTabType[this.defBtn], noticeType: selectedKeys[0] }).finally(() => {
          this.loading = false;
          this.openKeys = selectedKeys;
        });
      }
    },
    handleClick($event, item) {
      let act = $event.target.closest('.ant-card-actions');
       setMessageRead(this, [item.id], item);
      if (act) {
        let {shipbillId ,messageType}=item
        shipbillId=shipbillId.split(',')[0]

        let routeUrl = this.$router.resolve({
          path: '/localDetails',
          query: {shipbillId ,messageType},
        });
        return window.open(routeUrl.href, '_blank');
      }

    },
    isShow(whetherRead) {
      let o = { Y: false, N: true };
      return o[whetherRead];
    },
  },
};
</script>
<style lang='less'>
.msg-panel-item {
  width: 100%;
  // background-color:#fff;
}
.item-badge {
  position: absolute;
  top: 10px;
  right: 18px;
  transform: scale(0.8);
  display: inline-block;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  color: #fff;
  font-weight: normal;
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
  text-align: center;
  background: #f5222d;
  border-radius: 10px;
}
</style>