<template>
  <div class="red-theme Feedback OPRules">
    <div class="query-box HotelWorkInput" style="border-bottom: none;">
      <ul>
        <li>
          <span>
            <em>公司</em>
          </span>
          <el-select filterable v-model="obj.BranchId">
            <el-option :label="$t('pub.unlimitedSel')" :value='-1'></el-option>
            <el-option v-for="item in companyList" :label='item.BName' :value='item.Id' :key='item.Id'>
            </el-option>
          </el-select>
        </li>
        <li>
          <span>
            <em>{{$t('advmanager.v_line')}}</em>
          </span>
          <el-select filterable v-model="obj.LineId">
            <el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
            <el-option v-for="item in LineList" :label='item.LineName' :value='item.LineID' :key='item.LineID'>
            </el-option>
          </el-select>
        </li>
        <li style="float:right;color:red;font-weight:700;line-height: 30px;">{{tips}}</li>
        <li>
          <input type="button" class="hollowFixedBtn" :value="$t('pub.searchBtn')" @click="getList()">
          <input type="button" class="hollowFixedBtn" :value="$t('pub.addBtn')" @click="addRule">
          <input type="button" class="normalBtn" value="额外奖励配置"  @click="goExtraReward"/>
        </li>
      </ul>
    </div>

    <table style="margin-bottom:30px" class="singeRowTable" border="0" cellspacing="0" cellpadding="0"
      v-loading="loading">
      <tr>
        <th>公司名称</th>
        <th style="width:20%">线路名称</th>
        <th>目的地</th>
        <th>系列</th>
        <th>线控</th>
        <th>助理</th>
        <th>分负责OP</th>
        <th>分助理</th>
        <th>部门</th>
        <th>负责人金额</th>
        <th>助理金额</th>
        <th>分负责人金额</th>
        <th>分助理金额</th>
        <th>描述</th>
        <th>操作时间</th>
        <th>操作人</th>
        <th>{{$t('system.table_operation')}}</th>
      </tr>
      <tr v-for="(item,i) in dataList" :key="i">
        <td>{{item.BranchName}}</td>
        <td>{{item.LineName}}</td>
        <td>{{item.PlaceName}}</td>
        <td>{{item.LtName}}</td>
        <td>{{item.XKEmployeeName}}</td>
        <td>{{item.ZLEmployeeName}}</td>
        <td>{{item.EmployeeName}}</td>
        <td>{{item.FZLEmployeeName}}</td>
        <td>{{item.DepartmentName}}</td>
        <td>{{item.ManagerMoney}}</td>
        <td>{{item.InternMoney}}</td>
        <td>{{item.FManagerMoney}}</td>
        <td>{{item.FInternMoney}}</td>
        <td>{{item.Description}}</td>
        <td>{{item.UpdateDate}}</td>
        <td>{{item.UpdateBy}}</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>
      <tr v-if="dataList.length==0">
        <td colspan="16" align="center">{{$t('system.content_noData')}}</td>
      </tr>
    </table>
    <el-dialog title="提成规则" :visible.sync="ruleVisible" width="800px">
      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
        <el-form-item label="公司" prop="BranchId">
          <el-select filterable v-model="form.BranchId" @change='linkageDepartment()'>
            <el-option v-for="item in companyList" :label='item.BName' :value='item.Id' :key='item.Id'>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门">
          <el-select filterable v-model="form.DepartmentId" @change='getDepart(form.DepartmentId)'>
            <el-option label='全部' :value='-1'></el-option>
            <el-option v-for="item in departmentList" :label="item.DepartmentName" :value="item.DepartmentID"
              :key="item.DepartmentID"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="线路" prop="LineIdList">
          <el-select class="multiple_input" filterable multiple collapse-tags v-model="form.LineIdList"
            @change="getLineTeamList">
            <el-option label='全线' :value='-1' :key='-1'></el-option>
            <el-option v-for="item in LineList" :label='item.LineName' :value='item.LineID' :key='item.LineID'>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目的地" prop="LineIdList">
          <el-select class="multiple_input" filterable multiple collapse-tags v-model="form.PlaceIdList">
            <el-option v-for="item in PlaceList" :label='item.PlaceName' :value='item.PlaceID' :key='item.PlaceID'>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="系列">
          <el-select class="multiple_input" filterable multiple collapse-tags v-model="form.LtIdList">
            <el-option v-for="item in LineTeamList" :label='item.LtName' :value='item.LtID' :key='item.LtID'>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述">
          <el-input class="w220" v-model="form.Description"></el-input>
        </el-form-item>
        <!-- XKEmployeeIdList -->
        <el-form-item label="线控" prop="">
          <el-select class="multiple_input" filterable multiple collapse-tags v-model="form.XKEmployeeIdList">
            <el-option v-for="item in EmployeeList" :label="item.EmName" :value="item.EmployeeId"
              :key="item.EmployeeId"></el-option>
          </el-select>
        </el-form-item>
        <!-- ZLEmployeeIdList -->
        <el-form-item label="助理" prop="">
          <el-select class="multiple_input" filterable multiple collapse-tags v-model="form.ZLEmployeeIdList">
            <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 v-show="stateShow" label="分负责OP">
          <el-select class="multiple_input" filterable multiple collapse-tags v-model="form.EmployeeIdList">
            <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 v-show="stateShow" label="分助理">
          <el-select class="multiple_input" filterable multiple collapse-tags v-model="form.FZLEmployeeIdList">
            <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="ManagerMoney">
          <el-input class="w220" @keyup.native="checkInteger(form,'ManagerMoney')" v-model="form.ManagerMoney">
          </el-input>
        </el-form-item>
        <el-form-item label="助理金额" prop="InternMoney">
          <el-input class="w220" @keyup.native="checkInteger(form,'InternMoney')" v-model="form.InternMoney"></el-input>
        </el-form-item>
        <el-form-item v-show="stateShow" label="分负责人金额">
          <el-input class="w220" @keyup.native="checkInteger(form,'FManagerMoney')" v-model="form.FManagerMoney">
          </el-input>
        </el-form-item>
        <el-form-item v-show="stateShow" label="分助理金额">
          <el-input class="w220" @keyup.native="checkInteger(form,'FInternMoney')" v-model="form.FInternMoney">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="ruleVisible = false">{{$t('pub.cancelBtn')}}</el-button>
        <el-button size="small" type="danger" @click="RulesOk('form')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'Feedback',
    data() {
      return {
        obj: {
          BranchId: -1,
          LineId: 0,
        },
        dataList: [],
        loading: false,
        dateList: [],
        LineList: [],
        companyList: [],
        ruleVisible: false,
        form: {
          BranchId: "",
          DepartmentId: -1,
          Description: "",
          EmployeeIdList: [],
          LineIdList: [],
          PlaceIdList: [],
          LtIdList: [],

          InternMoney: '',
          ManagerMoney: '',
          XKEmployeeIdList: [],
          ZLEmployeeName: [],
          FZLEmployeeIdList: [],
          FManagerMoney: 0,
          FInternMoney: 0,
        },
        departmentMsg: {
          RB_Group_Id: '0',
          RB_Branch_Id: '-1',
          Status: '0',
          ParentId: '-1',
          Tier: '0',
        },
        LineTeamList: [],
        EmployeeList: [],
        rules: {
          BranchId: [{
            required: true,
            message: '请选择公司',
            trigger: 'change'
          }],
          XKEmployeeIdList: [{
            required: true,
            message: '请选择线控',
            trigger: 'change'
          }],
          ZLEmployeeIdList: [{
            required: true,
            message: '请选择助理',
            trigger: 'change'
          }],
          EmployeeIdList: [{
            required: true,
            message: '请选择参与人员',
            trigger: 'change'
          }],
          LineIdList: [{
            required: true,
            message: '请选择线路',
            trigger: 'change'
          }],
          ManagerMoney: [{
            required: true,
            message: "请输入负责人金额",
            trigger: "blur"
          }],
          InternMoney: [{
            required: true,
            message: "请输入助理金额",
            trigger: "blur"
          }],
        },
        departmentList: [],
        stateShow: true,
        tips: '',
        PlaceList: [],
        PlaceShow: false,
      }
    },
    created() {},
    mounted() {
      this.getCompany();
      this.getLineList();
      this.getList();
      this.getEmployeeList();
      this.getDepartment();
    },
    methods: {
      goExtraReward(){
        this.$router.push({
          name: 'OPExtraRewardRule',
          query: {
            blank: 'y'
          }
        });
      },
      Delete(item) {
        this.$confirm("是否删除? 删除后不可恢复", this.$t('tips.tips'), {
            confirmButtonText: this.$t('pub.sureBtn'),
            cancelButtonText: this.$t('pub.cancelBtn'),
            type: "warning"
          })
          .then(() => {
            this.apipost('sellcommission_DelOPCommissionRule', {
              RuleId: item.Id
            }, res => {
              if (res.data.resultCode == 1) {
                this.Success(res.data.message)
                this.getList()
              } else {
                this.Error(res.data.message)
              }
            })
          })
          .catch(() => {});
      },
      addRule() {
        this.PlaceShow = false;
        this.ruleVisible = true;
        this.form = {
          BranchId: "",
          Description: "",
          EmployeeIdList: [],
          LineIdList: [],
          PlaceIdList: [],
          LtIdList: [],
          InternMoney: '',
          ManagerMoney: '',
          XKEmployeeIdList: [],
          ZLEmployeeIdList: [],
          FZLEmployeeIdList: [],
          FManagerMoney: 0,
          FInternMoney: 0,
        }
      },
      SetRules(item) {
        this.ruleVisible = true;
        this.form = {
          Id: item.Id,
          BranchId: item.BranchId,
          Description: item.Description,
          EmployeeIdList: item.EmployeeIdList,
          LineIdList: item.LineIdList,
          PlaceIdList: item.PlaceIdList,
          LtIdList: item.LtIdList,
          InternMoney: item.InternMoney,
          ManagerMoney: item.ManagerMoney,
          DepartmentId: item.DepartmentId,
          XKEmployeeIdList: item.XKEmployeeIdList,
          ZLEmployeeIdList: item.ZLEmployeeIdList,
          FZLEmployeeIdList: item.FZLEmployeeIdList,
          FManagerMoney: item.FManagerMoney,
          FInternMoney: item.FInternMoney,
        }
        this.form.LtIdList = item.LtIdList;
        this.PlaceShow = true;
        this.departmentMsg.RB_Branch_Id = item.BranchId;
        this.getLineTeamList();
      },
      RulesOk(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.apipost(
              'sellcommission_SetOPCommissionRule', 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 => {}
            )
          }
        });
      },
      getEmployeeList() {
        let userInfo = this.getLocalStorage()
        let msg = {
          GroupId: userInfo.RB_Group_id,
          BranchId: '-1',
          DepartmentId: '-1',
          PostId: '-1',
          IsLeave: '0'
        }
        this.apipost(
          'admin_get_EmployeeGetList', {},
          res => {
            if (res.data.resultCode == 1) {
              this.EmployeeList = res.data.data
            }
          },
          err => {}
        )
      },
      //获取系列列表
      getLineTeamList() {
        this.PlaceList = [];
        this.LineTeamList = [];
        if (this.form.LineIdList.indexOf(-1) != -1) {
          this.form.LineIdList = [-1];
          this.form.PlaceIdList = [];
          this.form.LtIdList = [];
          return;
        }
        if (this.form.LineIdList.length > 1) {
          this.form.PlaceList = [];
          this.form.LtIdList = [];
          return;
        }
        if (this.form.LineIdList.indexOf(-1) == -1 && this.form.LineIdList.length == 1) {
          let id = this.form.LineIdList[0];
          this.getLinePlaceList(id);
        }
        let msg = {
          lineID: this.form.LineIdList[0],
        }
        this.apipost('team_post_GetList', msg, res => {
          if (res.data.resultCode == 1) {
            this.LineTeamList = res.data.data;
          }
        })
      },
      //获取目的地
      getLinePlaceList(id) {
        if (!this.PlaceShow) {
          this.form.PlaceList = [];
        }
        let msg = {
          lineID: id,
        }
        this.apipost('team_post_GetLinePlace', msg, res => {
          if (res.data.resultCode == 1) {
            this.PlaceList = res.data.data;
          }
        })
      },
      getCompany() {
        let userInfo = this.getLocalStorage()
        var RB_Group_id = userInfo.RB_Group_id
        let msg = {
          Status: 0,
          is_show: 0,
          RB_Group_Id: RB_Group_id
        }
        this.apipost(
          'admin_get_BranchGetList',
          msg,
          res => {
            if (res.data.resultCode == 1) {
              this.companyList = res.data.data;
            } else {
              this.Error(res.data.message);
            }
          },
          err => {}
        )
      },
      getLineList() {
        this.apipost("line_post_GetAllList_V3", {
          IsShow: -1 //LineDirection: 0
        }, res => {
          if (res.data.resultCode == 1) {
            this.LineList = res.data.data;
          }
        });
      },

      linkageDepartment(val) {
        let userInfo = this.getLocalStorage()
        let ParentCompanyId=userInfo.ParentCompanyId;
        this.departmentMsg.RB_Branch_Id = this.form.BranchId;
        this.form.DepartmentId = -1;
        if (this.departmentMsg.RB_Branch_Id == ParentCompanyId) {
          this.stateShow = false;
          this.form.EmployeeIdList = [];
          this.form.FZLEmployeeIdList = [];
          this.form.FManagerMoney = 0;
          this.form.FInternMoney = 0;
        } else {
          this.stateShow = true;
        }
      },
      getDepart(id) {
        this.form.DepartmentId = id;
        this.$forceUpdate();
      },
      getDepartment() {
        this.apipost('admin_get_DepartmentGetList', this.departmentMsg, res => {
          if (res.data.resultCode == 1) {
            this.departmentList = res.data.data;
          }
        }, err => {})
      },
      getList() {
        this.loading = true;
        this.apipost("sellcommission_GetOPCommissionRuleList", this.obj, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.tips = res.data.data.msg;
            this.dataList = res.data.data.list;
          }
        });
      },
    }
  }

</script>
<style>
  .OPRules .el-form-item {
    display: inline-block;
  }

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

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

</style>
