<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="30%" style="min-width: 100px;max-width: 100px;">方案名称</th>
         
            <th width="60%">课程类型</th>
         
            <th width="10%">操作</th>
          </tr>
          <tr>
            <td>
              <span>{{ item.PlanName }}</span>
            </td>
            <td style="padding: 0 10px;">
              <span v-for="( son , sIndex ) in item.CourseSubjectList" :key="sIndex">
                  <span v-if="sIndex<4"> {{ son.SubjectName }}{{item.CourseSubjectList.length==sIndex+1?'':'、'}}</span>
              </span>
                <el-popover
                v-if="item.CourseSubjectList.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>
              <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>
      
        <div style="width:100%;overflow-x: auto;">
          <table v-if="item.DetailList.length>0||item.SendType=='1'"
            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.DetailList"
                :key="sIndex"
              >{{ son.StartNum }} <span>{{son.EndNum && son.EndNum!=-1?'<人数<=':'<人数'}}</span><span v-if="son.EndNum && son.EndNum!=-1">{{ son.EndNum }}</span></th>
            </tr>
            <tr style="">
              <td style="min-width: 220px;" v-for="( son , sIndex ) in item.DetailList" :key="sIndex">{{ son.RatioMoney }}%</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>
    <languageCommissionfrom
      v-if="persistent"
      :isAdd="isAdd"
      :loyeeList='loyeeList'
      :CourseList='CourseList'
      :selectData= 'selectData'
      @close="closeForm"
      @success="refreshList"
    ></languageCommissionfrom>

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

    this.GetLanguageRuleList(); //获取规则
    this.getEmployeeList();
    this.getCourseList();//获取课程下拉
   // this.getSchool();//校区下拉
  },
  methods: {
    GetLanguageRuleList() {
      this.loading = true;
      GetLanguageRuleList({}).then(res => {
        if (res.Code == 1) {
          this.dataList = res.Data;
          this.dataList.forEach(j=>{
            if(j.CourseSubjectList.length>=5){//课程
              j.CourseListtext = '';
              j.CourseSubjectList.forEach(x=>{
                j.CourseListtext = j.CourseListtext+x.SubjectName+'、'
              })
            }
          })

        }
        this.loading = false
      })
    },
    //获取员工列表
    getEmployeeList() {
      queryEmployee({
        IsLeave: 0
      }).then(res => {
        this.loyeeList = res.Data;
      })
    },
    //获取课程
    getCourseList() {
      getCourseSubject({
        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) { //保存规则
      setLanguageRule(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.GetLanguageRuleList(); //获取规则

          }

        })
    },
    AddMsg() {//新增
      this.selectData = {}
      this.persistent = true;
      this.isAdd = true;
    },
    EditTask(item){//编辑
      this.persistent = true;
      this.selectData = item
      this.isAdd = false;

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

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

    },


  },
}

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

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