<template>
  <div class="com-table-box">
    <table>
      <tbody>
        <template v-for="item in permissionObjectInfos" :key="item.id">
          <tr>
            <td>{{ t('permission.productionPermission.objectInformation.objectTypeName') }}</td>
            <td>{{ t('permission.productionPermission.objectInformation.objectLabel') }}</td>
          </tr>
          <tr>
            <td>{{ item.typeName }}</td>
            <td>{{ item.label }}</td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
</template>
<script lang="ts">
import type { PropType } from 'vue';
import type { IObjectItem } from './type';
import { defineComponent } from 'vue';
import { useI18n } from '@crami/locale';
export default defineComponent({
  props: {
    permissionObjectInfos: {
      type: Array as PropType<IObjectItem[]>,
      default: () => [],
    },
  },
  setup() {
    const { t } = useI18n();
    return { t };
  },
});
</script>
<style lang="less" scoped>
@borderRadius: 4px;
.com-table-box {
  width: 100%;
  // table写border会有间隙，避免使用
  table {
    width: 100%;
    border-spacing: 0;
    border-collapse: separate;
  }
  tr:nth-child(odd) {
    background-color: #f5f6f7;
    td {
      font-weight: bold;
      color: #333;
    }
  }
  tr:nth-child(even) {
    background-color: #fff;
    td {
      color: #666;
      word-break: break-word;
    }
  }
  th,
  td {
    padding: 8px 20px;
    width: 50%;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    line-height: 22px;
    border: 1px solid #d9d9d9;
    border-left: none;
    border-top: none;
  }
  tr:first-child {
    td {
      border-top: 1px solid #d9d9d9;
    }
    td:first-child {
      border-top-left-radius: @borderRadius;
    }
    td:last-child {
      border-top-right-radius: @borderRadius;
    }
  }
  tr {
    td:first-child {
      border-left: 1px solid #d9d9d9;
    }
  }
}
</style>
