<template>
    <div class="common-container">
        <TitleBar></TitleBar>
        <div class="remaining-sum">
            <span class="remaining">{{ balance | pricePipe(2, '￥', true)}}</span>
            <!-- <el-button type="primary" size="mini" round @click="payShow">充值</el-button> -->
        </div>
        <div class="main-container">
            <div class="search-container TableSelectMain widthAuto">
                <el-form class="table-select-main" :model="searchForm" label-position="left">
                    <el-row :gutter="15">
                        <el-col :span="4">
                            <el-form-item>
                                <el-input placeholder="流水号" v-model="searchForm.flowNum"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-select placeholder="交易类型" v-model="searchForm.type" clearable>
                                    <el-option label="支出" :value="1"></el-option>
                                    <el-option label="收入" :value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item>
                                <div>
                                    <el-date-picker
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        v-model="time"
                                        format="yyyy-MM-dd"
                                        value-format="timestamp"
                                        class="time"
                                    ></el-date-picker>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-button type="primary" plain round @click="query">查询</el-button>
                                <el-button type="primary" plain round @click="reset">重置</el-button>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item class="totalBox">
                                <div class="revenue">
                                    <span class="total">收入合计: {{ income | pricePipe(2, '￥', true) }}</span>
                                    <span
                                        class="total"
                                    >支出合计 : {{ outcome | pricePipe(2, '￥', true) }}</span>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

            <!-- <div class="SearchTitle">
        已选择
        <span class="subject-color">4</span> 项
            </div>-->

            <div class="MaintenanceTable">
                <el-table
                    ref="multipleTable"
                    :data="tableData"
                    style="width: 100%"
                    tooltip-effect="dark"
                    @selection-change="selectionChange"
                    class="OutTable"
                    border
                    v-loading="listLoading"
                >
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column prop="flowNum" label="流水号" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="type" label="交易类型" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <span v-if="scope.row.type == 1">支出</span>
                            <span v-if="scope.row.type == 2">收入</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="businessType" label="业务类型" :show-overflow-tooltip="true">
                        <template slot-scope="scope">{{ scope.row.businessType | businessType }}</template>
                    </el-table-column>
                    <el-table-column prop="create_time" label="收支时间" :show-overflow-tooltip="true">
                        <template slot-scope="scope">{{ scope.row.createTime | formatTimePipe }}</template>
                    </el-table-column>
                    <el-table-column label="金额" :show-overflow-tooltip="true">
                        <template
                            slot-scope="scope"
                        >{{ scope.row.amount | pricePipe(2, '￥', true) }}</template>
                    </el-table-column>
                    <el-table-column label="账户余额" :show-overflow-tooltip="true">
                        <template
                            slot-scope="scope"
                        >{{ scope.row.balance | pricePipe(2, '￥', true) }}</template>
                    </el-table-column>
                    <!-- <el-table-column label="操作" min-width="220px;">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                plain
                round
                @click="detailsFormShow(scope.row.id) "
              >查看</el-button>
            </template>
                    </el-table-column>-->
                </el-table>
                <div class="pagenation">
                    <PageComponent
                        :total="total"
                        @pagination="handlePagination"
                        :pageSize.sync="page.pageSize"
                        :pageNum.sync="page.pageNum"
                    ></PageComponent>
                </div>
            </div>
        </div>
        <!-- 充值弹框 -->
        <payDialog ref="paydialog" @queryListData="queryListData"></payDialog>
        <detailsDialog
            :detailsVisible="detailsVisible"
            @closeDialog="closeDialog"
            ref="detailsVisible"
        ></detailsDialog>
    </div>
</template>
<script>
import TitleBar from '@/apps/mobile/components/common/TitleBar';
import detailsDialog from './components/detaisDialog';
import payDialog from './components/payDialog';
import { queryPagety } from '@/apps/mobile/api/payment/platformAccount/index';
import { queryPage } from '@/apps/mobile/api/payment/userAccount/index';
export default {
    components: {
        TitleBar,
        detailsDialog,
        payDialog,
    },
    data() {
        return {
            searchForm: {},
            tableData: [],
            page: {
                pageNum: 1,
                pageSize: 5,
            },
            total: 5,
            listLoading: false,
            time: [],
            detailsVisible: false,
            income: 0, //合计收入
            outcome: 0, //合计支出
            balance: 0, //账户余额
        };
    },
    methods: {
        payShow() {
            this.$refs.paydialog.open(this.balance);
        },
        selectionChange() {},
        // 页码变化时
        handlePagination(val) {
            this.page = val;
            this.listLoading = true;
            let obj = {
                ...this.page,
                ...this.searchForm,
                sort: {
                    order: 'desc',
                    orderBy: 'create_time',
                },
            };
            if (this.time && this.time.length >= 2) {
                obj.starDate = this.time[0];
                obj.endDate = this.time[1];
            }
            queryPagety(obj)
                .then(res => {
                    if(res.statusCode == "10"){
                        this.$router.replace("/login");
                    }
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                    this.listLoading = false;
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },
        closeDialog(dialogVisibleName) {
            this[dialogVisibleName] = false;
            this.detailsForm = {};
        },
        detailsFormShow(id) {
            this.detailsVisible = true;
        },
        queryListData() {
            this.listLoading = true;
            let obj = {
                ...this.page,
                ...this.searchForm,
                sort: {
                    order: 'desc',
                    orderBy: 'create_time',
                },
            };
            if (this.time && this.time.length >= 2) {
                obj.starDate = this.time[0];
                obj.endDate = this.time[1];
            }
            queryPagety(obj)
                .then(res => {
                    console.log(res);
                    if(res.statusCode == "10"){
                        this.$router.replace("/login");
                    }
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                    let arr = [...this.tableData];
                    this.income = arr[0].income || 0;
                    this.outcome = arr[0].outcome || 0;
                    this.listLoading = false;
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },
        // 查询
        query() {
            for (let k in this.searchForm) {
                if (this.searchForm[k] === '') {
                    delete this.searchForm[k];
                }
            }
            this.queryListData();
        },
        // 重置
        reset() {
            this.searchForm = {};
            this.time = [];
            this.page.pageNum = 1;
            this.queryListData();
        },
    },
    created() {
        this.listLoading = true;
        let obj = {
            ...this.page,
            ...this.searchForm,
            sort: {
                order: 'desc',
                orderBy: 'create_time',
            },
        };
        if (this.time && this.time.length >= 2) {
            obj.starDate = this.time[0];
            obj.endDate = this.time[1];
        }
        queryPagety(obj)
            .then(res => {
                console.log(res);
                if(res.statusCode == "10"){
                        this.$router.replace("/login");
                }
                this.tableData = res.data.records;
                this.total = res.data.total;
                let arr = [...this.tableData];
                this.income = arr[0].income || 0;
                this.outcome = arr[0].outcome || 0;
                this.balance = arr[0].balance || 0;
                this.listLoading = false;
            })
            .catch(() => {
                this.listLoading = false;
            });
    },
};
</script>
<style lang="stylus" scoped>
.el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
    width: 95%;
}

.common-container {
    position: relative;
}

.el-date-editor {
    border-radius: 20px;
    overflow: hidden;
    height: 30px;
    line-height: 30px;
}

.el-range-editor.el-input__inner {
    margin-top: 5px;
}

.block {
    margin-top: 5px;
}

.total {
    font-family: 'PingFang SC Bold', 'PingFang SC Medium', 'PingFang SC', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.847058823529412);
    line-height: 28px;
    margin-right: 30px;
}

.revenue {
    float: right;
}

.remaining {
    display: inline-block;
    font-weight: 700;
    font-style: normal;
    font-size: 20px;
    color: rgba(0, 0, 0, 0.847058823529412);
    line-height: 28px;
    margin-right: 30px;
    vertical-align: middle;
}

.remaining-sum {
    position: absolute;
    right: 20px;
    top: 7px;
}
</style>
