<style>
  .pintuan-share .box {
    border-top: 1px solid #E8EAEE;
    border-left: 1px solid #E8EAEE;
    border-right: 1px solid #E8EAEE;
    padding: 16px;
  }

</style>
<template>
  <div>
    <el-form-item label="是否开启分销佣金" size="small">
      <el-switch :active-value="1" :inactive-value="2" v-model="addMsg.SeparateDistribution" @change="checkedChange">
      </el-switch>
    </el-form-item>
    <template v-if="addMsg.SeparateDistribution == 1">
      <el-form-item label="分销类型">
        <el-radio v-model="addMsg.SeparateDistributionType" :label="1" @change="checkedChange">普通设置</el-radio>
        <el-radio v-model="addMsg.SeparateDistributionType" :label="2" @change="checkedChange">详细设置</el-radio>
      </el-form-item>
      <el-form-item label="分销佣金类型" size="small">
        <el-radio v-model="addMsg.SeparateDistributionMoneyType" :label="2">固定金额</el-radio>
        <el-radio v-model="addMsg.SeparateDistributionMoneyType" :label="1">百分比</el-radio>
      </el-form-item>
      <!--普通设置-->
      <el-form-item v-if="addMsg.SeparateDistributionType==1">
        <div class="pintuan-share">
          <el-card v-for="(item,index) in addMsg.GroupList" :key="index" style="margin-bottom:20px;">
            <div slot="header" class="clearfix">
              <div class="box">
                <div style="display:inline-block;">
                  <el-tag type="danger">{{item.People_Num}}人团</el-tag>
                </div>
                <label style="margin-bottom:0;padding:18px 10px;">批量设置</label>
                <el-select placeholder="请选择层级" v-model="item.Leavel" style="width:130px;" size="small">
                  <el-option v-for="(item, index) in butorTier" :label="`${index + 1}级分销`" :value="index + 1"
                    :key="index+'12'">
                  </el-option>
                </el-select>
                <el-input type="text" size="small" v-model="item.Number" style="width:150px;margin-top:5px;">
                  <el-button slot="append">
                    <span v-if="addMsg.SeparateDistributionMoneyType == 2">元</span>
                    <span v-if="addMsg.SeparateDistributionMoneyType == 1">%</span>
                  </el-button>
                </el-input>
                <el-button size="small" type="primary" @click="setInfo(item,index)">设置</el-button>
              </div>
              <el-table :ref="'multipleTable'+index" :data="item.DistributioncommissionList" tooltip-effect="dark"
                style="width: 100%;border:1px solid #E8EAEE"
                @selection-change="(selections)=>{handleSelectionChange(selections,index,item)}">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column width="100" label="等级名称">
                  <template slot-scope="scope">
                    <template v-for="(item2, index) in DropdownList">
                      <span :key="index+'9'" v-if="scope.row.DistributorGrade == item2.Id">{{ item2.Name }}</span>
                    </template>
                  </template>
                </el-table-column>
                <template v-for="(item, index) in butorIntList">
                  <el-table-column :key="index+'10'" :label="item.Name">
                    <template slot-scope="scope">
                      <span>
                        <el-input v-model="scope.row.OneCommission"
                          @keyup.native="checkPrice(scope.row,'OneCommission')" v-if="index == 0" size="small">
                          <el-button slot="append">
                            <span v-if="addMsg.SeparateDistributionMoneyType == 2">元</span>
                            <span v-if="addMsg.SeparateDistributionMoneyType == 1">%</span>
                          </el-button>
                        </el-input>
                        <el-input v-model="scope.row.TwoCommission"
                          @keyup.native="checkPrice(scope.row,'TwoCommission')" v-if="index == 1" size="small">
                          <el-button slot="append">
                            <span v-if="addMsg.SeparateDistributionMoneyType == 2">元</span>
                            <span v-if="addMsg.SeparateDistributionMoneyType == 1">%</span>
                          </el-button>
                        </el-input>
                        <el-input v-model="scope.row.ThreeCommission"
                          @keyup.native="checkPrice(scope.row,'ThreeCommission')" v-if="index==2" size="small">
                          <el-button slot="append">
                            <span v-if="addMsg.SeparateDistributionMoneyType == 2">元3</span>
                            <span v-if="addMsg.SeparateDistributionMoneyType == 1">%</span>
                          </el-button>
                        </el-input>
                      </span>
                    </template>
                  </el-table-column>
                </template>
              </el-table>
            </div>
          </el-card>
        </div>
      </el-form-item>
      <!--详细设置-->
      <el-form-item v-else>
        <div class="pintuan-share">
          <el-card v-for="(rootItem,rootIndex) in addMsg.GroupList" :key="rootIndex+500" style="margin-bottom:20px;">
            <div slot="header" class="clearfix">
              <div class="box">
                <div style="display:inline-block;">
                  <el-tag type="danger">{{rootItem.People_Num}}人团</el-tag>
                </div>
                <label style="margin-bottom:0;padding:18px 10px;">批量设置</label>
                <el-select placeholder="请选择层级" v-model="rootItem.Leavel" style="width:130px;" size="small">
                  <el-option v-for="(item, index) in butorTier" :label="`${index + 1}级分销`" :value="index + 1"
                    :key="index+'12'">
                  </el-option>
                </el-select>
                <el-input type="text" size="small" v-model="rootItem.Number" style="width:150px;margin-top:5px;">
                  <el-button slot="append">
                    <span v-if="addMsg.SeparateDistributionMoneyType == 2">元</span>
                    <span v-if="addMsg.SeparateDistributionMoneyType == 1">%</span>
                  </el-button>
                </el-input>
                <el-button size="small" type="primary" @click="setInfo(rootItem,rootIndex)">设置</el-button>
              </div>
              <el-table ref="multipleTable" :data="rootItem.DistributionCommissionTreeList" tooltip-effect="dark"
                style="width: 100%;border:1px solid #E8EAEE"
                @selection-change="(selections)=>{handleSelectionChange(selections,rootIndex,rootItem)}">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <template v-for="(specItem, specIndex) in addMsg.SpecificationList">
                  <el-table-column :key="specIndex+'13'" :label="specItem.Name" width="100">
                    <template slot-scope="scope">
                      <span v-if="specIndex == specValueIndex"
                        v-for="(specValueItem, specValueIndex) in scope.row.AttrList" :key="specValueIndex+'14'">
                        {{scope.row.AttrList[specValueIndex].SVName }}
                      </span>
                    </template>
                  </el-table-column>
                </template>
                <template v-for="(item, index3) in DropdownList">
                  <el-table-column :key="index3+'1000'" :label="item.Name">
                    <el-table-column width="100" v-if="butorTier > 0" label="一级分销">
                      <template slot-scope="scope">
                        <template v-if="scope.row.GradeCommissionList">
                          <el-input v-model="scope.row.GradeCommissionList[index3].OneCommission"
                            @keyup.native="checkPrice(scope.row.GradeCommissionList[index3],'OneCommission')"
                            size="small">
                          </el-input>
                        </template>
                      </template>
                    </el-table-column>
                    <el-table-column width="100" v-if="butorTier > 1" label="二级分销">
                      <template slot-scope="scope">
                        <template v-if="scope.row.GradeCommissionList">
                          <el-input v-model="scope.row.GradeCommissionList[index3].TwoCommission"
                            @keyup.native="checkPrice(scope.row.GradeCommissionList[index3],'TwoCommission')"
                            size="small">
                          </el-input>
                        </template>
                      </template>
                    </el-table-column>
                    <el-table-column width="100" v-if="butorTier > 2" label="三级分销">
                      <template slot-scope="scope">
                        <template v-if="scope.row.GradeCommissionList">
                          <el-input v-model="scope.row.GradeCommissionList[index3].ThreeCommission"
                            @keyup.native="checkPrice(scope.row.GradeCommissionList[index3],'ThreeCommission')"
                            size="small">
                          </el-input>
                        </template>
                      </template>
                    </el-table-column>
                  </el-table-column>
                </template>
              </el-table>
            </div>
          </el-card>
        </div>
      </el-form-item>
    </template>
  </div>
</template>
<script>
  export default {
    props: ["addMsg"],
    data() {
      return {
        fxVal: '',
        gradeVal: "",
        xxVal: "",
        butorTier: 0, //分销层级
        //分销商等级
        butorIntList: [],
        //分销等级列表
        DropdownList: [],
        DistributioncommissionList: [],
        //普通设置数组
        tempGeneralArray: [],

        //多选数组
        selectList: [],
        CommonIndex: -1, //选中index
      };
    },


    methods: {
      //切换显示
      checkedChange() {

        //普通设置
        if (this.addMsg.SeparateDistributionType == 1) {
          this.addMsg.GroupList.forEach(item => {
            item.DistributioncommissionList = JSON.parse(JSON.stringify(this.tempGeneralArray))
          });
        }
        //详细设置
        else if (this.addMsg.SeparateDistributionType == 2) {
          this.addMsg.GroupList.forEach(item => {
            item.DistributionCommissionTreeList=[];
            item.StepPriceList.forEach(subItem => {
              var tempObj = JSON.parse(JSON.stringify(subItem));
              var commissionObj = {
                AttrList: tempObj.AttrList,
                Id: 0,
                Name: 0,
                SpecificationSort: tempObj.SpecificationSort,
                GradeCommissionList: [],
              };
              this.tempGeneralArray.forEach((childItem, childIndex) => {
                var tempObj = {
                  DistributorGrade: childItem.DistributorGrade,
                  OneCommission: 0,
                  TwoCommission: 0,
                  ThreeCommission: 0,
                }
                commissionObj.GradeCommissionList.push(tempObj);
              });
              item.DistributionCommissionTreeList.push(commissionObj);
            });
          })
        }
      },
      handleSelectionChange(val, index, item) {

        this.selectList = val;
        item.selectList = val;
      },
      //获取分销层级
      getDistributor() {
        this.apipost("/api/user/GetDistributorBasicsInfo", {}, res => {
          if (res.data.resultCode == 1) {
            this.butorTier = res.data.data.DistributorTier;
            this.butorIntList = [];
            for (let i = 0; i < this.butorTier; i++) {
              let msg = {
                Name: i + 1 + "级分销"
              };
              this.butorIntList.push(msg);
            }
          }
        });
      },
      //获取分销等级
      GetDropdownList() {
        let qmsg = {
          Id: 0,
          Grade: 0,
          Name: "",
          Enabled: 1
        };
        this.apipost("/api/user/GetDistributorGradeDropdownList", qmsg, res => {
          this.DropdownList = JSON.parse(JSON.stringify(res.data.data));
          let disPriceObj = {
            Id: 0,
            DistributorGrade: 0,
            Name: "默认等级",
            SpecificationSort: "",
          };
          this.DropdownList.unshift(disPriceObj);
          this.DropdownList.forEach(item => {
            let obj = {
              Id: 0,
              Name: item.Name,
              DistributorGrade: item.Id,
              OneCommission: 0,
              TwoCommission: 0,
              ThreeCommission: 0,
              SpecificationSort: "",
            };
            this.tempGeneralArray.push(obj);
          });
        });
      },
      //普通设置=>批量设置
      setInfo(item) {
        //普通
        if (this.addMsg.SeparateDistributionType == 1) {
          if (!item.selectList || item.selectList.length === 0) {
            this.Error('请勾选分销商等级');
            return;
          }
          if (item.Leavel === '') {
            this.Error('请选择分销层级');
            return;
          }
          item.DistributioncommissionList.forEach(x => {
            item.selectList.forEach(y => {
              if (x.DistributorGrade == y.DistributorGrade) {
                if (item.Leavel == 1) {
                  x.OneCommission = item.Number
                }
                if (item.Leavel == 2) {
                  x.TwoCommission = item.Number
                }
                if (item.Leavel == 3) {
                  x.ThreeCommission = item.Number
                }
              }
            })
          })
        } else {
          if (!item.selectList || item.selectList.length === 0) {
            this.Error('请勾选商品规格');
            return;
          }
          if (item.Leavel === '') {
            this.Error('请选择分销商等级');
            return;
          }
          item.DistributioncommissionList.forEach(x => {
            x.GradeCommissionList.forEach((y, index) => {
              item.selectList.forEach(z => {
                if (x.Id == z.Id) {
                  if (index == item.Leavel) {
                    if (item.Leavel == 1) {
                      y.OneCommission = item.Number;
                    }
                    if (item.Leavel == 2) {
                      y.TwoCommission = item.Number;
                    }
                    if (item.Leavel == 3) {
                      y.ThreeCommission = item.Number;
                    }
                  }
                }
              });
            });
          });
        }
      }
    },
    mounted() {
      this.getDistributor();
      this.GetDropdownList();
    }
  };

</script>
