<template>
    <div class="container">
        <div class="banner-top">
            <img src="@/assets/images/bg.png" alt="">
        </div>
        <div class="redemption-wrap">
            <div class="redemption-window hold">
                <div class="redemption-tit">
                    <div class="redemption-name">{{holdItem.name}}</div>
                    <div class="redemption-over">余额：{{$toRegularNumber(balance)}}</div>
                </div>
                <div class="redemption-money">
                    <div class="token-name" @click="changeToken('holdItem', holdItem.chainName)">
                        <img :src="holdItem.coinData.url || require(`@/assets/images/logo.png`)" alt="">
                        <span>{{holdItem.coinData.name}}</span>
                    </div>
                    <input type="text" placeholder="请输入兑换数量(需大于10)" v-positiveInt class="number-input">
                </div>
            </div>
            <div class="change-img">
                <img src="@/assets/images/exchange.png" alt="">
                <div @click="exchange"></div>
            </div>
            <div class="redemption-window exchange">
                <div class="redemption-tit">
                    <div class="redemption-name">{{exchangeItem.name}}</div>
                    <div class="redemption-over">预计获得</div>
                </div>
                <div class="redemption-money">
                    <div class="token-name" @click="changeToken('exchangeItem', exchangeItem.chainName)">
                        <img :src="exchangeItem.coinData.url || require(`@/assets/images/logo.png`)" alt="">
                        <span>{{exchangeItem.coinData.name}}</span>
                    </div>
                    <div class="number">{{obtain}}</div>
                </div>
            </div>
            <div class="handling-fee">手续费<span>3%</span></div>
        </div>
        <div class="convert-btn" @click="transfer">兑换</div>
        <EDialog :title="'选择Token'" :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>
        <van-loading class="loading-bg" type="spinner" color="#303030" size="24px" v-show="pageLoading"/>
    </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';

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

const erc20Abi = require('../../abi/ERC20.json');
const bridgeAbi = require('../../abi/bridge.json');
const bridgeContractAddress = '0x35645227C22c47Fe26953F14C8210b8Eb347CCd2';
let bridge;

export default {
    data() {
        return {
            dialogVisible: false,
            pageLoading: false,
            tokenList: [],
            tokenListOrigin: [{
                    name: 'TKM',
                    index: 1,
                    chainName: 'tkm',
                    chainId: 60001,
                    url: '',
                    balance: '0',
                    type: 'main',
                    contractAddress: '',
                },
                {
                    name: 'TUSDT',
                    index: 2,
                    chainName: 'tkm',
                    chainId: 60001,
                    url: '',
                    balance: '0',
                    type: 'erc20',
                    contractAddress: '0x630dDb5C384F4cB489E43d74a6722B26635b65bE',
                },
                {
                    name: 'TKM3',
                    index: 3,
                    chainName: 'tkm',
                    chainId: 60001,
                    url: '',
                    balance: '0',
                    type: 'main',
                    contractAddress: '',
                },
                {
                    name: 'TUSDT3',
                    index: 4,
                    chainName: 'tkm',
                    chainId: 60001,
                    url: '',
                    balance: '0',
                    type: 'erc20',
                    contractAddress: '0x630dDb5C384F4cB489E43d74a6722B26635b65bE',
                },
                {
                    name: 'BTKM',
                    index: 1,
                    chainName: 'bsc',
                    chainId: 97,
                    url: '',
                    balance: '0',
                    type: 'erc20',
                    contractAddress: '0x0806c5b183F8a622fE62c7344B04e6e6A7C82c2e',
                },
                {
                    name: 'BUSDT',
                    index: 2,
                    chainName: 'bsc',
                    chainId: 97,
                    url: '',
                    balance: '0',
                    type: 'erc20',
                    contractAddress: '0x3b319043334f483a931ad6555b17fc4a55f3c64a',
                },
                {
                    name: 'BTKM3',
                    index: 3,
                    chainName: 'bsc',
                    chainId: 1337,
                    url: '',
                    balance: '0',
                    type: 'erc20',
                    contractAddress: '0x0806c5b183F8a622fE62c7344B04e6e6A7C82c2e',
                },
                {
                    name: 'BUSDT3',
                    index: 4,
                    chainName: 'bsc',
                    chainId: 1337,
                    url: '',
                    balance: '0',
                    type: 'erc20',
                    contractAddress: '0x3b319043334f483a931ad6555b17fc4a55f3c64a',
                },
            ],
            tokenListTKM: [],
            tokenListBSC: [],
            selectIndex: '',
            holdItem: {
                name: 'THINKIUM',
                chainName: 'tkm',
                coinData: {},
            },
            exchangeItem: {
                name: 'BSC',
                chainName: 'bsc',
                coinData: {},
            },
            changeItem: '',
            inputValue: '',
        }
    },
    computed: {
        ...mapStateWallet(['currentWalletAddress']),
        ...mapStateNetwork(['chainId']),
        walletConnected() {
            return this.$store.getters.walletConnected;
        },
        obtain() {
            return this.inputValue * 0.97;
        },
        currentWalletAddressAndChainId() {
            return this.currentWalletAddress && this.chainId
        },
    },
    asyncComputed: {
        balance: {
            get() {
                console.log('--this.holdItem', this.holdItem);
                const { coinData } = this.holdItem;
                console.log(coinData.chainId, this.chainId);
                if (!this.walletConnected) {
                    return 0;
                }
                if (coinData.chainId != this.chainId) {
                    this.networkAlert();
                    return 0;
                }
                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
    },
    methods: {
        async init() {
            if (!this.walletConnected) {
                return;
            }
            let overrides = {
                gasLimit: 30000000,
                from: window.defaultAccount,
                // gasLimit: 1000000,
                value: '0x0'
            }
            bridge = new window.web3.eth.Contract(bridgeAbi, bridgeContractAddress, overrides);

            this.tokenListTKM = this.getTokensByChainName('tkm') || [];
            this.tokenListBSC = this.getTokensByChainName('bsc') || [];

            let tkm = {
                name: 'THINKIUM',
                chainName: 'tkm',
                coinData: {},
            }
            let bsc = {
                name: 'BSC',
                chainName: 'bsc',
                coinData: {},
            }
            if (this.tokenListBSC.map(item => item.chainId).includes(this.chainId)) {
                this.holdItem = bsc;
                this.exchangeItem = tkm;
            } else {
                this.holdItem = tkm;
                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]
            }
            this.changeSelect(0, token)
        },
        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}#链`
            } else if (bscChainIds.includes(chainId - 0)) {
                return `BSC`
            } else {
                return chainId
            }
        },
        networkAlert() {
            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: '标题',
                message: `您已选择了从${fromChainName}到${toChainName}的跨链访问，当前连接网络并非${fromChainName}网络，请切换${fromChainName}网络后完成跨链操作。`,
            }).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 == 'tkm') {
                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;
            }
        },
        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 (!value) {
                this.$dialog.alert({
                    title: '标题',
                    message: '请输入转账金额',
                }).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: '转账成功' });

            } catch (err) {
                this.$notify({ type: 'warning', message: '转账失败' });

            }
            this.pageLoading = false;
        },
        async depositNative({ address = window.defaultAccount, chain, value }) {
            let params = [
                address,
                chain,
            ]
            let overrides = {
                value,
            }
            await bridge.methods.depositNative(...params).send(overrides)
        },
        async depositToken({ value, tokenAddress, address = window.defaultAccount, chain }) {
            let token = '';
            await this.approve({
                value,
                contractAddress: tokenAddress,
                spender: bridgeContractAddress,
            })
            let params = [
                tokenAddress,
                value,
                address,
                chain
            ]
            await 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',
            });

        },
    },
    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">
.container {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    .banner-top {
        height: 3.0rem;
        img {
            width: 7.5rem;
            height: 3.0rem;
        }
    }
    .redemption-wrap {
        position: relative;
        margin-top: 0.2rem; // flex: 1;
        .redemption-window {
            height: 2.2rem;
            background: #F7F7F7;
            margin-bottom: 0.3rem;
            .redemption-tit {
                display: flex;
                justify-content: space-between;
                height: 0.58rem;
                line-height: 0.58rem;
                border-bottom: 0.01rem solid #DDDDDD;
                .redemption-name {
                    font-size: 0.3rem;
                    color: #333333;
                    font-weight: bold;
                }
                .redemption-over {
                    font-size: 0.3rem;
                    color: #555555;
                }
            }
            .redemption-money {
                display: flex;
                justify-content: space-between;
                margin-top: 0.27rem;
                height: 0.46rem;
                line-height: 0.46rem;
                .token-name {
                    height: 0.46rem;
                    font-size: 0.3rem;
                    color: #666666;
                    display: flex;
                    img {
                        width: 0.46rem;
                        height: 0.46rem;
                        margin-right: 0.1rem;
                    }
                    span {
                        display: inline-block;
                        line-height: 0.46rem;
                    }
                }
                input {
                    background-color: #F7F7F7;
                    min-width: 3.72rem;
                    height: 0.46rem;
                    color: #333;
                    font-size: 0.3rem;
                    text-align: right;
                } // input[placeholder] {
                //     color: #CCCCCC;
                //     font-size: 0.3rem;
                //     text-align: right;
                // }
                .number {
                    color: #333333;
                    font-size: 0.3rem;
                }
            }
        }
        .hold {
            padding: 0.34rem 0.59rem 0 0.48rem;
        }
        .exchange {
            padding: 0.53rem 0.59rem 0 0.48rem;
        }
        .change-img {
            border-radius: 50%;
            position: absolute;
            left: 50%;
            right: 50%;
            top: 1.83rem;
            margin-left: -0.6rem;
            width: 1.2rem;
            height: 1.2rem;
            img {
                width: 1.2rem;
                height: 1.2rem;
            }
            div {
                position: absolute;
                left: 0.23rem;
                top: 0.17rem;
                width: 0.73rem;
                height: 0.73rem;
                z-index: 11;
                border-radius: 50%;
            }
        }
        .handling-fee {
            padding-left: 0.48rem;
            height: 0.4rem;
            line-height: 0.4rem;
            font-size: 0.26rem;
            color: #555555;
        }
    }
    .convert-btn {
        margin-left: 0.75rem;
        margin-top: 2.3rem;
        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);
    }
}
</style>
