<script setup lang="ts">
defineOptions({ name: 'mj-list-cell' })
const props = withDefaults(
    defineProps<{
        icon?: string
        iconWidth?: any
        title?: string
        height?: any
        arrow?: boolean
    }>(),
    {
        iconWidth: 40,
        height: 60,
        arrow: true,
    }
)
const { icon, iconWidth, title, arrow, height } = props
const emit = defineEmits(['click'])
</script>

<template>
    <tui-list-cell lineLeft="0" v-bind="$attrs" :arrow="arrow" @click="emit('click')">
        <view
            class="cell-box"
            :style="{
                height: height + 'rpx',
                paddingRight: arrow ? 40 + 'rpx' : 0,
            }"
        >
            <view class="left">
                <view class="mj-icon" v-if="icon">
                    <image
                        :style="{
                            width: iconWidth + 'rpx',
                        }"
                        :src="icon"
                        class="cell-logo"
                        mode="widthFix"
                    ></image>
                </view>
                <text class="cell-title">{{ title }}</text>
            </view>
            <view class="right">
                <slot></slot>
            </view>
        </view>
    </tui-list-cell>
</template>

<style lang="scss" scoped>
.cell-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cell-title {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cell-logo {
    flex-shrink: 0;
}

.left {
    display: flex;
    align-items: center;
}

.right {
}

.mj-icon {
    width: 50rpx;
    margin-right: 40rpx;
    text-align: center;
}
</style>
