<template>
  <t-drawer class="dc-notice-drawer-drawer" :visible.sync="isOpen" :width="isFull ? '100%' : '25%'" :close-btn="true" :header="false" :footer="false" :maskStyle="{ background: 'transparent' }" :bodyStyle="{ padding: 0 }" :getContainer="false" @close="onClose">
    <div class="drawer-view">
      <div class="drawer-content">
        <!-- 顶部信息 -->
        <div class="drawer-header">
          <div class="d-flex align-items-center">
            <span class="text-80-gl">通知</span>
            <span class="mark-num font-24-gl">{{ msgList.length }}</span>
          </div>
          <!-- <div class="d-flex align-items-center">
            <div class="d-flex align-items-center btn-text" @click="onClose">
            </div>
          </div> -->
        </div>
        <!-- 中间内容列表 -->
        <div class="notice-list" v-if="msgList && msgList.length > 0">
          <div v-for="msg in msgList" :key="msg.pkMsg" class="list-item px-2">
            <!--头部-->
            <div class="d-flex align-items-center justify-content-between">
              <div class="d-flex align-items-center py-2">
                <span class="text-33-gl font-12-gl text-bold-gl">{{ msg.msgTitle }}</span>
                <t-divider class="mx-2 text-33-gl" layout="vertical" />
                <span class="text-80-gl font-12-gl">{{ msg.sendTime }}</span>
              </div>
              <div role="button" class="btn-icon-del">
                <t-icon class="icon" name="close" @click="deleteById(msg)" />
              </div>
            </div>
            <!--分隔线-->
            <t-divider class="m-0" />
            <!--内容-->
            <div class="font-12-gl text-80-gl py-2">
              <span class="ellipsis_mul" v-html="msg.msgContent"> </span>
            </div>
            <div class="d-flex flex-column">
              <div v-for="sysFileInfo in msg.sysFileInfos" :key="sysFileInfo.fileId" class="file-box py-1">
                <span>{{ sysFileInfo.fileName }}</span>
                <div>
                  <a href="javascript:;" class="font-12-gl pr-2" @click="downloadFile(sysFileInfo)"> 下载 </a>
                  <a href="javascript:;" class="font-12-gl" @click="previewFile(sysFileInfo)"> 预览 </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="notice-list bg-white d-flex align-items-center justify-content-center">
          <!-- <a-empty :description="false">暂无通知</a-empty> -->
          <div class="empty-area">
            <t-icon name="root-list" />
            <div>暂无数据</div>
          </div>
        </div>
      </div>
      <div role="button" v-if="msgList.length" class="btn-delete" @click="deleteAll">全部删除</div>
    </div>
  </t-drawer>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Prop } from "vue-property-decorator";
import { MessagePlugin } from "tdesign-vue";
import { apiService } from "../../services/api.service";
import sysMsgApi from "../../constants/api/sys-msg.api";
import { Code } from "../../constants/enum/code.enum";
import { RestApi } from "../../model/RestApi";
import { RestfulResponse } from "../../model/RestfulResponse";
import { SysMsg } from "../../model/SysMsg";
import busFilesRelApi from "../../constants/api/bus-files-rel.api";

/**
 * @Description: 消息提醒抽屉
 * @author LiuBo
 * @date 2021/9/23
 * @time 19:29
 */
@Component({
  name: "NoticeDrawer",
  components: {
    // [Drawer.name]: Drawer,
    // [Button.name]: Button,
    // [Icon.name]: Icon,
    // [Divider.name]: Divider,
    // [Empty.name]: Empty,
  },
})
export default class NoticeDrawer extends Vue {
  @Prop({ default: () => false }) visible!: boolean; // 消息框展开标识
  @Prop({ default: () => [] }) noticeData!: any[]; // 通知数据
  private isFull = false; // 是否全屏
  msgList: SysMsg[] = [];
  get isOpen(): boolean {
    return this.visible;
  }

  set isOpen(open: boolean) {
    this.$emit("update:visible", open);
  }
  mounted(): void {
    this.initData();
  }

  /**
   * @Description: 当弹窗关闭时触发
   * @author LiuBo
   * @date 2021/9/23
   * @time 20:05
   */
  onClose(): void {
    this.$emit("close", true);
    this.isOpen = false;
  }
  /**
   * @Description: 全屏/退出全屏
   * @author LiuBo
   * @date 2021/9/26
   * @time 15:29
   */
  fullScreen(): void {
    this.isFull = !this.isFull;
  }

  /**
   * @Description: 初始化加载通知列表
   * @author 陈敏杰
   * @date 2021/11/29
   * @time 22:50
   */
  initData(): void {
    const restApi: RestApi = new RestApi(sysMsgApi.querySysMsgByUser);
    restApi.url = this.$dc.baseApi + sysMsgApi.querySysMsgByUser.url;
    apiService.general(restApi, undefined).then((res: RestfulResponse) => {
      if (res.code === Code.SUCCESS.code) {
        this.msgList = res.data || [];
      } else {
        MessagePlugin.error({ content: res.msg! });
      }
    });
  }
  /**
   * @Description: 根据id删除通知
   * @author 陈敏杰
   * @date 2021/11/29
   * @time 22:46
   */
  deleteById(data: SysMsg): void {
    const params = { pkMsg: data.pkMsg };
    const restApi: RestApi = new RestApi(sysMsgApi.delete);
    restApi.url = this.$dc.baseApi + sysMsgApi.delete.url;
    apiService.general(restApi, undefined, params).then((res: RestfulResponse) => {
      if (res.code === Code.SUCCESS.code) {
        this.initData();
        this.$emit("change");
        MessagePlugin.success({ content: res.msg! });
      } else {
        MessagePlugin.error({ content: res.msg! });
      }
    });
  }

  /**
   * @Description: 下载文件
   * @author 陈敏杰
   * @date 2021/12/14
   * @time 13:32
   */
  downloadFile(file: any): void {
    apiService.general(busFilesRelApi.downloadByFileId, file, undefined).then((res: any) => {
      const link = document.createElement("a");
      const blob: any = new Blob([res], { type: "text/plain;charset=UTF-8" });
      link.setAttribute("href", window.URL.createObjectURL(blob));
      link.setAttribute("download", file.fileName);
      link.style.visibility = "hidden";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    });
  }

  /**
   * @Description: 预览文件
   * @author 陈敏杰
   * @date 2021/12/14
   * @time 13:32
   */
  previewFile(file: any): void {
    const map = new Map();
    map.set("path", file.path);
    // const urlPageOffice = pageOfficUtil.escapeChineseEncoding(pageOffice.discOpenReadonlyFile.url, map);
    // pageOfficUtil.openPageOfficePage(urlPageOffice);
  }

  /**
   * @Description: 删除全部通知
   * @author 陈敏杰
   * @date 2021/11/30
   * @time 0:34
   */
  deleteAll(): void {
    const params = {};
    const restApi: RestApi = new RestApi(sysMsgApi.delete);
    restApi.url = this.$dc.baseApi + sysMsgApi.delete.url;
    apiService.general(restApi, undefined, params).then((res: RestfulResponse) => {
      if (res.code === Code.SUCCESS.code) {
        this.initData();
        this.$emit("change");
        MessagePlugin.success({ content: res.msg! });
      } else {
        MessagePlugin.error({ content: res.msg! });
      }
    });
  }
}
</script>
<style scoped lang="scss">
.dc-notice-drawer-drawer {
  ::v-deep .ant-drawer-right .ant-drawer-content-wrapper {
    height: calc(100vh - 50px);
    top: 50px;
    box-shadow: -10px 0px 10px rgb(0 0 0 / 11%);
    transition: all 0.25s;
  }
  ::v-deep .ant-drawer-wrapper-body {
    background: #f2f4fb;
  }
  .drawer-view {
    width: 100%;
    height: calc(100vh - 50px);
    display: flex;
    flex-direction: column;
    color: #333333;
    font-size: 14px;
    .drawer-content {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 0;
      flex: 1;
      overflow: hidden;
      padding: 0.8rem;
      .drawer-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
    .btn-delete {
      width: 100%;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: none;
      background: #f79496;
      color: #ffffff;
      font-size: 16px;
      cursor: pointer;
      user-select: none;
      &:active {
        opacity: 0.7;
      }
    }
    .mark-num {
      color: #2d96f6;
      font-weight: 700;
      font-family: "PingFang-SC-Bold", "苹方 Bold", "苹方", sans-serif;
      margin-left: 1rem;
    }
    .btn-text {
      color: #137cdd;
      font-size: 12px;
      cursor: pointer;
      user-select: none;
      &:active {
        opacity: 0.7;
      }
      & > i {
        font-size: 15px;
        transform: rotate(90deg);
      }
    }
    .notice-list {
      flex: 1;
      height: 0;
      overflow-y: auto;
      .empty-area {
        text-align: center;
        margin: 100px 0 0 0;
        .t-icon {
          font-size: 50px;
        }
      }
      .list-item {
        background: #ffffff;
        margin: 0.5rem 0;
        .btn-icon-del {
          user-select: none;
          cursor: pointer;
          .icon {
            width: 12px;
            height: 12px;
            color: #b8b8b8;
          }
          &:active {
            opacity: 0.7;
          }
        }
      }
    }
  }
  .file-box {
    font-size: 12px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: #808080;
  }
  ::v-deep .ant-btn {
    height: auto;
  }
}
</style>
