<template>
  <v-card
    class="ma-4 pa-2"
    outlined>
    <v-img height="130" :src="spaceInfo.avatarUrl" />
    <v-card-title>{{ spaceInfo.name }}</v-card-title>
    <v-simple-table class="center text-sm-body-2 text-md-body-2">
      <tr>
        <th colspan="2" class="text-left pa-0">{{ $t('cs.environmentName') }} : {{ this.environment.name }}</th>
      </tr>
      <tr class="text-left pa-1">
        <td>{{ $t('cs.productVersion') }} : {{ this.environment.productVersion }}</td>
        <td>{{ $t('cs.asName') }} : {{ this.environment.asVersion }}</td>
      </tr>
      <tr class="text-left pa-5">
        <td>{{ $t('cs.osName') }} : {{ this.environment.osVersion }}</td>
        <td>{{ $t('cs.dbName') }} : {{ this.environment.dbVersion }}</td>
      </tr>
      <tr class="text-left pa-5">
        <td>{{ $t('cs.jvmVendorName') }} : {{ this.environment.jvmVersion }}</td>
        <td>{{ $t('cs.ssoName') }} : {{ this.environment.ssoName }}</td>
      </tr>
    </v-simple-table>
  </v-card>
</template>

<script>
export default {
  props: {
    environment: {
      type: Object,
      default: function () {
        return {};
      },
    },
    spaceInfo: {
      type: Object,
      default: function () {
        return {};
      },
    }
  }
};
</script>