<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;justify-content: space-between">
          <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" @keyup.native="checkPrice(editObj,'StartValue')"
                        maxlength="6" class="col-5 q-pb-lg">
                      </q-input>
                      <div style="margin:20px 12px 0">-</div>
                      <q-input filled v-model="editObj.EndValue" @keyup.native="checkPrice(editObj,'EndValue')"
                        maxlength="6" class="col-5 q-pb-lg">
                      </q-input>
                    </div>
                    <q-card-actions align="right" class="bg-white">
                      <q-btn label="取消" size="sm" flat color="grey-10"  @click="isShowColEdit=false"
                        style="font-weight:400 !important" />
                      <q-btn label="确认" @click="editManBan()" size="sm" 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" maxlength="6"
                        :rules="[val => !!val || '请填写最小满班率']" label="最小满班率"
                        @keyup.native="checkPrice(addBanObj,'StartValue')">
                      </q-input>
                      <q-input filled style="margin-top:10px;" v-model="addBanObj.EndValue" class="col-6 q-pb-lg"
                        :rules="[val => !!val || '请填写最大满班率']" label="最大满班率"
                        @keyup.native="checkPrice(addBanObj,'EndValue')" maxlength="6">
                      </q-input>
                      <q-card-actions align="right" class="bg-white">
                        <q-btn label="取消" size="sm" flat color="grey-10" @click="isShowBanMenu=false"
                          style="font-weight:400 !important" />
                        <q-btn label="确认" color="accent q-px-md" size="sm" 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"
                        @keyup.native="checkPrice(editObj,'StartValue')" maxlength="6">
                      </q-input>
                      <div style="margin:20px 12px 0">-</div>
                      <q-input filled v-model="editObj.EndValue" class="col-5 q-pb-lg"
                        @keyup.native="checkPrice(editObj,'EndValue')" maxlength="6">
                      </q-input>
                    </div>
                    <q-card-actions align="right" class="bg-white">
                      <q-btn label="确认" @click="editShangke()" size="sm" 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="ComMsg.CommonClassMoney"
                        @keyup.native="checkPrice(ComMsg,'CommonClassMoney')" maxlength="6" class="q-pb-lg">
                      </q-input>
                    </div>
                    <q-card-actions align="right" class="bg-white">
                      <q-btn label="确认" @click="getReset(subItem)" size="sm" 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 || '请填写最小上课率']" @keyup.native="checkPrice(addObj,'StartValue')"
                        maxlength="6" label="最小上课率">
                      </q-input>
                      <q-input filled style="margin-top:10px;" v-model="addObj.EndValue" class="col-6 q-pb-lg"
                        :rules="[val => !!val || '请填写最大上课率']" @keyup.native="checkPrice(addObj,'EndValue')"
                        maxlength="6" label="最大上课率">
                      </q-input>
                      <q-card-actions align="right" class="bg-white">
                        <q-btn label="取消" flat color="grey-10" size="sm" @click="isShowAddMenu=false"
                          style="font-weight:400 !important" />
                        <q-btn label="确认" color="accent q-px-md" size="sm" 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="sm" icon="add" @click="saveBonus()"  ref="addBtn" label="保存" />
        </div>
      </div>
    </template>
    <template v-if="tabCheck=='second'">
      <div>
        <classFee></classFee>
      </div>
    </template>
  </div>
</template>

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

  import classFee from '../../components/course/classFee'

  export default {
    meta: {
      title: "社会班设置"
    },
    props: {},
    components: {
      classFee
    },
    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,
        ComMsg: {
          CommonClassMoney: '', //公用修改值
        },
        setTeachMsg: {
          Id: 0,
          Type: 1,
          BasicMoney: '',
          BasicHour: '',
          ClassTypeIds: ''
        }
      }
    },
    created() {},
    mounted() {
      this.getInfo();
      this.getBaseDropInfo();
      this.GetClassTypePageList();
    },
    methods: {
      getInfo() {
        let msg = {
          Type: 1
        }
        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.isShowBanMenu = false;
        this.FullClassRateList.sort(this.compare("StartValue", true));
        this.dataList.List.forEach(x => {
          x.FullClassList.sort(this.compare('StartValue', true))
        })
      },
      //删除列
      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);
      },
      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: 1
        }
        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: 1,
          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.ComMsg.CommonClassMoney = item.ClassMoney;
      },
      getReset(subItem) {
        subItem.ClassMoney = this.ComMsg.CommonClassMoney;
        this.isShowInnerEdit = false;
        this.$forceUpdate();
      },
    }
  }

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

</style>
