<template>
  <div class="navbar_right">

    <div class="div_left">
      欢迎登录
      <span style="color:green">{{ userName }}</span>
    </div>

    <div class="div_right">
      <!-- 安卓二维码下载图标 -->
      <div class="androidQR" style="float: left; position: relative">
        <img src="../../assets/images/u736.png" alt=""  title="下载二维码"/>
        <div class="androidQR_nr">
          <div class="arrow"></div>
          <!-- <img class="img-app" src="../../assets/images/u741.png"/> -->
          <img
            class="img-app"
            src="http://101.36.160.140:21021/apk/qrcode.png"
          />
          <span class="text">下载Android App</span>
        </div>
      </div>
      <div style="float: left; position: relative" @click="goDban()" >
        <img src="../../assets/images/daiBan.png"  title="待 办" />
           <div class="daiBan_div" v-if="pendingCount != 0">
          {{ pendingCount }}
        </div>
      </div>
      <!-- </div> -->
      <div style="float: left; position: relative" @click="informFn()">
        <img src="../../assets/images/newsNotice.png" title="通 知"/>
        <div class="news_div">{{ informNum }}</div>
      </div>
      <img src="../../assets/images/user.png" />
      <img src="../../assets/images/signOut.png" @click="loginOut()" title="退 出" />
    </div>

  </div>
</template>
<script>
import {
  getToken,
  setToken,
  removeToken,
  getUser,
  setUser,
  removeUser,
} from "@/utils/auth"
import { informList } from "@/api/home"
import { pending } from "@/api/daiBan/index"
export default {
  data() {
    return {
      userName: "",
      informNum: 0,
      //待办数量
      pendingCount: 0,
    }
  },
  created() {
    this.userName = JSON.parse(getUser()).uname
    this.getInformListUnreadNum()
  },
  methods: {
    // 退出
    async loginOut() {
      await this.$store.dispatch("user/logout")
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
      removeToken()
      removeUser()
      // sessionStorage.clear()
    },

    //待办
    goDban() {
      console.log("染回")
      this.$router.push({ path: "/daiban/initiated" })
    },

    getInformListUnreadNum() {
      let data = {
        pageIndex: 1,
        pageSize: 10,
        condition: JSON.stringify({ readStatus: false }),
      }
      informList(data).then((res) => {
        if (res.code == 200) {
          this.informNum = res.data.total
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    informFn() {
      this.$router.push({ path: "/inform/unreadinform" })
    },

     //待处理列表数据
    getPending() {
      var condition = {
        userId: this.userInfo.uid,
      }
      condition = JSON.stringify(condition)
      var data = {
        pageIndex:1,
        pageSize: 10,
        condition: condition,
      }

      pending(data).then((res) => {
        if (res.code == 200) {
          console.log(res)


          this.pendingCount= res.data.total;
           console.log(this.pendingCount,"nvvmbmojom,pko")

        }
      })
    },
  },

  mounted() {
      //获取当前缓存的登录用户信息
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"))
    console.log(this.userInfo, "this.userInfo.....")
    this.pendingCount = JSON.parse(localStorage.getItem("pendingCount"));
    //  this.bus.$on('pendingCount',pendingCount=>{
    //   this.pendingCount=pendingCount;
    //   console.log(pendingCount, "??>>>>>>>");
    // })

    this.bus.$on('pendingCount', ()=>
    {
      this.getPending();
    })
      this.getPending();
  },
}
</script>

<style lang="scss" scoped>
.navbar_right {
  float: right;
  margin-right: 20px;
  line-height: 50px;
  .div_left {
    float: left;
    margin-right: 20px;
  }
  .div_right {
    float: left;
    height: 100%;
    line-height: 50px;
    img {
      width: 25px;
      vertical-align: middle;
      margin-right: 15px;
    }
    // 下载app二维码显示
    .androidQR {
      width: 30px;
      height: 30px;
      margin: 0 auto;
      text-align: center;
      position: relative;
      .androidQR_nr {
        width: 120px;
        height: 130px;
        padding: 10px;
        position: absolute;
        left: -45px;
        top: 53px;
        background: #fff;
        z-index: 5;
        display: none;
        .arrow {
          width: 0;
          height: 0;
          border-bottom: 10px solid #fff;
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          position: absolute;
          left: 50px;
          top: -10px;
        }
        .img-app {
          height: 100px;
          width: 100px;
        }
        .text {
          color: black;
          font-size: 12px;
        }
      }
    }
    .androidQR:hover {
      .androidQR_nr {
        display: block;
      }
    }
    .daiBan_div,
    .news_div {
      width: 15px;
      height: 15px;
      color: #fff;
      border-radius: 50%;
      background: red;
      position: absolute;
      left: 14px;
      top: 8px;
      font-size: 10px;
      text-align: center;
      line-height: 15px;
    }
  }
}
</style>
