<template>
  <FlexCol>
    <SubTitle v-if="title" :title="title" />
    <FlexCol :gap="20">

      <Cell 
        v-if="address"
        :label="address"
        icon="map-filling"
        :iconProps="{ color: 'primary' }"
        value="去这里"
        touchable
        @click="emit('navTo')"
      />

      <template
        v-for="(it, k) in descItems" 
        :key="k"
      >
        <FlexRow 
          v-if="Boolean(it.value)"
          justify="space-between"
        >
          <Text :fontSize="26" color="text.second">{{ it.label }}</Text>
          <Text :fontSize="26" color="text.second">{{ it.value }}</Text>
        </FlexRow>
      </template>
      <slot name="lastDesc" />
    </FlexCol>
    <slot />
  </FlexCol>
</template>

<script setup lang="ts">
import Cell from '@/components/basic/Cell.vue';
import Text from '@/components/basic/Text.vue';
import SubTitle from '@/components/display/title/SubTitle.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import { type PropType } from 'vue';

const props = defineProps({	
  title: {
    type: String,
    default: ''
  },
  address: {
    type: String,
    default: ''
  },
  descItems: {
    type: Array as PropType<Array<{ label: string, value: any }>>,
    default: () => []
  },
})

const emit = defineEmits([	
  "navTo"	
])
</script>