<template>
  <Touchable 
    align="center" 
    justify="space-between" 
    radius="radius.md"
    :padding="[16,20]" 
    :backgroundColor="isSelected ? 'background.bar' : ''" 
    touchable
    @click="emit('click')"
  >
    <FlexRow align="center" gap="gap.md">
      <Icon :icon="icon" />
      <FlexCol>
        <Text 
          :text="desc || '未命名'"
          :ellipsis="true"
          :style="{ flex: 1, maxWidth: '500rpx' }"
          :wrap="false"
        />
        <Text 
          v-if="title"
          :text="title"
          fontConfig="secondText"
        />
      </FlexCol>
    </FlexRow>
    <FlexRow>
      <IconButton 
        v-if="showMore" 
        icon="elipsis"
        @click="emit('moreClick', $event)"
      />
      <Icon v-if="rightIcon" :icon="rightIcon" />
    </FlexRow>
  </Touchable>
</template>

<script setup lang="ts">
import Icon from '@/components/basic/Icon.vue';
import IconButton from '@/components/basic/IconButton.vue';
import Text from '@/components/basic/Text.vue';
import Touchable from '@/components/feedback/Touchable.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import { computed, inject, type Ref } from 'vue';

const props = defineProps<{
  name: string;
  desc: string;
  title?: string;
  icon?: string;
  rightIcon?: string;
  showMore?: boolean;
}>();

const emit = defineEmits(['click', 'moreClick']);

const currentSelectedKey = inject<Ref<string>>('selectedKeys');
const isSelected = computed(() => currentSelectedKey?.value == props.name);

</script>
