<template>
  <div class="fortress-info">
    <el-table v-loading="loading" :data="fortressList" style="width: 100%">
      <el-table-column label="堡垒机地址" prop="fortressMachineUrl" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-link
            type="primary"
            :href="scope.row.fortressMachineUrl"
            target="_blank">
            {{ scope.row.fortressMachineUrl }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column label="堡垒机账号" prop="fortressMachineAccount" align="center" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建者" align="center" prop="createBy" width="100" />
      <el-table-column label="备注" prop="remark" align="center" :show-overflow-tooltip="true" />
    </el-table>
  </div>
</template>

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

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

<style scoped>
.fortress-info {
  padding: 10px;
}
</style>