<template>
    <div class="container">
        <div class="content">
            <div class="card-box">
                <van-swipe-cell v-for="(item,i) in list" :key="i">
                    <div class="box-item" @click.stop="gotoPage(item.walletAddress)">
                        <div style="flex-shrink: 0;">
                            <van-image
                                width="32px"
                                height="32px"
                                round
                                :src="item.img"
                            />
                        </div>
                        <div class="card-text">
                            <div>{{item.addressName}}</div>
                            <div class="address">{{item.walletAddress}}</div>
                        </div>
                    </div>
                    <template #right>
                        <svg-icon class="delete" name="del-icon" @click.stop="changeDelete(i)"/>
                    </template>
                </van-swipe-cell>
            </div>
            <div class="no-more" v-if="list.length == 0">
                <svg-icon style="width: 302px; height: 222px;" name="no-address"/>
                <div class="no-more-text">{{ $t('me.NoNewAddressAvailableAtTheMoment') }}</div>
            </div>
        </div>
        <van-button class="footer-btn" size="large" @click="goToAdd">{{ $t('me.AddNewAddress') }}</van-button>
    </div>
</template>

<script setup>
import { useRouter,useRoute } from 'vue-router'
import { useSystemStore } from "@/stores/modules/systemStore";
const systemStore = useSystemStore();
const router = useRouter();
const route = useRoute()

let list = ref(systemStore.AddressList);
const goToAdd = () => {
    if (route.name === 'transferAddressManagement') {
        router.push({
            path: 'addAddress',
            query:{
                type:'transfer'
            }
        })
    } else if (route.name === 'meAddressManagement') {
        router.push({
            path: 'addAddress',
            query:{
                type:'me'
            }
        })
    }
    
}
const gotoPage = (val) => {
    if (route.name === 'transferAddressManagement') {
        router.push({
            path: 'transferDetail',
            query:{
                address:val
            }
        })
    }
    
}
const changeDelete = (index) => {
    list.value.splice(index,1);
    systemStore.AddressList = list.value;
}
</script>

<style lang="less" scoped>
.container{
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 17px 17px 33px;
    box-sizing: border-box;
    .content{
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .card-box{
            background-color: #fff;
            border-radius: 12px;
            padding: 0 17px;
            margin-bottom: 17px;
            // flex: 1;
            overflow: auto;
            .box-item{
                display: flex;
                align-items: center;
                padding: 15px 0 14px;
                border-bottom: 1px solid #F2F2F2;
                .card-text{
                    margin-left: 12px;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 15px;
                    color: @theme-color1;
                    .address{
                        font-size: 12px;
                        color: #8D8D8D;
                        word-break: break-word;
                    }
                }
            }
            .box-item:last-child{
                border-bottom: 0;
            }
            .delete{
                color: red;
                margin-left: 15px;
                width: 20px; 
                height: 20px;
            }
        }
        .card-box::-webkit-scrollbar{
            width: 0;
        }
        .no-more{
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top:209px;
            .no-more-text{
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 15px;
                color: #8D8D8D;
            }
            
        }
    }
    .footer-btn{
        height: 40px !important;
        line-height: 40px !important;
        background: #D8D8D8;
        border-radius:51px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 15px;
        padding: 9px 0;
        box-sizing: border-box;
        color: #000000;
    }
}
:deep(.van-swipe-cell__right){
    top:40%;
}
</style>