<template>
  <Touchable
    :id="id"
    :innerStyle="checked ? context.checkedItemStyle.value : context.itemStyle.value"
    :pressedColor="context.pressedColor.value"
    :touchable="!disabledProp || !item[disabledProp]"
    direction="row"
    @click="emit('click')"
  >
    <!--TODO: 在uniapp插槽问题修复后，此处可修改为插槽默认值-->
    <slot v-if="overrideItem" name="itemContent" />
    <text 
      v-else
      :style="{
        ...(checked ? context.checkedTextStyle.value : context.textStyle.value),
        color: colorProp ? item[colorProp] : undefined,
      }"
    >{{
      dataDisplayProp ?
        (item as unknown as Record<string, string>)[dataDisplayProp] :
        (item as unknown as string) 
      }}
    </text>
    <CheckBoxDefaultButton
      v-if="showCheck"
      v-bind="context.checkProps.value"
      :on="checked"
    />
  </Touchable>
</template>

<script setup lang="ts">
import { inject } from 'vue';
import CheckBoxDefaultButton from '../form/CheckBoxDefaultButton.vue';
import Touchable from '../feedback/Touchable.vue';
import type { SimpleListContext } from './SimpleList.vue';


export interface SimpleListItemProps {
  showCheck?: boolean;
  checked?: boolean;
  dataDisplayProp?: string,
  colorProp?: string,
  disabledProp?: string,
  item?: any,
  id?:string,
  overrideItem?: boolean,
}

const props = withDefaults(defineProps<SimpleListItemProps>(), {});
const emit = defineEmits([ 'click' ]);

const context = inject<SimpleListContext>('SimpleListContext') as SimpleListContext;
</script>