<template>
    <div class="flex-container">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
            <!-- 搜索区域 -->
            <a-form layout="inline">
                <a-row :gutter="24">

                    <a-col :md="5" :sm="16">
                        <a-form-item label="月份：">
                            <a-month-picker :format="dateFormat" @change="monthChange" />
                        </a-form-item>
                    </a-col>

                    <a-col :md="6" :sm="12">
                        <a-form-item :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}" label="项目类型">
                            <a-select placeholder="请选择" defaultValue="佣金部分" v-model="queryParam.expenseType">
                                <a-select-option key="佣金支出">佣金部分</a-select-option>
                                <a-select-option key="佣金+成本">佣金+成本</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>

                    <span class="table-page-search-submitButtons" style="float: left; overflow: hidden;">
                        <a-col :md="6" :sm="24">
                            <a-button @click="search()" type="primary">查询</a-button>
                             <a-divider type="vertical"/>

                            <a-button @click="exportList()" style="margin-left: 10px">导出</a-button>
                        </a-col>
                    </span>
                </a-row>
            </a-form>
           </div>

        <!--列表-->
        <s-table  :locale="emptyText" :columns="columns" :data="rowdata" bordered ref="table" size="small" class="flex-filling">

        </s-table>

    </div>
</template>

<script>
    import STable from '@/components/table';
    import {
        getStatisList,exportStatisList
    } from "../../../api/school-center/bill/billAPI";
    import {cloneObject,exportFile} from '@/utils/util';

    export default {
        name: "billStatis",
        components: {
            STable
        },
        data: function () {
            return {
                emptyText: {emptyText: '暂无数据'},
                fileList: [
                ],
                fileid:{},
                modifyvisible: false,
                dateFormat: 'YYYYMM',
                //输入框列表
                queryParam: {
                    dataType: 'month',
                    month: '',
                    statisType: 'month',
                    expenseType: '佣金部分'
                },
                columns: [
                    {dataIndex: 'billType', width: 100, title: '项目类型', align: "center"},
                    {dataIndex: 'month', width: 100, title: '月份', align: "center"},
                    {dataIndex: 'billDetail', width: 100, title: '收支详情', align: "center"},
                    {dataIndex: 'amount', width: 100, title: '金额', align: "center"},
                    {dataIndex: 'billTypeExpense', width: 100, title: '项目类型', align: "center"},
                    {dataIndex: 'monthExpense', width: 100, title: '月份', align: "center"},
                    {dataIndex: 'billDetailExpense', width: 100, title: '收支详情', align: "center"},
                    {dataIndex: 'amountExpense', width: 100, title: '不含税金额', align: "center"},
                    {dataIndex: 'taxAmount', width: 100, title: '含税金额', align: "center"},
                   ]
                ,
                rowdata: parameter => {
                    let params = {
                        pageNo: parameter.pageNo,
                        pageSize: parameter.pageSize
                    }

                    //表示
                    let obj = cloneObject(this.queryParam)
                    return getStatisList(Object.assign(params, obj)).then(res => {
                        let data = {}
                        if (res.state !== 'success') {
                            this.emptyText.emptyText = '查询失败！'
                            this.$message.error("查询失败！", 5);
                            data = {
                                data: [],
                                pageSize: parameter.pageSize,
                                pageNo: 1,
                                totalCount: 0
                            }
                        } else {
                            if (res.data.records.length==0){
                                return data
                            }
                            data = {
                                data: res.data.records,
                                pageSize: parameter.pageSize,
                                pageNo: parameter.pageNo,
                                totalCount: res.data.total
                            }
                        }
                        return data
                    })
                }
            }
        },
        created() {
            this.queryParam.expenseType = "佣金部分"
        },
        methods:{
            search() {
                this.$refs.table.refresh({search: true})
            },
            exportList() {
                exportFile(exportStatisList(this.queryParam),'账单汇总清单.xlsx');
            },
            monthChange(date, dateString) {
                if(dateString == ""){
                    this.queryParam.month = "";
                }else{
                    this.queryParam.month = dateString;
                }
            },
            filterOption(input, option) {
                return (
                    option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
                );
            },



        }
    }
</script>

<style scoped>

</style>
