<template>
    <main class="wrap">
        <div class="layout-box">
            <div class="center-title clearfix">
                <h3>交易明细</h3>
                <div class="download">
                    <router-link to="/record/deal/record">下载交易记录</router-link>
                    <router-link to="/record/deal/receipt">下载回执单</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="type">
                    <span>类型：</span>
                    <el-radio-group v-model="type" @change="changeType">
                        <el-radio label="TRADE_IN">入账</el-radio>
                        <el-radio label="TRADE_WITHDRAW">提现</el-radio>
                        <!-- <el-radio label="VAT_PAYMENT">VAT缴税</el-radio>
                        <el-radio label="PAY_SUPPLIER">供应商付款</el-radio>
                        <el-radio label="REPAYMENT">还款</el-radio>-->
                    </el-radio-group>
                </div>
                <div class="currency">
                    <span>币种：</span>
                    <el-radio-group v-model="currency" @change="changeCurrency">
                        <el-radio label>全部</el-radio>
                        <el-radio label="USD">美元</el-radio>
                        <!-- <el-radio label="EUR">欧元</el-radio>
                        <el-radio label="GBP">英镑</el-radio>
                        <el-radio label="JPY">日元</el-radio>
                        <el-radio label="6">澳元</el-radio>
                        <el-radio label="CAD">加元</el-radio>-->
                    </el-radio-group>

                    <div class="advanced-filter" v-if="filterType" @click="toggleType">高级筛选</div>
                    <div class="basic-filter" v-else @click="toggleType">基本筛选</div>
                </div>
            </div>
            <template v-if="type === 'TRADE_IN'">
                <div class="advanced-filter-box" v-if="!filterType">
                    <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.storeId"
                                :label="item.sunrateBankCardNo === null? item.storeName  :item.storeName +item.sunrateBankCardNo.substring(0,4) + '********'+ item.sunrateBankCardNo.substring(item.sunrateBankCardNo.length-4)"
                                :value="item.storeId"
                            ></el-option>
                        </el-select>
                    </div>
                    <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="入账时间">
                            <template slot-scope="scope">{{ scope.row.tradeDate }}</template>
                        </el-table-column>
                        <el-table-column
                            :key="Math.random()"
                            prop="storePlateFormName"
                            label="平台"
                            show-overflow-tooltip
                            v-if="showPlateForm"
                        ></el-table-column>
                        <el-table-column
                            :key="Math.random()"
                            prop="storeName"
                            label="店铺"
                            show-overflow-tooltip
                            v-if="showStore"
                        ></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">{{ formatNum(scope.row.amt) }}</template>
                        </el-table-column>
                        <el-table-column
                            :key="Math.random()"
                            prop="processStatusDes"
                            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>
            </template>
            <template v-if="type === 'TRADE_WITHDRAW'">
                <div class="advanced-filter-box" v-if="!filterType">
                    <div class="platform-and-store">
                        <span>状态：</span>
                        <el-select
                            v-model="processStatus"
                            placeholder="请选择"
                            @change="filterProcessStatus"
                        >
                            <el-option
                                v-for="item in processStatusList"
                                :key="item.siteKey"
                                :label="item.siteDesc"
                                :value="item.siteKey"
                            ></el-option>
                        </el-select>
                        <span>银行：</span>
                        <el-select v-model="kycBank" placeholder="请选择" @change="filterKycBank">
                            <el-option
                                v-for="item in kycBankList"
                                :key="item.id"
                                :label="item.accountNo === ''? item.bankName+item.accountNo  :item.bankName + '('+item.accountNo.substring(0,4) + ' **** **** '+ item.accountNo.substring(item.accountNo.length-4) +')'"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </div>
                    <div class="user-defined">
                        <span>自定义：</span>
                        <el-select
                            v-model="outUserDefined"
                            multiple
                            placeholder="请选择"
                            @change="changeOutUserDefined"
                        >
                            <el-option
                                v-for="item in outUserDefinedList"
                                :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()" label="币种" width="100px">
                            <template slot-scope="scope">{{ scope.row.currencyDesc }}</template>
                        </el-table-column>
                        <el-table-column :key="Math.random()" label="金额" width="100px">
                            <template slot-scope="scope">{{ formatNum(scope.row.amt) }}</template>
                        </el-table-column>
                        <el-table-column
                            :key="Math.random()"
                            label="到账币种"
                            v-if="showBuyCurrencyDesc"
                            width="100px"
                        >
                            <template slot-scope="scope">{{ scope.row.buyCurrencyDesc }}</template>
                        </el-table-column>
                        <el-table-column :key="Math.random()" label="实际到账金额" v-if="showActualAmt">
                            <template slot-scope="scope">{{ formatNum(scope.row.actualAmt) }}</template>
                        </el-table-column>
                        <el-table-column
                            :key="Math.random()"
                            label="到账银行账户"
                            show-overflow-tooltip
                            v-if="showBankCardNo"
                        >
                            <template slot-scope="scope">
                                {{ scope.row.bankCardNo }}
                                <br />
                                {{ scope.row.bankName }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            :key="Math.random()"
                            prop="processStatusDes"
                            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>
            </template>
            <template v-if="type === 'REPAYMENT'">
                <div class="advanced-filter-box" v-if="!filterType">
                    <div class="platform-and-store">
                        <span>平台：</span>
                        <el-select v-model="platform" placeholder="请选择">
                            <el-option
                                v-for="item in platformList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                        <span>店铺：</span>
                        <el-select v-model="store" placeholder="请选择">
                            <el-option
                                v-for="item in storeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </div>
                    <div class="user-defined">
                        <span>自定义：</span>
                        <el-select v-model="repayUserDefined" multiple placeholder="请选择">
                            <el-option
                                v-for="item in repayUserDefinedList"
                                :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="还款时间">
                            <template slot-scope="scope">{{ scope.row.tradeDate }}</template>
                        </el-table-column>
                        <el-table-column
                            :key="Math.random()"
                            prop="storePlateFormName"
                            label="还款类型"
                            show-overflow-tooltip
                        ></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">{{ formatNum(scope.row.amt) }}</template>
                        </el-table-column>
                        <el-table-column
                            :key="Math.random()"
                            prop="storeName"
                            label="还款账户"
                            show-overflow-tooltip
                        ></el-table-column>
                        <el-table-column
                            :key="Math.random()"
                            prop="processStatusDes"
                            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>
            </template>
            <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_tradeList,
    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: this.type
                }
            };
            api_showTradeInit(showTradeInitData).then(res => {
                if (res.success) {
                    if (this.type === "TRADE_IN") {
                        this.siteList = [
                            {
                                plateformAndSite: "全部",
                                siteName: ""
                            }
                        ];
                        this.siteList.push.apply(
                            this.siteList,
                            res.data.siteList
                        );
                    } else if (this.type === "TRADE_WITHDRAW") {
                        this.processStatusList = [
                            {
                                siteDesc: "全部",
                                siteKey: ""
                            }
                        ];
                        this.processStatusList.push.apply(
                            this.processStatusList,
                            res.data.processStatusList
                        );
                        this.kycBankList = [
                            {
                                bankName: "全部",
                                accountNo: "",
                                id: ""
                            }
                        ];
                        this.kycBankList.push.apply(
                            this.kycBankList,
                            res.data.kycBankList
                        );
                    }
                } else {
                    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 tradeListParams = {
                params: {
                    tradeType: this.type,
                    startPage: startPage,
                    pageSize: pageSize,
                    tradeStartDate: utils.formatDate(
                        this.time[0],
                        "yyyy-MM-dd"
                    ),
                    tradeEndDate: utils.formatDate(this.time[1], "yyyy-MM-dd"),
                    currency: this.currency,
                    storeTheSite: this.site,
                    kycStoreId: this.storeName,
                    storePlateform: this.storePlateform,
                    processStatusEnum: this.processStatus,
                    kycBankId: this.kycBank
                }
            };
            api_tradeList(tradeListParams).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);
        },
        changeType(val) {
            this.filterType = true;
            this.init();
            this.filterData(1, 10);
        },
        changeCurrency(val) {
            this.filterData(1, 10);
        },
        toggleType() {
            this.filterType = !this.filterType;
        },
        toDealDetail(val) {
            let that = this;
            let toDetail;
            if (this.type == "TRADE_IN") {
                toDetail = this.$router.resolve({
                    path: "/record/deal/detail",
                    query: {
                        tradeType: that.type,
                        id: val.tradeId
                    }
                });
            } else {
                toDetail = this.$router.resolve({
                    path: "/record/deal/detail",
                    query: {
                        tradeType: that.type,
                        id: val.batchNo
                    }
                });
            }
            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;
                }
            });
            if (val == "") {
                this.storeNameList = [
                    {
                        storeName: "全部",
                        sunrateBankCardNo: null,
                        storeId: ""
                    }
                ];
                this.storeName = "";
            } else {
                let showStoreListByConditionData = {
                    params: {
                        storePlateform: this.storePlateform,
                        storeTheSite: this.site
                    }
                };
                api_showStoreListByCondition(showStoreListByConditionData).then(
                    res => {
                        if (res.success) {
                            this.storeNameList = [
                                {
                                    storeName: "全部",
                                    sunrateBankCardNo: null,
                                    storeId: ""
                                }
                            ];
                            this.storeNameList.push.apply(
                                this.storeNameList,
                                res.data.filter(item => {
                                    return item.sunrateBankCardNo !== null;
                                })
                            );
                        } 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;
                    }
                }
            }
        },
        filterProcessStatus(val) {
            this.filterData(1, 10);
        },
        filterKycBank(val) {
            this.filterData(1, 10);
        },
        changeOutUserDefined(val) {
            if (val.length === 0) {
                this.showBuyCurrencyDesc = false;
                this.showActualAmt = false;
                this.showBankCardNo = false;
            } else if (val.length === 3) {
                this.showBuyCurrencyDesc = true;
                this.showActualAmt = true;
                this.showBankCardNo = true;
            } else {
                this.showBuyCurrencyDesc = false;
                this.showActualAmt = false;
                this.showBankCardNo = false;
                for (let i = 0; i < val.length; i++) {
                    const element = val[i];
                    if (element == 0) {
                        this.showBuyCurrencyDesc = true;
                    } else if (element == 1) {
                        this.showActualAmt = true;
                    } else {
                        this.showBankCardNo = true;
                    }
                }
            }
        }
    },
    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: "",
            type: "TRADE_IN",
            currency: "",
            filterType: true,
            // 入账
            siteList: [
                {
                    plateformAndSite: "全部",
                    siteName: ""
                }
            ],
            site: "",
            storePlateform: "",
            storeNameList: [
                {
                    storeName: "全部",
                    sunrateBankCardNo: null,
                    storeId: ""
                }
            ],
            storeName: "",
            inUserDefinedList: [
                {
                    value: "0",
                    label: "平台"
                },
                {
                    value: "1",
                    label: "店铺"
                }
            ],
            inUserDefined: ["0", "1"],
            showPlateForm: true,
            showStore: true,
            //提现
            processStatusList: [
                {
                    siteDesc: "全部",
                    siteKey: ""
                }
            ],
            processStatus: "",
            kycBankList: [
                {
                    accountName: "全部",
                    accountNo: "",
                    id: ""
                }
            ],
            kycBank: "",
            outUserDefinedList: [
                {
                    value: "0",
                    label: "到账币种"
                },
                {
                    value: "1",
                    label: "实际到账金额"
                },
                {
                    value: "2",
                    label: "到账银行账户"
                }
            ],
            outUserDefined: ["0", "1", "2"],
            showBuyCurrencyDesc: true,
            showActualAmt: true,
            showBankCardNo: true,
            recordList: [],
            currentPage: 1,
            total: 0,
            size: 10,
            loading: false,
            storeTheSite: ""
        };
    },
    created() {
        this.init();
        this.defaultTime();
        this.filterData(1, 10);
    }
};
</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;
}
.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;
}
.type {
    margin-bottom: 24px;
}
.currency {
    position: relative;
    padding-bottom: 24px;
    border-bottom: 1px solid #eaeaea;
}
.advanced-filter,
.basic-filter {
    position: absolute;
    top: 10px;
    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>
