<template>
    <div class="container">
        <div class="cell-box" v-for="(item,i) in tabList" :key="item.name" @click="goTo(i)">
            <svg-icon
              style="width: 44px; height: 44px;"
              :name="item.imgName"
            />
            <div class="cell-content">
                <div>
                    <div class="cell-title">{{item.name}}</div>
                    <div>{{item.text}}</div>
                </div>
                <svg-icon name="right1" style="width: 16px;height:16px"/>
            </div>
        </div>
    </div>
</template>

<script setup>
const router = useRouter();
const tabList = [
    {
        name:$t('form.ImportingThePrivateKey'),
        text:$t('form.ImportByEnteringThePlaintextPrivateKeyOrScanningTheQRCode'),
        imgName:'sydr'
    },
    {
        name:$t('form.ImportMnemonicWords'),
        text:$t('form.ImportByEnteringTheMnemonicPhraseOrScanningTheQRCode'),
        imgName:'zjc'
    },
    // {
    //     name:'keystore導入',
    //     text:'通過輸入keystore文件內容或掃描二維碼進行導入'
    // }
]
const goTo = (i) => {
    router.push({
        path: '/importWallet',
        query: {
            type:i
        }
    })
}
</script>

<style lang="less" scoped>
.container{
    padding:16px;
    .cell-box{
        display: flex;
        align-items: center;
        margin-bottom: 16px;
        .cell-content{
            flex: 1;
            margin-left: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #8D8D8D;
            .cell-title{
                font-weight: 500;
                font-size: 15px;
                color: #000000;
                margin-bottom: 4px;
            }
        }
    }
}
</style>