<style>
@import "../css/cssReset.css";
.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;
}

.marketRules .border-bottom {
  padding-bottom: 5px;
  margin-bottom: 5px;
}

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

.marketRules .singeRowTable tr th {
  border: 1px solid #d2d2d2;
}
.cycle_Title {
    font-size: 20px;
    font-weight: 500;
    color: #1f2329;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
}
</style>
<template>
  <div class="page-body marketRules">
    <div class="page-search row items-center">
      <div class="col row wrap q-mr-lg q-col-gutter-md"></div>
    </div>
    <template>
      <div class="cycle_Title">
        业绩提成规则
        <q-btn color="accent" size="sm" icon="add" label="新增规则" @click="AddMsg()" />
      </div>
      <div
        class="cm_content"
        style="width: 100%;margin-bottom: 35px;margin-top: 10px;"
        v-for=" ( item , index ) in dataList "
        :key="index"
      >
        <table
          class="po_content singeRowTable"
          style="border:1px solid #E6E6E6;"
          cellspacing="0"
          cellpadding="0"
          v-loading="loading"
        >
          <tr>
            <th width="100" style="min-width: 100px;max-width: 100px;">方案名称</th>
            <th width="5%">类型</th>
            <th width="15%">校区</th>
            <th width="5%">课程类型</th>
            <th width="">课程</th>
            <th width="7%">首次发放比例</th>
            <th width="5%">课程比例</th>
            <th width="10%">提成人员</th>
            <th width="10%">部门人员</th>
            <th width="10%">操作</th>
          </tr>
          <tr>
            <td>
              <span>{{ item.Name }}</span>
            </td>
            <td>
              <span v-if="item.Type == 1">市场</span>
              <span v-if="item.Type == 2">顾问</span>
              <span v-if="item.Type == 3">教师</span>
            </td>
            <td>
              <span>{{ item.SchoolName }}</span>
            </td>
            <td>
              <span v-if="item.CourseType == 1">包含</span>
              <span v-if="item.CourseType == 2">不包含</span>
            </td>
            <td style="padding: 0 10px;">
              <span v-for="( son , sIndex ) in item.CourseList">
                  <span v-if="sIndex<4"> {{ son.CourseName }}{{item.CourseList.length==sIndex+1?'':'、'}}</span>
              </span>
                <el-popover
                v-if="item.CourseList.length>=5"
                placement="top-start"
                title="课程"
                width="400"
                trigger="click"
                :content="item.CourseListtext">
                <el-button slot="reference" style="border: none;" type="text">查看更多</el-button>
              </el-popover>
            </td>
            <td>
              <span >{{ item.FirstRate + '%' }}</span>
            </td>
            <td>
              <span >{{ item.CourseRate + '%' }}</span>
            </td>
            <td style="padding: 0 10px;">
              <span v-for="( son , sIndex ) in item.EmpList">
                <span v-if="sIndex<8">{{ son.EmployeeName }}{{item.EmpList.length==sIndex+1?'':'、'}}</span>
              </span>
              <el-popover
                v-if="item.EmpList.length>=9"
                placement="top-start"
                title="提成人员"
                width="400"
                trigger="click"
                :content="item.EmpListtext">
                <el-button slot="reference" style="border: none;" type="text">查看更多</el-button>
              </el-popover>
            </td>
            <td style="padding: 0 10px;">
              <span v-for="( son , sIndex ) in item.ChildEmpList">
                <span v-if="sIndex<8">{{ son.EmployeeName }}{{item.ChildEmpList.length==sIndex+1?'':'、'}}</span>
              </span>
              <el-popover
                v-if="item.ChildEmpList.length>=9"
                placement="top-start"
                title="部门人员"
                width="400"
                trigger="click"
                :content="item.ChildEmpListtext">
                <el-button slot="reference" style="border: none;" type="text">查看更多</el-button>
              </el-popover>
            </td>
            <td>
              <q-btn
                flat
                size="xs"
                icon="edit"
                color="accent"
                style="font-weight:400"
                label="编辑"
                @click="EditTask(item)"
              />
              <q-btn
                flat
                size="xs"
                icon="delete"
                color="negative"
                style="font-weight:400"
                label="删除"
                @click="RemoveTask(item.Id)"
              />
            </td>
          </tr>
        </table>
        <!-- <table
            class="po_content singeRowTable"
            style="border:1px solid #E6E6E6;"
            cellspacing="0"
            cellpadding="0"
          >
            <tr>
              <th >业绩比例</th>
            </tr>
          </table> -->
        <div style="width:100%;overflow-x: auto;">
          <table
            class="po_content singeRowTable"
            style="border:1px solid #E6E6E6;"
            cellspacing="0"
            cellpadding="0"
          >
           
            <tr>
              <td rowspan="2" width="100" style="min-width: 100px;">提成比例</td>
              <th style="min-width: 220px;"
                v-for="( son , sIndex ) in item.RateList"
                :key="sIndex"
              >{{ son.StartValue }} <span>{{son.EndValue && son.EndValue!=-1?'<业绩<=':'<业绩'}}</span><span v-if="son.EndValue && son.EndValue!=-1">{{ son.EndValue }}</span></th>
            </tr>
            <tr style="">
              <td style="min-width: 220px;" v-for="( son , sIndex ) in item.RateList" :key="sIndex">{{ son.Rate }}%</td>
       
            </tr>
          </table>
        </div>
        
      </div>
      <div
        v-if="dataList.length == 0"
        style="width: 100%;border:1px solid #E6E6E6;display: flex;align-items: center;justify-content: center;height: 60px;"
      >暂无数据</div>
     
    </template>
    <marketCommissionfrom
      v-if="persistent"
      :isAdd="isAdd"
      :loyeeList='loyeeList'
      :CourseList='CourseList'
      :SchoolList='SchoolList'
      :selectData= 'selectData'
      @close="closeForm"
      @success="refreshList"
    ></marketCommissionfrom>

  </div>
</template>
<script>
import {
  queryEmployee
} from '../../../api/users/user'
import {
  queryCourseDropdownList,
} from '../../../api/course/index'
import {
  getSellAchievementsRuleList,
  setSellAchievementsRule,
  delSellAchievementsRule
} from '../../../api/finance/index'
  import {
    getSchoolDropdown,
  } from '../../../api/school/index'
import marketCommissionfrom from "../../../components/finance/marketCommissionfrom";
export default {
  meta: {
    title: "销售提成规则"
  },
  components: {
    marketCommissionfrom
  },
  props: {},
  data() {
    return {
      persistent: false,
      loading: false,
      dataList: [], //列表数据
      isSalerule_preserve: false,
      isAdd: false,
      loyeeList: [],//人员列表
      CourseList:[],//课程列表
      SchoolList:[],//校区下拉
      selectData:{},
    }
  },
  created() {
    let userinfo = this.getLocalStorage();
    userinfo.ActionMenuList.map(x => {//判断权限
      if (x.FunctionCode == "Salerule_preserve") {//判断是否有保存的权限
        this.isSalerule_preserve = true;
        return
      }
    })
  },
  mounted() {

    this.getSellAchievementsRuleList(); //获取规则
    this.getEmployeeList();
    this.getCourseList();//获取课程下拉
    this.getSchool();//校区下拉
  },
  methods: {



    getSellAchievementsRuleList() {
      this.loading = true;
      getSellAchievementsRuleList({}).then(res => {
        if (res.Code == 1) {
          this.dataList = res.Data;
          this.dataList.forEach(j=>{
            if(j.ChildEmpList.length>=9){//人员
              j.ChildEmpListtext = '';
              j.ChildEmpList.forEach(x=>{
                j.ChildEmpListtext = j.ChildEmpListtext+x.EmployeeName+'、'
              })
            }

            if(j.EmpList.length>=9){//部门人员
              j.EmpListtext = '';
              j.EmpList.forEach(x=>{
                j.EmpListtext = j.EmpListtext+x.EmployeeName+'、'
              })
            }

            if(j.CourseList.length>=5){//课程
              j.CourseListtext = '';
              j.CourseList.forEach(x=>{
                j.CourseListtext = j.CourseListtext+x.CourseName+'、'
              })
            }
          })
          
        }
        this.loading = false
      })
    },
    //获取员工列表
    getEmployeeList() {
      queryEmployee({
        IsLeave: 1
      }).then(res => {
        this.loyeeList = res.Data;
      })
    },
    //获取课程
    getCourseList() {
      queryCourseDropdownList({
        IsQPrice: 1
      }).then(res => {
        if (res.Code == 1) {
          this.CourseList = res.Data;
        }
      })
    },
    getSchool() {
      getSchoolDropdown({}).then(res => {
        if (res.Code == 1) {
          this.SchoolList = res.Data;
         
        }
      })
    },



    refreshList(data) { //保存规则
        setSellAchievementsRule(data).then(res => {
            if (res.Code == 1) {
              this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: res.Message,
              position: 'top'
            })
            this.persistent = false;
            this.getSellAchievementsRuleList(); //获取规则

          }

        })
    },
    AddMsg() {//新增
      this.selectData = {}
      this.persistent = true;
      this.isAdd = true;
    },
    EditTask(item){//编辑
      this.persistent = true;
      this.selectData = item
      this.isAdd = false;
      
    },
    RemoveTask(Id){//删除
      let delMsg = {
          RuleId: Id
        };
        this.$q.dialog({
          title: '提示信息',
          message: '是否确定删除？',
          cancel: true,
          persistent: true,
          ok: "确定",
          cancel: "取消",
        }).onOk(() => {
          delSellAchievementsRule(delMsg).then(res => {
            if (res.Code == 1) {
              this.$q.notify({
                icon: 'iconfont icon-chenggong',
                color: 'accent',
                timeout: 2000,
                message: '删除成功！',
                position: 'top'
              })
              this.getSellAchievementsRuleList();
            }
          })
        }).onCancel(() => {

        });
    },
    closeForm() {
      this.persistent = false;

    },


  },
}

</script>
<style lang="sass">

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