<template>
  <div class="app-content from-table" style="max-height:460px;overflow:auto;">
    <a-spin :spinning="loading" style="width: 100%;height: 100%;">
      <a-row>
        <a-col :span="24">
          <div class="tb-title">
            <span>单位信息</span>
          </div>
        </a-col>
      </a-row>
      <unit-info :data="unitData" />
      <a-row>
        <a-col :span="24">
          <div class="tb-title">
            <span>管理员信息</span>
          </div>
        </a-col>
      </a-row>
      <unit-manager-info :data="managerData" />
    </a-spin>
  </div>
</template>
<script>
import unitInfo from '@/views/unit/components/unitInfo'
import unitManagerInfo from '@/views/unit/components/unitManagerInfo'

export default {
  name: "unitView",
  components: {
    unitInfo, unitManagerInfo
  },
  data () {
    return {
      unitData: {},
      managerData: [],
      loading: false,
    }
  },
  props: {
    value: {
      type: String,
      default: () => {
        return null
      }
    }
  },
  created () {
    this.getUnitById()
  },
  methods: {
    getUnitById () {
      if (this.value) {
        this.loading = true
        this.$api.unit.getUnitById({ id: this.value }).then(({ data = {} }) => {
          if (data) {
            this.unitData = data
            this.managerData = data.managers
          } this.loading = false
        }).catch(() => { this.loading = false })
      }
    }
  }
}
</script>