<template>
  <div class="personal">
    <div class="u-box" :style="{zoom:zoomH}">
      <div class="h-info-box">
        <div class="h-info">
          <div class="k">姓名</div>
          <div class="v">{{u.emName}}</div>
          <div class="k">职务</div>
          <div class="v">{{u.PostName}}</div>
        </div>
        <div class="h-img">
          <div class="left-point-samll"></div>
          <div class="right-point-samll"></div>
          <img :src="u.Icon" :onerror="defaultHeadImg" />
        </div>
      </div>
      <div class="u-info">
        <div class="item">
          <span class="k">所属公司</span>
          <span class="v">{{u.BranchName}}</span>
        </div>
        <div class="item">
          <span class="k">所属部门</span>
          <span class="v">{{u.DepartName}}</span>
        </div>
        <!-- <div class="item">
          <span class="k">工作年限</span>
          <span class="v">
            <span style="font-size:22px">2年</span> (900天)
          </span>
        </div> -->
      </div>
      <div class="n-info">
        <div class="item" @click="changeBoard(0)">
          <i class="iconfont icon-yichuheimingdan"></i>
          <span class="n-name">个人首页</span>
          <span class="fang">
            <i class="iconfont icon-right1"></i>
          </span>
        </div>
        <div class="item" @click="changeBoard(1)">
          <i class="iconfont icon-pingjiabaogao"></i>
          <span class="n-name">我的业绩</span>
          <span class="fang">
            <i class="iconfont icon-right1"></i>
          </span>
        </div>
        <div class="item" @click="changeBoard(2)">
          <i class="iconfont icon-guanjun"></i>
          <span class="n-name">冠军之路</span>
          <span class="fang">
            <i class="iconfont icon-right1"></i>
          </span>
        </div>
        <div class="item">
          <i class="iconfont icon-dingdanguanli-"></i>
          <span class="n-name" @click="goUrlNav('groupTourOrder',0,'跟团游订单')">我的订单</span>
          <span class="fang">
            <i class="iconfont icon-right1"></i>
          </span>
        </div>
        <div class="item">
          <i class="iconfont icon-kaohedefen"></i>
          <span class="n-name" @click="goUrlNav('ExaminationStatistics',0,'行政考核')">行政考核</span>
          <span class="fang">
            <i class="iconfont icon-right1"></i>
          </span>
        </div>
        <div class="item" @click="goUrlNav('FinancialDocuments',3,'财务单据')">
          <i class="iconfont icon-danju1"></i>
          <span class="n-name">财务审批</span>
          <span class="fang">
            <span class="tips" v-if="NotDealCount>0">{{NotDealCount}}</span>
            <i class="iconfont icon-right1"></i>
          </span>
        </div>
        <div class="item" @click="goUrlNav('myApproval',-1,'考勤')">
          <i class="iconfont icon-kaoqinshenpi"></i>
          <span class="n-name">考勤审批</span>
          <span class="fang">
            <span class="tips" v-if="MyAuditCount>0">{{MyAuditCount}}</span>
            <i class="iconfont icon-right1"></i>
          </span>
        </div>
        <div class="item" @click="goUrlNav('myDocuments',-1,'企业云盘')">
          <i class="iconfont icon-cloud-disk-services"></i>
          <span class="n-name">我的云盘</span>
          <span class="fang">
            <i class="iconfont icon-right1"></i>
          </span>
        </div>
        <div class="item">
          <i class="iconfont icon-fukuan2"></i>
          <span class="n-name">常用付款对象</span>
          <span class="fang">
            <i class="iconfont icon-right1"></i>
          </span>
        </div>
      </div>
    </div>
    <personalIndex v-if="boardIndex==0"></personalIndex>
    <dailyAnalysis v-if="boardIndex==1"></dailyAnalysis>
    <div class="m-box"  v-if="boardIndex==2" :style="{'left':(300*zoomH)+'px'}">
      <personnelManagement></personnelManagement>
    </div>
    
  </div>
</template>

<script>
import personalIndex from './personalCenter/index'
import dailyAnalysis from './visualization/dailyAnalysis'
import personnelManagement from './activity/PersonnelManagement'
export default {
  data() {
    return {
      u: {},
      defaultHeadImg: `this.src="${require("../assets/img/default_head_img.jpg")}"`,
      zoomH: 1,
      NotDealCount: 0,
      MyAuditCount: 0,
      boardIndex:0
    };
  },
  components: {
    personalIndex,
    dailyAnalysis,
    personnelManagement
  },
  mounted() {
    this.u = this.getLocalStorage();
    this.zoomH = (document.documentElement.clientHeight / 969).toFixed(2);
    this.getNotDealCount();
    this.myAuditCount();
  },
  methods: {
    changeBoard(index){
      this.boardIndex=index
    },
    getNotDealCount() {
      this.apipost(
        "Financial_post_GetNotDealCount",
        {},
        r => {
          if (r.data.resultCode == 1) {
            this.NotDealCount = r.data.data;
          }
        },
        null
      );
    },
    myAuditCount() {
      this.apipost(
        "app_user_workflow_MyAuditCount",
        {},
        r => {
          if (r.data.resultCode == 1) {
            this.MyAuditCount = r.data.data;
          }
        },
        null
      );
    },
    goUrlNav(url, index, name) {
      let query = {
        Conditon: index
      };
      query.tab = name;
      query.blank = "y";
      this.$router.push({ path: url, query });
    }
  }
};
</script>
<style scoped>
.personal {
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* background: #000; */
  background: #0a0919 url("../assets/img/persion/bg.png") 100% 100%;
  position: relative;
}
.personal .u-box {
  width: 300px;
  position: absolute;
  background: #19133e6e;
  left: 0px;
  top: 0;
  bottom: 0;
  border: 1px solid #2c2739;
}
.personal .m-box {
  position: absolute;
  left: 300px;
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba(242, 243, 248, 1);
  overflow-y: auto;
  /* padding-bottom: 20px; */
}
.personal .m-box .personTable{
  margin: 0px;
  width: 100%;
}
.personal .u-box .h-info-box {
  margin: 15px;
  display: flex;
}
.personal .u-box .h-info-box .h-info {
  flex: 1;
}
.personal .u-box .h-info-box .h-info .k {
  color: #8a8894;
  height: 20px;
  line-height: 20px;
  font-size: 16px;
  font-family: "pingfangR";
  text-align: right;
  display: block;
  margin-top: 10px;
}
.personal .u-box .h-info-box .h-info .v {
  color: #ddd;
  height: 20;
  line-height: 20px;
  font-size: 20px;
  font-family: "pingfangR";
  text-align: right;
  display: block;
  margin-top: 10px;
}

.personal .u-box .h-info-box .h-img {
  width: 120px;
  height: 120px;
  border: 1px solid #2c2739;
  position: relative;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-left: 20px;
  display: flex;
}
.personal .u-box .h-info-box .h-img img {
  width: 82px;
  height: 82px;
}
.personal .u-box .u-info {
  margin: 50px 0 0 0;
  padding: 15px;
  background: rgba(25, 19, 62, 0.56);
}
.personal .u-box .u-info .item {
  display: flex;
  margin-bottom: 15px;
  align-items: baseline;
}
.personal .u-box .u-info .item:last-child {
  margin: 0px;
}
.personal .u-box .u-info .item .k {
  color: #8a8894;
  font-size: 14px;
  font-family: "pingfangR";
  text-align: right;
  display: block;
  width: 100px;
}
.personal .u-box .u-info .item .v {
  color: #bbb;
  font-size: 16px;
  font-family: "pingfangR";
  text-align: left;
  display: block;
  margin-left: 10px;
}
.personal .u-box .n-info {
  margin: 20px 0;
  background: rgba(25, 19, 62, 0.56);
}
.personal .u-box .n-info .item {
  align-items: center;
  display: flex;
  padding: 10px 20px;
  /* border-bottom: 1px solid #2c2739; */
  cursor: pointer;
}
.personal .u-box .n-info .item:last-child {
  border: none;
}
.personal .u-box .n-info .item:hover {
  background: rgba(25, 19, 62, 0.8);
}
.personal .u-box .n-info .item:hover *:not(.tips) {
  color: #1e90ff !important;
}
.personal .u-box .n-info .item i {
  color: #bbb;
  font-size: 18px;
  width: 30px;
}
.personal .u-box .n-info .item .n-name {
  flex: 1;
  color: #ddd;
  font-size: 14px;
  font-family: pingfangR;
}
.personal .u-box .n-info .item .fang {
  width: 80px;
  text-align: right;
  padding-right: 15px;
}
.personal .u-box .n-info .item .fang i {
  font-size: 12px;
}
.personal .u-box .n-info .item .fang .tips {
  min-width: 22px;
  height: 22px;
  padding: 5px;
  background: crimson;
  border-radius: 22px;
  display: inline-block;
  vertical-align: sub;
  font-size: 12px;
  text-align: center;
  line-height: 12px;
  overflow: hidden;
  color: #ddd;
  word-break: keep-all;
  font-family: pingfangR;
}

.personal .left-point::after {
  position: absolute;
  width: 9px;
  height: 9px;
  left: -2px;
  top: -2px;
  content: " ";
  border-left: 3px solid #8a8894;
  border-top: 3px solid #8a8894;
}
.personal .left-point::before {
  position: absolute;
  width: 9px;
  height: 9px;
  left: -2px;
  bottom: -2px;
  content: " ";
  border-left: 3px solid #8a8894;
  border-bottom: 3px solid #8a8894;
}
.personal .right-point::after {
  position: absolute;
  width: 9px;
  height: 9px;
  right: -2px;
  top: -2px;
  content: " ";
  border-right: 3px solid #8a8894;
  border-top: 3px solid #8a8894;
}
.personal .right-point::before {
  position: absolute;
  width: 9px;
  height: 9px;
  right: -2px;
  bottom: -2px;
  content: " ";
  border-right: 3px solid #8a8894;
  border-bottom: 3px solid #8a8894;
}

.personal .left-point-samll::after {
  position: absolute;
  width: 5px;
  height: 5px;
  left: -1px;
  top: -1px;
  content: " ";
  border-left: 2px solid #8a8894;
  border-top: 2px solid #8a8894;
}
.personal .left-point-samll::before {
  position: absolute;
  width: 5px;
  height: 5px;
  left: -1px;
  bottom: -1px;
  content: " ";
  border-left: 2px solid #8a8894;
  border-bottom: 2px solid #8a8894;
}
.personal .right-point-samll::after {
  position: absolute;
  width: 5px;
  height: 5px;
  right: -1px;
  top: -1px;
  content: " ";
  border-right: 2px solid #8a8894;
  border-top: 2px solid #8a8894;
}
.personal .right-point-samll::before {
  position: absolute;
  width: 5px;
  height: 5px;
  right: -1px;
  bottom: -1px;
  content: " ";
  border-right: 2px solid #8a8894;
  border-bottom: 2px solid #8a8894;
}

</style>