<template>
    <div class='switchAccount'>
        <div class='c-333 c-f14'>
            <div class='c-f20 c-t-center mt50 mb10'>轻触头像以切换账号</div>
            <van-swipe-cell class='mlr15' v-for='(item, index) in list'>
                <div class='mt10 c-border p15 bgc-fff flex f_x_s'>
                    <div class='flex f_y_c' style='flex: 1;width:0;'>
                        <div>
                            <van-image @click="switchAccount(item)" class='p-image' :src="item.photo?'':''"/>
                        </div>
                        <div class='ml15'>
                            <div class='mb5 c-f16'>{{item.name}}</div>
                            <span>{{item.phone}}</span>
                        </div>
                    </div>
                    <div class='c-20d7ad' v-if='index==0'>当前使用</div>
                </div>
                <template #right>
                    <van-button square text="清除" type="danger" class="delete-button" />
                </template>
            </van-swipe-cell>
            <div class='mt10 c-border p15 bgc-fff mlr15 flex f_y_c'>
                <div>
                    <!-- <van-image @click="addAccount()" class='p-image' src=""/> -->
                    <van-button icon="plus" class='p-image c-border bgc-fff c-17B3EC' type="text" />
                </div>
                <div class='c-f16 ml15'>添加账号</div>
            </div>
        </div>
    </div>
</template>
<script>
export default{
    name: 'switchAccount',
    data(){
        return {
            list: [
                {photo:'',name:'张三',phone:'15050505050'},
                {photo:'',name:'张二',phone:'15050505050'}
            ]
        }
    },
    methods:{
        switchAccount(item){

        },
        addAccount(){

        }
    },
    created(){
        
    }
}
</script>
<style scoped lang='scss'>
.switchAccount{
    .p-image{
        width: 45px;
        height: 45px;
        border-radius: 50%;
        overflow: hidden;
    }
    .delete-button{
        height: 100%;
    }
}
</style>