<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="奖金设置" />
      <q-tab :ripple="false" name="second" label="课时费设置" />
    </q-tabs>
    <template v-if="tabCheck=='first'">
      <div style="margin-top:20px;">
        <table class="socialTable">
          <tr>
            <th :colspan="FullClassRateList.length+3" style="width:100px;">社会班教师绩效计算规则（结课发放）</th>
          </tr>
          <tr>
            <td 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">
              <div class="Classdel_Div">{{item.StartValue}}%-{{item.EndValue}}%<i @click="deleCole(index)" class="iconfont icon-shanchu"></i></div>
            </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>
              <div class="div_RowList">
                {{item.StartValue}}<span v-if="item.StartValue">%</span><span
                v-if="item.StartValue&&item.EndValue">-</span>{{item.EndValue}}<span v-if="item.EndValue">%</span>
                <i @click="deletRow(index)" class="iconfont icon-shanchu"></i>
              </div>
            </td>
            <td v-for="(subItem,subIndex) in item.FullClassList">
              {{subItem.ClassMoney}}
              <q-popup-edit v-model.number="subItem.ClassMoney" buttons>
                <q-input v-model="subItem.ClassMoney" @change="getReset()" dense autofocus counter />
              </q-popup-edit>
            </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>

      </div>
    </template>
  </div>
</template>
<script>
  import {
    SetTeachingRewardsInfo,
    GetTeachingRewardsList
  } from '../../api/reward/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:0
        }
      }
    },
    created() {},
    mounted() {
      this.getInfo();
    },
    methods: {
      getInfo() {
        let msg = {
          Type: 1
        }
        GetTeachingRewardsList(msg).then(res => {
          console.log(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 (this.addObj.StartValue == this.addObj.EndValue) {
          this.addObj.EndValue = ''
        }
        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 (this.dataList.List[i].StartValue == this.addObj.StartValue) {
            this.$q.notify({
              type: 'negative',
              position: "top",
              message: `最小上课值已经存在`
            })
            return;
          }
          if (this.dataList.List[i].EndValue == this.addObj.EndValue) {
            this.$q.notify({
              type: 'negative',
              position: "top",
              message: `最大上课值已经存在`
            })
            return;
          }
        }
        this.FullClassRateList.forEach(x => {
          x.ClassMoney = ''
          this.addObj.FullClassList.push(x);
        })
        this.dataList.List.push(this.addObj);
        this.isShowAddMenu = false;
      },
      //添加列
      addColList() {
          console.log('来了老弟');
        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 (this.addBanObj.StartValue == this.addBanObj.EndValue) {
          this.addBanObj.EndValue = ''
        }
        if (parseInt(this.addBanObj.StartValue) > parseInt(this.addBanObj.EndValue)) {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `最小满班率不能大于最大满班率`
          })
          return;
        }
        let isExist=false;
        this.dataList.List.forEach(x=>{
          x.FullClassList.forEach(y=>{
            console.log(this.addBanObj.StartValue,'---',y.StartValue);
            console.log(this.addBanObj.EndValue,'---',y.EndValue);
            console.log(parseInt(this.addBanObj.StartValue)>y.StartValue);
            console.log(parseInt(this.addBanObj.EndValue)<y.EndValue);
            if((parseInt(this.addBanObj.StartValue)>y.StartValue)&&(parseInt(this.addBanObj.EndValue)<y.EndValue)){
              this.$q.notify({
                type: 'negative',
                position: "top",
                message: `已经存在交集`
              })
              isExist=true
            }else{
              isExist=false;
            }
          })
          if(!isExist){
            x.FullClassList.push(JSON.parse(JSON.stringify(this.addBanObj)));
          }
        })
        if(!isExist){
          this.FullClassRateList.push(JSON.parse(JSON.stringify(this.addBanObj)));
        }
        this.isShowBanMenu=false;
      },
      //删除列
      deleCole(index){
        this.FullClassRateList.splice(index,1);
        this.dataList.List.forEach(x=>{
          x.FullClassList.splice(index,1);
        })
        console.log(this.dataList,'dataList111');
      },
      //删除行
      deletRow(index){
        this.dataList.List.splice(index,1);
      },
      getReset(){
        console.log('进入')
        this.$forceUpdate();
      },
      //保存奖金设置
      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();
          }
        })
      }
    },
  }

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

</style>
