<template>
  <div class="container">
    <div class="personal">
      <h3><span>个人信息</span></h3>
      <div class="personal-content">
        <span class="label">用户名：</span>
        <span>{{ userInfo.userName }}</span>
        <span class="label">注册邮箱：</span>
        <span>{{ userInfo.email }}</span>
        <span class="label">姓名：</span>
        <span>{{ userInfo.name }}</span>
      </div>
    </div>
    <div class="personal">
      <h3><span>医院信息</span></h3>
      <div class="personal-content">
        <span class="label">医院名称：</span>
        <span>{{ userInfo.orgName }}</span>
        <span class="label">科室：</span>
        <span>{{ userInfo.deptName }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex"

export default {
  name: "AccountInfo",
  components: {},
  data() {
    return {}
  },
  computed: {
    ...mapGetters({
      userInfo: "user/userInfo",
    }),
  },
  created() {},
  mounted() {},
  methods: {},
}
</script>

<style lang="scss" scoped>
.personal {
  h3 {
    padding: 10px 40px;
    display: inline-block;
    background-color: #f2f2f2;
  }

  &-content {
    padding: 30px 20px;
    margin-top: 10px;
    font-size: 15px;
    border-top: 1px solid #ebeef5;
    line-height: 30px;
    .label {
      font-weight: bold;
      margin-right: 8px;
    }
    span {
      margin-right: 40px;
    }
    .el-col {
      margin-top: 10px;
    }
  }
}
</style>