<template>
  <div class="office-info">
    <el-descriptions :column="3" border v-loading="loading">
      <el-descriptions-item label="办公室名称">{{ office.officeName }}</el-descriptions-item>
      <el-descriptions-item label="门牌号">{{ office.number }}</el-descriptions-item>
      <el-descriptions-item label="所在楼层">{{ office.floor }}</el-descriptions-item>
      <el-descriptions-item label="所在楼宇">{{ office.building }}</el-descriptions-item>
      <el-descriptions-item label="所在园区">{{ office.park }}</el-descriptions-item>
      <el-descriptions-item label="备注">{{ office.remark }}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import { getOfficeInfo } from "@/api/resource/person";

export default {
  name: "OfficeInfo",
  props: {
    personId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      office: {}
    };
  },
  created() {
    this.getOfficeInfo();
  },
  methods: {
    getOfficeInfo() {
      this.loading = true;
      getOfficeInfo(this.personId).then(response => {
        this.office = response.data;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    }
  }
};
</script>