<template>
    <view class="im-cell" :class="[
        `im-cell--${type}`,
        `im-cell--${size}`,
        {
            'im-cell--disabled': disabled,
            'im-cell--border': border,
            'im-cell--hover': hover && !disabled,
            'im-cell--clickable': clickable && !disabled
        }
    ]" :style="cellStyle" @click="handleClick" @longpress="handleLongPress">
        <!-- 左侧内容 -->
        <view v-if="hasLeftContent" class="im-cell__left">
            <!-- 图标 -->
            <view v-if="icon || $slots.icon" class="im-cell__icon">
                <slot name="icon">
                    <image v-if="icon" :src="icon" class="im-cell__icon-image"
                        :class="[`im-cell__icon--${iconPosition}`]" mode="aspectFit" />
                </slot>
            </view>

            <!-- 头像 -->
            <view v-if="avatar || $slots.avatar" class="im-cell__avatar">
                <slot name="avatar">
                    <view class="im-cell__avatar-container">
                        <image v-if="avatar" :src="avatar" class="im-cell__avatar-image" mode="aspectFill" />
                    </view>
                </slot>
            </view>
            <view v-else-if="showAvatarFallback" class="im-cell__avatar">
                <view class="im-cell__avatar-container">
                    <text class="im-cell__avatar-fallback">
                        {{ avatarFallback }}
                    </text>
                </view>
            </view>

            <!-- 标题和描述 -->
            <view class="im-cell__content">
                <view class="im-cell__title">
                    <slot name="title">
                        <text v-if="title" class="im-cell__title-text" :class="[`im-cell__title-text--${titleSize}`]">
                            {{ title }}
                        </text>
                    </slot>
                </view>

                <view v-if="description || $slots.description" class="im-cell__description">
                    <slot name="description">
                        <text v-if="description" class="im-cell__description-text"
                            :class="[`im-cell__description--${descriptionSize}`]">
                            {{ description }}
                        </text>
                    </slot>
                </view>
            </view>
        </view>

        <!-- 右侧内容 -->
        <view v-if="hasRightContent" class="im-cell__right">
            <!-- 值（或角标） -->
            <im-badge v-if="badge" :value="badge" :dot="badgeDot" size="small">
                <view v-if="value || $slots.value" class="im-cell__value">
                    <slot name="value">
                        <text v-if="value" class="im-cell__value-text">
                            {{ value }}
                        </text>
                    </slot>
                </view>
            </im-badge>
            <view v-else>
                <view v-if="value || $slots.value" class="im-cell__value">
                    <slot name="value">
                        <text v-if="value" class="im-cell__value-text">
                            {{ value }}
                        </text>
                    </slot>
                </view>
            </view>

            <!-- 标签 -->
            <view v-if="label || $slots.label" class="im-cell__label">
                <slot name="label">
                    <!-- im-tag -->
                    <view class="im-cell__label-badge">
                        <text v-if="label" class="im-cell__label-text">
                            {{ label }}
                        </text>
                    </view>
                </slot>
            </view>

            <!-- 箭头 -->
            <view v-if="arrow" class="im-cell__arrow">
                <slot name="arrow">
                    <text class="im-cell__arrow-icon">›</text>
                </slot>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { computed, useSlots } from 'vue'
import type { CellProps, CellEmits } from '../../types/components/cell'
import ImBadge from '../im-badge/im-badge.vue'

// Props
const props = withDefaults(defineProps<CellProps>(), {
    type: 'default',
    size: 'medium',
    disabled: false,
    border: true,
    hover: true,
    clickable: true,
    iconPosition: 'left',
    showAvatarFallback: false,
    titleSize: 'medium',
    descriptionSize: 'small',
    arrow: false,
    padding: '',
    margin: '',
    bgColor: '',
    textColor: ''
})

// Emits
const emit = defineEmits<CellEmits>()

// 计算属性
const hasLeftContent = computed(() => {
    return props.icon || props.avatar || props.title || props.description ||
        slots.icon || slots.avatar || slots.title || slots.description
})

const hasRightContent = computed(() => {
    return props.value || props.label || props.badge || props.arrow ||
        slots.value || slots.label || slots.badge || slots.arrow
})

const avatarFallback = computed(() => {
    return props.title ? props.title.charAt(0).toUpperCase() : ''
})

const cellStyle = computed(() => {
    const style: Record<string, string> = {}

    if (props.padding) style.padding = props.padding
    if (props.margin) style.margin = props.margin
    if (props.bgColor) style.backgroundColor = props.bgColor
    if (props.textColor) style.color = props.textColor

    return style
})

// 获取插槽
const slots = useSlots()

// 方法
// const formatBadge = (badge: boolean | number | string): string => {
//     if (typeof badge === 'boolean') return ''
//     if (typeof badge === 'number') {
//         return badge > 99 ? '99+' : badge.toString()
//     }
//     return badge
// }

const handleClick = (event: PointerEvent) => {
    if (props.disabled) return
    emit('click', event)

    // 添加点击反馈
    if (props.clickable) {
        // 可以在这里添加触感反馈
        if (uni?.vibrateShort) {
            uni.vibrateShort()
        }
    }
}

const handleLongPress = (event: TouchEvent) => {
    if (props.disabled) return
    emit('longpress', event)
}
</script>

<style lang="scss" scoped>
.im-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    position: relative;
    transition: all 0.3s ease;

    // 尺寸
    &--small {
        padding: 16rpx 24rpx;
        min-height: 80rpx;
    }

    &--medium {
        padding: 24rpx 32rpx;
        min-height: 96rpx;
    }

    &--large {
        padding: 32rpx 40rpx;
        min-height: 120rpx;
    }

    // 边框
    &--border {
        &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 32rpx;
            right: 0;
            height: 2rpx;
            background-color: #f0f0f0;
            transform: scaleY(0.5);
        }

        &:last-child::after {
            display: none;
        }
    }

    // 悬停效果
    &--hover:active {
        background-color: #f5f7fa;
    }

    // 禁用状态
    &--disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    // 类型样式
    &--primary &__title-text {
        color: #409eff;
    }

    &--success &__title-text {
        color: #67c23a;
    }

    &--warning &__title-text {
        color: #e6a23c;
    }

    &--danger &__title-text {
        color: #f56c6c;
    }

    &--info &__title-text {
        color: #909399;
    }

    // 左侧内容
    &__left {
        display: flex;
        align-items: center;
        flex: 1;
        min-width: 0;
    }

    &__icon {
        margin-right: 16rpx;
        flex-shrink: 0;

        &-image {
            width: 40rpx;
            height: 40rpx;

            &--right {
                margin-right: 0;
                margin-left: 16rpx;
            }
        }
    }

    &__avatar {
        margin-right: 16rpx;
        flex-shrink: 0;

        &-container {
            width: 64rpx;
            height: 64rpx;
            border-radius: 50%;
            background: linear-gradient(135deg, #409eff, #67c23a);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        &-image {
            width: 100%;
            height: 100%;
        }

        &-fallback {
            color: white;
            font-size: 28rpx;
            font-weight: bold;
        }
    }

    &__content {
        flex: 1;
        min-width: 0;
    }

    &__title {
        &-text {
            color: #303133;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            &--small {
                font-size: $im-font-size-small;
            }

            &--medium {
                font-size: $im-font-size;
            }

            &--large {
                font-size: $im-font-size-large;
            }
        }
    }

    &__description {
        &-text {
            font-size: 24rpx;
            color: #909399;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            &--small {
                font-size: $im-font-size-small;
            }

            &--medium {
                font-size: $im-font-size;
            }

            &--large {
                font-size: $im-font-size-large;
            }
        }
    }

    // 右侧内容
    &__right {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        margin-left: 16rpx;
    }

    &__value {
        margin-right: 8rpx;

        &-text {
            font-size: $im-font-size;
            color: #606266;
            white-space: nowrap;
        }
    }

    &__label {
        margin-right: 8rpx;

        &-badge {
            background-color: #f0f9eb;
            border: 1rpx solid #e1f3d8;
            border-radius: 20rpx;
            padding: 4rpx 12rpx;
        }

        &-text {
            font-size: $im-font-size-small;
            color: #67c23a;
        }
    }

    // &__badge {
    //     margin-right: 8rpx;

    //     &-dot {
    //         background-color: #fa3534;
    //         border-radius: 50%;
    //         display: flex;
    //         align-items: center;
    //         justify-content: center;
    //         padding: 2rpx 4rpx;
    //     }

    //     &-text {
    //         color: white;
    //         font-size: $im-font-size-mini;
    //         font-weight: bold;
    //     }
    // }

    &__arrow {
        margin-left: 8rpx;

        &-icon {
            font-size: 64rpx;
            color: #c0c4cc;
            transform: scaleY(1.5);
        }
    }
}
</style>