<template>
    <main>
        <section class="layout-box clearfix">
            <div class="layout-content box-shadow">
                <div class="accont-title clearfix">
                    <h3>申请提现</h3>
                </div>
                <el-form :model="ruleForm" ref="ruleForm" class="form-ruleForm">
                    <el-form-item prop="platform" class="platform">
                        <el-radio-group v-model="ruleForm.platform" @change="changeSite">
                            <el-radio label="NORTH_AMERICA_SITE">
                                <img src="~assets/images/icon-withdraw-america.jpg" alt />
                            </el-radio>
                            <!-- <el-radio label="CANADA">
                                <img src="~assets/images/icon-withdraw-canasa.jpg" alt>
                            </el-radio>
                            <el-radio label="EUROPE">
                                <img src="~assets/images/icon-withdraw-europe.jpg" alt>
                            </el-radio>
                            <el-radio label="ENGLAND">
                                <img src="~assets/images/icon-withdraw-england.jpg" alt>
                            </el-radio>-->
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <h4 class="money-title">余额提现</h4>
                <div class="money-table">
                    <div class="bgd-grey"></div>
                    <el-table
                        ref="multipleTable"
                        :data="tableData"
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange"
                    >
                        <el-table-column type="selection" width="60px"></el-table-column>
                        <el-table-column label="店铺名称">
                            <template slot-scope="scope">{{ scope.row.storeName }}</template>
                        </el-table-column>
                        <el-table-column label="余额">
                            <template
                                slot-scope="scope"
                            >{{ scope.row.currencySymbol }}{{ formatNum(scope.row.currentAmt) }}</template>
                        </el-table-column>
                        <el-table-column label="提现金额">
                            <template slot-scope="scope">
                                <div class="currency-symbol">{{ scope.row.currencySymbol }}</div>
                                <el-input
                                    v-model="scope.row.withdrawAmt"
                                    placeholder="提现金额"
                                    @change="toggleSelection(scope)"
                                    size="small"
                                ></el-input>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="totle clearfix">
                        <p class="has-select">
                            已选账户
                            <span>{{ totleNum }}</span>
                        </p>
                        <p class="totle-money">
                            合计
                            <span>$ {{ formatNum(totleMoney) }}</span>
                        </p>
                        <a href="javascript:;" class="totle-btn" @click="toNext">下一步</a>
                    </div>
                </div>
            </div>
        </section>
    </main>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { api_findCanWithdrawStoreList } from "api/portal.js";
import utils from "utils/utils.js";
export default {
    name: "withdrawDeposit",
    components: {},
    data() {
        return {
            ruleForm: {
                platform: "NORTH_AMERICA_SITE"
            },
            tableData: [],
            multipleSelection: [],
            totleNum: 0,
            totleMoney: 0,
            currencySymbol: ""
        };
    },
    computed: {
        ...mapState(["withdrawDeposit"])
    },
    watch: {
        multipleSelection: {
            handler(newVal, oldVal) {
                let withdrawStoreList = [];
                let totlecurrentAmt = 0;
                for (let i = 0; i < newVal.length; i++) {
                    const element = newVal[i];
                    let keys = {
                        storeId: "",
                        storeName: "",
                        withdrawAmt: 0
                    };
                    totlecurrentAmt += parseFloat(element.withdrawAmt);
                    keys.storeId = element.kycStoreId;
                    keys.storeName = element.storeName;
                    keys.withdrawAmt = element.withdrawAmt;
                    withdrawStoreList.push(keys);
                }
                this.totleMoney = totlecurrentAmt;
                this.$store.commit("setWithdrawStoreList", withdrawStoreList);
                this.$store.commit("setTotleMoney", this.totleMoney);
            },
            deep: true
        }
    },
    methods: {
        ...mapMutations([
            "setWithdrawStoreList",
            "setTotleMoney",
            "setCurrencySymbol"
        ]),
        formatNum(strNum) {
            var outputmoney = function(number) {
                number = number.replace(/\,/g, ""); //把所有的逗号，清除
                if (isNaN(number) || number == "") return "";
                number = Math.round(number * 100) / 100;
                if (number < 0)
                    return (
                        "-" +
                        outputdollars(Math.floor(Math.abs(number) - 0) + "") +
                        outputcents(Math.abs(number) - 0)
                    );
                else
                    return (
                        outputdollars(Math.floor(number - 0) + "") +
                        outputcents(number - 0)
                    );
            };
            //格式化金额
            var outputdollars = function(number) {
                if (number.length <= 3) {
                    return number == "" ? "0" : number;
                } else {
                    var mod = number.length % 3;
                    var output = mod == 0 ? "" : number.substring(0, mod);
                    for (let i = 0; i < Math.floor(number.length / 3); i++) {
                        if (mod == 0 && i == 0) {
                            output += number.substring(
                                mod + 3 * i,
                                mod + 3 * i + 3
                            );
                        } else {
                            output +=
                                "," +
                                number.substring(mod + 3 * i, mod + 3 * i + 3);
                        }
                    }
                    return output;
                }
            };
            var outputcents = function(amount) {
                amount = Math.round((amount - Math.floor(amount)) * 100);
                return amount < 10 ? ".0" + amount : "." + amount;
            };
            return outputmoney(strNum + "");
        },
        changeSite(val) {
            this.ruleForm.platform = val;
        },
        handleSelectionChange(val) {
            let withdrawStoreList = [];
            this.multipleSelection = val;
            this.totleNum = val.length;
            let totlecurrentAmt = 0;
            for (let i = 0; i < val.length; i++) {
                const element = val[i];
                let keys = {
                    storeId: "",
                    storeName: "",
                    withdrawAmt: 0
                };
                totlecurrentAmt += parseFloat(element.withdrawAmt);
                keys.storeId = element.kycStoreId;
                keys.storeName = element.storeName;
                keys.withdrawAmt = element.withdrawAmt;
                withdrawStoreList.push(keys);
            }

            this.totleMoney = totlecurrentAmt;

            this.$store.commit("setWithdrawStoreList", withdrawStoreList);
            this.$store.commit("setTotleMoney", this.totleMoney);
        },
        toggleSelection(scope) {
            if (
                parseFloat(scope.row.withdrawAmt) >
                parseFloat(scope.row.currentAmt)
            ) {
                if (scope.row.currentAmt > 50000) {
                    scope.row.withdrawAmt = parseFloat(50000).toFixed(2);
                } else {
                    scope.row.withdrawAmt = parseFloat(
                        scope.row.currentAmt
                    ).toFixed(2);
                }
            } else if (scope.row.withdrawAmt == "") {
                scope.row.withdrawAmt = parseFloat(0).toFixed(2);
            }
            //  else if (scope.row.withdrawAmt < 10) {
            //     scope.row.withdrawAmt = parseFloat(10).toFixed(2);
            // }
            else {
                scope.row.withdrawAmt = parseFloat(
                    scope.row.withdrawAmt
                ).toFixed(2);
            }
        },
        toNext() {
            if (this.multipleSelection.length > 0) {
                let canWithdraw = this.multipleSelection.every(item => {
                    return 10 <= item.withdrawAmt && item.withdrawAmt <= 50000;
                });
                if (canWithdraw) {
                    this.$router.push({
                        path: "/account/withdrawDeposit/next",
                        query: {
                            site: this.ruleForm.platform
                        }
                    });
                } else {
                    this.$message.error(
                        "每个店铺提现金额不得少于10美元并且不得超过5万美元（或等值外币）！"
                    );
                }
            } else {
                this.$message.warning("请选择要提现的店铺！");
            }
        }
    },
    created() {
        let findCanWithdrawStoreListParams = {
            params: {
                siteCode: this.ruleForm.platform
            }
        };
        api_findCanWithdrawStoreList(findCanWithdrawStoreListParams).then(
            res => {
                if (res.success) {
                    res.data.map(item => {
                        item.withdrawAmt = parseFloat(item.withdrawAmt).toFixed(
                            2
                        );
                    });
                    for (let i = 0; i < res.data.length; i++) {
                        const element = res.data[i];
                        this.currencySymbol = element.currencySymbol;
                        break;
                    }
                    this.tableData = res.data;
                    this.$store.commit(
                        "setCurrencySymbol",
                        this.currencySymbol
                    );
                } else {
                    this.$message.error(res.msg);
                }
            }
        );
    }
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/common.css";
.platform /deep/ .el-radio-group {
    .el-radio {
        position: relative;
        float: left;
        width: 202px;
        height: 46px;
        border: 1px solid #e6e6e6;
        box-sizing: border-box;
        .el-radio__input {
            display: none;
        }
        .el-radio__label {
            display: block;
            width: 100%;
            height: 100%;
            padding-left: 0;
        }
    }
    width: 1000px;
}
.platform /deep/ .el-radio.is-checked {
    border: 1px solid #3d86e9;
    &::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        width: 20px;
        height: 20px;
        background: url(~assets/images/icon-platform-select.png) no-repeat;
    }
}
.form-ruleForm {
    margin-top: 20px;
}
.money-title {
    padding-left: 40px;
    margin: 20px 0;
    text-align: left;
    color: #3d86e9;
}
.money-table {
    position: relative;
    padding: 0 140px 100px;
    & /deep/ .el-table__header-wrapper {
        tr {
            th {
                border-bottom: 1px solid transparent;
                background-color: #f5f5f5;
            }
        }
    }
    & /deep/ .el-table__body-wrapper {
        tr {
            td {
                border-bottom: 1px solid transparent;
                .cell {
                    position: relative;
                    .currency-symbol {
                        position: absolute;
                        left: 10px;
                        top: 0;
                        z-index: 1;
                        width: 32px;
                        height: 32px;
                        line-height: 32px;
                        text-align: center;
                        font-size: 18px;
                        border-top-left-radius: 4px;
                        border-bottom-left-radius: 4px;
                        background: #3d86e9;
                        color: #fff;
                    }
                    .el-input__inner {
                        width: 168px;
                        padding-left: 50px;
                    }
                }
            }
        }
    }
    .bgd-grey {
        position: absolute;
        left: 40px;
        top: 0;
        width: 1000px;
        height: 48px;
        background: #f5f5f5;
    }
    .totle {
        position: absolute;
        left: 40px;
        bottom: 54px;
        width: 1000px;
        height: 48px;
        font-size: 14px;
        background: #f5f5f5;
        .has-select {
            float: left;
            padding-left: 160px;
            height: 48px;
            line-height: 48px;
            span {
                color: #3d86e9;
            }
        }
        .totle-money {
            float: right;
            padding-right: 200px;
            height: 48px;
            line-height: 48px;
            span {
                font-size: 18px;
                color: #3d86e9;
            }
        }
        .totle-btn {
            position: absolute;
            right: 40px;
            top: 0;
            height: 48px;
            line-height: 48px;
            color: #3d86e9;
        }
    }
}
</style>
