<template>
  <view
    class="text-[26rpx] text-[#000] mx-[24rpx] bg-[#fff] flex flex-col px-[20rpx] gap-[10rpx] pb-[20rpx] custom-class"
  >
    <view class="flex gap-[10rpx] w-full">
      <view class="w-[94rpx] py-[12rpx] bg-color text-center">类型</view>
      <view class="py-[12rpx] text-center bg-color flex-1">性格特点</view>
    </view>
    <view class="flex gap-[10rpx] w-full" v-for="(item, index) in reportItems" :key="index">
      <view
        class="w-[94rpx] py-[12rpx] bg-color text-center flex flex-col justify-center items-center text-[#333] font-700"
      >
        <view>{{ item.tag }}</view>
        <view>{{ item.title }}</view>
      </view>
      <view class="py-[22rpx] px-[14rpx] text-start bg-color flex-1">{{ item.resolving }}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
const props = defineProps({
  reportItems: {
    type: Array<any>,
    default: () => [],
  },
})
</script>

<style lang="scss" scoped>
.bg-color {
  background-color: #f5faff;
  border-radius: 8rpx;
}

.custom-class {
  border-radius: 0 0 20rpx 20rpx;
}
</style>
