<template>
  <div class="item-container">
    <a-space :size="16" direction="vertical" fill>
      <a-descriptions
        v-for="(item, idx) in blockDataList"
        :key="idx"
        :label-style="{
          textAlign: 'right',
          width: '200px',
          paddingRight: '10px',
          color: 'rgb(var(--gray-8))',
        }"
        :value-style="{ width: '400px' }"
        :title="item.title"
        :data="item.data"
      >
        <template #value="{ value }">
          <a-skeleton v-if="loading" :animation="true">
            <a-skeleton-line :widths="['200px']" :rows="1" />
          </a-skeleton>
          <span v-else>{{ value }}</span>
        </template>
      </a-descriptions>
    </a-space>
  </div>
</template>

<script lang="ts" setup>
import { computed, PropType } from 'vue'
import { useI18n } from 'vue-i18n'
import { ProfileBasicRes } from '@/api/profile'

type BlockList = {
  title: string
  data: {
    label: string
    value: string
  }[]
}[]

const props = defineProps({
  type: {
    type: String,
    default: '',
  },
  renderData: {
    type: Object as PropType<ProfileBasicRes>,
    required: true,
  },
  loading: {
    type: Boolean,
    default: false,
  },
})
const { t } = useI18n()
const blockDataList = computed<BlockList>(() => {
  const { renderData } = props
  const result = []
  result.push({
    title: props.type === 'pre' ? t('basicProfile.title.preVideo') : t('basicProfile.title.video'),
    data: [
      {
        label: t('basicProfile.label.video.mode'),
        value: renderData?.video?.mode || '-',
      },
      {
        label: t('basicProfile.label.video.acquisition.resolution'),
        value: renderData?.video?.acquisition.resolution || '-',
      },
      {
        label: t('basicProfile.label.video.acquisition.frameRate'),
        value: `${renderData?.video?.acquisition.frameRate || '-'} fps`,
      },
      {
        label: t('basicProfile.label.video.encoding.resolution'),
        value: renderData?.video?.encoding.resolution || '-',
      },
      {
        label: t('basicProfile.label.video.encoding.rate.min'),
        value: `${renderData?.video?.encoding.rate.min || '-'} bps`,
      },
      {
        label: t('basicProfile.label.video.encoding.rate.max'),
        value: `${renderData?.video?.encoding.rate.max || '-'} bps`,
      },
      {
        label: t('basicProfile.label.video.encoding.rate.default'),
        value: `${renderData?.video?.encoding.rate.default || '-'} bps`,
      },
      {
        label: t('basicProfile.label.video.encoding.frameRate'),
        value: `${renderData?.video?.encoding.frameRate || '-'} fpx`,
      },
      {
        label: t('basicProfile.label.video.encoding.profile'),
        value: renderData?.video?.encoding.profile || '-',
      },
    ],
  })

  result.push({
    title: props.type === 'pre' ? t('basicProfile.title.preAudio') : t('basicProfile.title.audio'),
    data: [
      {
        label: t('basicProfile.label.audio.mode'),
        value: renderData?.audio?.mode || '-',
      },
      {
        label: t('basicProfile.label.audio.acquisition.channels'),
        value: `${renderData?.audio?.acquisition.channels || '-'} ${t('basicProfile.unit.audio.channels')}`,
      },
      {
        label: t('basicProfile.label.audio.encoding.channels'),
        value: `${renderData?.audio?.encoding.channels || '-'} ${t('basicProfile.unit.audio.channels')}`,
      },
      {
        label: t('basicProfile.label.audio.encoding.rate'),
        value: `${renderData?.audio?.encoding.rate || '-'} kbps`,
      },
      {
        label: t('basicProfile.label.audio.encoding.profile'),
        value: renderData?.audio?.encoding.profile || '-',
      },
    ],
  })

  return result
})
</script>

<style scoped lang="less">
.item-container {
  padding-top: 20px;
  :deep(.arco-descriptions-item-label) {
    font-weight: normal;
  }
}
</style>
