<template>
  <div class="navbar">
    <hamburger
      id="hamburger-container"
      :is-active="sidebar.opened"
      class="hamburger-container"
      @toggleClick="toggleSideBar"
    />
    <breadcrumb
      v-if="!topNav"
      id="breadcrumb-container"
      class="breadcrumb-container"
    />
    <top-nav v-if="topNav" id="topmenu-container" class="topmenu-container" />

    <div class="right-menu">
      <template v-if="device !== 'mobile'">
        <i
          class="el-icon-download right-menu-item notice"
          @click="openDownload"
        />
        <el-badge v-if="notReadCount > 0" :value="notReadCount" class="item">
          <i
            class="el-icon-chat-dot-round right-menu-item notice"
            @click="openModal"
          />
        </el-badge>
        <i
          v-else
          class="el-icon-chat-dot-round right-menu-item notice"
          @click="openModal"
        />
        <search id="header-search" class="right-menu-item" />
        <screenfull id="screenfull" class="right-menu-item hover-effect" />

        <!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">
          <size-select id="size-select" class="right-menu-item hover-effect" />
        </el-tooltip> -->
      </template>

      <el-dropdown
        class="avatar-container right-menu-item hover-effect"
        trigger="click"
      >
        <div class="avatar-wrapper">
          <img :src="avatar" class="user-avatar">
          <span>{{ nickName }}</span>
          <i class="el-icon-caret-bottom" />
        </div>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/user/profile">
            <el-dropdown-item>个人中心</el-dropdown-item>
          </router-link>
          <!-- <el-dropdown-item @click.native="setting = true">
            <span>布局设置</span>
          </el-dropdown-item> -->
          <el-dropdown-item divided @click.native="logout">
            <span>退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-dialog title="" :visible.sync="open" append-to-body class="myModal">
      <template #title>
        <div class="notice-title">
          <el-badge v-if="notReadCount > 0" :value="notReadCount" class="item">
            <span class="page-title">消息中心</span>
          </el-badge>
          <span v-else class="page-title">消息中心</span>
        </div>
      </template>
      <div class="page-common-wrap notice-wrap">
        <!-- 消息内容 -->
        <div class="notice-content">
          <div
            v-for="(item, index) in noticeCenterList"
            :key="index"
            class="item"
          >
            <div class="item-one">
              <div class="content">
                <span class="date">{{ item.createTime }}</span>
                <span>{{ item.content }}</span>
              </div>
            </div>
            <div v-if="item.readStatus && !item.filePath" class="read hasread">
              已读
            </div>
            <div
              v-if="!item.readStatus && !item.filePath"
              class="read notread"
              @click="handleHasRead(item.uuid)"
            >
              已读
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="" :visible.sync="open2" append-to-body class="myModal">
      <template #title>
        <div class="notice-title">
          <span class="page-title">下载中心</span>
        </div>
      </template>
      <div class="page-common-wrap notice-wrap">
        <!-- 下载内容 -->
        <div class="notice-content">
          <div
            v-for="(item, index) in downCenterList"
            :key="index"
            class="item"
          >
            <div class="item-one">
              <!-- <div class="quan" :class="item.readStatus?'quan2':'quan1'" v-if="!item.filePath"> </div> -->
              <div class="content">
                <span class="date">{{ item.createTime }}</span>
                <el-tag v-if="item.status === '0'" type="success" style="margin: 0 10px">正在导出</el-tag>
                <el-tag v-else-if="item.status === '1'" style="margin: 0 10px">导出成功</el-tag>
                <el-tag v-else style="margin: 0 10px" type="danger">导出失败</el-tag>
                <span>{{ item.fileName }}</span>
              </div>
            </div>
            <div
              class="read notread"
              :class="!item.fileUrl ? 'noPath' : ''"
              @click="downLoadFile(item)"
            >
              下载
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import Breadcrumb from '@/components/Breadcrumb';
import TopNav from '@/components/TopNav';
import Hamburger from '@/components/Hamburger';
import Screenfull from '@/components/Screenfull';
import SizeSelect from '@/components/SizeSelect';
import Search from '@/components/HeaderSearch';
// import RuoYiGit from '@/components/RuoYi/Git'
// import RuoYiDoc from '@/components/RuoYi/Doc'
import { getNoticeCenter, noticeHasReady } from '@/api/system/home.js';
import {
  downCenterDownload,
  getDownCenterList
} from '@/api/customRadar/customRadar.js';
import { downloadFiles } from '@/utils';
import { Message } from 'element-ui';
export default {
  components: {
    Breadcrumb,
    TopNav,
    Hamburger,
    Screenfull,
    Search
    // RuoYiGit,
    // RuoYiDoc
  },
  data() {
    return {
      open: false,
      notReadCount: 0,
      noticeCenterList: [],
      open2: false,
      downCenterList: []
    };
  },
  computed: {
    ...mapGetters(['sidebar', 'avatar', 'device', 'nickName']),
    setting: {
      get() {
        return this.$store.state.settings.showSettings;
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'showSettings',
          value: val
        });
      }
    },
    topNav: {
      get() {
        return this.$store.state.settings.topNav;
      }
    }
  },
  created() {
    this.getCenterList();
    window.addEventListener('notice-center-refresh', this.getCenterList);
  },
  beforeDestroy() {
    window.removeEventListener('notice-center-refresh', this.getCenterList);
  },
  methods: {
    openModal() {
      this.getCenterList();
      this.open = true;
    },
    openDownload() {
      this.getDownCenterList();
      this.open2 = true;
    },
    // 消息已读
    handleHasRead(uuid) {
      noticeHasReady({ uuid }).then((res) => {
        if (res.code == 200) {
          Message.success('已读成功');
          this.getCenterList();
        }
      });
    },

    // 消息中心列表
    getCenterList() {
      getNoticeCenter({}).then((res) => {
        if (res.code == 200) {
          this.noticeCenterList = res.data;
          const rdata = res.data ?? [];
          this.notReadList = rdata.filter((item) => !item.readStatus);
          this.notReadCount = this.notReadList.length;
        }
      });
    },

    // 下载中心列表
    getDownCenterList() {
      getDownCenterList({}).then((res) => {
        if (res.code == 200) {
          this.downCenterList = res.rows;
        }
      });
    },

    // 消息列表下载文件
    downLoadFile(item) {
      const {fileUrl, fileName, status} = item
      if (!fileUrl) return;
      if (status === '0') {
        Message.warning('正在导出，请稍后下载');
        return
      }
      if (status === '2') {
        Message.warning('导出失败，无法下载');
        return
      }
      downCenterDownload({ fileUrl }).then((res) => {
        downloadFiles(res, `${fileName}.xlsx`);
        Message.success('下载成功');
      });
    },

    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar');
    },
    async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$store.dispatch('LogOut').then(() => {
            location.href = '/index';
          });
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.navbar {
  height: 72px;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 8px 18px -4px #4d4d5a0a;

  .hamburger-container {
    line-height: 72px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;

    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }

  .breadcrumb-container {
    float: left;
    line-height: 72px;
    margin-left: 0;
  }

  .topmenu-container {
    position: absolute;
    left: 50px;
  }

  .errLog-container {
    display: inline-block;
    vertical-align: top;
  }

  .right-menu {
    float: right;
    height: 100%;
    line-height: 72px;

    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #5a5e66;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;
      }
    }

    .avatar-container {
      margin-right: 30px;

      .avatar-wrapper {
        margin-top: 15px;
        position: relative;
        display: flex;
        align-items: center;
        > span {
          color: #222222;
          line-height: 22px;
          font-size: 12px;
        }

        .user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 10px;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 15px;
          font-size: 12px;
        }
      }
    }
    .notice {
      // display: flex;
      // align-items: center;
      padding-top: 26px;
      cursor: pointer;
      font-size: 23px;
      color: #5a5e66;
      font-weight: 800;
    }
    .item {
      height: 97px;
      top: 11px;
      left: -10px;
      .notice {
        padding-top: 0;
      }
    }
  }
}
.page-common-wrap {
  // border-radius: 16px;
  // box-shadow: 5px 3px 8px 5px #00000017;
  background-color: #ffffff;
  padding: 24px 10px;
  padding-top: 0;

  &.no-padding-cnt {
    padding: 30px 0;

    .page-title {
      padding: 0 24px;
    }

    .page-title-cnt {
      padding-right: 24px;
    }

    .common-ul {
      li {
        padding: 0 24px;
      }
    }
  }
}
.notice-title {
  display: flex;
  .page-title {
    margin-right: 6px;
    color: #222222;
    font-size: 18px;
    font-weight: 600;
  }
}
.notice-content {
  margin-top: 20px;
  height: 400px;
  overflow-y: auto;
  border-top: 1px solid #ddd;
  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ddd;
    padding: 15px 0;
    padding-right: 30px;
    .item-one {
      display: flex;
      padding-left: 10px;
      .content {
        margin-left: 10px;
      }
    }
    .quan {
      // display: inline-block;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      margin-top: 5px;
      padding: 0 6px;
    }
    .quan1 {
      background: #f5441f;
    }
    .quan2 {
      background: #b9b9b9;
    }
    .read {
      cursor: pointer;
      width: 150px;
      text-align: right;
      // margin-left: 10px;
    }
    .notread {
      color: #4886f8;
    }
    .hasread {
      color: #b9b9b9;
    }
    .date {
      color: #b9b9b9;
      margin-right: 10px;
      // margin-left: 10px;
    }
  }
}
.myModal {
  ::v-deep .el-dialog__body {
    padding-top: 0;
  }
  ::v-deep .el-dialog {
    border-radius: 8px;
  }
  ::v-deep .el-dialog:not(.is-fullscreen) {
    margin-top: 16vh !important;
  }
}
.noPath {
  cursor: not-allowed !important;
  color: #b9b9b9 !important;
}
</style>
