<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="5" :sm="16">
                        <a-form-item :labelCol="{span: 6}"  :wrapperCol="{span: 8, offset: 1}"  label="县分">
                            <a-select placeholder="请选择" @change="changeSubst" v-model="queryParam.substName" >
                                <a-select-option key="">请选择</a-select-option>
                                <a-select-option v-for="data in substList" :value="data">
                                    {{ data}}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>

                    <a-col :md="6" :sm="12">
                        <a-form-item :labelCol="{span: 6}" :wrapperCol="{span: 8, offset: 1}"  label="学校名称">
                            <a-select showSearch placeholder="请选择"  v-model="queryParam.schoolName" >
                                <a-select-option key="">请选择</a-select-option>
                                <a-select-option v-for="data in schoolList" :key="data.school_name" :value="data.school_name">
                                </a-select-option>
                            </a-select>
                        </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="请选择" v-model="queryParam.billType" :defaultValue="billTypeList[0]" @change="changeBillType"
                                  :allowClear="allowStatus">
                            <a-select-option v-for="billType in billTypeList" :key="billType">
                                {{billType}}
                            </a-select-option>
                        </a-select>
                        </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="请选择" v-model="queryParam.billDetail" :allowClear="allowStatus">
                                <a-select-option v-for="billDetail in billDetailList" :key="billDetail">{{ billDetail }}</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-button @click="openImport()" 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">
            <template slot="operation" slot-scope="text,record">
                <a-divider type="vertical"/>
                    <a-popconfirm title="是否要删除此行？" @confirm="deleteBill(record.id)">
                        <a>删除</a>
                    </a-popconfirm>
                <a-divider type="vertical"/>
            </template>
        </s-table>

        <a-modal
                title="批量导入"
                :visible="modifyvisible"
                @ok="createfunctionOk"
                @cancel="createfunctionCancel"
                html-type="submit"
                width="400px"
        >
            <a-row :gutter="24">
                <a-col :md="24" :sm="12">
                    <p style="text-align:center">{{ importTitle }}</p>
                </a-col>
            </a-row>
            <import-btn :url="importUrl" :responseFun="doPush">
                <a-tooltip placement="topLeft" title="导入文件" arrowPointAtCenter>
                    <a-row :gutter="24">
                        <a-col :md="24" :sm="12">
                            <p>
                                选择文件：
                                <a-button type="primary">选择文件</a-button>
                            </p>
                        </a-col>
                    </a-row>
                </a-tooltip>
            </import-btn>
            <a-row :gutter="24">
                <a-col :md="24" :sm="12">
                    <p >
                        模板下载：
                        <a-button type="primary" @click="downloadTemplate">账单导入模板</a-button>
                    </p>
                </a-col>
            </a-row>
        </a-modal>


    </div>
</template>

<script>
    import STable from '@/components/table';
    import {
        getList,
        deleteBill,getSubstList,getSchoolList,
        downloadTemplate,exportList
    } from "../../../api/school-center/bill/billAPI"
    import {cloneObject,exportFile} from '@/utils/util';
    import ImportBtn from "../../../components/sysmanage/ImportBtn";

    export default {
        name: "billRecord",
        components: {
            STable,ImportBtn
        },
        data: function () {
            return {
                emptyText: {emptyText: '暂无数据'},
                fileList: [
                ],
                fileid:{},
                // form
                Formtable: this.$form.createForm(this, {name: 'Formtable'}),
                importUrl: "",
                importTitle: "",
                modifyvisible: false,
                substList: [],
                allowStatus: true,
                schoolList: [],
                schoolSelect: '',
                packageName:[],
                products:[],
                billTypeList:['佣金入账','佣金支出','外包成本','营销成本'],
                billDetailList: [],
                billDetailData:{
                    佣金入账 : ['佣金','学生补贴'],
                    佣金支出 : ['督导提成','楼长底薪','学生激励','花费补贴'],
                    外包成本 : ['督导底薪'],
                    营销成本 : ['活动执行费','日常用品采购','营销物料采购']
                },
                dateFormat: 'YYYYMM',
                //输入框列表
                queryParam: {
                    substName: '',
                    schoolId: '',
                    billType: '',
                    billDetail: '',
                    month: '',
                },
                columns: [
                    {dataIndex: 'month', width: 200, title: '月份', align: "center"},
                    {dataIndex: 'billType', width: 200, title: '项目类型', align: "center"},
                    {dataIndex: 'billDetail', width: 200, title: '收支详情', align: "center"},
                    {dataIndex: 'substName', width: 200, title: '县分', align: "center"},
                    {dataIndex: 'schoolName', width: 200, title: '学校', align: "center"},
                    {dataIndex: 'campus', width: 200, title: '校区', align: "center"},
                    {dataIndex: 'networkName', width: 200, title: '网点名称', align: "center"},
                    {dataIndex: 'networkCode', width: 200, title: '网点编码', align: "center"},
                    // {dataIndex: 'createTime', width: 200, title: '上传时间', align: "center"},
                    {dataIndex: 'amount', width: 200, title: '不含税金额', align: "center"},
                    {dataIndex: 'taxAmount', width: 200, title: '含税金额', align: "center"},
                    {dataIndex: 'taxPoint', width: 200, title: '税点', align: "center"},
                    {
                        dataIndex: 'operation',
                        width: 200,
                        title: '操作',
                        align: "center",
                        scopedSlots: {customRender: 'operation'},
                        fixed: "right"
                    }]
                ,
                rowdata: parameter => {
                    let params = {
                        pageNo: parameter.pageNo,
                        pageSize: parameter.pageSize
                    }

                    if(this.substList == '') {
                        let param = {};
                        getSubstList(Object.assign(param, obj)).then(res => {
                            if (res.state == 'success') {
                                res.data.forEach((key) => {
                                    this.substList.push(key.sub_name)
                                })
                            }
                        })
                    }


                    //表示
                    let obj = cloneObject(this.queryParam)
                    return getList(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
                    })
                }
            }
        },
        methods:{
            onLoad(){
              let param = {};
                getSubstList(Object.assign(params,obj)).then(res => {
                    if (res.state == 'success') {
                        res.data.forEach((key)=>{
                            this.substList.push(key.sub_name)
                        })
                    }
                })
            },
            search() {
                this.$refs.table.refresh({search: true})
            },
            openImport() {
                this.importTitle = "账单上传";
                this.importUrl = "manager/ciop/bill/importBill";
                this.modifyvisible = true;
            },
            downloadTemplate: function() {
                exportFile(downloadTemplate(), "账单导入模板.xlsx");
            },
            createfunctionOk() {
                this.modifyvisible = false;
                this.clearmodel();
            },
            createfunctionCancel() {
                this.modifyvisible = false;
                this.clearmodel();
            },
            clearmodel() {
                this.importTitle = "";
                this.importUrl = "";
            },
            // 执行上传
            doPush(res) {
                console.log(res);
                if (!res || !res.response) {
                    this.$message.error("上传文件出错！", 10);
                    return false;
                }
                const response = res.response;
                if (response.state !== "success") {
                    this.$message.error(response.msg ? response.msg : "上传文件出错！", 5);
                    return false;
                }
                this.$message.success("上传成功！" + response.data, 5);

                this.createfunctionCancel();
                this.search();

            },
            deleteBill(id){
                let params = {};
                params.id = id;

                deleteBill(params).then(res => {
                    if(res.state == "success"){
                        this.$message.success(res.data ? res.data : '删除成功', 5)
                        this.search();
                        return null;
                    }

                    this.$message.success(res.data ? res.data : '删除失败', 5);
                })
            },
            exportList() {
                exportFile(exportList(this.queryParam),'账单清单.xlsx');
            },
            changeSubst() {
                let param = {};
                param.substName = this.queryParam.substName;
                this.schoolList = [];
                this.queryParam.substSchool = "请选择";

                getSchoolList(param).then(res => {
                    if(res.state == "success"){
                        res.data.forEach(key => {
                            this.schoolList.push(key);
                        })
                    }
                })
            },
            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
                );
            },
            changeBillType(value){
                this.billDetailList = this.billDetailData[value];
            }


        }
    }
</script>

<style scoped>

</style>
