<template>
  <div class="avue-top">
    <div class="top-bar__left">
      <div v-if="showCollapse" :class="[{'avue-breadcrumb--active': isCollapse}]" class="avue-breadcrumb">
        <i class="icon-navicon" @click="setCollapse" />
      </div>
    </div>
    <div class="top-bar__title">
      <div v-if="showMenu" class="top-bar__item top-bar__item--show">
        <top-menu />
      </div>
    </div>
    <div class="top-bar__right">
      <div class="num mr12" v-if="numShow">服务截止时间： {{ accountExpiry.expiryDate }}</div>
      <div class="num" v-if="false">积分余额 {{ integral || 0 }}</div>
      <div class="bell" v-if="ISDLSGLY">
        <el-popover placement="bottom" width="400" trigger="click" popper-class="top-popper">
          <div class="table">
            <div class="list" v-for="(item, index) in tableData" :key="index" @click="readNotice(item)">
              <div class="txt">
                <span class="dot" v-if="!item.readFlag"></span>
                <span class="title"> {{ item.title }}</span>
              </div>
              <div class="time">{{ item.createTime }}</div>
            </div>
            <el-pagination v-if="tableData.length" @current-change="currentChange" layout="prev, pager, next" :page-size="5" :total="page.total"> </el-pagination>
          </div>
          <template slot="reference">
            <el-badge :is-dot="hasDot" class="item"> <i class="el-icon-bell"></i></el-badge>
          </template>
        </el-popover>
      </div>
      <el-tooltip v-if="showDebug" :content="logsFlag ? '没有错误日志' : `${logsLen}条错误日志`" effect="dark" placement="bottom">
        <div class="top-bar__item">
          <top-logs />
        </div>
      </el-tooltip>
      <el-tooltip v-if="showLock" effect="dark" content="锁屏" placement="bottom">
        <div class="top-bar__item">
          <top-lock />
        </div>
      </el-tooltip>
      <el-tooltip v-if="showFullScreen" :content="isFullScreen ? '退出全屏' : '全屏'" effect="dark" placement="bottom">
        <div class="top-bar__item">
          <i :class="isFullScreen ? 'icon-zuixiaohua' : 'icon-quanpingzuidahua'" @click="handleScreen" />
        </div>
      </el-tooltip>

      <el-dropdown>
        <span class="el-dropdown-link">
          {{ userInfo.realName || userInfo.username }}
          <!--          ({{ roleName }})-->
          <i class="el-icon-arrow-down el-icon--right" />
        </span>

        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item divided>
            <router-link to="/">首页</router-link>
          </el-dropdown-item>
          <!-- 隐藏个人信息与界面设置 -->
          <!-- <el-dropdown-item divided>
            <router-link to="/info/index">个人信息</router-link>
          </el-dropdown-item> -->
          <!-- <el-dropdown-item divided @click.native="$refs.seting.open()"
            >界面设置
          </el-dropdown-item> -->
          <el-dropdown-item divided @click.native="logout">退出系统 </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <top-setting ref="seting" />

      <Dropdown trigger="click" style="margin-left: 20px;margin-right: 20px; font-size: 14px;float: left;" v-show="isShowEnt" @on-click="changeEnt">
        <a href="javascript:void(0)" style="color: #ffffff">
          {{ entForm.baseEnt }}
          <Icon type="ios-arrow-down"></Icon>
        </a>
        <DropdownMenu slot="list" style="color: #ffffff">
          <DropdownItem v-for="item in entForm.entList" :value="item.value" :key="item.value" :name="item.value">{{ item.name }}</DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </div>
    <el-dialog title="通知" center :visible.sync="dialogVisible" width="45%">
      <div class="message-box">
        <div class="title">{{ currentRow.title }}</div>
        <div class="content">{{ currentRow.content }}</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {mapGetters, mapState} from 'vuex';
import {getNoticeCountApi, getNoticePageApi, noticeReadApi} from '@/api/home/index.js';
import {fullscreenToggel, listenfullscreen} from '@/util/util';
import topLock from './top-lock';
import topMenu from './top-menu';
// import topTheme from './top-theme'
import topLogs from './top-logs';
// import topColor from './top-color'
import topSetting from './top-setting';
import {getDeptList} from '@/api/admin/dept';

export default {
  name: 'Top',
  components: {
    topLock,
    topMenu,
    // topTheme,
    topLogs,
    // topColor,
    topSetting
  },
  filters: {},
  data() {
    return {
      roleName: '',
      entForm: {
        entList: [],
        baseEnt: ''
      },
      loginForm: {},
      isShowEnt: false,
      numShow: false,
      ISDLSGLY: false,
      hasDot: false,
      tableData: [],
      page: {
        total: 0,
        current: 1,
        size: 5
      },
      dialogVisible: false,
      currentRow: {}
    };
  },
  computed: {
    ...mapState({
      showDebug: state => state.common.showDebug,
      showTheme: state => state.common.showTheme,
      showLock: state => state.common.showLock,
      showFullScreen: state => state.common.showFullScreen,
      showCollapse: state => state.common.showCollapse,
      showMenu: state => state.common.showMenu,
      showColor: state => state.common.showColor
    }),
    ...mapGetters(['userInfo', 'isFullScreen', 'tagWel', 'tagList', 'isCollapse', 'tag', 'logsLen', 'logsFlag', 'integral', 'accountExpiry'])
  },
  created() {
    this.$store.dispatch('SET_INTEGRAL');
    this.setRoleName();
    this.showNum();
  },
  mounted() {
    listenfullscreen(this.setScreen);
    const roles = this.userInfo.roles;
    this.ISDLSGLY = roles.includes(4);
    this.getInfo();
    this.getPageList();
  },
  methods: {
    async getInfo() {
      const res = await getNoticeCountApi({
        read: false
      });
      if (res.data.data > 0) {
        this.hasDot = true;
      }
    },
    currentChange(e) {
      this.page.current = e;
      this.getPageList();
    },
    async getPageList() {
      const resB = await getNoticePageApi(this.page);
      if (resB.data.code === 0) {
        this.page.total = resB.data.data.total;
        this.tableData = resB.data.data.records;
      }
    },
    async readNotice(item) {
      if (!item.readFlag) {
        const res = await noticeReadApi({
          noticeId: item.noticeId,
          read: true
        });
        this.getInfo();
        this.getPageList();
      }
      this.dialogVisible = true;
      this.currentRow = item;
    },
    showNum() {
      let role = this.userInfo.roles;
      if (role.includes(3) || role.includes(4) || role.includes(14)) {
        this.numShow = true;
      }
    },
    setRoleName() {
      let role = this.userInfo.roles;
      if (role.includes(2)) {
        this.roleName = '平台管理员';
      }

      if (role.includes(3)) {
        this.roleName = '事业部管理员';
      }

      if (role.includes(4)) {
        this.roleName = 'CSO管理员';
      }
      if (role.includes(7)) {
        this.roleName = '财务管理员';
      }
      if (role.includes(9)) {
        this.roleName = 'CRO管理员';
      }
    },
    handleScreen() {
      fullscreenToggel();
    },
    setCollapse() {
      this.$store.commit('SET_COLLAPSE');
    },
    setScreen() {
      this.$store.commit('SET_FULLSCREEN');
    },
    logout() {
      this.$confirm('是否退出系统, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          const pathQuery = {path: '/login'};
          const specialPath = this.$store.getters.specialPath;
          if (specialPath !== 'default') pathQuery.query = {s: specialPath};
          this.$router.push(pathQuery);
        });
      });
    },
    changeEnt(name) {
      this.$store.commit('DEL_ALL_TAG'); //删除所有标签页
      let username = this.userInfo.username;
      this.$store.dispatch('LogOut').then(() => {
        this.loginForm.mobile = username;
        this.loginForm.drugEntId = name;
        this.$store.dispatch('LoginByPhoneForChangeEnt', this.loginForm).then(() => {
          // this.$router.push({path: this.tagWel.value+"?r="+username+"+123123"})
          location.replace('/#' + this.tagWel.value); //将当前页的url重置为首页
          location.reload(); //刷新页面，获取新的页面缓存信息
        });
      });
    },
    getDrugEntList() {
      this.entForm.entList = [];
      if (null != this.userInfo.username && undefined != this.userInfo.username) {
        var obj = {
          username: this.userInfo.username
        };
        getDeptList(obj).then(response => {
          const result = response.data.data;
          if (result.length > 0) {
            for (var i = 0; i < result.length; i++) {
              if (result[i].id == this.userInfo.drugEntId) {
                this.entForm.baseEnt = result[i].entname;
              } else {
                this.entForm.entList.push({
                  value: result[i].id,
                  name: result[i].entname
                });
              }

              if (result.length > 1) {
                this.isShowEnt = true;
              }
            }
          }
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.num {
  font-size: 12px;
  color: #fff;
}
.bell {
  cursor: pointer;
  margin: 0 10px;
  color: #fff;
  font-size: 18px;
  ::v-deep .el-badge__content.is-fixed {
    top: 20px;
  }
}
</style>

<style lang="scss">
.top-popper {
  .table {
    .list {
      cursor: pointer;
      border-bottom: 1px solid #ccc;
      padding: 8px 0 8px 5px;
      .txt {
        display: flex;
        align-items: center;
      }
      .dot {
        display: inline-block;
        width: 5px;
        height: 5px;
        line-height: 16px;
        border-radius: 50%;
        background-color: #f56c6c;
        margin-right: 5px;
      }
      .txt {
        line-height: 16px;
        span {
          display: inline-block;
        }
        .title {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
          color: #000;
        }
      }
      .time {
        margin-top: 6px;
        line-height: 16px;
        color: #c3c3c3;
      }
      &:hover {
        background-color: #f5f7fa;
      }
    }
  }
}
.message-box {
  .title {
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    color: #000;
  }
  .content {
    margin-top: 10px;
    white-space: break-spaces;
    line-height: 24px;
    font-size: 14px;
  }
}
</style>
