<template>
  <div class="personal">
    <div class="u-box" :style="{zoom:zoomH}">
      <div class="h-info-box">
        <div class="h-info">
          <div class="k">{{$t('system.query_name')}}</div>
          <div class="v">{{CurrentUserInfo.emName}}</div>
          <div class="k">{{$t('visaT.post')}}</div>
          <div class="v">{{CurrentUserInfo.PostName}}</div>
        </div>
        <div class="h-img">
          <div class="left-point-samll"></div>
          <div class="right-point-samll"></div>
          <img :src="CurrentUserInfo.Icon" :onerror="defaultHeadImg" />
        </div>
      </div>
      <div class="u-info">
        <div class="item">
          <span class="k" :class="[getLanguage()=='en-US'?'activeW120':'']">{{$t('system.query_company')}}</span>
          <span class="v">{{CurrentUserInfo.BranchName}}</span>
        </div>
        <div class="item">
          <span class="k" :class="[getLanguage()=='en-US'?'activeW120':'']">{{$t('Operation.Op_belongDepartment')}}</span>
          <span class="v">{{CurrentUserInfo.DepartName}}</span>
        </div>
      </div>
      <div class="n-info">
        <div class="item" @click="changeBoard(0)">
          <i class="iconfont icon-yichuheimingdan"></i>
          <span class="n-name">{{$t('objFill.gerensouye')}}</span>
          <span class="fang">
            <i class="iconfont icon-right1"></i>
          </span>
        </div>
        <template v-if="CurrentUserInfo&&CurrentUserInfo.RB_Group_id==2">
          <div class="item" @click="changeBoard(1)">
            <i class="iconfont icon-pingjiabaogao"></i>
            <span class="n-name">{{$t('objFill.wodeyeji')}}</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">{{$t('objFill.guanjunzil')}}</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,'跟团游订单')">{{$t('objFill.wodedindan')}}</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,'行政考核')">{{$t('objFill.xingzhenkh')}}</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">{{$t('objFill.caiwushenp')}}</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">{{$t('objFill.kaoqinshenp')}}</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">{{$t('objFill.wodeyunp')}}</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">{{$t('objFill.changyongfkdx')}}</span>
            <span class="fang">
              <i class="iconfont icon-right1"></i>
            </span>
          </div>
        </template>
      </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 {
        CurrentUserInfo: {},
        defaultHeadImg: 'this.src="' + require("../assets/img/default_head_img.jpg") + '"',
        zoomH: 1,
        NotDealCount: 0,
        MyAuditCount: 0,
        boardIndex: 0,
        EditBtn: false,
      };
    },
    components: {
      personalIndex,
      dailyAnalysis,
      personnelManagement
    },
    mounted() {
      this.GetAuth();
      this.CurrentUserInfo = this.getLocalStorage();
      this.zoomH = (document.documentElement.clientHeight / 969).toFixed(2);
      this.getNotDealCount();
      this.myAuditCount();
    },
    methods: {
      GetAuth() {
        var actionCode = this.$AuthCode.V_PersonalCenter;
        this.CheckUserAuth(actionCode, res => {
          if (res.data.resultCode == 1 && res.data.data == 1) {
            this.EditBtn = true;
          }
        });
      },
      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
        // });
        window.location.href = `http://${window.location.host}/#/${url}?tab=${name}&Conditon=${index}`
      }
    }
  };

</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;
  }

  .red-theme .personal .u-box {
    background: #FBFBFB;
    border: none;
  }

  .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;
  }

  .red-theme .personal .u-box .h-info-box {
    background: #F4F4F4;
    margin: 0;
    padding: 20px 15px;
  }

  .red-theme .personal .u-box .u-info {
    background: none;
  }

  .red-theme .personal .u-box .u-info .item .k {
    color: #787A7D;
    font-family: unset;
  }

  .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;
  }

  .red-theme .personal .u-box .h-info-box .h-img {
    border: 1px dotted #EB3349;
  }

  .red-theme .personal .u-box .h-info-box .h-info .k {
    font-family: unset;
  }

  .red-theme .personal .u-box .h-info-box .h-info .v {
    color: #121315;
  }

  .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 .k.activeW120 {
    width: 120px;
  }

  .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);
  }

  .red-theme .personal .u-box .n-info {
    background: #F4F4F4;
  }

  .red-theme .personal .u-box .n-info .item:hover {
    background: #eaeaea;

  }

  .red-theme .personal .u-box .n-info .item:hover *:not(.tips) {
    color: #33B3FF;
  }

  .red-theme .personal .u-box .n-info .item .n-name {
    color: #333;
    font-family: unset;
  }

  .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;
  }

  .red-theme .personal .left-point-samll::before,
  .red-theme .personal .left-point-samll::after,
  .red-theme .personal .right-point-samll::before,
  .red-theme .personal .right-point-samll::after {
    border-color: #EB3349;
  }

  .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>