<template>
    <div class="unilog" style="border:1px solid #EBEEF5;width: 100%;font-size: 14px;"  v-if="list.length > 0">
        <el-table  class="eltable" :data="list" style="width: 100%"
            :header-cell-style="{ background: '#EEF5FD', color: '#18518B' }">
            <el-table-column align="center" property="from_f" label="序号">
                <template slot-scope="scope">

                    <span  v-if="pageInfo.page > 2">
                        {{ scope.$index + 1 + (pageInfo.page * pageInfo.limit) - 10}}
                    </span>
                    <span v-else>
                        {{pageInfo.page == 2 ? scope.$index + 1 +10 : scope.$index + 1}}
                    </span>
                </template>
            </el-table-column>
            <el-table-column align="center" property="trade_time" label="交易时间" sortable width="150"></el-table-column>
            <el-table-column align="center" property="out_trade_no" label="流水号" width="260" ></el-table-column>
            <el-table-column align="center" property="amount" label="操作金额(元)">
                <template slot-scope="scope">
                    {{cutMoneyFiter(scope.row.amount)}}
                </template>
            </el-table-column>
            <el-table-column align="center" property="operation_time" label="操作时间"></el-table-column>
            <el-table-column align="center" property="opt_name" label="操作人"></el-table-column>
            <el-table-column align="center" property="operation_type" label="操作名称"></el-table-column>

        </el-table>
        <pagination  :total="total" :page.sync="pageInfo.page" :page-sizes="pageInfo.sizes" :limit.sync="pageInfo.limit" @pagination="getList" />
    </div>
</template>

<script>

import {
    operation_log
} from '@/api/financial'
export default {
    name: 'DealUnilateralLog',
    props: {
        date:String,
    },
    data() {
        return {
            ordervisible:false,
            // 遮罩层
            loading: false,
            // 表格数据
            list: [],
            // 总条数
            total:0,
            // 分页参数
            pageInfo: {
                page: 1,
                limit: 5,
                sizes:"[5,10,20,50]"
            },
            // 查询参数
            queryParams: {
                trade_time: { value: '', op: 'day'}
            },
        };
    },
    watch: {
        date: {
            immediate: true,
            handler (val, old) {
               this.queryParams = {
                   trade_time: { value: val, op: 'day'}
               }
            },
        }
    },
    // created() {
    //     this.getList();
    // },
    methods: {
        getList(){
            this.loading = true
            const qyparams = {
                ...this.pageInfo,
                ...this.formatQueryParams(this.queryParams)
            }
            operation_log(qyparams).then(response => {
                    this.list = response.data.data
                    this.total = response.data.total
            }).finally(() => {
                this.loading = false
            })
        }
    },
};
</script>

<style>
    .pagination-container{
        margin-bottom: 25px;
    }
</style>
