<template>
  <div class="Top">
    <p class="fl logo-div">
      <img :src="logo" alt="OA管理系统" class="site-logo" >
      <!-- <router-link to="/" class="pagetitle" ></router-link> -->
    </p>
    <div class="title_right fr">
      <p class="fl mar_L_15 fs_14" style="margin-right:15px">
        未入库数据: 注册 : {{register}}  充值 : {{recharge}}
      </p>
      <p class="fl mar_L_15 "><Button type="primary" class="clearAllData" @click="celarCache">清理缓存</Button></p>
      <p class="fl mar_L_15 "><a href="https://www.vlsdk.com" target="_blank" class="technologyBtn">技术支持</a></p>
      <p class="fl mar_L_15 " v-if="isShowClear "><a href="javaScript:;" class="technologyBtn" @click="clearShowData">清除演示数据</a></p>
      <p class="fl mar_L_15 ft_wg fs_14">Hi，{{username}}</p>
      <p class="fl mar_L_15 pad_R_25" style="cursor:pointer" @click="login_out">退出</p>
      <p class="clear"></p>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { getStore, removeStore } from "@/utils/utils";
import logo from '@/assets/image/logo.png'
export default {
  name: "Top",
  components: {},
  props: {},
  data() {
    return {
        register :'',
        recharge :'',
        logo:logo,
        isShowClear:false,
        title:''
    }
  },
  computed: {
    ...mapState({
      role_id: state => state.adminInfo.role_id
    }),
    username(){
      return getStore('userInfo').name
    },
    today_date(){
      let today=new Date()
      let year=today.getFullYear()
      let mon=today.getMonth()+1
      let date=today.getDate()
      return (year+'/'+mon+'/'+date)
    },
    // logo(){
    //   let content = window.localStorage.getItem('logoIco')?window.localStorage.getItem('logoIco'):''
    //   return !!content?JSON.parse(content).logo:''
    // }
  },
  methods: {
    login_out() {
      this.$Modal.confirm({
        title: "提示信息",
        class: "vertical-center-modal no-padding",
        render: h => {
          return h("div", { class: "login_out" }, [
            h("p",
              {
                style: {
                  width: "100%",
                  padding: "30px 0px!important",
                  textAlign: "center",
                  backgourndColor: "rgba(52, 64, 78, 1)",
                  fontSize: "16px",
                  color: "rgba(51, 51, 51, 1)",
                  fontWeight: "400"
                },
              },"确认退出当前账号？")
          ]);
        },
        onOk: () => {
          this.$api.logout().then(data=>{
            if(data.code===200){
              this.$store.commit("resetData", "adminInfo");
              removeStore("userInfo");
              removeStore('titleName')
              this.$router.push({ path: "/login" });
              //this.resetMenu()
            }
          })
        }
      });
    },
    resetMenu() {
      if(this.role_id==1||this.role_id==0){
        this.$router.push({ path: "data_sum" });
      }else{
        this.$router.push({ path: "data_index" })
      }
      // this.$store.commit("changeSaveRoute", {
      //   activeSubmenu: [],
      //   activeMenuItem: ""
      // });
    },
    celarCache() {
      this.$api.clearNowDataCache().then(response => {
        if(response.code == 200) {
          location.reload()
        }else {
           this.$Message.error(response.msg) 
           return
        }
      })
    },
    getTopRegisterData() {
      this.$api.getUnStockData().then(response => {
        if(response.code == 200) {
          this.register = response.data.register
          this.recharge  = response.data.recharge
        }else {
          this.$Message.error(response.msg) 
          return
        }
      })
    },
    clearShowData() {
       this.$api.clearReProduction().then(response => {
         if(response.code == 200) {
            location.reload()
         }else {
           this.$Message.error(response.msg) 
           return
         }
       })
    }
  },
  mounted() {
    this.getTopRegisterData()
    let clearbtn = getStore('showClear') 
    if(clearbtn == 0) {
      this.isShowClear = true
    }
  }
};
</script>
<style>
.ivu-modal{
  margin: 0!important
}
.Top {
  height: 48px;
  /* background-color: rgba(52, 64, 78, 1); */
  background-color: #fff;
  font-family: MicrosoftYaHei;
  /* border-bottom: 1px solid rgba(255, 255, 255, 0.15); */
  box-shadow: 0 0 2px 10px rgba(255, 255, 255, 0.15);
}
.Top .pagetitle {
  width: 30%;
  font-size: 18px;
  line-height: 44px;
  font-family: MicrosoftYaHei;
  font-weight: bold;
  /* color:  rgba(255, 255, 255, 1); */
  color: rgba(0,0,0,.75);
  padding-left: 24px;
  cursor: pointer;
}
.Top .title_right {
  line-height: 44px;
  /* color:  rgba(255, 255, 255, 1); */
  color:rgba(0,0,0,.75);
  font-size: 12px;
}
</style>
<style lang="less">
.ivu-modal-wrap {
  display: flex;
  align-items: center;
  justify-content: center;

  .ivu-modal {
    top: 0;
  }
}
.logo-div{
  width: 162px;
  width: 193px;
  height: 100%;
  cursor: pointer;
  text-align: center;
  // padding-left:30px;
  border-right: 1px solid rgba(222, 222, 222, .55);
  //box-shadow: 0 5px 1px 7px rgba(222, 222, 222, 0.15);
}
.site-logo{
  margin-top: 5px;
  margin-bottom: 5px;
  max-width: 192px;
  height: 33px;
}
.technologyBtn{
  display: inline-block;
  width: 80px;
  height: 30px;
  border: 1px solid #2d8cf0;
  text-align: center;
  line-height: 30px;
  color:#2d8cf0 ;
  border-radius: 4px;
  margin-top: 8px;

}
</style>


