<template>
  <div class="left-section">
    <m-card title="基本信息" mode="2">
      <div class="form">
        <div v-for="(_, i) in new Array(6).fill(1)" :key="i" class="row">
          <div
            v-for="col in basicInfo.slice(i * 2, i * 2 + 2)"
            :key="col.label"
            class="col"
          >
            <p class="label">{{ col.label }}:</p>
            <p class="value">{{ col.value }}</p>
          </div>
        </div>
      </div>
    </m-card>
    <m-card title="设计稿图片" mode="2">
      <div v-if="photos[0].length > 0" class="photos">
        <img v-for="src in photos[0].slice(0, 6)" :key="src" :src="src" />
      </div>
      <m-empty v-else />
    </m-card>
    <m-card title="原始图片" mode="2">
      <div v-if="photos[1].length > 0" class="photos">
        <img v-for="src in photos[1].slice(0, 6)" :key="src" :src="src" />
      </div>
      <m-empty v-else />
    </m-card>
    <m-card title="现状图片" mode="2">
      <div v-if="photos[2].length > 0" class="photos">
        <img v-for="src in photos[2].slice(0, 6)" :key="src" :src="src" />
      </div>
      <m-empty v-else />
    </m-card>
    <m-card title="修缮历史" mode="2">
      <template v-if="photos[3]">
        {{ photos[3] }}
      </template>
      <m-empty v-else />
    </m-card>
  </div>
</template>

<script lang="ts" setup>
import { computed, defineProps } from 'vue'
import type { PropType } from 'vue'

const props = defineProps({
  info: {
    type: Object as PropType<{ [key: string]: any }>,
    required: true,
  },
})
const basicInfo = computed(() => {
  const {
    originalName = '', //原名称
    currentName = '', //现名称
    protectNo = '', //保护编号
    batch = '', //批次
    protectLevel = '', //保护类别
    originalUseKind = '', //原使用性质
    currentUseKind = '', //现使用性质
    build = '', //建造者
    design = '', //设计者
    construct = '', //施工者
    description = '', //描述
  } = props?.info || {}
  return [
    { label: '现名称', value: currentName },
    { label: '原名称', value: originalName },
    { label: '保护编号', value: protectNo },
    { label: '建造者', value: build },
    { label: '批次', value: batch },
    { label: '设计者', value: design },
    { label: '保护类别', value: protectLevel },
    { label: '施工者', value: construct },
    { label: '现使用性质', value: currentUseKind },
    { label: '原使用性质', value: originalUseKind },
    { label: '描述', value: description },
  ]
})

const photos = computed(() => {
  const {
    designPhoto = '', //设计图片
    originalPhoto = '', //原始图片
    currentPhoto = '', //现状图片
    repairHistory = '', //修缮历史
  } = props?.info || {}
  return [
    (designPhoto && designPhoto?.split(',')) || [],
    (originalPhoto && originalPhoto?.split(',')) || [],
    (currentPhoto && currentPhoto?.split(',')) || [],
    repairHistory,
  ]
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.left-section
  $blur()
  padding .05rem
  box-sizing border-box
  border-top .01rem solid $primary-border
  border-bottom .01rem solid $primary-border
  background linear-gradient(to bottom, rgba(30, 193, 255, .3), transparent 5%,  transparent 95%, rgba(30, 193, 255, .3) 100%)
  display flex
  flex-direction column
  >.my-card
    &:nth-of-type(1)
      flex 2
    &:nth-of-type(2)
    &:nth-of-type(3)
    &:nth-of-type(4)
    &:nth-of-type(5)
      flex 1
.form
  .row
    display flex
    align-items center
    background rgba(113,235,255,.05)
    &:nth-of-type(2n)
      background rgba(0,0,0,0.1)
  .col
    flex 1
    display flex
    align-items center
    padding .04rem .08rem
    box-sizing border-box
    .label
      color $secondary-color
      width .6rem
    .value
      flex 1
.photos
  display flex
  >img
    width 15%
    &+img
      margin-left 2%
</style>
