<template>
  <div
    class="rounded-[10px] bg-black-19191A rounded-b-[10px] px-[34px] pt-[12px] pb-[28px]"
  >
    <details-row
      v-for="(item, index) in invariable.labels"
      :key="index + item"
      :title="item"
      :value="currentData?.[invariable.sequence?.[index]]?.toString()"
      :value-color="invariable.colorSequence[index]"
      :is-copy="invariable.isCopys[index]"
    />
    <upper-lower-switch
      :current="`Block${blockId}`"
      :prev="handlePrev"
      :next="handleNext"
    />
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, watchEffect } from 'vue'
import DetailsRow from '../dBase/detailsRow.vue'
import UpperLowerSwitch from '@src/components/base/UpperLowerSwitch.vue'
import { detailsCollocate } from '../constant'
import { getBlock } from '@src/api/BlockController'

const props = defineProps({
  data: Object,
})

const blockId = ref() // 当前id
const currentData = ref() // 当前data

// 点击了上一个
const handlePrev = () => {
  if (!blockId) {
    return
  }
  // 请求上一页的数据
  requestByBlockId(Number(blockId.value) - 1)
}
// 点击了下一个
const handleNext = () => {
  if (!blockId) {
    return
  }
  // 请求上一页的数据
  requestByBlockId(Number(blockId.value) + 1)
}
// 请求函数
const requestByBlockId = async (id: number) => {
  const params = {
    number: id,
  }
  try {
    const res = await getBlock(params)
    if (res.data) {
      // 当请求回来的数据不为空才更新data
      currentData.value = res.data
    }
  } catch (error) {}
}

// 当 props.data 改变
watchEffect(() => {
  currentData.value = props.data
})
// 更新标识
watchEffect(() => {
  blockId.value = currentData.value?.number
})
const invariable = {
  ...detailsCollocate,
}
</script>
<style lang="scss"></style>
