<template>
    <div class="container">
        <div class="content">
            <div class="card-box">
                <div class="card-title">{{ $t('me.SelectiveNetwork') }}</div>
                <div class="card-input" style="justify-content: space-between;" @click="showWallet = true">
                    <div class="card-input-lf">
                        <van-image width="30px" height="30px" round :src="selectTokenInfo.logo"/>
                        <div class="card-text">{{selectTokenInfo.name}}</div>
                    </div>
                    <svg-icon style="width: 16px; height: 16px;" name="right1" />
                </div>
            </div>
            <div class="card-box">
                <div class="card-title">{{ $t('me.AddressName') }}</div>
                <div class="card-input">
                    <van-field v-model="addressName" :placeholder="$t('me.PleaseEnterTheNameOfTheAddress')" />
                </div>
            </div>
            <div class="card-box">
                <div class="card-title">{{ $t('me.EnterAddress') }}</div>
                <div class="card-input" style="height:100%">
                    <van-field 
                        type="textarea"
                        v-model="walletAddress"
                        :placeholder="$t('me.PleaseEnterTheAddress')"
                        rows="1"
                        :autosize="true"
                    >
                        <template #right-icon>
                            <svg-icon style="width: 16px; height: 16px;" name="sm" @click="changeSM"/>
                        </template>
                    </van-field>
                </div>
            </div>
        </div>
        <van-button class="footer-btn" type="primary" size="large" :disabled="isConfirm" @click="confirm">{{ $t('me.Notarize') }}</van-button>
        <van-popup v-model:show="showWallet" position="bottom" round style="height:400px">
            <div class="pop-content" style="height:400px">
                <div class="pop-title">
                    <svg-icon style="width: 24px; height: 24px;" name="left-arrow" @click="showWallet = false"/>
                    <div class="title">{{ $t('me.SelectiveNetwork') }}</div>
                </div>
                <div class="list-ul">
                    <div class="list-li" v-for="item in hotTokensList" @click="changeList(item)" :key="item.name">
                        <div class="list-li-lf">
                            <van-image width="42px" height="42px" round :src="item.logo"/>
                            <div style="margin-left: 12px;">{{item.name}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </van-popup>
    </div>
</template>

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

let hotTokensList = walletStore.tokenList;
let selectTokenInfo = ref(walletStore.tokenList[0]);
const showWallet = ref(false);
const addressName = ref('')
const walletAddress = ref('')

const isConfirm = computed(()=>{
    return !(addressName.value.trim() && walletAddress.value.trim());
})
// 扫码
const changeSM = async () => {
    const result = await startScan();
    walletAddress.value = result.ScanResult;
}
// 切换网络
const changeList = (item) => {
    showWallet.value = false;
    selectTokenInfo.value = item;
}
// 确认
const confirm = () => {
    let item = {
        img:selectTokenInfo.value.logo,
        addressName:addressName.value,
        walletAddress:walletAddress.value
    }
    systemStore.AddressList.push(item);
    if(route.query.type == 'transfer'){
        router.push('transferAddressManagement')
    }else{
        router.push('meAddressManagement')
    }
    
}
</script>

<style lang="less" scoped>
.container{
    display: flex;
    flex-direction: column;
height: 100%;
    padding: 17px 17px 33px;
    box-sizing: border-box;
    .content{
        flex: 1;
        .card-box{
            margin-bottom: 25px;
            .card-title{
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 12px;
                color: #8D8D8D;
                margin-bottom: 6px;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
            .card-input{
                background: #F2F2F2;
                border-radius: 8px;
                border: 1px solid #D8D8D8;
                display: flex;
                align-items: center;
                padding: 18px 17px;
                height: 56px;
                box-sizing: border-box;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 15px;
                color: #000000;
                .card-input-lf{
                    display: flex;
                    align-items: center;
                    .card-text{
                        margin-left: 8px;
                        font-weight: 500;
                    }
                }
                :deep(.van-cell) {
                    background:#F2F2F2 !important;
                    padding: 0 !important;
                }
                :deep(.van-field__control) {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 15px;
                    color: #000000;
                }
            }
        }
    }
    .footer-btn{
        height: 40px !important;
        line-height: 40px !important;
        background: linear-gradient( 90deg, @theme-color1 0%, #40A4FB 100%) !important;
        border-radius:51px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 15px;
        padding: 9px 0;
        box-sizing: border-box;
        color: #fff;
    }
    .pop-content{
        display: flex;
        flex-direction: column;
        .pop-title{
            padding: 17px;
            border-bottom: 1px solid #F2F2F2;
            display: flex;
            align-items: center;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 17px;
            color: #000000;
            .title{
                flex: 1;
                display: flex;
                justify-content: center;
            }
        }
        .list-ul{
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: auto;
            margin: 16px;
            .list-li{
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                margin-bottom: 16px;
                .list-li-lf{
                    display: flex;
                    align-items: center;
                    font-size: 15px;
                    color: #000000;
                }
            }
            .list-li:last-child{
                margin-bottom: 0;
            }
        }
        .list-ul::-webkit-scrollbar{
            width: 0;
        }
    }
}
:deep(.van-button--primary){
    border: none !important;
}
</style>