<template>
    <main class="wrap">
        <div class="layout-box">
            <div class="center-title clearfix">
                <h3>资金明细</h3>
                <div class="download">
                    <router-link to="/record/fund/fund">下载资金明细</router-link>
                </div>
            </div>
            <div class="filter-box">
                <div class="time">
                    <span>时间：</span>
                    <el-date-picker
                        v-model="time"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions"
                        @change="changeTime"
                        :clearable="false"
                    ></el-date-picker>
                </div>
                <div class="platform-and-store">
                    <span>平台：</span>
                    <el-select v-model="site" placeholder="请选择" @change="filterSite">
                        <el-option
                            v-for="item in siteList"
                            :key="item.siteName"
                            :label="item.plateformAndSite"
                            :value="item.siteName"
                        ></el-option>
                    </el-select>
                    <span>账户：</span>
                    <el-select v-model="storeName" placeholder="请选择" @change="filterStore">
                        <el-option
                            v-for="item in storeNameList"
                            :key="item.id"
                            :label="item.sunrateBankCardNo === null? item.storeName  :item.storeName +item.sunrateBankCardNo.substring(0,4) + '********'+ item.sunrateBankCardNo.substring(item.sunrateBankCardNo.length-4)"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </div>
                <div class="currency">
                    <div class="advanced-filter" v-if="filterType" @click="toggleType">高级筛选</div>
                    <div class="basic-filter" v-else @click="toggleType">基本筛选</div>
                </div>
            </div>
            <div class="advanced-filter-box" v-if="!filterType">
                <div class="user-defined">
                    <span>自定义：</span>
                    <el-select
                        v-model="inUserDefined"
                        multiple
                        placeholder="请选择"
                        @change="changeInUserDefined"
                    >
                        <el-option
                            v-for="item in inUserDefinedList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
            </div>
            <div class="table-box" v-loading="loading">
                <el-table :data="recordList" style="width: 100%" empty-text="很遗憾，暂无数据！">
                    <el-table-column :key="Math.random()" label="交易时间" show-overflow-tooltip>
                        <template slot-scope="scope">{{ scope.row.tradeDate }}</template>
                    </el-table-column>
                    <el-table-column
                        :key="Math.random()"
                        prop="receiverName"
                        label="收款人名称"
                        show-overflow-tooltip
                        v-if="showPlateForm"
                    ></el-table-column>
                    <el-table-column :key="Math.random()" label="币种">
                        <template slot-scope="scope">{{ scope.row.currencyDesc }}</template>
                    </el-table-column>
                    <el-table-column :key="Math.random()" label="收入金额">
                        <template slot-scope="scope">
                            <span class="cl-green">+{{ formatNum(scope.row.inAmt) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :key="Math.random()" label="支出金额">
                        <template slot-scope="scope">
                            <span class="cl-red">-{{ formatNum(scope.row.outAmt) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column :key="Math.random()" label="账户余额">
                        <template slot-scope="scope">{{ formatNum(scope.row.availableBalance) }}</template>
                    </el-table-column>
                    <el-table-column
                        :key="Math.random()"
                        prop="serviceChargeDesc"
                        label="手续费率"
                        show-overflow-tooltip
                        v-if="showStore"
                    ></el-table-column>
                    <el-table-column
                        :key="Math.random()"
                        prop="tradeTypeDesc"
                        label="类型"
                        show-overflow-tooltip
                    ></el-table-column>
                    <el-table-column
                        :key="Math.random()"
                        prop="authStatus"
                        label="操作"
                        width="100px"
                    >
                        <template slot-scope="scope">
                            <el-button
                                @click="toDealDetail(scope.row)"
                                type="text"
                                size="small"
                                class="cl-blue"
                            >详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            ></el-pagination>
        </div>
    </main>
</template>

<script>
import {
    api_fundDetailList,
    api_showTradeInit,
    api_showStoreListByCondition
} from "api/portal.js";
import utils from "utils/utils.js";
export default {
    name: "query",
    computed: {},
    components: {},
    methods: {
        init() {
            let showTradeInitData = {
                params: {
                    tradeType: "TRADE_IN"
                }
            };
            api_showTradeInit(showTradeInitData).then(res => {
                if (res.success) {
                    if (res.data.siteList == null) {
                        this.loading = false;
                        return false;
                    }
                    this.siteList = res.data.siteList;
                    this.siteList.filter(item => {
                        if (item.siteName === "NORTH_AMERICA_SITE") {
                            this.site = item.siteName;
                            this.storePlateform = item.storePlateform;
                        }
                    });
                    let showStoreListByConditionData = {
                        params: {
                            storePlateform: this.storePlateform,
                            storeTheSite: this.site
                        }
                    };
                    api_showStoreListByCondition(
                        showStoreListByConditionData
                    ).then(res => {
                        if (res.success) {
                            this.storeNameList = res.data.filter(item => {
                                return item.sunrateBankCardNo !== null;
                            });
                            this.storeName = this.storeNameList[0].id;
                            this.filterData(1, 10);
                        } else {
                            this.$message.error(res.msg);
                        }
                    });
                } else {
                    this.loading = false;
                    this.$message.error(res.msg);
                }
            });
        },
        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 + "");
        },
        defaultTime() {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            this.time = [start, end];
        },
        filterData(startPage, pageSize) {
            this.loading = true;
            let fundDetailListParams = {
                params: {
                    startPage: startPage,
                    pageSize: pageSize,
                    tradeStartDate: utils.formatDate(
                        this.time[0],
                        "yyyy-MM-dd"
                    ),
                    tradeEndDate: utils.formatDate(this.time[1], "yyyy-MM-dd"),
                    storeTheSite: this.site,
                    kycStoreId: this.storeName,
                    storePlateform: this.storePlateform
                }
            };

            api_fundDetailList(fundDetailListParams).then(res => {
                if (res.success) {
                    this.recordList = res.data.list;
                    this.total = res.data.total;
                } else {
                    this.$message.error(res.msg);
                }
                this.loading = false;
            });
        },
        changeTime(val) {
            this.filterData(1, 10);
        },
        toggleType() {
            this.filterType = !this.filterType;
        },
        toDealDetail(val) {
            let that = this;
            let toDetail;
            toDetail = this.$router.resolve({
                path: "/record/fund/detail",
                query: {
                    tradeType: val.tradeType,
                    id: val.tradeId
                }
            });

            window.open(toDetail.href, "_blank");
        },
        handleSizeChange(val) {
            this.size = val;
            this.filterData(1, val);
        },
        handleCurrentChange(val) {
            this.filterData(val, this.size);
        },
        filterSite(val) {
            this.siteList.filter(item => {
                if (val == item.siteName) {
                    this.storePlateform = item.storePlateform;
                }
            });

            let showStoreListByConditionData = {
                params: {
                    storePlateform: this.storePlateform,
                    storeTheSite: this.site
                }
            };
            api_showStoreListByCondition(showStoreListByConditionData).then(
                res => {
                    if (res.success) {
                        this.storeNameList = res.data;
                        this.storeName = this.storeNameList[0].storeName;
                    } else {
                        this.$message.error(res.msg);
                    }
                }
            );
            this.filterData(1, 10);
        },
        filterStore(val) {
            this.filterData(1, 10);
        },
        changeInUserDefined(val) {
            if (val.length === 0) {
                this.showPlateForm = false;
                this.showStore = false;
            } else if (val.length === 2) {
                this.showPlateForm = true;
                this.showStore = true;
            } else {
                for (let i = 0; i < val.length; i++) {
                    const element = val[i];
                    if (element == 0) {
                        this.showPlateForm = true;
                        this.showStore = false;
                    } else {
                        this.showStore = true;
                        this.showPlateForm = false;
                    }
                }
            }
        }
    },
    data() {
        return {
            pickerOptions: {
                shortcuts: [
                    {
                        text: "今日",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 30
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 90
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近一年",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 365
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    }
                ]
            },
            time: "",
            filterType: true,
            // 入账
            siteList: [],
            site: "",
            storePlateform: "",
            storeNameList: [],
            storeName: "",
            inUserDefinedList: [
                {
                    value: "0",
                    label: "收款人名称"
                },
                {
                    value: "1",
                    label: "手续费率"
                }
            ],
            inUserDefined: ["0", "1"],
            showPlateForm: true,
            showStore: true,
            showBuyCurrencyDesc: true,
            showActualAmt: true,
            showBankCardNo: true,
            recordList: [],
            currentPage: 1,
            total: 0,
            size: 10,
            loading: true,
            storeTheSite: ""
        };
    },
    created() {
        this.init();
        this.defaultTime();
    }
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/common.css";
.layout-box /deep/ .el-radio {
    position: relative;
    display: inline-block;
    outline: none;
    margin: 0 10px;
    .el-radio__input {
        opacity: 0;
        outline: none;
        position: absolute;
        z-index: -1;
    }
    .el-radio__input.is-checked + .el-radio__label {
        padding: 4px 10px;
        border-radius: 4px;
        background: #3d86e9;
        color: #fff;
    }
    .el-radio__label {
        padding: 10px;
    }
}
.advanced-filter-box /deep/ .el-select {
    width: 330px;
    margin-right: 20px;
}
.platform-and-store /deep/ .el-select {
    width: 330px;
    margin-right: 20px;
}
.el-date-editor {
    width: 330px;
}
.layout-box {
    padding-bottom: 20px;
    background: #fff;
}
.center-title {
    position: relative;
}
.download {
    position: absolute;
    right: 0;
    top: 0px;
    height: 50px;
    line-height: 50px;
    a {
        margin-left: 20px;
        padding: 10px 0 10px 26px;
        font-size: 14px;
        background: url(~assets/images/icon-download.png) left center no-repeat;
        &:hover {
            background: url(~assets/images/icon-download-2.png) left center
                no-repeat;
        }
    }
}
.filter-box,
.advanced-filter-box {
    padding: 20px 20px 0;
    text-align: left;
    span {
        display: inline-block;
        width: 56px;
        font-size: 14px;
    }
}
.time,
.platform-and-store {
    margin-bottom: 20px;
}
.currency {
    position: relative;
    border-bottom: 1px solid #eaeaea;
}
.advanced-filter,
.basic-filter {
    position: absolute;
    top: -20px;
    right: 0;
    padding-right: 20px;
    font-size: 12px;
    color: #3d86e9;
    cursor: pointer;
}
.advanced-filter {
    background: url(~assets/images/icon-filter-bottom.png) right 2px no-repeat;
    background-size: 13px 8px;
}
.basic-filter {
    background: url(~assets/images/icon-filter-top.png) right 2px no-repeat;
    background-size: 13px 8px;
}
.table-box {
    padding: 20px;
    .el-table::before {
        content: "";
        height: 0;
    }
    & /deep/ th {
        padding: 0;
        height: 36px;
        text-align: center;
        border-bottom: 1px solid transparent;
        background: #f5f5f5;
    }
    & /deep/ td {
        text-align: center;
        border-bottom: 1px solid transparent;
    }
    & /deep/ .el-table__empty-text {
        width: initial;
        &::before {
            content: "";
            display: block;
            width: 191px;
            height: 131px;
            margin: 40px 0 0;
            background: url(~assets/images/icon-status-no-data.png) no-repeat;
            background-size: 191px 131px;
        }
    }
    & /deep/ .el-button {
        width: 100%;
        span {
            display: block;
            width: 100%;
        }
    }
}
</style>
