<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>
    <div class="col" style="display:flex;margin-top:20px;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+4">
          学生班课时费调账规则
        </th>
      </tr>
      <tr>
        <td style="width:200px;" v-if="dataList.List&&dataList.List.length>0" :rowspan="(dataList.List.length*2)+3">
          平均上课率</td>
        <td :colspan="FullClassRateList.length+3">满班率</td>
      </tr>
      <tr>
        <td colspan="2"></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"
                    @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="取消" size="sm" flat color="grey-10" @click="isShowColEdit=false"
                    style="font-weight:400 !important" />
                  <q-btn label="确认" size="sm" @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 || '请填写最小满班率']" @keyup.native="checkPrice(addBanObj,'StartValue')"
                    maxlength="6" label="最小满班率">
                  </q-input>
                  <q-input filled style="margin-top:10px;" v-model="addBanObj.EndValue" class="col-6 q-pb-lg"
                    :rules="[val => !!val || '请填写最大满班率']" @keyup.native="checkPrice(addBanObj,'EndValue')" maxlength="6"
                    label="最大满班率">
                  </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="确认" size="sm" 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>
      <template v-for="(item,index) in dataList.List">
        <tr>
          <td @click="getDataItem(item,index)" rowspan="2" style="width:150px;">
            <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="确认" size="sm" @click="editShangke()" color="accent q-px-md"
                      style="font-weight:400 !important" />
                  </q-card-actions>
                </div>
              </q-banner>
            </q-popup-proxy>
          </td>
          <td style="width:150px;">奖励课时费</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="确认" size="sm" @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>增加带班人数</td>
          <td v-for="(subItem,subIndex) in item.FullClassList" @click="getPeopleEdit(subItem)">
            {{subItem.PeopelNum}}
            <q-popup-proxy>
              <q-banner v-if="isShowInnerEdit">
                <div style="width:180px;margin-top:20px;">
                  <div class="row">
                    <q-input filled v-model="ComMsg.CommonPeople" class="q-pb-lg" @keyup.native="checkPrice(ComMsg,'CommonPeople')" maxlength="6">
                    </q-input>
                  </div>
                  <q-card-actions align="right" class="bg-white">
                    <q-btn label="确认" size="sm" @click="getPeopleSet(subItem)" color="accent q-px-md"
                      style="font-weight:400 !important" />
                  </q-card-actions>
                </div>
              </q-banner>
            </q-popup-proxy>
          </td>
          <td></td>
        </tr>
      </template>
      <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="取消" size="sm" flat color="grey-10" @click="isShowAddMenu=false"
                      style="font-weight:400 !important" />
                    <q-btn label="确认" size="sm" 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>
        <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>
<script>
  import {
    SetTeachingRewardsInfo,
    GetTeachingRewardsList,
    GetTeachingRewardsBaseInfo,
    SetTeachingRewardsBase
  } from '../../api/reward/index';

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

  export default {
    props: {},
    components: {},
    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: ''
        },
        editObj: {
          StartValue: '',
          EndValue: ''
        },
        CommonIndex: -1,
        isShowrowEdit: false,
        isShowColEdit: false,
        DropDownList: [], //社会班下拉数据
        tempSchool: [], //选中的班级
        isShowInnerEdit: false,
        ComMsg: {
          CommonPeople: '', //公用带班人数
          CommonClassMoney: '', //公用修改值
        },
        setTeachMsg: {
          Id: 0,
          Type: 2,
          BasicMoney: '',
          BasicHour: '',
          ClassTypeIds: ''
        }
      }
    },
    created() {},
    mounted() {
      this.getInfo();
      this.getBaseDropInfo();
      this.GetClassTypePageList();
    },
    methods: {
      getInfo() {
        let msg = {
          Type: 4
        }
        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 = ''
          x.PeopelNum = ''
          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: 4,
          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();
      },

      //修改带班人数
      getPeopleEdit(item) {
        this.isShowInnerEdit = true;
        this.ComMsg.CommonPeople = item.PeopelNum;
      },
      getPeopleSet(subItem) {
        subItem.PeopelNum = this.ComMsg.CommonPeople;
        this.isShowInnerEdit = false;
        this.$forceUpdate();
      }
    },
  }

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

</style>
