<style>
    .baseSet_Title {
        width: 120px !important;
        padding: 18px 0 0 16px;
        text-align: right;
    }

    .cycleOrderList .border-bottom {
        /* border-bottom: 1px dashed #EEE; */
        padding-bottom: 5px;
        margin-bottom: 5px;
    }

    .cycleOrderList .text-bottom {
        height: 32px;
        line-height: 32px;
        margin-bottom: 10px;
    }

    .cycleOrderList ._icon_btn i.icon-sousuo {
        background-color: #47BF8C;
    }

    .cycleOrderList ._icon_btn i {
        width: 30px;
        height: 30px;
        display: inline-block;
        color: white !important;
        border-radius: 50%;
        text-align: center;
        line-height: 30px;
        margin-right: 10px;
        cursor: pointer;
        outline: none;
    }

    .cycleOrderList .el-table td,
    .el-table th {
        padding: 5px 0;
    }
</style>
<template>
    <div class="page-body cycleOrderList">
        <div class="page-search row items-center">
            <div class="col row wrap q-mr-lg q-col-gutter-md">
                <div class="col-3">
                    <q-select filled stack-label @input="getDepartList(msg.School_Id),resetSearch()" option-value="SId"
                        option-label="SName" v-model="msg.School_Id" ref="School_Id" :options="schoolList" label="校区"
                        :dense="false" emit-value map-options />
                </div>
                <div class="col-3">
                    <selectTree :treeData='DeptList' :defaultArray="returnString" nodeKey="DeptId" :multiple="false"
                        labelKey="DeptName" childrenKey="ChildList" tipText="选择部门" @getChild="getChild"></selectTree>
                </div>
                <div class="col-3">
                    <q-select filled stack-label input-debounce="0" option-value="Id"  @input="resetSearch()" use-input
                        option-label="EmployeeName" v-model="msg.TeacherId" :options="PersionList" label="老师" @filter="filterFn2" 
                        :dense="false" emit-value map-options>
                    </q-select>
                </div>
                <div class="col-3">
                    <q-select filled stack-label @input="resetSearch()" option-value="Id" option-label="Name"
                        v-model="msg.PeriodId" :options="PeriodsList" label="周期" :dense="false" emit-value
                        map-options />
                </div>

            </div>

        </div>
        <div class="page-search row items-center">
            <div class="col row wrap q-mr-lg q-col-gutter-md">
                
                <div class="col-3">
                    <q-input filled v-model="msg.ContributeId" @keyup.enter.native="resetSearch()" label="投稿编号" />
                </div>
            </div>
        </div>
        <div class="page-search row items-center" style="justify-content: space-between;">
            <span style="font-size: 20px;font-weight: 400;">提成统计 <span
                    style="font-size: 16px;">（提成总计：{{TotalCommission}}）</span> </span>
            <q-btn  color="primary"  size="11px"  label="导出"  @click="tcexport"  style="margin-left:10px" />
        </div>
        <template>
            <el-table ref="filterTable" :data="tableData" v-loading='loading'
                :header-cell-style="{backgroundColor:'#f5f6f7', color: '#a8a8b3'}" border style="width: 100%">
                <el-table-column prop="SchoolName" label="校区" width='150'></el-table-column>
                <el-table-column prop="DeptName" label="部门"></el-table-column>
                <el-table-column prop="TeacherName" label="教师"> </el-table-column>
                <el-table-column  prop="ContributeType" label="投稿类型"> </el-table-column>
                <el-table-column  width='80' prop="ContributeId" label="投稿编码"> 
                    <template slot-scope="scope">
                        <div style="cursor: pointer;text-decoration: underline;" @click="showXQ(scope.row.ContributeId)">{{scope.row.ContributeId}}</div>
                    </template>
                </el-table-column>
                <el-table-column width='250' prop="ContributeTitle" label="投稿标题"> </el-table-column>
                <el-table-column width='200'  prop="CommissionMoney" label="提成金额"> </el-table-column>
                <el-table-column width='85' prop="Periods" label="期数"> </el-table-column>
                <el-table-column prop="Remark" width='160' label="备注"> </el-table-column>
            </el-table>
            <div style="margin-top: 10px;text-align: center;">
                <el-pagination background @current-change="handleCurrentChanges"
                    layout="total,prev, pager, next, jumper" :current-page.sync="msg.PageIndex"
                    :page-size="msg.PageSize" :total='total'>
                </el-pagination>
            </div>
        </template>
        <div v-if="isDetails==true">
            <contributionXQ :ContributeId="ContributeId" @close='isDetails=false'></contributionXQ>
        </div>
        

    </div>
</template>
<script>
    import contributionXQ from './contributionXQ'
    import {
        getSchoolDropdown,
        getClassDropDownList,
        getTeacherDropDownList
    } from '../../../api/school/index'
    import {
        queryEmployee
    } from '../../../api/users/user'
    import {
        getDeptTree
    } from '../../../api/system/dept.js'

    import {
        getTeaConCommissionStatistics,
        getTeaConCommissionPeriodsList,
        getTeaConCommissionStatisticsToExcel
    } from '../../../api/finance/index'

    import selectTree from '../../../components/common/select-tree'
    import {
        EduDownLoad,
    } from '../../../api/common/common';
    export default {
        meta: {
            title: "投稿提成统计"
        },
        props: {},
        components: {
            selectTree,
            contributionXQ
        },
        data() {
            return {
                loading: false,
                //列表数据参数
                msg: {
                    PageIndex: 1,
                    PageSize: 10,
                    School_Id: '-1',
                    Depart_Id: 0,
                    PeriodId: 0,
                    TeacherId: 0,
                    ContributeId: '',//投稿编号
                },
                TeacherList: [],
                pageCount: 0,
                persistent: false,
                listData: {},
                tableData: [],
                total: 0,
                company: [],
                department: [],
                ClassList: [],
                allClassList: [],
                returnString: [], //默认岗位
                see_tcdetailed: false,
                schoolList: [],
                DeptList: [], // 部门下拉
                PersionList: [], //员工列表
                AllemployeeList: [], //所有员工
                PeriodsList: [],//周期列表
                TotalCommission: 0,
                ContributeId:0,
                isDetails:false,
            }
        },
        created() {
            let userinfo = this.getLocalStorage();
            userinfo.ActionMenuList.map(x => {//判断权限
                if (x.FunctionCode == "see_tcdetailed") {//判断是否可以查看其他明细
                    this.see_tcdetailed = true;
                }
            })
        },
        mounted() {
            if (this.$route.query && this.$route.query.OrderId) {
                this.msg.OrderId = this.$route.query.OrderId
            }

            this.getList()
            this.GetTeacherList()
            this.getBranchList()
            this.getDepartList(0);
            this.getEmployee();
            this.getPeriodList()


        },
        methods: {
            resetSearch() {
                this.msg.PageIndex = 1;
                this.getList()
            },
            getList() {
                if (this.msg)
                    this.loading = true;
                getTeaConCommissionStatistics(this.msg).then(res => {
                    if (res.Code == 1) {
                        this.loading = false;

                        this.tableData = res.Data.PageData.List
                        this.TotalCommission = res.Data.PageData.TotalCommission
                        this.total = res.Data.Count

                    }
                })
            },
            unique(arr, Name) {//数组去重
                const res = new Map();
                return arr.filter(
                    (list) => !res.has(list.text) && res.set(list.text, 1)
                );
            },
            handleCurrentChanges(val) {
                this.msg.PageIndex = val;
                this.getList()
            },
            //获取教师下拉
            GetTeacherList() {
                getTeacherDropDownList({}).then(res => {
                    if (res.Code == 1) {
                        var jsonData = res.Data;
                        jsonData.unshift({ TeacherName: '不限', TId: 0 })
                        // this.allTeacherList = JSON.parse(JSON.stringify(jsonData));;
                        this.TeacherList = JSON.parse(JSON.stringify(jsonData));
                    }
                })
            },
            //筛选员工
            filterFn(val, update) {
                update(() => {
                    if (val === '') {
                        this.ClassList = JSON.parse(JSON.stringify(this.allClassList))
                    } else {
                        const needle = val.toLowerCase()
                        this.ClassList = this.allClassList.filter(v => v.ClassName.toLowerCase().indexOf(needle) > -1)
                    }
                })
            },
            getBranchList() {//获取校区
                getSchoolDropdown({}).then(res => {
                    this.schoolList = res.Data;
                    var obj = {
                        SName: '全部',
                        SId: '-1'
                    }
                    this.schoolList.unshift(obj);
                }).catch(() => {

                })
            },
            //获取部门下拉数据
            getDepartList(id) {
                if (id == -1) {
                    id = 0
                }
                let msg = {
                    School_Id: id
                }
                getDeptTree(msg).then(res => {
                    if (res.Code == 1) {
                        this.DeptList = res.Data;
                    }
                })
            },
            getChild(deptArray) {
                var tempStr = "";
                if (deptArray && deptArray != '') {
                    tempStr = deptArray;
                }
                if (tempStr) {
                    this.msg.Depart_Id = tempStr;
                } else {
                    this.msg.Depart_Id = 0;
                }
                this.resetSearch();
            },
            //筛选员工
            filterFn2(val, update) {
                update(() => {
                    if (val === '') {
                        this.PersionList = JSON.parse(JSON.stringify(this.AllemployeeList))
                    } else {
                        const needle = val.toLowerCase()
                        this.PersionList = this.AllemployeeList.filter(v => v.EmployeeName.toLowerCase().indexOf(needle) > -1)
                    }
                })
            },
            //获取员工列表
            getEmployee() {
                var qMsg = {
                    EmployeeName: ""
                }
                queryEmployee(qMsg).then(res => {
                    if (res.Code == 1) {
                        let obj = {
                            EmployeeName: '不限',
                            Id: 0
                        }
                        res.Data.unshift(obj)
                        var jsonData = res.Data;
                        if (jsonData && jsonData.length > 0) {
                            this.AllemployeeList = JSON.parse(JSON.stringify(jsonData));
                            this.PersionList = JSON.parse(JSON.stringify(jsonData));;
                        }
                    }
                })
            },
            getPeriodList() {//获取周期下拉列表
                getTeaConCommissionPeriodsList({}).then(res => {
                    if (res.Code == 1) {
                        this.PeriodsList = res.Data
                        let obj = {
                            Name: '不限',
                            Id: 0
                        }
                        this.PeriodsList.unshift(obj)


                    }
                })
            },
            tcexport() {//导出
                var msg = JSON.parse(JSON.stringify(this.msg));
                EduDownLoad("/TeachingRewards/GetTeaConCommissionStatisticsToExcel", msg, "投稿提成统计.xls")
            },
            goUrlclass(path, Names) {//班级
                let Name = encodeURI(Names)
                this.OpenNewUrl(path, {
                    ClassName: Name,
                });
            },
            goUrlorderList(path, row) {//订单跳转
                this.OpenNewUrl(path, {
                    OrderId: row.OrderId,
                });
            },
            showXQ(ContributeId){//弹出显示详情
                this.ContributeId= ContributeId;
                this.isDetails = true
            }
        },
    }

</script>
<style lang="sass">
    @import url('~assets/css/table.sass')
</style>