<template>
    <el-dialog
        :title="title"
        :close-on-click-modal="false"
        :visible.sync="visible"
        :before-close="close"
    >
        <el-form class="widthAuto">
            <el-row>
                <!-- <el-col :span="12">
                    <el-form-item label="类型:">
                        <el-select placeholder="请选择" v-model="detailsForm.type" clearable class="max150">
                            <el-option label="用户" :value="1"></el-option>
                            <el-option label="专家" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>-->
                <el-col :span="12">
                    <el-form-item label="交易类型:">
                        <el-select
                            placeholder="请选择"
                            v-model="searchForm.type"
                            clearable
                            class="max150"
                        >
                            <el-option label="支出" :value="1"></el-option>
                            <el-option label="收入" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="时间:">
                        <el-date-picker
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            v-model="time"
                            format="yyyy-MM-dd"
                            value-format="timestamp"
                            class="time max250"
                        ></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8" :offset="18">
                    <el-form-item>
                        <el-button size="mini" type="primary" plain round @click="query(id)">查询</el-button>
                        <el-button size="mini" type="primary" plain round @click="reset(id)">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <div class="total">
                <div>
                    <span>收入合计:{{ income | pricePipe(2, '￥', true) }}</span>
                </div>
                <div>
                    <span>支出合计:{{ expenditure | pricePipe(2, '￥', true) }}</span>
                </div>
            </div>
        </el-form>
        <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="descr" label="描述" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.descr | descr }}</template>
                </el-table-column>
                <el-table-column prop="amount" label="交易金额" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.amount | pricePipe(2, '￥', true) }}</template>
                </el-table-column>
                <el-table-column prop="balance" label="用户余额" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.balance | pricePipe(2, '￥', true) }}</template>
                </el-table-column>
                <el-table-column prop="createTime" label="收支时间" :show-overflow-tooltip="true">
                    <template slot-scope="scope">{{ scope.row.createTime | formatTimePipe }}</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>
    </el-dialog>
</template>
<script>
import { queryPage } from '@/apps/mobile/api/payment/userAccount/index';
export default {
    data() {
        return {
            visible: false,
            title: '账单明细',
            searchForm: {},
            time: '',
            listLoading: false,
            tableData: [],
            page: {
                pageNum: 1,
                pageSize: 5,
            },
            total: 5,
            income: 0,
            expenditure: 0,
            ids: [],
            id: null,
            time: [],
        };
    },
    methods: {
        open(id) {
            this.visible = true;
            console.log(id, 'id');
            this.id = id;
            this.queryListData(id);
        },
        close() {
            this.id = null;
            this.searchForm = {};
            this.time = [];
            this.rejectShow = null;
            this.expenditure = null;
            this.visible = false;
        },
        // 页码变化时
        handlePagination(val) {
            this.page = val;
            this.queryListData(this.id);
        },
        selectionChange() {},
        queryListData(id) {
            // this.listLoading = true;
            let obj = {
                ...this.page,
                ...this.searchForm,
                userId: id,
                // sort: {
                //     order: 'desc',
                //     orderBy: 'create_time',
                // },
            };
            if (this.time && this.time.length >= 2) {
                obj.starDate = this.time[0];
                obj.endDate = this.time[1];
            }
            queryPage(obj)
                .then(res => {
                    console.log(res);
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                    let arr = [...this.tableData];
                    this.income = arr[0].income || 0;
                    this.expenditure = arr[0].outcome || 0;
                    this.listLoading = false;
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },
        // 查询
        query(id) {
            for (let k in this.searchForm) {
                if (this.searchForm[k] === '') {
                    delete this.searchForm[k];
                }
            }
            this.queryListData(id);
        },
        // 重置
        reset(id) {
            this.searchForm = {};
            this.time = [];
            this.rejectShow = null;
            this.expenditure = null;
            this.queryListData(id);
        },
    },
};
</script>
<style scoped>
::v-deep .el-textarea__inner {
    min-height: 200px !important;
}
.el-input {
    width: auto;
}
/* .max150 {
    max-width: 150px;
} */
.max250 {
    max-width: 250px;
}
.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;
}
.MaintenanceTable {
    margin-top: 20px;
}
</style>
