<style>
.socialTable {
    width: 100%;
    border-collapse: collapse;
}

.socialTable tr th {
    background: #fff;
    height: 40px;
    font-size: 14px;
    color: #333;
    border: 1px solid #E6E6E6
}

.socialTable tr {
    background: #fff;
    text-align: center;
    height: 40px;
}

.socialTable tr td {
    font-size: 12px;
    border: 1px solid #E5E5E5;
}

.Classdel_Div i,
.div_RowList i {
    display: inline-block;
    color: red;
    visibility: hidden;
    cursor: pointer;
    margin-left: 3px;
}

.Classdel_Div:hover i {
    visibility: visible;
}

.div_RowList:hover i {
    visibility: visible;
}
</style>
<template>
<div class="page-body">
    <q-tabs v-model="tabCheck" narrow-indicator dense align="left" class="text-primary">
        <q-tab :ripple="false" name="first" label="奖金设置" @click="getBaseDropInfo" />
        <q-tab :ripple="false" name="second" label="课时费设置" />
    </q-tabs>
    <template v-if="tabCheck=='first'">
        <div style="margin-top:20px;">
            <div class="col" style="display:flex;">
                <div>
                    <q-select class="q-pb-lg q-pr-lg" style="width:450px;" multiple clearable filled stack-label use-input use-chips option-value="CTypeId" option-label="CTypeName" v-model="tempSchool" ref="PostId" :options="DropDownList" label="班级类型" :dense="false" emit-value map-options>
                    </q-select>
                </div>
                <div style="margin-top:15px;">
                    <q-btn color="accent" size="sm" @click="saveClass()" ref="addBtn" label="保存" />
                </div>
            </div>

            <table class="socialTable">
                <tr>
                    <th :colspan="FullClassRateList.length+3">
                        学生班教师绩效计算规则
                    </th>
                </tr>
                <tr>
                    <td style="width:200px;" v-if="dataList.List&&dataList.List.length>0" :rowspan="dataList.List.length+3">续班率</td>
                    <td :colspan="FullClassRateList.length+2">满班率</td>
                </tr>
                <tr>
                    <td></td>
                    <td v-for="(item,index) in FullClassRateList" @click="getColEdit(item,index)">
                        <div class="Classdel_Div">{{item.StartValue}}%
                            <template v-if="item.StartValue!=item.EndValue">-{{item.EndValue}}%</template>
                            <i @click.stop="deleCole(index)" class="iconfont icon-shanchu"></i>
                        </div>
                        <q-popup-proxy>
                            <q-banner v-if="isShowColEdit">
                                <div style="width:200px;margin-top:20px;">
                                    <div class="row">
                                        <q-input filled v-model="editObj.StartValue" class="col-5 q-pb-lg" mask="date">
                                        </q-input>
                                        <div style="margin:20px 12px 0">-</div>
                                        <q-input filled v-model="editObj.EndValue" class="col-5 q-pb-lg" mask="date">
                                        </q-input>
                                    </div>
                                    <q-card-actions align="right" class="bg-white">
                                        <q-btn label="取消" flat color="grey-10" @click="isShowColEdit=false" style="font-weight:400 !important" />
                                        <q-btn label="确认" @click="editManBan()" color="accent q-px-md" style="font-weight:400 !important" />
                                    </q-card-actions>
                                </div>
                            </q-banner>
                        </q-popup-proxy>
                    </td>
                    <td>
                        <q-btn round size="sm" color="primary" @click="addBanInit()" icon="iconfont icon-img_haha">
                            <q-popup-proxy>
                                <q-banner v-if="isShowBanMenu">
                                    <div style="width:250px;">
                                        <div style="margin:10px 0 15px 0;">新增满班率</div>
                                        <q-input filled v-model="addBanObj.StartValue" class="col-6 q-pb-lg" :rules="[val => !!val || '请填写最小满班率']" mask="date" label="最小满班率">
                                        </q-input>
                                        <q-input filled style="margin-top:10px;" v-model="addBanObj.EndValue" class="col-6 q-pb-lg" :rules="[val => !!val || '请填写最大满班率']" mask="date" label="最大满班率">
                                        </q-input>
                                        <q-card-actions align="right" class="bg-white">
                                            <q-btn label="取消" flat color="grey-10" @click="isShowBanMenu=false" style="font-weight:400 !important" />
                                            <q-btn label="确认" color="accent q-px-md" style="font-weight:400 !important" @click="addColList()" />
                                        </q-card-actions>
                                    </div>
                                </q-banner>
                            </q-popup-proxy>
                        </q-btn>
                    </td>
                </tr>
                <tr v-for="(item,index) in dataList.List">
                    <td @click="getDataItem(item,index)" style="width:200px;">
                        <div class="div_RowList">
                            {{item.StartValue}}<span v-if="item.StartValue>=0">%</span>
                            <template v-if="item.StartValue!=item.EndValue">
                                <span v-if="item.StartValue>=0&&item.EndValue>=0">-</span>{{item.EndValue}}<span v-if="item.EndValue>=0">%</span>
                            </template>
                            <i @click.stop="deletRow(index)" class="iconfont icon-shanchu"></i>
                        </div>
                        <q-popup-proxy>
                            <q-banner v-if="isShowrowEdit">
                                <div style="width:200px;margin-top:20px;">
                                    <div class="row">
                                        <q-input filled v-model="editObj.StartValue" class="col-5 q-pb-lg" mask="date">
                                        </q-input>
                                        <div style="margin:20px 12px 0">-</div>
                                        <q-input filled v-model="editObj.EndValue" class="col-5 q-pb-lg" mask="date">
                                        </q-input>
                                    </div>
                                    <q-card-actions align="right" class="bg-white">
                                        <q-btn label="确认" @click="editShangke()" color="accent q-px-md" style="font-weight:400 !important" />
                                    </q-card-actions>
                                </div>
                            </q-banner>
                        </q-popup-proxy>
                    </td>
                    <td v-for="(subItem,subIndex) in item.FullClassList" @click="getInnerEdit(subItem)">
                        {{subItem.ClassMoney}}
                        <q-popup-proxy>
                            <q-banner v-if="isShowInnerEdit">
                                <div style="width:180px;margin-top:20px;">
                                    <div class="row">
                                        <q-input filled v-model="CommonClassMoney" class="q-pb-lg" mask="date">
                                        </q-input>
                                    </div>
                                    <q-card-actions align="right" class="bg-white">
                                        <q-btn label="确认" @click="getReset(subItem)" color="accent q-px-md" style="font-weight:400 !important" />
                                    </q-card-actions>
                                </div>
                            </q-banner>
                        </q-popup-proxy>
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td>
                        <q-btn round size="sm" color="primary" @click="addInit()" icon="iconfont icon-img_haha">
                            <q-popup-proxy>
                                <q-banner v-if="isShowAddMenu">
                                    <div style="width:250px;">
                                        <div style="margin:10px 0 15px 0;">新增续班率</div>
                                        <q-input filled v-model="addObj.StartValue" class="col-6 q-pb-lg" :rules="[val => !!val || '请填写最小续班率']" mask="date" label="最小续班率">
                                        </q-input>
                                        <q-input filled style="margin-top:10px;" v-model="addObj.EndValue" class="col-6 q-pb-lg" :rules="[val => !!val || '请填写最大续班率']" mask="date" label="最大续班率">
                                        </q-input>
                                        <q-card-actions align="right" class="bg-white">
                                            <q-btn label="取消" flat color="grey-10" @click="isShowAddMenu=false" style="font-weight:400 !important" />
                                            <q-btn label="确认" color="accent q-px-md" style="font-weight:400 !important" @click="addRowList()" />
                                        </q-card-actions>
                                    </div>
                                </q-banner>
                            </q-popup-proxy>
                        </q-btn>
                    </td>
                    <td v-for="(item,index) in FullClassRateList"></td>
                    <td></td>
                </tr>
            </table>
            <div style="margin-top:20px;text-align:right;">
                <q-btn color="accent" size="md" icon="add" @click="saveBonus()" ref="addBtn" label="保存" />
            </div>
        </div>
    </template>
    <template v-if="tabCheck=='second'">
        <div>
            <studentFee></studentFee>
        </div>
    </template>
</div>
</template>

<script>
import {
    SetTeachingRewardsInfo,
    GetTeachingRewardsList,
    GetTeachingRewardsBaseInfo,
    SetTeachingRewardsBase
} from '../../api/reward/index';

import {
    GetClassTypePageList
} from '../../api/system/index';

import studentFee from '../../components/course/studentFee'

export default {
    props: {},
    components: {
        studentFee
    },
    data() {
        return {
            tabCheck: 'first', //默认选第一个
            dense: false,
            msg: {

            },
            FullClassRateList: [], //头部列数据
            dataList: [], //列表数据
            isShowAddMenu: false, //显示新增上课率弹出
            isShowBanMenu: false, //显示新增满班率
            addObj: { //新增上课率
                Id: 0,
                StartValue: '',
                EndValue: '',
                FullClassList: []
            },
            addBanObj: {
                Id: 0,
                StartValue: '',
                EndValue: '',
                ClassMoney: "",
                PeopelNum: 0
            },
            editObj: {
                StartValue: '',
                EndValue: ''
            },
            CommonIndex: -1,
            isShowrowEdit: false,
            isShowColEdit: false,

            DropDownList: [], //社会班下拉数据
            tempSchool: [], //选中的班级
            isShowInnerEdit: false,
            CommonClassMoney: '',

            setTeachMsg: {
                Id: 0,
                Type: 2,
                BasicMoney: '',
                BasicHour: '',
                ClassTypeIds: ''
            }
        }
    },
    created() {},
    mounted() {
        this.getInfo();
        this.getBaseDropInfo();
        this.GetClassTypePageList();
    },
    methods: {
        getInfo() {
            let msg = {
                Type: 3
            }
            GetTeachingRewardsList(msg).then(res => {
                if (res.Code == 1) {
                    this.dataList = res.Data;
                    if (this.dataList.FullClassRateList.length > 0) {
                        this.FullClassRateList = this.dataList.FullClassRateList;
                    }
                }
            })
        },
        //点击添加按钮
        addInit() {
            this.isShowAddMenu = true;
            this.addObj.StartValue = '';
            this.addObj.EndValue = '';
        },
        //添加满班率
        addBanInit() {
            this.isShowBanMenu = true;
            this.addBanObj.StartValue = '';
            this.addBanObj.EndValue = '';
        },
        //添加行
        addRowList() {
            if (this.addObj.StartValue == '') {
                this.$q.notify({
                    type: 'negative',
                    position: "top",
                    message: `请填写最小续班率`
                })
                return;
            }
            if (this.addObj.EndValue == '') {
                this.$q.notify({
                    type: 'negative',
                    position: "top",
                    message: `请填写最大续班率`
                })
                return;
            }
            if (parseInt(this.addObj.StartValue) > parseInt(this.addObj.EndValue)) {
                this.$q.notify({
                    type: 'negative',
                    position: "top",
                    message: `最小续班率不能大于最大续班率`
                })
                return;
            }

            for (var i = 0; i < this.dataList.List.length; i++) {
                if (((parseInt(this.addObj.StartValue) >= this.dataList.List[i].StartValue) && (parseInt(this.addObj
                        .StartValue) <= this.dataList.List[i].EndValue)) ||
                    ((parseInt(this.addObj.EndValue) >= this.dataList.List[i].StartValue) && (parseInt(this.addObj.EndValue) <=
                        this.dataList.List[i].EndValue))) {
                    this.$q.notify({
                        type: 'negative',
                        position: "top",
                        message: `已存在交集`
                    })
                    return;
                }
            }
            this.addObj.FullClassList = [];
            this.FullClassRateList.forEach(x => {
                x.ClassMoney = ''
                this.addObj.FullClassList.push(x);
            })
            this.dataList.List.push(JSON.parse(JSON.stringify(this.addObj)));
            this.dataList.List.sort(this.compare("StartValue", true));
            this.isShowAddMenu = false;
        },
        compare(property, desc) {
            return function (a, b) {
                var value1 = a[property];
                var value2 = b[property];
                if (desc == true) {
                    // 升序排列
                    return value1 - value2;
                } else {
                    // 降序排列
                    return value2 - value1;
                }
            }
        },
        //添加列
        addColList() {
            if (this.addBanObj.StartValue == '') {
                this.$q.notify({
                    type: 'negative',
                    position: "top",
                    message: `请填写最小满班率`
                })
                return;
            }
            if (this.addBanObj.EndValue == '') {
                this.$q.notify({
                    type: 'negative',
                    position: "top",
                    message: `请填写最大满班率`
                })
                return;
            }
            if (parseInt(this.addBanObj.StartValue) > parseInt(this.addBanObj.EndValue)) {
                this.$q.notify({
                    type: 'negative',
                    position: "top",
                    message: `最小满班率不能大于最大满班率`
                })
                return;
            }

            for (var i = 0; i < this.FullClassRateList.length; i++) {
                if (((parseInt(this.addBanObj.StartValue) >= this.FullClassRateList[i].StartValue) && (parseInt(this.addBanObj
                        .StartValue) <= this.FullClassRateList[i].EndValue)) ||
                    ((parseInt(this.addBanObj.EndValue) >= this.FullClassRateList[i].StartValue) && (parseInt(this.addBanObj
                        .EndValue) <= this.FullClassRateList[i].EndValue))) {
                    this.$q.notify({
                        type: 'negative',
                        position: "top",
                        message: `已经存在交集`
                    })
                    return;
                }
            }
            this.FullClassRateList.push(JSON.parse(JSON.stringify(this.addBanObj)));
            this.dataList.List.forEach(x => {
                x.FullClassList.push(JSON.parse(JSON.stringify(this.addBanObj)));
            })

            this.FullClassRateList.sort(this.compare("StartValue", true));
            this.dataList.List.forEach(x => {
                x.FullClassList.sort(this.compare('StartValue', true))
            })
            this.isShowBanMenu = false;
        },
        //删除列
        deleCole(index) {
            this.FullClassRateList.splice(index, 1);
            this.dataList.List.forEach(x => {
                x.FullClassList.splice(index, 1);
            })
        },
        //删除行
        deletRow(index) {
            this.dataList.List.splice(index, 1);
        },
        getReset() {
            this.$forceUpdate();
        },
        getDataItem(item, index) {
            this.isShowrowEdit = true;
            this.CommonIndex = index;
            this.editObj.StartValue = item.StartValue;
            this.editObj.EndValue = item.EndValue;
        },
        //修改上课率和满班率
        editShangke() {
            if (this.editObj.StartValue == '') {
                this.$q.notify({
                    type: 'negative',
                    position: "top",
                    message: `请填写最小上课率`
                })
                return;
            }
            if (this.editObj.EndValue == '') {
                this.$q.notify({
                    type: 'negative',
                    position: "top",
                    message: `请填写最大上课率`
                })
                return;
            }
            if (parseInt(this.editObj.StartValue) > parseInt(this.editObj.EndValue)) {
                this.$q.notify({
                    type: 'negative',
                    position: "top",
                    message: `最小满班率不能大于最大满班率`
                })
                return;
            }
            let NewArr = JSON.parse(JSON.stringify(this.dataList.List));
            NewArr.splice(this.CommonIndex, 1);
            for (var i = 0; i < NewArr.length; i++) {
                if (((parseInt(this.editObj.StartValue) >= NewArr[i].StartValue) && (parseInt(this.editObj
                        .StartValue) <= NewArr[i].EndValue)) ||
                    ((parseInt(this.editObj.EndValue) >= NewArr[i].StartValue) && (parseInt(this.editObj
                        .EndValue) <= NewArr[i].EndValue))) {
                    this.$q.notify({
                        type: 'negative',
                        position: "top",
                        message: `已经存在交集`
                    })
                    return;
                }
            }
            this.dataList.List[this.CommonIndex].StartValue = this.editObj.StartValue;
            this.dataList.List[this.CommonIndex].EndValue = this.editObj.EndValue;
            this.isShowrowEdit = false;
        },
        //修改满班率
        getColEdit(item, index) {
            this.isShowColEdit = true;
            this.CommonIndex = index;
            this.editObj.StartValue = item.StartValue;
            this.editObj.EndValue = item.EndValue;
        },
        //保存修改满班率
        editManBan() {
            if (this.editObj.StartValue == '') {
                this.$q.notify({
                    type: 'negative',
                    position: "top",
                    message: `请填写最小满班率`
                })
                return;
            }
            if (this.editObj.EndValue == '') {
                this.$q.notify({
                    type: 'negative',
                    position: "top",
                    message: `请填写最大满班率`
                })
                return;
            }
            if (parseInt(this.editObj.StartValue) > parseInt(this.editObj.EndValue)) {
                this.$q.notify({
                    type: 'negative',
                    position: "top",
                    message: `最小满班率不能大于最大满班率`
                })
                return;
            }
            let NewArr = JSON.parse(JSON.stringify(this.FullClassRateList));
            NewArr.splice(this.CommonIndex, 1);
            for (var i = 0; i < NewArr.length; i++) {
                if (((parseInt(this.editObj.StartValue) >= NewArr[i].StartValue) && (parseInt(this.editObj
                        .StartValue) <= NewArr[i].EndValue)) ||
                    ((parseInt(this.editObj.EndValue) >= NewArr[i].StartValue) && (parseInt(this.editObj
                        .EndValue) <= NewArr[i].EndValue))) {
                    this.$q.notify({
                        type: 'negative',
                        position: "top",
                        message: `已经存在交集`
                    })
                    return;
                }
            }
            this.FullClassRateList[this.CommonIndex].StartValue = this.editObj.StartValue;
            this.FullClassRateList[this.CommonIndex].EndValue = this.editObj.EndValue;
            this.isShowColEdit = false;
            this.dataList.List.forEach(x => {
                x.FullClassList.forEach((y, index) => {
                    if (index == this.CommonIndex) {
                        y.StartValue = parseInt(this.editObj.StartValue);
                        y.EndValue = parseInt(this.editObj.EndValue)
                    }
                })
            })
        },
        //获取设置数据
        getBaseDropInfo() {
            let msg = {
                Type: 2
            }
            GetTeachingRewardsBaseInfo(msg).then(res => {
                if (res.Code == 1) {
                    this.setTeachMsg.Id = res.Data.Id;
                    this.setTeachMsg.BasicMoney = res.Data.BasicMoney;
                    this.setTeachMsg.BasicHour = res.Data.BasicHour;
                    if (res.Data.ClassTypeIdList) {
                        this.tempSchool = res.Data.ClassTypeIdList;
                    }
                }
            })
        },

        //获取班级类型列表数据
        GetClassTypePageList() {
            let msg = {
                pageIndex: 1,
                pageSize: 999
            };
            GetClassTypePageList(msg).then(res => {
                if (res.Code == 1) {
                    this.DropDownList = res.Data.PageData;
                }
            })
        },
        //保存上部
        saveClass() {
            if (this.tempSchool) {
                this.setTeachMsg.ClassTypeIds = this.tempSchool.toString();
            } else {
                this.setTeachMsg.ClassTypeIds = '';
            }
            SetTeachingRewardsBase(this.setTeachMsg).then(res => {
                if (res.Code == 1) {
                    this.$q.notify({
                        type: 'iconfont icon-chenggong',
                        color: 'accent',
                        position: "top",
                        message: `保存成功`
                    })
                }
            })
        },

        //保存奖金设置
        saveBonus() {
            let msg = {
                Type: 3,
                List: this.dataList.List
            }
            SetTeachingRewardsInfo(msg).then(res => {
                if (res.Code == 1) {
                    this.$q.notify({
                        type: 'iconfont icon-chenggong',
                        color: 'accent',
                        position: "top",
                        message: `保存成功`
                    })
                    this.getInfo();
                }
            })
        },
        //修改表格横向内容
        getInnerEdit(item) {
            this.isShowInnerEdit = true;
            this.CommonClassMoney = item.ClassMoney;
        },
        getReset(subItem) {
            subItem.ClassMoney = this.CommonClassMoney;
            this.isShowInnerEdit = false;
            this.$forceUpdate();
        }
    },
}
</script>
<style lang="sass">
  @import url('~assets/css/table.sass');

</style>
