<template>
    <div class="container">
        <div class="banner-top" />
        <div class="main">
            <div class="cannect-wallet pointer" v-if="!walletConnected" @click="toCannectWallet">{{$t('connectWallet')}}</div>
            <div class="cannect-wallet wrong-network" v-else-if="!isValidChaindId" @click="showConnetChain = true">{{$t('errChain')}}</div>
            <div class="cannect-wallet" v-else>{{$hideMoreText(currentWalletAddress, 7, 0)}}</div>
            
            <div class="redemption-wrap">
                <div class="redemption-name">{{holdItem.name}}</div>
                <div class="redemption-window hold" style="margin-bottom: .85rem">
                    <div class="redemption-tit">
                        <div class="token-name pointer" @click="changeToken('holdItem', holdItem.chainName)">
                            <img :src="holdItem.coinData.url || require(`@/assets/images/logo.png`)" alt="">
                            <span>{{holdItem.coinData.name}}</span>
                        </div>
                        <div class="redemption-over">{{$t('balance')}}：{{$toRegularNumber(balance)}}</div>
                    </div>
                    <div class="redemption-money">
                        <input type="text" :placeholder="$t('placeholder1')" v-positiveInt class="number-input">
                    </div>
                </div>
                <div class="change-img pointer" @click="exchange">
                    <img src="@/assets/images/exchange.png" alt="">
                </div>
                <div class="redemption-name">{{exchangeItem.name}}</div>
                <div class="redemption-window exchange">
                    <div class="redemption-tit">
                        <div class="token-name pointer" @click="changeToken('exchangeItem', exchangeItem.chainName)">
                            <img :src="exchangeItem.coinData.url || require(`@/assets/images/logo.png`)" alt="">
                            <span>{{exchangeItem.coinData.name}}</span>
                        </div>
                        <div class="redemption-over">{{$t('expectedGet')}}</div>
                    </div>
                    <div class="redemption-money">
                        <div class="number">{{obtain}}</div>
                    </div>
                </div>
                <div class="handling-fee">{{$t('handlingFee')}}<span>0.3%</span></div>
            </div>
            <div class="convert-btn pointer" @click="transfer">{{$t('transfer')}}</div>
        </div>
        <EDialog :title="$t('chooseToken')" :visible="dialogVisible" @close="dialogVisible = false" v-if="dialogVisible">
            <ul class="select-list">
                <li class="select-item" v-for="(item, index) in tokenList" :key="index" @click="changeSelect(index,item)" :class="selectIndex === index ? 'active' : ''">
                    <div class="item-left">
                        <img :src="item.url || require(`@/assets/images/logo.png`)" alt="">
                        <span class="item-name">{{item.name}}</span>
                    </div>
                    <img v-if="selectIndex === index" src="../../assets/images/select.png" alt="">
                </li>
            </ul>
        </EDialog>
        <MConnectWallet/>
        <van-loading class="loading-bg" type="spinner" color="#303030" size="24px" v-show="pageLoading" />
        <NetworkErrorModal @close="showConnetChain = false" :visible="showConnetChain"/>
    
    </div>
</template>

<script>
import {
    desc,
    MINTER_ROLE,
    expandTo18Decimals,
    BN,
    getHash,
    gasLeft,
} from "@/utils/constant";
import { BigNumber } from 'bignumber.js'
import * as metaMask from '@/api/demoMETAMASK';
import EDialog from '@/components/EDialog.vue';
import { createNamespacedHelpers } from 'vuex';
import { getTokenList } from '@/utils/data/tokenList'
import { connectWallet } from '@/service/loginService'
import MConnectWallet from '@/components/MConnectWallet.vue'
import NetworkErrorModal from '@/components/NetworkErrorModal.vue'
import { validChainIds } from '@/networkConfig';

const { mapState: mapStateWallet, mapMutations: mapMutationsWallet } = createNamespacedHelpers('wallet');
const { mapState: mapStateNetwork } = createNamespacedHelpers('network');

const erc20Abi = require('../../abi/ERC20.json');




export default {
    data() {
        return {
            dialogVisible: false,
            pageLoading: false,
            tokenList: [],
            tokenListOrigin: [],
            tokenListTKM: [],
            tokenListBSC: [],
            selectIndex: '',
            holdItem: {
                name: 'THINKIUM',
                chainName: 'thk',
                coinData: {},
            },
            exchangeItem: {
                name: 'BSC',
                chainName: 'bsc',
                coinData: {},
            },
            changeItem: '',
            inputValue: '',
            rbalance: 1,
            showConnetChain: false,
        }
    },
    computed: {
        ...mapStateWallet(['currentWalletAddress']),
        ...mapStateNetwork(['chainId']),
        walletConnected() {
            return this.$store.getters.walletConnected;
        },
        obtain() {
            return this.inputValue * 0.997 || '';
        },
        currentWalletAddressAndChainId() {
            return this.currentWalletAddress && this.chainId
        },
        isValidChaindId() {
            let chainId = this.$store.getters.chainId;
            return validChainIds.includes(chainId - 0);
        },
    },
    asyncComputed: {
        balance: {
            get() {
                const { coinData } = this.holdItem;
                if (!this.walletConnected) {
                    return 0;
                }
                if (coinData.chainId != this.chainId) {
                    this.networkAlert();
                    return 0;
                }
                if (!this.rbalance) {

                }
                if (coinData.type == 'main') {
                    return this.getAccountBalance().then(res => res);
                } else if (coinData.type == 'erc20') {
                    return this.getTokenBalance({ contractAddress: coinData.contractAddress }).then(res => res);;
                }
            }
        }
    },
    components: {
        EDialog,
        MConnectWallet,
        NetworkErrorModal
    },
    methods: {
        ...mapMutationsWallet(['CHANGE_CONNECT_WALLET_MODAL_STATUS']),
        async init() {
            this.tokenListOrigin = getTokenList(this.chainId);
            this.tokenListTKM = this.getTokensByChainName('thk') || [];
            this.tokenListBSC = this.getTokensByChainName('bsc') || [];

            let thk = {
                name: 'THINKIUM',
                chainName: 'thk',
                coinData: {},
            }
            let bsc = {
                name: 'BSC',
                chainName: 'bsc',
                coinData: {},
            }
            if (this.tokenListBSC.map(item => item.chainId).includes(this.chainId)) {
                this.holdItem = bsc;
                this.exchangeItem = thk;
            } else {
                this.holdItem = thk;
                this.exchangeItem = bsc;
            }
            this.changeItem = 'holdItem';
            let token = this.tokenListOrigin.find(item => item.chainId == this.chainId && item.chainName == this.holdItem.chainName);
            if (!token) {
                token = this.getTokensByChainName(this.holdItem.chainName)[0]
            }
            console.log('----123', token);
            this.changeSelect(0, token)

        },
        refreshBalance() {
            this.rbalance++
        },
        formateChainName(chainId) {
            let tkmChainIds = this.tokenListTKM.map(item => item.chainId);
            let bscChainIds = this.tokenListBSC.map(item => item.chainId);

            if (tkmChainIds.includes(chainId - 0)) {
                return `Thinkium ${chainId}#${this.$t('chain')}`
            } else if (bscChainIds.includes(chainId - 0)) {
                return `BSC`
            } else {
                return chainId
            }
        },
        networkAlert() {
            if (!this.holdItem.coinData.chainId || !this.exchangeItem.coinData.chainId) {
                return;
            }
            let fromChainName = this.formateChainName(this.holdItem.coinData.chainId);
            let toChainName = this.formateChainName(this.exchangeItem.coinData.chainId);
            // let currentChainName = this.formateChainName(this.chainId);
            this.$dialog.alert({
                title: this.$t('title'),
                message: this.$t('placeholder4', { fromChainName, toChainName, fromChainName, fromChainName }),
                confirmButtonText: this.$t('confirm')
            }).then(() => {
                // on close
            });
            return 0;
        },
        async getAccountBalance() {
            return metaMask.getBalance(window.defaultAccount);
        },
        async getTokenBalance({ address = window.defaultAccount, contractAddress }) {
            let overrides = {
                gasLimit: 6000000,
                from: address,
                value: '0x0'
            }
            const erc20 = new window.web3.eth.Contract(erc20Abi, contractAddress, overrides);
            return await erc20.methods.balanceOf(address).call();
        },
        changeSelect(index, item) {
            this.selectIndex = index;
            this[this.changeItem].coinData = item;

            let chainName = this[this.changeItem].chainName;
            let tokenList, anotherToken;
            if (chainName == 'thk') {
                tokenList = this.tokenListBSC;
            } else if (chainName == 'bsc') {
                tokenList = this.tokenListTKM;
            }
            anotherToken = tokenList.find(token => token.index == item.index); // 寻找 index 相同的 token;
            if (this.changeItem == 'holdItem') {
                this['exchangeItem'].coinData = anotherToken;
            } else {
                this['holdItem'].coinData = anotherToken;
            }
            setTimeout(() => {
                this.dialogVisible = false
            }, 500)
        },
        getTokensByChainName(chainName) {
            return this.tokenListOrigin.filter(item => item.chainName == chainName);
        },
        exchange() {
            let temp = { ...this.exchangeItem }
            this.exchangeItem = this.holdItem
            this.holdItem = temp;
        },
        changeToken(type, chainName) {
            this.tokenList = this.getTokensByChainName(chainName);
            this.dialogVisible = true
            this.changeItem = type;
        },
        async transfer() {
            const { inputValue, holdItem, exchangeItem } = this;
            const value = (inputValue + '').trim() - 0;
            if (!this.walletConnected) {
                this.$dialog.alert({
                    title: this.$t('title'),
                    message: this.$t('pleaseLinkTheWallet'),
                    confirmButtonText: this.$t('OK')
                }).then(() => {
                    connectWallet()
                })
                return;
            }
            if (holdItem.coinData.chainId != this.chainId) {
                this.networkAlert();
                return;
            }
            if (!value) {
                this.$dialog.alert({
                    title: this.$t('title'),
                    message: this.$t('placeholder2'),
                    confirmButtonText: this.$t('confirm')
                }).then(() => {
                    // on close
                });
                return;
            }
            let holdName = this.holdItem.coinData.name
            let isTKM = holdName == 'TKM' || holdName == 'BTKM' || holdName == 'TKM3' || holdName == 'BTKM3'
            let minNum = 0
            if (isTKM && value < 1000) {
                minNum = 1000
                this.$dialog.alert({
                    title: this.$t('title'),
                    message: this.$t('placeholder3', { minNum }),
                    confirmButtonText: this.$t('confirm')
                }).then(() => {
                    // on close
                });
                return;
            } else if (!isTKM && value < 200) {
                minNum = 200
                this.$dialog.alert({
                    title: this.$t('title'),
                    message: this.$t('placeholder3', { minNum }),
                    confirmButtonText: this.$t('confirm')
                }).then(() => {
                    // on close
                });
                return;
            }
            this.pageLoading = true;
            try {
                if (holdItem.coinData.type == 'main') {
                    await this.depositNative({
                        chain: exchangeItem.coinData.chainId + '',
                        value: this.$toBig(value)
                    });
                } else {
                    await this.depositToken({
                        chain: exchangeItem.coinData.chainId + '',
                        value: this.$toBig(value),
                        tokenAddress: holdItem.coinData.contractAddress,
                    });
                }
                this.$notify({ type: 'success', message: this.$t('successfulTransfer') });
                this.refreshBalance();

            } catch (err) {
                console.log('--err-transfer', err);
                this.$notify({ type: 'warning', message: this.$t('failedTransfer') });

            }
            this.pageLoading = false;
        },
        async depositNative({ address = window.defaultAccount, chain, value }) {
            let params = [
                address,
                chain,
            ]
            let overrides = {
                value,
            }
            console.log('---params', params);
            console.log('---overrides', overrides);
            console.log('---_bridge', window._bridge);
            await window._bridge.methods.depositNative(...params).send(overrides)
        },
        async depositToken({ value, tokenAddress, address = window.defaultAccount, chain }) {
            let token = '';
            await this.approve({
                value,
                contractAddress: tokenAddress,
                spender: window.bridgeContractAddress,
            })
            let params = [
                tokenAddress,
                value,
                address,
                chain
            ]
            console.log('---params', params);
            console.log('---_bridge', window._bridge);
            await window._bridge.methods.depositToken(...params).send();
        },
        async approve({ value, contractAddress, owner = window.defaultAccount, spender }) {
            console.log({ value, contractAddress, owner, spender });
            let overrides = {
                gasLimit: 6000000,
                from: owner,
                value: '0x0'
            }
            let erc20 = new window.web3.eth.Contract(erc20Abi, contractAddress, overrides);
            // let allowance = await erc20.methods.allowance(owner, spender).call()
            let approveResult = await erc20.methods.approve(spender, value).send({
                value: '0x0',
            });

        },
        toCannectWallet() {
            this.CHANGE_CONNECT_WALLET_MODAL_STATUS(true);
        }
    },
    directives: {
        positiveInt: {
            bind: function(el, binding, vnode) {
                el.handler = function() {
                    let that = vnode.context
                    el.value = Number(el.value.replace(/\D+/, '')) || ''
                    that.inputValue = el.value - 0 || '';
                }
                el.addEventListener('input', el.handler)
            },
            unbind: function(el) {
                el.removeEventListener('input', el.handler)
            }
        }
    },
    created() {
        this.init();
    },
    watch: {
        currentWalletAddressAndChainId() {
            this.init();
        },
    },

}
</script>

<style scoped lang="scss">
@mixin placeholder {
    &::-webkit-input-placeholder {
        @content
    }
    &::-moz-placeholder {
        @content
    }
    &:-ms-input-placeholder {
        @content
    }
}

.container {
    background: #F6F7FB;
    .main {
        width: 6.86rem;
        padding: .87rem .33rem .62rem;
        background: #FFF;
        border-radius: .2rem;
        position: relative;
    }
    .cannect-wallet {
        position: absolute;
        right: .33rem;
        top: .2rem;
        padding: 0 .22rem;
        height: 0.5rem;
        background: rgba(252, 191, 25, 0.2);
        border-radius: .1rem;
        font-size: 0.24rem;
        color: #FCBF19;
        text-align: center;
        display: flex;
        align-items: center;
        &.wrong-network{
            background:rgba(228, 32, 57, 0.2);
            color: #E42039;
        }
    }
    .redemption-wrap {
        position: relative; // flex: 1;
        .redemption-name {
            font-size: .28rem;
            color: #999;
            margin-bottom: .2rem;
        }
        .redemption-window {
            height: 1.5rem;
            background: #F4F5F9;
            margin-bottom: 0.3rem;
            border-radius: .1rem;
            padding: 0 .3rem .2rem;
            .redemption-tit {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 0.66rem;
                .token-name {
                    height: 0.46rem;
                    font-size: 0.3rem;
                    color: #666666;
                    display: flex;
                    align-items: center;
                    img {
                        width: 0.27rem;
                        height: 0.27rem;
                        margin-right: 0.11rem;
                    }
                    span {
                        display: inline-block;
                        font-size: .3rem;
                        font-weight: 500;
                        color: #333;
                    }
                }
                .redemption-over {
                    font-size: 0.22rem;
                    font-weight: 300;
                    color: #999;
                }
            }
            .redemption-money {
                display: flex;
                justify-content: space-between;
                height: 0.46rem;
                line-height: 0.46rem;
                margin-top: .12rem;
                input {
                    background-color: rgba(0, 0, 0, 0);
                    width: 100%;
                    height: 0.46rem;
                    color: #333;
                    font-size: 0.3rem;
                    @include placeholder {
                        color: #CCC;
                    }
                }
                
                .number {
                    color: #333333;
                    font-size: 0.3rem;
                }
            }
        }
        .change-img {
            border-radius: 50%;
            position: absolute;
            left: 50%;
            right: 50%;
            top: 2.14rem;
            transform: translate(-50%, 0);
            width: .5rem;
            height: .5rem;
            img {
                width: 100%;
                height: 100%;
            }
            div {
                position: absolute;
                left: 0.23rem;
                top: 0.17rem;
                width: 0.73rem;
                height: 0.73rem;
                z-index: 11;
                border-radius: 50%;
            }
        }
        .handling-fee {
            font-size: 0.26rem;
            color: #555555;
        }
    }
    .convert-btn {
        transform: translate(-50%);
        margin-left: 50%;
        margin-top: .25rem;
        width: 6rem;
        height: 0.8rem;
        background-color: #FCBF19;
        border-radius: 0.1rem;
        font-size: 0.32rem;
        line-height: 0.8rem;
        text-align: center;
    }
    .select-list {
        overflow: auto;
        .select-item {
            height: 1rem;
            border-top: 0.01rem solid #E8E8E8;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .item-left {
                display: flex;
                align-items: center;
                margin-left: 0.66rem;
                .item-name {
                    margin-left: 0.12rem;
                    font-size: 0.3rem;
                    color: #333333;
                }
                img {
                    width: 0.5rem;
                    height: 0.5rem;
                }
            }
            &>img {
                width: 0.36rem;
                height: 0.36rem;
                margin-right: 0.31rem;
            }
        }
        .active {
            background-color: rgba($color: #FCBF19, $alpha: 0.1);
        }
    }
    .loading-bg {
        position: fixed;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(0, 0, 0, 0.3);
    }
    .cannect-wallet2 {
        text-align: center;
        margin: 1rem auto;
        color: red;
        font-size: .36rem;
    }
    /deep/ {
        .loading-bg.van-loading {
            top: 0;
            left: 0;
        }
    }
}

@media screen and ( max-width: 640px) {
    .container {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        .banner-top {
            height: 3.6rem;
            background: url('../../assets/images/bg.png') center no-repeat;
            background-size: cover;
        }
        .main {
            margin: -.74rem auto 0;
        }
    }
}

@media screen and ( min-width: 640px) {
    .container {
        width: 100%;
        height: 100%;
        display: block;
        .banner-top {
            height: 533*$vpx;
            background: url('../../assets/images/bgPc.png') center no-repeat;
            background-size: cover;
        }
        .main {
            margin: -1.59rem auto 0;
            padding-top: .4rem;
            .cannect-wallet{
                display: none;
            }
        }
    }
}
</style>
