<script setup lang="ts">
import Icon from '@/components/basic/Icon.vue';
import Text from '@/components/basic/Text.vue';
import Touchable from '@/components/feedback/Touchable.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Width from '@/components/layout/space/Width.vue';
import { useTheme } from '@/components/theme/ThemeDefine';
import { DynamicColor } from '@/components/theme/ThemeTools';

defineEmits([ 'moreClicked' ])
defineProps({
  title: {
    type: String,
    default: ''
  },
  moreText: {
    type: String,
    default: '更多'
  },
  showMore: {
    type: Boolean,
    default: false
  },
  badgeColor: {
    type: String,
    default: 'primary'
  },
})

const theme = useTheme();

const badgeStyle = theme.useThemeStyle({
  width: '10rpx',
  height: '32rpx',
  borderRadius: '5rpx',
  marginRight: '14rpx',
})
</script>

<template>
  <FlexRow justify="space-between" align="center" :padding="[ 0, 0, 30, 0 ]">
    <slot name="left">
      <FlexRow align="center">
        <slot name="icon">
          <view :style="{
            ...badgeStyle,
            backgroundColor: theme.resolveThemeColor(badgeColor),
          }"></view>
        </slot>
        <Text fontConfig="h4" :text="title" />
      </FlexRow>
    </slot>
    <slot name="right">
      <Touchable v-if="showMore" align="center" touchable @click="$emit('moreClicked')">
        <Text fontConfig="subText" :text="moreText" />
        <Width :size="10" />
        <Icon icon="arrow-right" :size="26" />
      </Touchable>
    </slot>
  </FlexRow>
</template>