<template>
  <div style="text-align:center;height:100%;z-index:999;" v-if="isShowRightNav">
    <div class="right_fixed" @click="show_detail" v-if="is_showDetail">
      员工天地
      <img src="../../../static/image/right_add.png" alt style="margin-top:7px;">
    </div>
    <div class="newsinfo_con" v-else>
      <div class="fr honor-nav-detail" style="border:1px solid #d4dce5">
        <div class="close_btn" @click="show_detail"></div>
        <div v-if="!!newContent.length">
          <div class="honor-nav-item clear" v-for="(item,index) in newContent" :key="index" @click="openNewDetail(item,index)">
            <div class="fl dot"></div>
            <p class="fl">{{item.title}}</p>
          </div>
        </div>
        <div v-else style="text-align:center;color:#607a95;height:20px;margin-top:135px">
          <p>暂无数据</p>
        </div>
        <Button class="more" @click="tomore">更多</Button>
      </div>
      <div class="fr honor-nav-title">
        <div :class="checknewtype.gonggao?'active':''" @click="activenewtype('gonggao')" style="margin-top:5px">公告通知</div>
        <div :class="checknewtype.biaoyang?'active':''" @click="activenewtype('biaoyang')">内部表扬</div>
        <div :class="checknewtype.falv?'active':''" @click="activenewtype('falv')">法律法规</div>
      </div>
    </div>
    <Modal v-model="FirstLoginModal" :title="modalTitle" id="login_new_modal" class-name="vertical-center-modal" width="776">
      <div class="nmodal_con" id="hover_html_con" style="max-height:340px;overflow:auto">
        <p v-html="modal_con"></p>
      </div>
      <div class="modal_footer">
        <p class="fl">上一篇：<span class="lasttitle" @click="intoNewInfo(-1,lastTitle)">{{lastTitle}}</span></p>
        <p class="fr">下一篇：<span class="nexttitle" @click="intoNewInfo(1,nextTitle)">{{nextTitle}}</span></p>
      </div>
    </Modal>
  </div>
</template>
<script>
import { mapState,mapGetters } from "vuex";
export default {
  name: "right_fixed",
  data() {
    return {
      FirstLoginModal:false,
      is_showDetail: true,
      newContent: [],
      modalTitle:'',
      modal_con:'',
      lastTitle:'',
      curIndex:0,
      selectId: null,
      nextTitle:'',
      juntuanname: "",
      checknewtype:{
        gonggao:false,
        biaoyang:false,
        falv:false,
      }
    };
  },
  computed: {
    ...mapGetters(["curRoute"]),
    ...mapState({
      role: state => state.adminInfo.role_id,
      isShowRightNav: state => state.isShowRightNav,
      saveRoute: state => state.saveRoute,
    }),
    thisRouter() {
      return this.saveRoute[0].activeMenuItem;
    },
  },
  watch: {
    "curRoute.activeSubmenu"(n, o) {
      if (n) {
        this.$nextTick(() => {this.is_showDetail='true'});
      }
    }
  },
  methods: {
    show_detail() {
      this.is_showDetail = !this.is_showDetail;
    },
    activenewtype(btnname){
      for(let i in this.checknewtype){
        if(i.toString()==btnname){
          this.checknewtype[i]=true
        }else{
          this.checknewtype[i]=false
        }
      }
      this.getTypeNewListInfo(btnname)
    },
    getTypeNewListInfo(type){
      this.$api.getTypeNewListInfo({category:type}).then(data=>{
        if(data.code==200){
          this.newContent=data.data
        }else{
          this.$Message.info(data.msg)
        }
      })
    },
    intoNewInfo(ix,title){
      if(title==='无'){return false}
      document.getElementById('hover_html_con').scrollTop=0
      let index=Number(this.curIndex+ix)
      this.modalTitle=this.newContent[index].title
      this.modal_con=this.newContent[index].content
      this.lastTitle=index!==0?this.newContent[index-1].title:'无'
      this.nextTitle=index+1<=Number(this.newContent.length)-1?this.newContent[index+1].title:'无'
      this.curIndex=index
    },
    openNewDetail(item,index){
      this.FirstLoginModal=true
      this.modalTitle=item.title
      this.modal_con=item.content
      this.lastTitle=index!==0?this.newContent[index-1].title:'无'
      this.nextTitle=index+1<=Number(this.newContent.length)-1?this.newContent[index+1].title:'无'
      this.curIndex=index
    },
    tomore(){
      if(this.role==1||this.role==0){
        this.$router.push({ path: '/new_notice' });
      }else{
        this.$router.push({ path: '/data_news' });
      }
    }
  },
  created() {
    this.checknewtype.gonggao=true
    this.getTypeNewListInfo('gonggao')
    if(this.$route.query.is_open){
      this.is_showDetail=false
    }
  }
};
</script>
<style>
.right_fixed {
  text-align: center;
  width: 24px;
  height: 106px;
  padding: 10px 0px 4px 2px;
  background: #4b97e4;
  border-radius: 5px 0px 0px 5px;
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  position: fixed;
  margin: auto 0px;
  right: 0;
  top: 0;
  bottom: 0;
  cursor: pointer;
  line-height: 16px;
  z-index: 999;
}
.newsinfo_con {
  z-index: 999;
  position: fixed;
  margin: auto 0px;
  right: 0;
  top: 0;
  bottom: 0;
  height: 344px;
}
.honor-nav-title div {
  background-color: #D0EBFF;
  border-radius: 5px 0px 0px 5px;
  width: 36px;
  padding: 15px 10px;
  line-height: 16px;
  margin: auto 0px;
  height: 95px;
  margin-top: 1px;
  color: #4B97E4;
  font-weight:bold;
  cursor: pointer;
}
.honor-nav-title div.active {
  background-color:#4B97E4;
  color:#fff;
}
.honor-nav-detail {
  text-align: left;
  width: 345px;
  height: 330px;
  background: #fff;
  overflow: hidden;
  border-radius: 5px;
  padding-top: 15px;
  padding-bottom: 20px;
}
.honor-nav-detail .close_btn{
  width: 40px;
  height: 26px;
  float: right;
  position: relative;
  cursor: pointer;
  right: 15px;
  top: -5px;
  background-image: url(../../../static/image/btn_close_n.png);
  background-position-y: 8px;
  background-position-x: 12px;
  background-repeat: no-repeat
}
.honor-nav-detail .close_btn:hover{
  background-image: url(../../../static/image/btn_close_s.png);
}
.honor-nav-detail .more{
  border-color: #4B97E3;
  color:#4B97E3;
  height: 20px;
  border-radius: 10px;
  padding-top: 0px;
  line-height: 17px;
  float: right;
  margin-right: 10px;
  position: absolute;
  bottom: 30px;
  right: 5px;;
}
.honor-nav-item{
  clear: both;
  width: 100%;
  cursor: pointer;
  height: 31px;
}
.honor-nav-item:hover p{
  color: #4B97E4;
}
.honor-nav-item .dot{
  width: 6px;
  height: 6px;
  background-color: #4B97E4;
  position: relative;
  top: 8px;
  border-radius: 50%;
  margin-left: 20px
}
.honor-nav-item p{
  color: #808F9D;
  font-size: 14px;
  width: 280px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-left: 20px;
}
.nmodal_con{
  min-height: 300px;
  width: 100%;
  padding: 15px 10px;
  word-wrap: break-word;
  word-break: normal;
  color: rgba(96, 122, 149, 1);
  font-size: 13px;
  line-height:24px;
}
.modal_footer{
  width: 100%;
  height: 40px;
  padding: 8px 20px 10px;
  font-size: 15px;
  color: rgba(255, 255, 255, 1);
  background-color: rgba(52, 64, 78, 1);
  border-radius: 0px 0px 3px 3px;
}
.lasttitle,.nexttitle{
  cursor: pointer;
}
</style>


