<template>
    <main>
        <section class="layout-box">
            <div class="layout-content box-shadow">
                <div class="accont-title clearfix">
                    <h3>我的店铺</h3>
                    <el-select
                        v-model="storeValue"
                        placeholder="请选择"
                        size="mini"
                        @change="selectStoreSite"
                    >
                        <el-option
                            v-for="item in storeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
                <div class="search-store">
                    <img src="~assets/images/icon-search.png" alt />
                    <input type="text" v-model="conditionName" placeholder="搜索账户或店铺名称" />
                    <a href="javascript:;" @click="searchBtn">搜索</a>
                </div>
                <div class="list-content">
                    <div class="data-list-layout" v-loading="loadingStore">
                        <el-table :data="storeList" style="width: 100%" empty-text="很遗憾，暂无数据！">
                            <el-table-column prop="storeName" label="店铺名称" show-overflow-tooltip></el-table-column>
                            <el-table-column
                                prop="storeHoldPersonName"
                                label="账户持有人"
                                show-overflow-tooltip
                            ></el-table-column>
                            <el-table-column label="入账时间">
                                <template slot-scope="scope">{{ scope.row.entryDatetime }}</template>
                            </el-table-column>
                            <el-table-column label="可提现金额">
                                <template
                                    slot-scope="scope"
                                >{{ formatNum(scope.row.withdrawAmount) }} {{ scope.row.currency }}</template>
                            </el-table-column>
                            <el-table-column prop="authStatus" label="操作">
                                <template slot-scope="scope">
                                    <span class="cl-red" v-if="scope.row.auditStatus == 2">审核未通过</span>
                                    <div v-else>
                                        <el-button
                                            @click="toBindStore(scope.row)"
                                            type="text"
                                            size="small"
                                            v-if="scope.row.authStatus == 2 || scope.row.authStatus == 3"
                                            class="cl-green"
                                        >已授权</el-button>
                                        <el-button
                                            @click="toBindStore(scope.row)"
                                            type="text"
                                            size="small"
                                            v-else
                                            class="cl-red"
                                        >店铺授权</el-button>
                                    </div>
                                </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="100"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        v-if="total"
                    ></el-pagination>
                </div>
            </div>
        </section>
    </main>
</template>

<script>
import { api_storeList } from "api/portal.js";
import { api_bankList } from "api/center.js";
export default {
    name: "all",
    data() {
        return {
            conditionName: "",
            storeOptions: [
                {
                    value: "AMAZON",
                    label: "亚马逊"
                }
            ],
            storeValue: "AMAZON",
            storeList: [],
            loadingStore: true,
            currentPage: 1,
            total: 0,
            size: 10
        };
    },
    methods: {
        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 + "");
        },
        searchBtn() {
            this.selectStore(this.storeValue, 1, 10, this.conditionName);
        },
        toBindStore(val) {
            let toDetail = this.$router.resolve({
                path: "/account/store/detail",
                query: {
                    id: val.id
                }
            });
            window.open(toDetail.href, "_blank");
        },
        selectStore(storePlateform, startPage, pageSize, conditionName) {
            this.loadingStore = true;
            let storeListParams = {
                params: {
                    storePlateform: storePlateform,
                    startPage: startPage,
                    pageSize: pageSize,
                    conditionName: conditionName
                }
            };
            api_storeList(storeListParams).then(res => {
                if (res.success) {
                    this.storeList = res.data.list;
                    this.total = res.data.total;
                } else {
                    this.$message.error(res.msg);
                }
                this.loadingStore = false;
            });
        },
        selectStoreSite(val) {
            this.selectStore(val, 1, 10);
        },
        handleSizeChange(val) {
            this.size = val;
            this.selectStore(this.storeValue, 1, val);
        },
        handleCurrentChange(val) {
            this.selectStore(this.storeValue, val, this.size);
        }
    },
    created() {
        this.selectStore(this.storeValue, 1, 10);
    }
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/common.css";
.accont-title /deep/ .el-select {
    float: right;
    width: 110px;
    margin-top: -6px;
}
.list-content {
    padding: 30px 50px;
}
.search-store {
    position: relative;
    overflow: hidden;
    width: 430px;
    height: 44px;
    line-height: 44px;
    text-align: left;
    margin: 30px auto 0;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    img {
        position: absolute;
        left: 8px;
        top: 11px;
    }
    input {
        width: 300px;
        margin-left: 38px;
    }
    a {
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        height: 44px;
        line-height: 44px;
        text-align: center;
        background: #3d86e9;
        color: #fff;
    }
}
.data-list-layout {
    margin-bottom: 30px;
    .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>
