<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="8" :xs="24" class="userInfo">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <div>
            <div class="text-center">
              <userAvatar />
              <div class="user-name">{{ user.nickName }}</div>
              <div class="user-sex">
                <span class="mr10">{{ getAgeByIdCard(user.idCard) + '岁' }} {{ user.sex == '0' ? ' 男' : ' 女' }}</span>
                <el-tag type="success" v-if="user.status == '0'">在职</el-tag>
                <el-tag type="danger" v-if="user.status == '1'">离职</el-tag>
                <el-tag type="warning" v-if="user.status == '2'">退休</el-tag>
                <el-tag type="primary" v-if="user.status == '3'">试用</el-tag>
                <el-tag type="info" v-if="user.status == '4'">返聘</el-tag>
              </div>

              <div class="info-item" v-for="item in userInfo">
                <div class="item-label" v-if="item.value != '' && item.value != null">
                  <svg-icon :icon-class="item.icon" class="info-icon"></svg-icon>
                  <div class="item-label">{{ item.label }}</div>
                </div>
                <div>{{ item.value }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="16" :xs="24" class="stateInfo">
        <el-card>
          <div slot="header" class="clearfix">
            <span>基本资料</span>
          </div>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="基本资料" name="userinfo">
              <userInfo :user="user" />
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="resetPwd">
              <resetPwd />
            </el-tab-pane>
            <el-tab-pane label="负责项目" name="0">
              <projectInfo :userId="userId"></projectInfo>
            </el-tab-pane>
            <el-tab-pane label="参与项目" name="1">
              <participate :userId="userId"></participate>
            </el-tab-pane>
            <el-tab-pane label="变更记录" name="2">
              <changeRecord :userId="userId"></changeRecord>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import userAvatar from "./userAvatar";
import userInfo from "./userInfo";
import resetPwd from "./resetPwd";
import { getUserProfile } from "@/api/system/user";
import projectInfo from '@/views/oa/staff/projectInfo'
import participate from '@/views/oa/staff/participate'
import changeRecord from '@/views/oa/staff/changeRecord'

export default {
  name: "Profile",
  components: { userAvatar, userInfo, resetPwd, projectInfo, participate, changeRecord },
  dicts: ['sys_normal_disable', 'sys_user_sex', 'sys_user_titles', 'sys_user_certificates', 'sys_user_pmlevel',
    'sys_user_postlevel', 'sys_user_salarylevel', 'sys_user_political', 'sys_user_degree', 'sys_user_engineerlevel', 'sys_user_operatorlevel'], 
  data() {
    return {
      user: {},
      userId: this.$store.getters.userId,
      roleGroup: {},
      postGroup: {},
      userInfo: [],
      activeTab: "userinfo"
    };
  },
  created() {
    this.getUser();
  },
  methods: {
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data;
        this.roleGroup = response.roleGroup;
        this.postGroup = response.postGroup;
        this.userInfo = [
          {
            label: '部门：',
            icon: 'dept',
            value: this.user.dept ? this.user.dept.deptName : ''
          },
          {
            label: '职务：',
            icon: 'dept',
            value: this.postGroup
          },
          {
            label: '联系电话：',
            icon: 'phone',
            value: this.user.phonenumber
          },
          {
            label: '薪资岗级：',
            icon: 'postSalary',
            value: this.selectDictLabel(this.dict.type.sys_user_postlevel, this.user.postLevel) + this.selectDictLabel(this.dict.type.sys_user_salarylevel, this.user.salaryLevel)
          },
          {
            label: '入职时间：',
            icon: 'date',
            value: this.parseTime(this.user.entryDate, '{y}-{m}')
          },
          {
            label: '技术职称：',
            icon: 'titles',
            value: this.user.titles != null ? this.selectDictLabels(this.dict.type.sys_user_titles, this.user.titles, ',') : ''
          },
          {
            label: '职称专业：',
            icon: 'titles',
            value: this.user.titleProfession
          },
          {
            label: '职业资格：',
            icon: 'certificate',
            value: this.user.certificates != null ? this.selectDictLabels(this.dict.type.sys_user_certificates, this.user.certificates, ',') : ''
          },
          {
            label: '工程师岗级：',
            icon: 'engineer',
            value: this.selectDictLabel(this.dict.type.sys_user_engineerlevel, this.user.engineerLevel)
          },
          {
            label: '技工等级：',
            icon: 'operator',
            value: this.selectDictLabel(this.dict.type.sys_user_operatorlevel, this.user.operatorLevel)
          },
          {
            label: '项目经理级别：',
            icon: 'pmLevel',
            value: this.selectDictLabel(this.dict.type.sys_user_pmlevel, this.user.pmLevel)
          },
          {
            label: '身份证号码：',
            icon: 'idCard',
            value: this.user.idCard
          },
          {
            label: '籍贯：',
            icon: 'place',
            value: this.user.nativePlace
          },
          {
            label: '政治面貌：',
            icon: 'politicalAffiliation',
            value: this.selectDictLabels(this.dict.type.sys_user_political, this.user.politicalAffiliation, ',')
          },
          {
            label: '民族：',
            icon: 'flower',
            value: this.user.ethnic
          },
          {
            label: '最高学历毕业院校：',
            icon: 'school',
            value: this.user.graduateSchool
          },
          {
            label: '最高学历专业：',
            icon: 'major',
            value: this.user.major
          },
          {
            label: '最高学历：',
            icon: 'degree',
            value: this.selectDictLabel(this.dict.type.sys_user_degree, this.user.degree)
          },
          {
            label: '初始学历毕业院校：',
            icon: 'school',
            value: this.user.initialSchool
          },
          {
            label: '初始学历专业：',
            icon: 'major',
            value: this.user.initialMajor
          },
          {
            label: '初始学历：',
            icon: 'degree',
            value: this.selectDictLabel(this.dict.type.sys_user_degree, this.user.initialDegree)
          },
          {
            label: '合同签订：',
            icon: 'contractSign',
            value: this.parseTime(this.user.contractSign, '{y}-{m}-{d}')
          },
          {
            label: '合同期满：',
            icon: 'contractExpire',
            value: this.parseTime(this.user.contractExpire, '{y}-{m}-{d}')
          },
          {
            label: '家庭住址：',
            icon: 'homePlace',
            value: this.user.homePlace
          },
          {
            label: '紧急联系方式：',
            icon: 'user',
            value: (this.user.contact ? this.user.contact : '') + (this.user.telephone ? this.user.telephone : '')
          },
          {
            label: '备注：',
            icon: 'log',
            value: this.user.remark
          },
        ]
      });
    },
    getAgeByIdCard(idCard) {
      //获取用户身份证号码
      const userCard = idCard
      //如果用户身份证号码为undefined则返回空
      if (!userCard) {
        return 0
      }
      // 获取出生日期
      const yearBirth = userCard.substring(6, 10)
      const monthBirth = userCard.substring(10, 12)
      const dayBirth = userCard.substring(12, 14)
      // 获取当前年月日并计算年龄
      const myDate = new Date()
      const monthNow = myDate.getMonth() + 1
      const dayNow = myDate.getDate()
      let age = myDate.getFullYear() - yearBirth

      if (monthNow < monthBirth || (monthNow == monthBirth && dayNow < dayBirth)) {
        age--
      }
      return age
    },
  }
};
</script>

<style lang="scss" scoped>
.userInfo {
  background-color: #fff;
  height: 1000px;
  padding: 5px;

  .user-name {
    font-size: 18px;
    font-weight: bold;
  }

  .user-sex {
    line-height: 30px;
    font-size: 14px;
    color: #797979;
  }

  .info-item {
    line-height: 30px;
    color: #5A5A5A;
    font-size: 14px;
    padding-left: 30px;
    display: flex;
    align-items: flex-start;

    .info-icon {
      font-size: 20px;
      margin-right: 10px;
      vertical-align: middle;
    }

    .item-label {
      max-width: 156px;
      display: flex;
      align-items: center;
      font-family: '微软雅黑';
      font-weight: bold;
      // text-align: right;
      // display: inline-block;
    }
  }
}

.stateInfo {
  background-color: #fff;
  height: 1000px;
  overflow-y: scroll;
  padding: 10px 30px 0;
}
</style>