<template>
    <view :style="`${phone}-style`">
        <uni-swipe-action class="swipe-action">
            <!-- 使用插槽 （请自行给定插槽内容宽度）-->
            <uni-swipe-action-item class="swipe-action-item" v-for="(item, index) in list" :key="item.id">
                <view class="flex flex-align-center " @click="clickItem(item)">

                    <view class="item flex w100">
                        <view class="flex flex-align-center left-box">
                            <view :class="{ 'opacity-0': !item.unRead }" class="dot shrink-0"><text
                                    v-if="phone == 'huawei' || phone == 'oppo'">{{ item.unReadNumber
                                        > 99
                                        ? '99+' : (item.unReadNumber || 1) }}</text>
                            </view>
                            <image class="img avatar shrink-0" :class="item.imgShape"
                                :src="item.img || `/static/image/phone-message/${phone}/default.png`" mode="aspectFill">
                            </image>
                        </view>
                        <view class="border-box  m-l-24 flex-1 flex flex-align-start">
                            <view class="main-box flex-1">
                                <view class="title-box flex-between">
                                    <text class="title">{{ item.title }}</text>
                                    <text class="time">{{ formatDate(item.chatList?.[item.chatList?.length -
                                        1]?.time || item.time)
                                        }}</text>
                                </view>
                                <view class="content"
                                    v-html="item.chatList?.[item.chatList?.length - 1]?.content || ''"></view>
                            </view>
                            <view class="box-right h100 flex-column flex-align-center">
                                <image v-if="phone == 'iphone'" src="/static/image/phone-message/iphone/right.png">
                                </image>
                                <image v-if="item.noNotice && phone == 'iphone'" class="m-t-8"
                                    src="/static/image/phone-message/iphone/notice.png"></image>
                            </view>
                        </view>
                    </view>
                </view>
                <template v-slot:right>
                    <view class="flex flex-align-center" style="margin-left: 1px;">
                        <view class="btn flex-center flex-align-center edit" style="color: #fff;"
                            @click="editItem(item)">
                            <image :src="`/static/image/phone-message/edit.png`">
                            </image>
                        </view>
                        <view class="btn flex-center flex-align-center delete" @click="deleteItem(item)">
                            <image
                                :src="`/static/image/phone-message/${phone == 'huawei' || phone == 'vivo' ? 'huawei' : 'iphone'}/delete.png`">
                            </image>
                        </view>

                    </view>

                </template>
            </uni-swipe-action-item>
        </uni-swipe-action>
    </view>
</template>
<script>
import { stringUtil } from '@/utils/common.js';

</script>
<script setup>
import {
    ref,
    reactive,
    computed
} from 'vue'
import {
    util,
    dateUtil
} from '@/utils/common.js';
// 定义事件
const emit = defineEmits(['item-click', 'delete-item', 'edit-item'])
const props = defineProps({
    // 手机品牌
    phone: {
        type: String,
        default: 'iphone'
    },
    list: {
        type: Array,
        default: () => []
    }
})

/**
 * 时间日期格式化判断
 * @param date 
 */
const formatDate = (date) => {
    if (props.phone == 'oppo') {
        return dateUtil.formatMessageTime(date, true)
    } else if (props.phone == 'huawei') {
        return dateUtil.formatMessageTime(date, true, 'YYYY年M月D日')
    } else if (props.phone == 'vivo') {
        let d = date;
        if (typeof d === 'string') {
            d = new Date(d.replace(/-/g, '/'));
        } else if (typeof d === 'number') {
            d = new Date(d);
        }
        const isCurrentYear = d.getFullYear() === new Date().getFullYear();
        return dateUtil.formatMessageTime(date, true, isCurrentYear ? 'M月D日' : 'YYYY/M/D')
    } else {
        return dateUtil.formatMessageTime(date)
    }
}

/**
 * 点击列表元素
 */
const clickItem = (item) => {
    emit('item-click', item)
}

/**
 * 删除列表元素
 */
const deleteItem = (item) => {
    emit('delete-item', item)
}

/**
 * 修改元素
 * @param item 
 */
const editItem = (item) => {
    emit('edit-item', item)
}
</script>
<style>
@import '@/common/main.css';
</style>
<style lang="less" scoped>
.m-t-4 {
    margin-top: 4rpx;
}

.m-t-8 {
    margin-top: 8rpx;
}

.m-l-24 {
    margin-left: 24rpx;
}

.opacity-0 {
    opacity: 0;
}

.swipe-action-item {
    background-color: #FFFFFF;
}

.avatar {
    border-radius: 50%;
}



.edit {
    background-color: #5855D6;
}

.main-box {
    .title-box {
        margin-bottom: 6rpx;


        .title {
            width: 20px;
            flex: 1;
            color: #1A1A1A;
            font-size: 32rpx;
            line-height: 32rpx;
            white-space: nowrap;
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .time {
            flex-shrink: 0;
            margin-left: 20rpx;
        }
    }
}

// 苹果样式
.iphone-style {
    .circle {
        border-radius: 50% !important;
    }

    .square {
        border-radius: 16rpx !important;
    }

    .swipe-action {
        margin-top: 28rpx;
    }

    .swipe-action-item:first-child {
        .border-box {
            position: relative;
        }

        .border-box::before {
            position: absolute;
            content: '';
            width: 100%;
            height: 1px;
            top: 0;
            left: 0;
            right: 0;
            background-color: #D8D8D8;
            transform: scaleY(0.3);
        }
    }

    .item {
        padding: 0 0 0 14rpx;
        height: 146rpx;
        align-items: center;

        .dot {
            width: 20rpx;
            height: 20rpx;
            background-color: #007BFD;
            border-radius: 50%;
        }

        .img {
            width: 84rpx;
            height: 84rpx;
            margin-left: 16rpx;
            border-radius: 50%;
        }

        .border-box {
            position: relative;
            padding: 18rpx 14rpx 14rpx 0;
            height: 100%;
            // box-shadow: inset 0 -0.3px 0 0 #D8D8D8;
        }

        .border-box::after {
            position: absolute;
            content: '';
            width: 100%;
            height: 1px;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #D8D8D8;
            transform: scaleY(0.3);
        }

        .main-box {
            .title-box {
                margin-bottom: 6rpx;

                .title {
                    color: #1A1A1A;
                    font-size: 32rpx;
                    line-height: 32rpx;
                    font-weight: 600;
                }

                .time {
                    color: #838383;
                    font-size: 28rpx;
                    line-height: 28rpx;
                }
            }

            .content {
                font-size: 28rpx;
                line-height: 38rpx;
                color: #838383;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
        }

        .box-right {
            image {
                width: 28rpx;
                height: 28rpx;
            }
        }
    }

    .btn {
        width: 140rpx;
        height: 146rpx;

        image {
            width: 48rpx;
            height: 48rpx;
        }
    }

    .delete {
        background-color: #FC3E30;
    }

    .edit {
        background-color: #5855D6;
    }
}

// 小米样式
.mi-style {
    .item {
        padding-top: 44rpx;
        height: 170rpx;

        .left-box {
            position: relative;
            height: 40px;
            align-items: flex-start;
            padding-left: 54rpx;
        }

        .dot {
            position: absolute;
            width: 20rpx;
            height: 20rpx;
            background-color: #FA3D30;
            border-radius: 50%;
            left: 16rpx;
            top: 50%;
            transform: translateY(-50%);
        }

        .img {
            width: 76rpx;
            height: 76rpx;
        }

        .border-box {
            position: relative;
            padding: 4rpx 52rpx 8rpx 0;
            margin-left: 22rpx;
            height: 100%;
        }

        .main-box {
            .title-box {
                margin-bottom: 6rpx;

                .title {
                    color: #1A1A1A;
                    font-size: 32rpx;
                    line-height: 32rpx;
                }

                .time {
                    color: #9A9A9A;
                    font-size: 26rpx;
                    line-height: 28rpx;
                }
            }

            .content {
                font-size: 26rpx;
                line-height: 38rpx;
                color: #656565;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
        }

        .box-right {
            image {
                width: 28rpx;
                height: 28rpx;
            }
        }
    }

    .btn {
        width: 140rpx;
        height: 146rpx;

        image {
            width: 48rpx;
            height: 48rpx;
        }
    }

    .delete {
        background-color: #FC3E30;
    }

    .edit {
        background-color: #5855D6;
    }
}

// oppo样式
.oppo-style {
    .item {
        padding-top: 28rpx;
        height: 178rpx;

        .left-box {
            position: relative;
            height: 40px;
            align-items: flex-start;
            padding-left: 34rpx;
        }

        .dot {
            position: absolute;
            padding: 4rpx 10rpx;
            background-color: #E93A22;
            color: #FFFFFF;
            line-height: 20rpx;
            font-size: 20rpx;
            border-radius: 16rpx;
            right: -8rpx;
            top: -4rpx;
            z-index: 1;
            border: 2rpx solid #FFFFFF;
        }

        .img {
            width: 76rpx;
            height: 76rpx;
        }

        .border-box {
            position: relative;
            padding: 4rpx 34rpx 28rpx 0;
            margin-left: 32rpx;
            height: 100%;
        }

        .main-box {
            .title-box {
                margin-bottom: 16rpx;

                .title {
                    color: #1A1A1A;
                    font-size: 32rpx;
                    line-height: 32rpx;
                    font-weight: 500;
                }

                .time {
                    color: #656565;
                    font-size: 26rpx;
                    line-height: 28rpx;
                }
            }

            .content {
                font-size: 28rpx;
                line-height: 38rpx;
                color: #737373;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
        }

        .box-right {
            image {
                width: 28rpx;
                height: 28rpx;
            }
        }
    }

    .btn {
        width: 140rpx;
        height: 146rpx;

        image {
            width: 48rpx;
            height: 48rpx;
        }
    }

    .delete {
        background-color: #FC3E30;
    }

}

// 华为样式
.huawei-style {
    .item {
        padding: 0 32rpx;
        height: 156rpx;
        align-items: center;

        .left-box {
            position: relative;
            height: 40px;
            align-items: flex-start;
        }

        .dot {
            position: absolute;
            padding: 6rpx 10rpx;
            background-color: #E93A22;
            color: #FFFFFF;
            line-height: 20rpx;
            font-size: 20rpx;
            border-radius: 16rpx;
            right: -8rpx;
            top: -12rpx;
            z-index: 1;
        }

        .img {
            width: 76rpx;
            height: 76rpx;
        }

        .border-box {
            padding: 18rpx 0;
            position: relative;
            margin-left: 30rpx;
            margin-top: 2rpx;
            height: 100%;
            box-shadow: 0 -0.3px 0 0 #CFCFCF;
        }

        // .border-box::after {
        //     position: absolute;
        //     content: '';
        //     width: 100%;
        //     height: 1px;
        //     bottom: 0;
        //     left: 0;
        //     right: 0;
        //     background-color: #CFCFCF;
        //     transform: scaleY(0.3);
        // }

        .main-box {
            .title-box {
                margin-bottom: 6rpx;

                .title {
                    color: #1A1A1A;
                    font-size: 32rpx;
                    line-height: 32rpx;
                    font-weight: 500;
                }

                .time {
                    color: #656565;
                    font-size: 24rpx;
                    line-height: 28rpx;
                }
            }

            .content {
                font-size: 28rpx;
                line-height: 38rpx;
                color: #6F6F6F;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
        }

        .box-right {
            image {
                width: 28rpx;
                height: 28rpx;
            }
        }
    }

    .btn {
        width: 140rpx;
        height: 156rpx;

        image {
            width: 76rpx;
            height: 76rpx;
        }
    }

    .delete {
        background-color: #F4F4F4;
    }

}

// vivo样式
.vivo-style {
    .item {
        padding: 0 50rpx 0 24rpx;
        height: 172rpx;
        align-items: center;


        .dot {
            width: 12rpx;
            height: 12rpx;
            background-color: #409DFE;
            border-radius: 50%;
            flex-shrink: 0;
            margin-right: 10rpx;
        }


        .img {
            width: 80rpx;
            height: 80rpx;
        }

        .border-box {
            padding: 28rpx 0 18rpx;
            position: relative;
            margin-left: 24rpx;
            margin-top: 2rpx;
            height: 100%;
        }

        .main-box {
            .title-box {
                margin-bottom: 18rpx;

                .title {
                    color: #1A1A1A;
                    font-size: 32rpx;
                    line-height: 32rpx;
                    font-weight: 500;
                }

                .time {
                    color: #7C7C7C;
                    font-size: 26rpx;
                    line-height: 26rpx;
                }
            }

            .content {
                font-size: 28rpx;
                line-height: 38rpx;
                color: #6F6F6F;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
        }

        .box-right {
            image {
                width: 28rpx;
                height: 28rpx;
            }
        }
    }

    .btn {
        width: 140rpx;
        height: 156rpx;

        image {
            width: 76rpx;
            height: 76rpx;
        }
    }

    .delete {
        background-color: #F4F4F4;
    }

}
</style>
