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

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

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

</style>
<template>
  <div class="page-body salesRules">
    <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="listData.FirstRate" :min='0' :max='100' @input="getFirsrate" label="首次发放比例"
            type="number" />
        </div>
      </div>
    </div>
    <template>
      <q-table :loading="loading" :pagination="tabeMsg" no-data-label="暂无相关数据" flat class="sticky-column-table"
        separator="horizontal" :data="dataList" :columns="columns" row-key="name">
        <template v-slot:top="props">
          <q-space />
          <div class="page-option">
            <q-btn color="accent" size="sm" v-if='isSalerule_preserve == true'  @click="preservation()" ref="addBtn" label="保存规则" />
          </div>
        </template>
        <template v-slot:body="props">
          <q-tr :props="props">
            <template v-for="col in props.cols">
              <q-td v-if="col.name=='CTypeName'">
                {{col.value}}
              </q-td>

              <q-td v-if="col.name == 'EnrollType'">
                <div v-for="item in col.value">
                  <div class="text-bottom">
                    {{item.EnrollType==1?'初次':'续班'}}
                  </div>
                </div>
              </q-td>
              <q-td v-if="col.name == 'SalesRate'">
                <div v-for="(item,index) in col.value" :key='index'>
                  <div class="border-bottom">

                    <el-input v-model="item.SalesRate" style='width:180px' type="number" :min='1' :max='100'
                      placeholder="请输入内容" @blur='xiaoshou(props.pageIndex,index)' size="small">
                      <template slot="append">%</template>
                    </el-input>
                  </div>
                </div>
              </q-td>
              <q-td v-if="col.name == 'assistant'" style="width: 100px;text-align: center;">
                <div v-for="item in col.value">
                  <div class="text-bottom">
                    {{100-item.SalesRate}}%
                  </div>
                </div>
              </q-td>
              <q-td v-if="col.name == 'TeacherRate'">
                <div v-for="(item,index) in col.value" :key='index'>
                  <div class="border-bottom">
                    <span style="margin-right: 10px;">其中（ 老师：</span>
                    <el-input v-model="item.TeacherRate" style='width:180px' type="number" :min='0' :max='100'
                      placeholder="请输入内容" @blur='teacherinput(props.pageIndex,index)' size="small">
                      <template slot="append">%</template>
                    </el-input>
                  </div>
                </div>
              </q-td>
              <q-td v-if="col.name == 'AssistantRate'">
                <div v-for="(item,index) in col.value" :key='index'>
                  <div class="border-bottom">
                    <span style="margin-right: 10px;">助教：</span>

                    <el-input v-model="item.AssistantRate" style='width:180px' type="number" :min='0' :max='100'
                      placeholder="请输入内容" @blur='assistantinput(props.pageIndex,index)' size="small">
                      <template slot="append">%</template>
                    </el-input>
                    <span style="margin-left: 10px;">）</span>
                  </div>
                </div>
              </q-td>


            </template>
          </q-tr>
        </template>
        <template v-slot:bottom>
          <!-- <q-pagination class="full-width justify-end" v-model="tabeMsg.pageIndex" color="primary" :max="1"
              :input="true" @input="changePage" /> -->
        </template>

      </q-table>
    </template>

  </div>
</template>
<script>
  import {
    GetClassTypePageList,
  } from '../../api/system/index';
  import {
    getSellCommissionRuleList,
    setSellCommissionRule
  } from '../../api/finance/index'
  export default {
    meta: {
      title: "销售提成规则"
    },
    props: {},
    components: {},
    data() {
      return {


        columns: [{
            name: 'CTypeName',
            label: '班级类型',
            field: 'CTypeName',
            align: 'left'
          },
          {
            name: 'EnrollType',
            label: '报名类型',
            align: 'left',
            field: 'EnrollType',
            field: row => row.List
          },
          {
            name: 'SalesRate',
            label: '销售提成比例',
            align: 'left',
            field: 'SalesRate',
            field: row => row.List
          },
          {
            name: 'assistant',
            label: '(老师+助教总提成)',
            align: 'left',
            field: 'assistant',
            field: row => row.List
          },
          {
            name: 'TeacherRate',
            label: '',
            align: 'left',
            field: 'TeacherRate',
            field: row => row.List
          },
          {
            name: 'AssistantRate',
            label: '',
            align: 'left',
            field: 'AssistantRate',
            field: row => row.List
          },


        ],
        loading: false,
        dataList: [], //列表数据

        //列表数据参数
        tabeMsg: {
          pageIndex: 1,
          pageSize: 99
        },
        pageCount: 0,
        persistent: false,
        listData: {},
        isSalerule_preserve:false,
      }
    },
    created() {
      let userinfo = this.getLocalStorage();
        userinfo.ActionMenuList.map(x=>{//判断权限
          if(x.FunctionCode == "Salerule_preserve"){//判断是否有保存的权限
            this.isSalerule_preserve = true;
            return
          }
        })
    },
    mounted() {

      this.getRuleList(); //获取规则
    },
    methods: {



      getRuleList() {
        this.loading = true;
        getSellCommissionRuleList({}).then(res => {
          if (res.Code == 1) {
            this.listData = res.Data
            this.GetClassTypePageList(); //获取班级类型列表数据
          }
        })
      },
      //获取班级类型列表数据
      GetClassTypePageList() {
        GetClassTypePageList(this.tabeMsg).then(res => {
          this.loading = false;
          if (res.Code == 1) {
            this.dataList = res.Data.PageData;
            this.dataList.forEach((x, i) => {
              x.List = []
              this.listData.List.forEach(j => {
                if (x.CTypeId == j.ClassType) {
                  x.List.push(j)
                }
              })
              //如果没有相同的但是 班级类型又有 给予默认的值
              //注 由于 JavaScript 的限制，Vue 不能检测以下变动的数组：这里使用this.$set方法
              if (x.List && x.List.length == 0) {
                let obj = {
                  CTypeName: x.CTypeName,
                  CTypeId: x.CTypeId,
                  List: [{
                      Id: 0,
                      ClassType: x.CTypeId,
                      EnrollType: 2,
                      SalesRate: 1,
                      TeacherRate: 0,
                      AssistantRate: 0
                    },
                    {
                      Id: 0,
                      ClassType: x.CTypeId,
                      EnrollType: 1,
                      SalesRate: 1,
                      TeacherRate: 0,
                      AssistantRate: 0
                    },
                  ]
                }
                this.$set(this.dataList, i, obj)
              }
            })

          }
        })

      },
      xiaoshou(pageIndex, index) {
        let that = this
        if (that.dataList[pageIndex].List[index].SalesRate == '' || that.dataList[pageIndex].List[index].SalesRate <
          0) {
          that.dataList[pageIndex].List[index].SalesRate = 1
        } else if (that.dataList[pageIndex].List[index].SalesRate > 100) {
          that.dataList[pageIndex].List[index].SalesRate = 100
        }
      },
      teacherinput(pageIndex, index) { //老师输入的时候input
        if (this.dataList[pageIndex].List[index].TeacherRate == '') {
          this.dataList[pageIndex].List[index].TeacherRate = 100 - this.dataList[pageIndex].List[index].AssistantRate
        } else if (this.dataList[pageIndex].List[index].TeacherRate > 100 || this.dataList[pageIndex].List[index]
          .TeacherRate < 0) {
          this.dataList[pageIndex].List[index].TeacherRate = 0;
          this.dataList[pageIndex].List[index].AssistantRate = 100;
        } else {
          this.dataList[pageIndex].List[index].AssistantRate = 100 - this.dataList[pageIndex].List[index].TeacherRate
        }
      },
      assistantinput(pageIndex, index) { //助教输入的时候input
        if (this.dataList[pageIndex].List[index].AssistantRate == '') {
          this.dataList[pageIndex].List[index].AssistantRate = 100 - this.dataList[pageIndex].List[index].TeacherRate
        } else if (this.dataList[pageIndex].List[index].AssistantRate > 100 || this.dataList[pageIndex].List[index]
          .AssistantRate < 0) {
          this.dataList[pageIndex].List[index].AssistantRate = 0;
          this.dataList[pageIndex].List[index].TeacherRate = 100;
        } else {
          this.dataList[pageIndex].List[index].TeacherRate = 100 - this.dataList[pageIndex].List[index].AssistantRate
        }
      },
      getFirsrate() {
        if (this.listData.FirstRate > 100) {
          this.listData.FirstRate = 100
        } else if (this.listData.FirstRate < 0) {
          this.listData.FirstRate = 0
        }
      },
      preservation() { //保存规则
        let addMsg = {
          FirstRate: this.listData.FirstRate,
          List: [],
        }
        this.dataList.forEach(x => {
          x.List.forEach(j => {
            addMsg.List.push(j)
          })
        })
        setSellCommissionRule(addMsg).then(res => {
          if (res.Code == 1) {
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: '数据保存成功！',
              position: 'top'
            })
          }
        })
      },
      changePage() {

      }

    },
  }

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

</style>
