<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;
}
</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>市场顾问提成规则</div>
      <div
        class="cm_content"
        style="width: 100%;"
        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>方案名称</th>
            <th>类型</th>
            <th>课程类型</th>
            <th>课程</th>
            <th>提成方式</th>
            <th>提成人员</th>
            <th>部门人员</th>
            <th width="100">操作</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 v-if="item.Type == 1">包含</span>
              <span v-if="item.Type == 2">不包含</span>
            </td>
            <td>
              <p v-for="( son , sIndex ) in item.CourseList">{{ son.CourseName }}</p>
            </td>
            <td>
              <span v-if="item.CommissionType == 1">课耗提成</span>
              <span v-if="item.CommissionType == 2">次月全提</span>
              <span v-if="item.CommissionType == 3">课程比例:{{ item.CourseRate + '%' }}</span>
            </td>
            <td>
              <p v-for="( son , sIndex ) in item.EmpList">{{ son.EmployeeName }}</p>
            </td>
            <td>
              <p v-for="( son , sIndex ) in item.ChildEmpList">{{ son.EmployeeName }}</p>
            </td>

            <!-- <td v-for="( son , sIndex ) in item.RateList">{{ son.StartValue }}</td>
            <td v-for="( son , sIndex ) in item.RateList">{{ son.EndValue }}</td>
            <td v-for="( son , sIndex ) in item.RateList">{{ son.Rate }}</td>-->
            <td>
              <q-btn
                flat
                size="xs"
                icon="edit"
                color="accent"
                style="font-weight:400"
                label="编辑"
                @click="EditTask(props.row)"
              />
              <q-btn
                flat
                size="xs"
                icon="delete"
                color="negative"
                style="font-weight:400"
                label="删除"
                @click="RemoveTask(props.row.Id)"
              />
            </td>
          </tr>
        </table>
        <div></div>
        <table
          class="po_content singeRowTable"
          style="border:1px solid #E6E6E6;"
          cellspacing="0"
          cellpadding="0"
          v-loading="loading"
        >
          <tr>
            <th :rowspan="item.RateList.length">业绩比例</th>
          </tr>
          <tr>
            <th
              v-for="( son , sIndex ) in item.RateList"
              :key="sIndex"
            >{{ son.StartValue }}{{ '<业绩<=' }}{{ son.EndValue }}</th>
          </tr>
          <tr>
            <td v-for="( son , sIndex ) in item.RateList" :key="sIndex">{{ son.Rate }}%</td>
          </tr>
        </table>
      </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>
      <div style="width: 100%;display: flex;justify-content: flex-end;margin-top: 10px;">
        <q-btn color="accent" size="sm" icon="add" label="新增规则" @click="AddMsg()" />
        <q-btn color="accent" size="sm" label="保存" @click="setMsg()" style="margin-left: 15px;" />
      </div>
    </template>
    <marketCommissionfrom
      v-if="persistent"
      :isAdd="isAdd"
      :loyeeList='loyeeList'
      :CourseList='CourseList'
      @close="closeForm"
      @success="refreshList"
    ></marketCommissionfrom>

  </div>
</template>
<script>
import {
  queryEmployee
} from '../../../api/users/user'
import {
  queryCourseDropdownList,
} from '../../../api/course/index'
import {
  getSellAchievementsRuleList,
} from '../../../api/finance/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:[],//课程列表
    }
  },
  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();//获取课程下拉
  },
  methods: {



    getSellAchievementsRuleList() {
      this.loading = true;
      getSellAchievementsRuleList({}).then(res => {
        if (res.Code == 1) {
          this.dataList = res.Data
        }
        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;
        }
      })
    },



    preservation() { //保存规则

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

    },
    refreshList() {//成功之后返回

    }

  },
}

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

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