<script lang="ts" setup>
import { ICertInfo } from '@/pages/User/models/type';
import type { PropType } from 'vue';

const props = defineProps({
  title: {
    type: String,
    required: true,
    default: () => '',
  },
  data: {
    type: Array as PropType<ICertInfo[]>,
    required: true,
    default: () => [],
  },
});
</script>

<template>
  <div class="cert-info">
    <div id="serverCart">
      <div class="web-server-cart">
        <img class="img" src="@/assets/common/image/certificate.svg" />
        <span v-t="title" class="title"></span>
      </div>
      <el-divider></el-divider>
      <table class="webServerCert">
        <tr v-for="item in data" :key="item.id">
          <td>{{ item.label }}</td>
          <td :id="item.id" class="web-server-details" :title="item.value">{{ item.value }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.cert-info {
  padding: 0 0 8px 0;
  background: var(--o-bg-color-light);
  border-radius: 4px;
  margin-top: 8px;
  .web-server-cart {
    padding: 8px 0;
    display: flex;
  }

  .img {
    margin-left: 24px;
  }
  .title {
    font-size: 16px;
    line-height: 24px;
    font-weight: 900;
    margin: 12px 8px;
  }

  table {
    table-layout: auto;
    width: 100%;
    border-collapse: collapse;
    td {
      width: 1%;
      white-space: nowrap;
      padding: 0px 0px 16px 24px;
    }
    td:first-child {
      color: var(--o-text-color-secondary);
    }
    td:last-child {
      color: var(--o-text-color-primary);
    }
  }

  .webServerCert {
    padding-top: 8px;
    .web-server-details {
      max-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: auto;
    }
  }

  .el-divider--horizontal {
    margin: 0 0 16px 0;
  }
}
</style>
