<template>
  <div class="ec-user-info">
    <div class="ec-user-body">
      <div class="ec-left">
        <el-avatar :size="80" :src="user.avatar" @error="avatarError"></el-avatar>
        <div class="ec-mt-5 ec-user-name">
          <span>{{ user.emplName }}</span>
        </div>
        <div class="ec-mt-5" v-for="(emplDeptJob, idx) in user.emplDeptJobs" :key="idx">
          <span>{{ emplDeptJob.jobName }}</span>
        </div>
      </div>
      <div class="ec-middle"><el-divider class="ec-divider" direction="vertical" /></div>
      <div class="ec-right">
        <div class="ec-form-item">
          <span class="ec-form-lable">编号： </span><span class="ec-form-content">{{ user.emplNo }}</span>
        </div>
        <div class="ec-form-item">
          <span class="ec-form-lable">性别： </span><span class="ec-form-content">{{ user.sex }}</span>
        </div>
        <div class="ec-form-item">
          <span class="ec-form-lable">电话： </span><span class="ec-form-content">{{ user.cellPhone }}</span>
        </div>
        <div class="ec-form-item">
          <span class="ec-form-lable">公司邮箱： </span><span class="ec-form-content">{{ user.email }}</span>
        </div>
        <div class="ec-form-item"><span class="ec-form-lable">通讯地址： </span><span class="ec-form-content"></span></div>
      </div>
    </div>
    <div class="ec-user-footer">
      <el-button @click="close">关 闭</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import { Avatar, Divider, Button } from "element-ui";
import Component from "vue-class-component";
import { Prop } from "vue-property-decorator";
import { User } from "@/model/User";
@Component({
  name: "UserInfo",
  components: {
    "el-avatar": Avatar,
    "el-divider": Divider,
    "el-button": Button
  }
})
export default class UserInfo extends Vue {
  @Prop({ type: Object, default: () => new User() }) user: User | undefined;

  avatarError() {}

  close() {
    this.$emit("update:visible", false);
  }
}
</script>

<style scoped lang="scss">
.ec-user-info {
  display: flex;
  flex-direction: column !important;
  height: 100%;
  align-items: center;
  justify-items: center;
  .ec-user-body {
    width: 100%;
    display: flex;
    flex-direction: row !important;
    align-items: center;
    .ec-left {
      width: 40%;
      text-align: center;
      .ec-mt-5 {
        margin-top: 5px;
      }
      .ec-user-name {
        font-weight: 500;
        font-style: normal;
        font-size: 28px;
        line-height: 22px;
        color: rgba(0, 0, 0, 0.85098);
        white-space: nowrap;
      }
    }
    .ec-middle {
      width: 10%;
      .ec-divider {
        height: 100px;
      }
    }
    .ec-right {
      width: 60%;
      white-space: nowrap;
      .ec-form-item {
        margin: 10px;
      }
      .ec-form-lable {
        color: #1b162f;
        margin-right: 2px;
      }
    }
  }
  .ec-user-footer {
    width: 100%;
    margin-top: 10px;
    text-align: right;
  }
}
</style>
