<template>
  <div class="Feedback">
    <ul style="overflow: initial!important">
      <li style="float:right;margin-bottom:10px">
        <input type="button" class="hollowFixedBtn" value="新增" @click="addRule">
      </li>
    </ul>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
      <thead>
        <tr>
          <th>人员</th>
          <th>部门</th>
          <th>占比</th>
          <th width="300">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            全部
          </td>
          <td>
            微途账户基金
          </td>
          <td>
            {{allzb}}%
          </td>
          <td>
          </td>
        </tr>
        <tr v-for="(item,index) in dataList" :key="index">
          <td>{{item.EmployeeName}}</td>
          <td>{{item.DepartmentName}}</td>
          <td>{{item.CommissionPercent}}%</td>
          <td>
            <el-button @click="SetRules(item)" style="padding:4px" type="primary" icon="el-icon-edit" circle>
            </el-button>
            <el-button @click="Delete(item)" style="padding:4px" type="danger" icon="el-icon-delete" circle></el-button>
          </td>
        </tr>
      </tbody>
      <tr v-if="dataList.length==0">
        <td colspan="12" align="center">暂无数据</td>
      </tr>
    </table>
    <el-dialog title="提成规则" :visible.sync="ruleVisible" width="400px">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="人员" prop="EmployeeId">
          <el-select class="multiple_input" filterable v-model="form.EmployeeId">
            <el-option v-for="item in EmployeeList" :label="item.EmName" :value="item.EmployeeId"
              :key="item.EmployeeId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="占比" prop="CommissionPercent">
          <el-input class="w220" @keyup.native="checkPrice(form,'CommissionPercent')" v-model="form.CommissionPercent">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="ruleVisible = false">取 消</el-button>
        <el-button size="small" type="danger" @click="RulesOk('form')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        allzb: 100, //剩余百分比
        dataList: [],
        loading: false,
        ruleVisible: false,
        form: {
          EmployeeId: '',
          CommissionPercent: 0,
        },
        EmployeeList: [],
        rules: {
          EmployeeId: [{
            required: true,
            message: '请选择参与人员',
            trigger: 'change'
          }],
          CommissionPercent: [{
            required: true,
            message: "请输入占比",
            trigger: "blur"
          }],
        },
      }
    },
    created() {},
    mounted() {
      this.getList();
      this.getEmployeeList();
    },
    methods: {
      Delete(item) {
        this.$confirm("是否删除? 删除后不可恢复", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            this.apipost('ViittoCommission_post_RemoveViittoCommissionRuleService', {
              ID: item.Id
            }, res => {
              if (res.data.resultCode == 1) {
                this.Success(res.data.message)
                this.getList()
              } else {
                this.Error(res.data.message)
              }
            })
          })
          .catch(() => {});
      },
      addRule() {
        this.ruleVisible = true;
        this.form = {
          EmployeeId: '',
          CommissionPercent: 0,
        }
      },
      SetRules(item) {
        this.ruleVisible = true;
        this.form = {
          EmployeeId: item.EmployeeId,
          CommissionPercent: item.CommissionPercent,
          Id: item.Id
        }
      },
      RulesOk(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let num = 0;
            let newnum = 0;
            if (this.form.Id) {
              this.dataList.forEach(item => {
                if (item.Id != this.form.Id) {
                  num += item.CommissionPercent;
                }
              })
              newnum = 100 - num;
            } else {
              newnum = this.allzb;
            }
            if (Number(this.form.CommissionPercent) > newnum || Number(this.form.CommissionPercent) == 0) {
              this.Error("请输入正确的占比！");
              return;
            }
            this.apipost(
              'ViittoCommission_post_SetViittoCommissionRuleService', this.form,
              res => {
                if (res.data.resultCode == 1) {
                  this.getList();
                  this.ruleVisible = false;
                  this.Success(res.data.message)

                } else {
                  this.Error(res.data.message)
                }
              },
              err => {}
            )
          } else {}
        });
      },
      getEmployeeList() {
        let userInfo = this.getLocalStorage()
        let msg = {
          GroupId: userInfo.RB_Group_id,
          BranchId: '49',
          DepartmentId: '-1',
          PostId: '-1',
          IsLeave: '0'
        }
        this.apipost(
          'admin_get_EmployeeGetList', msg,
          res => {
            if (res.data.resultCode == 1) {
              this.EmployeeList = res.data.data
            }
          },
          err => {}
        )
      },
      getList() {
        this.loading = true;
        this.apipost("ViittoCommission_get_GetListService", {}, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data;

            let num = 0;
            this.dataList.forEach(item => {
              num += item.CommissionPercent;
            })
            this.allzb = 100 - num;
          }
        });
      },
    }
  }

</script>
<style>
  .Feedback ul>li {
    display: inline-block;
    font-size: 12px;
    color: #666;
    margin: 20px 30px 0px 0;
  }

  .Feedback .singeRowTable {
    margin-top: 20px;
  }

</style>