<template>
    <div class="container">
        <div class="content">
            <div class="tab-box">
                <div v-for="(item,i) in tabList" :key="i"
                    class="tab-text" 
                    :class="type == i?'active-color':''" 
                    @click="type = i">{{ item }}
                </div>
            </div>
            <div class="list-box">
                <template v-if="type == 0">
                    <div class="box-item" v-for="(item,i) in 10">
                        <van-image class="box-img" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
                        <div>
                            <div class="box-name">苏苏编号<span class="ml12">15:10</span></div>
                            <!-- 名片 -->
                            <div class="business-card" v-if="i % 2 === 0">
                                <div class="business-card-cont" >
                                    <van-image class="list-img" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
                                    <div>名字名字</div>
                                </div>
                                <div class="line"></div>
                                <div class="business-card-text">个人名片</div>
                            </div>
                            <!-- 文本信息 -->
                            <div class="box-content" v-if="i % 2 !== 0">文本信息文本信息文本信息文本信息文本信息文本信息文本信息文本信息</div>
                        </div>
                    </div>
                </template>
                <template v-else>
                    <div class="no-more">
                        <svg-icon class="no-more-img" name="no-more" />
                        <div>暂无数据</div>
                    </div>
                </template>
            </div>
           <div class="foot-page">
                <van-button class="foot-btn" size="mini">上一页</van-button>
                <div class="foot-total">1/1</div>
                <van-button class="foot-btn" size="mini">下一页</van-button>
           </div>
        </div>
    </div>
</template>

<script setup>
const type = ref(0);
const tabList = ['全部','文本','图片','视频','文件']
</script>

<style lang="less" scoped>
.container{
    height: 100%;
    display: flex;
    flex-direction: column;
    .content{
        display: flex;
        flex-direction: column;
        height: 100%;
        .tab-box{
            display: flex;
            align-items: center;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 15px;
            color: #4F4F4F;
            height: 42px;
            line-height: 42px;
            background-color: #fff;
            .tab-text{
                width: 25%;
                text-align: center;
            }
            .active-color{
                font-weight: 500;
                color: #4765DD;
            }
        }
        .list-box{
            margin: 16px;
            flex: 1;
            overflow: auto;
            .box-item{
                display: flex;
                margin-bottom: 16px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #8D8D8D;
                .box-img{
                    width: 44px;
                    height: 44px;
                    margin-right: 12px;
                    flex-shrink: 0;
                }
                .box-name{
                    margin-bottom: 8px;
                    .ml12{
                        margin-left: 12px;
                    }
                }
                .business-card{
                    width: 199px;
                    height: 93px;
                    background: #FFFFFF;
                    border-radius: 10px;
                    margin-top: 8px;
                    padding: 10px;
                    box-sizing: border-box;
                    .business-card-cont{
                        display: flex;
                        align-items: center;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 15px;
                        color: #000000;
                    }
                    .list-img{
                        width: 44px;
                        height: 44px;
                        flex-shrink: 0;
                        margin-right: 12px;
                    }
                    .line{
                        height: 1px;
                        background: #F2F2F2;
                        margin: 10px 0 6px;
                    }
                    .business-card-text{
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 10px;
                        color: #8D8D8D;
                    }
                }
                .box-content{
                    max-width: 230px;
                    background: #FFFFFF;
                    border-radius: 10px;
                    margin-top: 8px;
                    padding: 8px 17px;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 15px;
                    color: #000000;
                }
            }
            .no-more{
                margin-top: 178px;
                text-align: center;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 15px;
                color: #8D8D8D;
                .no-more-img{
                    width: 302px;
                    height: 222px;
                }
            }
        }
        .list-box::-webkit-scrollbar{
            width: 0;
        }
        .foot-page{
            display: flex;
            align-items: center;
            height: 44px;
            background: #FFFFFF;
            padding: 10px 16px;
            box-sizing: border-box;
            .foot-btn{
                box-sizing: border-box;
                width: 50px;
                border-radius: 4px;
                padding: 4px 6px;
                background: #F2F2F2;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #4F4F4F;
            }
            .foot-total{
                flex: 1;
                text-align: center;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 12px;
                color: #4F4F4F;
            }
        }
    }
}
</style>