<template>
    <div class="stat-shop">
        <layout-body>
            <p slot="title">资金操作明细</p>
            <layout-filter class="box-filter" :inline="true" :col="1">
                <filter-item :label="filters.dateRange.label" >
                    <Date-picker type="datetimerange"
                                 :placeholder="filters.dateRange.label"
                                 @on-change="dateRange"
                                 v-model="filters.dateRange.model"
                                 format="yyyy-MM-dd">
                    </Date-picker>
                    <div class="quick">
                        <a href="javascript:;" @click="() => {changeLimit(0)}">今日</a>
                        <a href="javascript:;" @click="() => {changeLimit(1)}">昨天</a>
                        <a href="javascript:;" @click="() => {changeLimit(7)}">近7天</a>
                        <a href="javascript:;" @click="() => {changeLimit(30)}">近30天</a>
                    </div>
                </filter-item>
                <filter-item>
                    <div class="select-container">
                        <Select v-model.trim="filters.withdrawStatus.model" :placeholder="filters.withdrawStatus.label" style="width: 200px;">
                            <Option v-for="option in filters.withdrawStatus.options"
                                    :value="option.value" :key="option.value">{{option.label}}</Option>
                        </Select>
                    </div>
                    <div class="select-container">
                        <Input v-model.trim="filters.statementSn.model" :placeholder="filters.statementSn.label" :maxlength="20"></Input>
                    </div>
<!--                    <div class="select-container">-->
<!--                        <Select v-model.trim="filters.targetAccount.model" :placeholder="filters.targetAccount.label" style="width: 200px;">-->
<!--                            <Option v-for="option in filters.targetAccount.options"-->
<!--                                    :value="option.value" :key="option.value">{{option.label}}</Option>-->
<!--                        </Select>-->
<!--                    </div>-->
                    <Poptip trigger="hover" placement="bottom-end">
                        <Button type="primary" @click="list">查询</Button>
                        <Button type="primary" @click="reset">全部</Button>
                        <Button type="warning" @click="exportFile">导出</Button>
                    </Poptip>
                </filter-item>
            </layout-filter>
            <layout-list>
                <Table border :columns="tableCols" :data="tableData"></Table>
                <Page :total="pageData.total" :current="pageData.current"
                            @on-change="pageChange" :page-size="pageData.pageSize" show-total></Page>
            </layout-list>
        </layout-body>
    </div>
</template>

<script>
    import moment from "moment";
    import {Withdraw} from './store';
    import FinanceService from 'services/finance/finance-service';
    import _ from "lodash";
    export default {
    data() {
        return Withdraw.call(this);
    },
    created() {
        this.financeService = new FinanceService();
    },
    mounted() {
        this.loadData();
    },
    watch: {
        date() {
            this.loadData();
        },
        day(newDay) {
            let curDay = moment().format('YYYY-MM-DD');
            if (newDay === this.beginTime || !newDay) {
                return;
            }
            this.dateRange = newDay !== this.curDay ? [newDay, curDay] : [newDay, newDay];
        },
        dateRange(newDate) {
            this.beginTime = moment(Array.isArray(newDate) ? newDate[0] : newDate).format('YYYY-MM-DD');
            this.endTime = moment(Array.isArray(newDate) ? newDate[1] : newDate).format('YYYY-MM-DD');
            this.day = this.beginTime === this.endTime === this.today ? '' : this.beginTime;
            this.pageData.current = 1;
            this.list();
        },
    },
    methods: {
        loadData() {
            this.list();
        },
        changeLimit(limit) {
            if(limit > 1) {
                this.dateRange = [this[`day${limit}`], this.today];
            }else if(limit===1){
                this.dateRange = [this.yesterday, this.today];
            }else{
                this.dateRange = [this.today, this.today];
            }
            this.pageData.current = 1;
        },
        pageChange() {
            this.pageData.current = page;
            this.list();
        },
        filtersParams() {
            let params = {};
            let fts = this.filters;
            let withdrawStatus = fts.withdrawStatus.model,
                statementSn = fts.statementSn.model === '' || fts.brand.model === null ?
                    null : fts.statementSn.model;
            let pageNo = this.pageData.current;
            let pageSize = this.pageData.pageSize;

            if(this.filters.withdrawStatus.model){
                if (this.isNumber(this.filters.withdrawStatus.mode)) {
                    params.withdrawStatus = this.filters.withdrawStatus.model;
                }
            }
            if(this.filters.statementSn.model){
                if (this.isString(this.filters.statementSn.mode)) {
                    params.statementSn = this.filters.statementSn.model;
                }
            }
            params.pageSize = this.pageData.pageSize;
            params.pageNo = this.pageData.current;

            return Promise.resolve({
                params,
                withdrawStatus,
                statementSn,
                pageNo,
                pageSize
            });
        },
        list() {
            this.$Loading.start();
            return this.filtersParams().then((params) => {
                let filter = {
                    beginTime: this.beginDate,
                    endTime: this.endDate,
                    pageNo: params.pageNo,
                };
                if (this.withdrawStatus && this.withdrawStatus !== '-1') {
                    filter = Object.assign({}, filter, {withdrawStatus: this.withdrawStatus});
                }
                return this.FinanceService.shopWithdrawList(filter);
            }).then(result => {
                if (!result.data) {
                    result.data = {
                        pageNo: 1,
                        pageSize: 1,
                        totalCount: 1,
                        totalPage: 1,
                        records: []
                    }
                }
                this.pageData.total = result.data.totalCount;
                this.pageData.current = result.data.pageNo;
                this.tableData = result.data.records;
                this.$Loading.finish();
            }).catch(() => {
                this.$Loading.finish();
            });
        },
        reset() {
            this.filters.withdrawStatus.model = null;
            this.filters.statementSn.model = null;
            this.filters.timeFlag.model = null;
            this.filters.beginTime.model = null;
            this.filters.endTime.model = null;
            this.pageData.pageNo = 1;
            this.pageData.total = 0;
            this.list();
        },
        exportFile() {
            let param = {};

            param.beginTime = this.beginTime;
            param.endTime = this.endTime;
            // param.timeFlag = '1,2,3,4';
            if (this.withdrawStatus && this.withdrawStatus !== '0') {
                param.withdrawStatus = this.withdrawStatus;
            }

            const href = '/Api/erp/exportShopWithdrawList?queryConf=' +
                JSON.stringify(param);

            window.open(href, '_blank');
        },
        getDetailById() {

        }
    }
};
</script>

<style lang="scss">
    .stat-shop {
        .ivu-tabs-tabpane {
            height: 400px;
            position: relative;
        }
    }

    .layout-container {
        min-height: 200px;
        margin: 15px;
        overflow: hidden;
        background: #fff;
        border-radius: 4px;

        .layout-filter .line {
            border-top: none;
            margin-bottom: 0;
        }
    }

    .shop-card {
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .box-title {
        font-weight: 700;
        color: #495060;
        font-size: 16px;
        line-height: 22px;
        margin: 5px;

        &:before {
            content: " ";
            display: inline-block;
            width: 5px;
            margin-right: 2px;
            height: 22px;
            vertical-align: top;
            background-color: #999;
        }
    }

    .box-item {
        width: 90%;
        height: 50px;
        padding: 0 0 0 15px;
        line-height: 50px;
        font-size: 14px;
        overflow: hidden;
        border-radius: 5px;
        color: #fff;
        margin-bottom: 10px;

        .box-item-label {
            display: inline-block;
            min-width: 75px;
            vertical-align: top;
            font-weight: normal;
        }

        .box-item-value {
            font-size: 20px;
            font-weight: 600;
        }

        i {
            display: inline-block;
            width: 20px;
            height: 20px;
            font-size: 22px;
            text-align: center;
            margin-top: -7px;
            vertical-align: middle;
            margin-right: 3px;
        }
    }

    .box-filter {
        .ivu-date-picker {
            margin-left: 0;
            width: 220px !important;
        }

        .quick {
            display: inline-block;
            margin-left: 20px;
            margin-right: 50px;

            a {
                margin-right: 5px;
            }
        }

        .select-container {
            display: inline-block;
            width: 220px;
        }
    }

    .ivu-table-cell {
        padding-left: 6px;
        padding-right: 6px;
    }
</style>