<template>
  <div class="rule-box">
    <div class="query-box">
      <ul>
        <li>
          <input type="button" class="normalBtn" :value="$t('pub.addBtn')" @click="addNew">
        </li>
      </ul>
    </div>
    <v-table
      v-if="isReady"
      is-horizontal-resize
      column-width-drag
      column-height-drag
      style="width:100%"
      :is-loading="loading"
      :columns="columns"
      :table-data="tableData"
      :filter-method="filterMethod"
      :total="total"
      :pageSize="pageSize"
      :pageIndex="pageIndex"
      :handleCurrentChange="handleCurrentChanges"
      :multiple-sort="multipleSort"
      sort-always
      @sort-change="sortChange"
      @on-custom-comp="customCompFunc"
    ></v-table>
    <!-- @on-custom-comp="customCompFunc" -->
    <div class="bottom-box" v-show="showForm" v-loading="formLoading">
      <div class="btm-title">{{addMsg.ID==0?$t('fnc.addguize'):$t('fnc.editguize')}}</div>
      <div>
        <el-form
          class="_info_box clearfix"
          :model="addMsg"
          ref="addMsg"
          label-width="110px"
          :rules="rules"
        >
          <el-row>
            <el-col :span="4" :gutter="20">
              <el-form-item :label="$t('fnc.accBming')" prop="RuleName">
                <el-input v-model="addMsg.RuleName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :gutter="20">
              <el-form-item :label="$t('fnc.tcleibie')">
                <el-select filterable v-model="addMsg.CommissionMethod" class>
                  <el-option :label="$t('fnc.jiaoyie')" :value="1"></el-option>
                  <!-- <el-option :label="$t('objFill.maoli')" :value="2"></el-option> -->
                  <el-option :label="$t('fnc.retoushu')" :value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5" :gutter="20">
              <el-form-item :label="$t('fnc.tcfangshi')">
                <el-select filterable v-model="addMsg.CommissionType" class>
                  <el-option :label="$t('fnc.gdbfenbi')" :value="1" v-if='addMsg.CommissionMethod==1'></el-option>
                  <el-option :label="$t('fnc.jtbfenbi')" :value="2" v-if='addMsg.CommissionMethod==1'></el-option>
                  <el-option :label="$t('fnc.gdjine')" :value="3" v-if='addMsg.CommissionMethod==3'></el-option>
                  <el-option :label="$t('fnc.jtjine')" :value="4" v-if='addMsg.CommissionMethod==3'></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5" :gutter="20">
              <el-form-item :label="$t('fnc.tcbili')" prop="CommissionVariable">
                <el-input
                  v-model="addMsg.CommissionVariable"
                  type="int"
                  :disabled="addMsg.CommissionType%2!=1"
                >
                  <template slot="append">{{addMsg.CommissionType==1?'%':'/人'}}</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5" :gutter="20">
              <el-form-item :label="$t('fnc.tcyaoqiu')">
                <el-select v-model="addMsg.Require" class>
                  <el-option :label="$t('fnc.ysdingjin')" :value="1"></el-option>
                  <el-option :label="$t('fnc.wkshouqi')" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" :gutter="20">
              <el-form-item :label="$t('fnc.jszhouqi')">
                <el-select v-model="addMsg.BalanceCyc" class>
                  <el-option :label="$t('fnc.andjiesuan')" :value="1"></el-option>
                  <el-option :label="$t('fnc.anyjiesuan')" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5" :gutter="20">
              <el-form-item :label="$t('fnc.jsyaoqiu')">
                <el-select v-model="addMsg.IsFinishAll" class>
                  <el-option :label="$t('fnc.qzwcsyyq')" :value="1"></el-option>
                  <el-option :label="$t('fnc.bqzwancheng')" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5" :gutter="20">
              <el-form-item :label="$t('fnc.shiyongongsi')" prop="UsingBranchArray">
                <el-select
                  multiple
                  collapse-tags
                  @change="changeData(1)"
                  v-model="addMsg.UsingBranchArray"
                  class
                >
                  <el-option :label="$t('fnc.jttongyong')" value="-1"></el-option>
                  <el-option
                    v-for="(item, index) in CompanyList"
                    :label="item.BName"
                    :value="item.Id.toString()"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5" :gutter="20">
              <el-form-item :label="$t('fnc.jttongyong')" prop="UsingLineArray">
                <el-select
                  multiple
                  collapse-tags
                  @change="changeData(2)"
                  v-model="addMsg.UsingLineArray"
                  class
                >
                  <el-option :label="$t('fnc.sydxianlu')" value="-1"></el-option>
                  <el-option
                    v-for="(item, index) in lines"
                    :label="item.lineName"
                    :value="item.lineID.toString()"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5" :gutter="20">
              <el-form-item :label="$t('fnc.symdidi')">
                <el-select
                  multiple
                  collapse-tags
                  @change="changeData(3)"
                  v-model="addMsg.UsingDestinationArray"
                >
                  <el-option :label="$t('fnc.symudidi')" value="-1"></el-option>
                  <el-option
                    v-for="(item, index) in desctions"
                    :label="item.PlaceName"
                    :value="item.PlaceID.toString()"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
            <el-col :span="4" :gutter="20">
              <el-form-item :label="$t('fnc.qyshijian')">
                <el-date-picker v-model="addMsg.EffectDate" type="date" :placeholder="$t('tips.xzqyshijian')"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <table class="al-tab" v-show="addMsg.CommissionType%2==0">
              <caption>{{$t('fnc.jttcblsd')}}</caption>
              <thead>
                <th>{{$t('active.ad_xuhao')}}</th>
                <th>{{$t('fnc.qzrenshu')}}</th>
                <th>{{$t('fnc.zzrenshu')}}</th>
                <th>{{$t('fnc.jcbili')}}</th>
                <th>{{$t('fnc.ewjiangli')}}</th>
                <th>{{$t('admin.admin_operate')}}</th>
              </thead>
              <tbody>
                <tr v-for="(item, index) in addMsg.RuleClassList" :key="index">
                  <td>{{index+1}}</td>
                  <td>
                    <el-input-number
                      size="small"
                      style="margin:0 12px"
                      :min="1"
                      :max="item.EndPeople"
                      v-model="item.StartPeople"
                      class="w120"
                    ></el-input-number>
                  </td>
                  <td>
                    <el-input-number
                      size="small"
                      style="margin:0 15px"
                      :min="item.StartPeople"
                      v-model="item.EndPeople"
                      class="w100"
                    ></el-input-number>
                  </td>
                  <td>
                    <el-input
                      :placeholder="$t('rule.qsrjcbili')"
                      size="small"
                      v-model="item.BaseVariable"
                      class="w200"
                    >
                      <template slot="append">{{addMsg.CommissionType==2?'%':'/'+$t('hotel.hotel_people')}}</template>
                    </el-input>
                  </td>
                  <td>
                    <el-input
                      :placeholder="$t('rule.qsrwmjiangli')"
                      size="small"
                      v-model="item.AddedVariable"
                      class="w200 temp"
                    >
                      <template slot="append">
                        <el-select v-model="item.AddedMethod" class>
                          <el-option :label="'/'+$t('hotel.hotel_people')" :value="2"></el-option>
                          <el-option label="%" :value="1"></el-option>
                        </el-select>
                      </template>
                    </el-input>
                  </td>
                  <td>
                    <el-button
                      type="primary"
                      icon="el-icon-plus"
                      size="mini"
                      circle
                      v-if="index==addMsg.RuleClassList.length-1"
                      @click="addCommissionType"
                    ></el-button>
                    <el-button
                      type="danger"
                      icon="el-icon-delete"
                      size="mini"
                      circle
                      @click="deleteCommissionType(index)"
                      v-if="addMsg.RuleClassList.length>1"
                    ></el-button>
                  </td>
                </tr>
              </tbody>
            </table>
          </el-row>
        </el-form>
      </div>
      <div class="btm-opera-btn">
        <input type="button" class="normalBtn" :value="$t('pub.saveBtn')" @click="save">
        <input type="button" class="cancelBtn" :value="$t('pub.cancelBtn')" @click="changeShow(0)">
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
export default {
  data() {
    var checkVariable = (rule, value, callback) => {
      if (value == null || value.length == 0) {
        return callback(new Error(this.$t('objFill.v101.FinancialModule.ticblbnwk')));
      }
      let a = parseFloat(value);
      if (isNaN(a)) {
        callback(new Error(this.$t('objFill.v101.FinancialModule.ticblbxszs')));
      } else {
        callback();
      }
    };
    return {
      columns: [],
      remoteLoading: false,
      total: 0,
      tableData: [],
      isReady: false,
      multipleSort: false,
      loading: false,
      pageSize: 1000,
      pageIndex: 1,
      msg: {},
      CompanyList: [],
      addMsg: {},
      lines: [],
      rules: {
        RuleName: [
          { required: true, message: this.$t('rule.qsrgzmingcheng'), trigger: "blur" }
        ],
        UsingLineArray: [
          {
            type: "array",
            required: true,
            message: this.$t('rule.qzsxzytxianlu'),
            trigger: "blur"
          }
        ],
        UsingBranchArray: [
          {
            type: "array",
            required: true,
            message: this.$t('rule.qzsxzyggongsi'),
            trigger: "blur"
          }
        ],
        CommissionVariable: [{ validator: checkVariable, trigger: "blur" }]
      },
      showForm: false,
      formLoading: false,
      searchMsg: {
        RB_Group_Id: 0
      },
      desctionsResources:[],
      desctions:[]
    };
  },
  methods: {
    customCompFunc(params) {
      if (params.type === "delete") {
        this.delete(params.data.ID);
        //this.financeinfoRemove(params.id,params.alias)
      } else if (params.type === "edit") {
        this.addNew(params.data);
      }
    },
    delete(id) {
      this.$confirm(this.$t('tips.cicaozuoyongjiushanchu'), this.$t('tips.shanchutishi'), {
        confirmButtonText: this.$t('pub.sureBtn'),
        cancelButtonText: this.$t('pub.cancelBtn'),
        type: "warning"
      })
        .then(() => {
          let msg = {
            id
          };
          this.apipost("sellcommission_rule_delete", msg, x => {
            if (x.data.resultCode == 1) {
              this.Success(this.$t('tips.shanchuchenggong'));
              this.getData()
            } else {
              this.Error(this.data.message);
            }
          });
        })
        .catch(() => {});
    },
    addNew(data) {
      if (!data.ID) {
        this.addMsg = {
          ID: 0,
          RuleName: "",
          CommissionMethod: 1,
          CommissionType: 1,
          Require: 1,
          CommissionVariable: 0,
          UsingLineArray: ["-1"],
          UsingBranchArray: ["-1"],
          UsingDestinationArray:["-1"],
          UsingLine: "",
          UsingBranch: "",
          UsingDestination: "",
          EffectDate: null,
          RB_Group_Id: this.searchMsg.RB_Group_Id,
          BalanceCyc: 1,
          IsFinishAll: 0,
          IsDelete: 1,
          RuleClassList: [
            {
              StartPeople: 1,
              EndPeople: 1,
              BaseVariable: 0,
              AddedVariable: 0,
              AddedMethod: 1
            }
          ]
        };
      } else {
        data.UsingLineArray = data.UsingLine.split(",");
        data.UsingBranchArray = data.UsingBranch.split(",");
        this.desctions=[]
        if(data.UsingLine!='-1'){
          this.desctionsResources.forEach(x=>{
            if(data.UsingLineArray.indexOf(x.LineID.toString())!=-1){
              this.desctions.push(x);
            }
          })
        }
        this.addMsg = data;
        this.addMsg.UsingDestinationArray = data.UsingDestination.split(",");
      }
      this.changeShow(1);
    },
    save() {
      //sellcommission_rule_set
      this.$refs["addMsg"].validate(valid => {
        if (valid) {
          this.formLoading = true;
          this.addMsg.UsingLine = this.addMsg.UsingLineArray.join(",");
          this.addMsg.UsingBranch = this.addMsg.UsingBranchArray.join(",");
          this.addMsg.UsingDestination = this.addMsg.UsingDestinationArray.join(",");
          this.apipost("sellcommission_rule_set", this.addMsg, x => {
            if (x.data.resultCode == 1) {
              this.changeShow(0);
              this.Success(this.$t('tips.baocunchenggong'));
              this.getData();
            } else {
              this.Error(x.data.message);
            }
            this.formLoading = false;
          });
        } else {
          return false;
        }
      });
    },
    changeShow(t) {
      this.showForm = t == 1;
    },
    deleteCommissionType(index) {
      this.addMsg.RuleClassList.splice(index, 1);
    },
    addCommissionType() {
      let obj = {
        StartPeople:
          this.addMsg.RuleClassList[this.addMsg.RuleClassList.length - 1]
            .EndPeople + 1,
        EndPeople:
          this.addMsg.RuleClassList[this.addMsg.RuleClassList.length - 1]
            .EndPeople + 1,
        Variable: 0,
        AddedVariable: 0,
        AddedMethod: "1"
      };
      this.addMsg.RuleClassList.push(obj);
    },
    initColums() {
      this.isReady = false;
      let that = this;
      let RuleName = {
        title: that.$t('fnc.gzmingcheng'),
        field: "RuleName",
        titleAlign: "left",
        columnAlign: "left",
        result: "",
        filterMultiple: false,
        width: 40,
        filters: [{}],
        isResize: true,
        type: "text",
        isFrozen: true
      };
      let companyList = [];
      this.CompanyList.forEach(x => {
        let item = {};
        item.label = x.BName;
        item.value = x.Id;
        companyList.push(item);
      });
      let BranchName = {
        field: "BranchName",
        title: that.$t('fnc.sygongsi'),
        width: 40,
        titleAlign: "left",
        columnAlign: "left",
        isResize: true,
        filterMultiple: true,
        filters: companyList,
        result: [],
        type: "select",
        isFrozen: true
      };
      let lines = [];
      this.lines.forEach(x => {
        let item = {};
        item.label = x.lineName;
        item.value = x.lineID;
        lines.push(item);
      });
      let LineName = {
        field: "LineName",
        title: that.$t('fnc.shiyongxianlu'),
        width: 80,
        titleAlign: "left",
        columnAlign: "left",
        isResize: true,
        result: [],
        filterMultiple: true,
        filters: lines,
        isFrozen: true,
        formatter: function(rowData, rowIndex, pagingIndex, field) {
          if (rowData.UsingLine == "-1") {
            return that.$t('fnc.sydxianlu');
          } else {
            let lineNames = "";
            rowData.UsingLine.split(",").forEach(x => {
              that.lines.forEach(y => {
                if (y.lineID == x) {
                  lineNames += y.lineName + ",";
                }
              });
            });
            return lineNames;
          }
        }
      };
      let Rules = {
        title: that.$t('fnc.tcguize'),
        field: "RuleDescription",
        titleAlign: "left",
        columnAlign: "left",
        width: 300
        // orderBy: "desc"
      };
      let EffectDate = {
        field: "EffectDate",
        title: that.$t('active.cl_sxriqi'),
        titleAlign: "left",
        columnAlign: "left",
        isResize: true,
        width: 80,
        formatter: function(rowData, rowIndex, pagingIndex, field) {
          return rowData.EffectDate.split("T")[0];
        }
      };
      let CommissionLog = {
        title: that.$t('fnc.tcjilu'),
        titleAlign: "left",
        columnAlign: "left",
        isResize: true,
        width: 80
        // orderBy: "",
        // formatter: function(rowData, rowIndex, pagingIndex, field) {
        //   return rowData.Royalty.toFixed(2);
        // }
      };
      let Cyc = {
        title: that.$t('fnc.tczhouqi'),
        titleAlign: "left",
        columnAlign: "left",
        isResize: true,
        width: 80,
        formatter: function(rowData, rowIndex, pagingIndex, field) {
          let cyc = "";
          let dyjiesuan = that.$t('fnc.dyjiesuan')
          let ayjiesuan = that.$t('fnc.ayjiesuan')
          let dwala = that.$t('fnc.dwala')
          let awala = that.$t('fnc.awala')
          if (rowData.BalanceCyc == "1") {
            cyc = dyjiesuan+"（";
          } else {
            cyc = ayjiesuan+"（";
          }
          if (rowData.IsFinishAll == "1") {
            cyc += dwala +"）";
          } else {
            cyc += awala +"）";
          }
          return cyc;
        }
      };
      let opera = {
        title: that.$t('system.table_operation'),
        titleAlign: "left",
        columnAlign: "left",
        width: 80,
        isResize: false,
        componentName: "table-operation"
      };
      this.columns = [];
      this.columns.push(RuleName);
      this.columns.push(BranchName);
      this.columns.push(LineName);
      this.columns.push(Rules);
      this.columns.push(EffectDate);
      this.columns.push(CommissionLog);
      this.columns.push(Cyc);
      this.columns.push(opera);
      this.isReady = true;
    },
    changeData(type) {
      let temp = [];
      if (type == 1) {
        temp = this.addMsg.UsingBranchArray;
      } else if (type == 2) {
        temp = this.addMsg.UsingLineArray;
      } else if (type == 3) {
        temp = this.addMsg.UsingDestinationArray;
      }
      let len = temp.length;
      if (len > 1) {
        if (temp[len - 1] == -1) {
          temp.splice(0, len - 1);
        } else if (temp.indexOf("-1") != -1) {
          temp.splice(temp.indexOf("-1"), 1);
        }
      }

      if(type==2 || type==3){
        this.desctions=[]
        if(type==2)
          this.addMsg.UsingDestinationArray=['-1']
        this.desctionsResources.forEach(x=>{
          if(this.addMsg.UsingLineArray.indexOf(x.LineID.toString())!=-1){
            this.desctions.push(x);
          }
        })
      }
    },
    handleCurrentChanges(val) {
      this.pageIndex = val;
      this.getList();
    },
    sortChange(param) {
      if (param.Royalty != "") {
        this.msg.OrderBy = `Royalty ${param.Royalty}`;
      } else if (param.Initialbalance != "") {
        this.msg.OrderBy = `Initialbalance ${param.Initialbalance}`;
      }
      this.getList();
    },
    filterMethod(filters) {
      this.searchMsg.RuleName = filters.RuleName;
      this.searchMsg.UsingBranchArray = filters.BranchName;
      this.searchMsg.UsingLineArray = filters.LineName;
      this.getData();
    },
    getCompanyList() {
      //获取公司列表
      this.apipost(
        "admin_get_BranchGetList",
        this.getCompanyMsg,
        res => {
          if (res.data.resultCode == 1) {
            let data = res.data.data;
            data.forEach(x => {
              x.disabled = false;
            });
            this.CompanyList = data;
            this.getline();
          } else {
          }
        },
        err => {}
      );
    },
    getline() {
      let msg = { pageIndex: 0, pageSize: 100 };
      this.apipost(
        "line_post_GetPageList",
        msg,
        x => {
          this.lines = x.data.data.pageData;
          this.initColums();
          this.getData();
        },
        err => {}
      );
    },
    getData() {
      this.loading = true;
      this.apipost("sellcommission_rule_get", this.searchMsg, x => {
        this.tableData = x.data.data;
        this.loading = false;
      });
    },
    getDesction(){
      this.apipost(
        "place_post_GetPageList",
        {
          LineID:0,
          PlaceName:'',
          pageIndex:1,
          pageSize:5000
        },
        res => {
          if (res.data.resultCode == 1) {
            res.data.data.pageData.forEach(x=>{
              if(x.IsShow==1)
                this.desctionsResources.push(x)
            })
          }
        },
        err => {}
      );
    }
  },
  mounted() {
    this.searchMsg.RB_Group_Id = this.addMsg.RB_Group_Id = this.getLocalStorage().RB_Group_id;
    this.getCompanyList();
    this.getDesction();
    Vue.component("table-operation", {
      template: `<div style='width:80px;height:40px;background:#fff;text-align:center;position: relative;left:-5px;padding-top: 6px;padding-top:6px;'><el-button type="primary" size='mini' icon="el-icon-edit" circle @click="update(rowData,index)"></el-button><el-button type="danger" size='mini' icon="el-icon-delete" circle @click="deleteRow(rowData,index)"></el-button></div>`,
      props: {
        rowData: {
          type: Object
        },
        field: {
          type: String
        },
        index: {
          type: Number
        }
      },
      methods: {
        update() {
          let params = { type: "edit", data: this.rowData };
          this.$emit("on-custom-comp", params);
        },
        deleteRow() {
          let params = { type: "delete", data: this.rowData };
          this.$emit("on-custom-comp", params);
        }
      }
    });
  }
};
</script>
<style>
/* .rule-box .el-select__tags{
  top: 100%;
} */
.rule-box .el-input .el-input__inner,
.rule-box .el-select .el-input {
  height: auto;
}
.rule-box .el-select {
  display: block;
}
.el-input-group__append,
.el-input-group__prepend {
  border-radius: 0;
}
.rule-box .el-date-editor.el-input,
.rule-box .el-date-editor.el-input__inner {
  width: 100%;
}
.rule-box .temp .el-input-group__append {
  width: 70px;
}
.rule-box .temp .el-select {
  background: #409eff;
  color: #fff;
}
.rule-box .temp .el-select .el-input .el-select__caret {
  color: #f1f1f1;
}
.rule-box .el-button.is-circle{padding: 5px !important;}
</style>