<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="0" v-model="msg.SeparateDistribution">
      </el-switch>
    </el-form-item>
    <template v-if="msg.SeparateDistribution == 1">
      <el-form-item label="分销类型">
        <el-radio v-model="msg.SeparateDistributionType" :label="0">普通设置</el-radio>
        <el-radio v-model="msg.SeparateDistributionType" :label="1">详细设置</el-radio>
      </el-form-item>
      <el-form-item label="分销佣金类型" size="small">
        <el-radio v-model="msg.SeparateDistributionMoneyType" :label="0">固定金额</el-radio>
        <el-radio v-model="msg.SeparateDistributionMoneyType" :label="1">百分比</el-radio>
      </el-form-item>
      <!-- <template v-if="sign !== 'pintuan'">
        <app-goods-share v-model="ruleForm" :is_mch="is_mch" :attr-groups="attrGroups"
          :attr_setting_type="cForm.attr_setting_type" :share_type="ruleForm.share_type" :use_attr="ruleForm.use_attr"
          :sign="sign" pintuan_sign="单独购买"></app-goods-share>
      </template>
      <template v-if="sign === 'pintuan' && cForm.is_alone_buy == 1">
        <app-goods-share v-model="ruleForm" :is_mch="is_mch" :attr-groups="attrGroups"
          :attr_setting_type="ruleForm.attr_setting_type" :share_type="ruleForm.share_type"
          :use_attr="ruleForm.use_attr" :sign="sign" pintuan_sign="单独购买"></app-goods-share>
      </template> -->
      <el-form-item>
        <div class="pintuan-share">
          <el-card v-for="(item,index) in shareGroup_list" :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="fxVal" style="width:130px;" size="small">
                  <el-option v-for="(item, index) in butorInt" :label="`${index + 1}级分销`" :value="index + 1"
                    :key="index+'12'">
                  </el-option>
                </el-select>
                <el-input type="text" size="small" style="width:150px;margin-top:5px;">
                  <el-button slot="append">
                    <span v-if="msg.SeparateDistributionMoneyType == 2">元</span>
                    <span v-if="msg.SeparateDistributionMoneyType == 1">%</span>
                  </el-button>
                </el-input>
                <el-button size="small" type="primary">设置</el-button>
              </div>
              <el-table ref="multipleTable" :data="GradeCommissionList" tooltip-effect="dark"
                style="width: 100%;border:1px solid #E8EAEE" @selection-change="handleSelectionChange">
                <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" v-if="index == 0" size="small">
                          <el-button slot="append">
                            <span v-if="
                                    msg.SeparateDistributionMoneyType == 2
                                  ">元</span>
                            <span v-if="
                                    msg.SeparateDistributionMoneyType == 1
                                  ">%</span>
                          </el-button>
                        </el-input>
                        <el-input v-model="scope.row.TwoCommission" v-if="index == 1" size="small">
                          <el-button slot="append">
                            <span v-if="
                                    msg.SeparateDistributionMoneyType == 2
                                  ">元</span>
                            <span v-if="
                                    msg.SeparateDistributionMoneyType == 1
                                  ">%</span>
                          </el-button>
                        </el-input>
                        <el-input v-model="scope.row.ThreeCommission" v-if="index == 2" size="small">
                          <el-button slot="append">
                            <span v-if="
                                    msg.SeparateDistributionMoneyType == 2
                                  ">元</span>
                            <span v-if="
                                    msg.SeparateDistributionMoneyType == 1
                                  ">%</span>
                          </el-button>
                        </el-input>
                      </span>
                    </template>
                  </el-table-column>
                </template>
              </el-table>
            </div>
          </el-card>
        </div>
      </el-form-item>
    </template>
  </div>
</template>
<script>
  export default {
    props: ["shareGroup_list"],
    data() {
      return {
        fxVal: '',

        butorInt: 0,
        butorIntList: [],
        GradeCommissionList:[],
        DropdownList:[],
        msg: {
          SeparateDistribution: 0, //是否开启分销佣金
          SeparateDistributionType: 1, //分销类型
          SeparateDistributionMoneyType: 1, //分销佣金类型
        },
        tableData: [{
          leval: '默认等级',
          yiji: 0,
          erji: 3
        }]
      };
    },
    created() {
    },
    methods: {
      handleSelectionChange() {

      },
      getDistributor() {
        this.apipost("/api/user/GetDistributorBasicsInfo", {}, res => {
          if (res.data.resultCode == 1) {
            this.butorInt = res.data.data.DistributorTier;
            this.butorIntList = [];
            for (let i = 0; i < this.butorInt; i++) {
              let msg = {
                Name: i + 1 + "级分销"
              };
              this.butorIntList.push(msg);
            }
          }
        });
      },
      GetDropdownList() {
        let msg = {
          Id: 0,
          Grade: 0,
          Name: "",
          Enabled: 1
        };
        this.apipost("/api/user/GetDistributorGradeDropdownList", msg, res => {
          this.DropdownList = JSON.parse(JSON.stringify(res.data.data));
          let msg = {
            Grade: 0,
            GradeCommissionList: [],
            Name: "默认等级",
            SpecificationSort: "",
            Id: 0
          };
          this.DropdownList.unshift(msg);
          this.DropdownList.forEach(item => {
            item.GradeCommissionList = [];
            item.SpecificationSort = "";
            for (let i = 0; i < this.butorInt; i++) {
              let obj = {
                DistributorGrade: item.Id,
                OneCommission: 0,
                TwoCommission: 0,
                ThreeCommission: 0
              };
              item.GradeCommissionList.push(obj);
            }
          });
          this.DropdownList = JSON.parse(JSON.stringify(this.DropdownList));
          if (!this.$route.query.Id){
            this.GradeCommissionList = [];
            this.DropdownList.forEach(item => {
              let obj2 = {
                DistributorGrade: item.Id,
                OneCommission: 0,
                TwoCommission: 0,
                ThreeCommission: 0,
                Name: item.Name
              };
              this.GradeCommissionList.push(obj2);
            });
            this.GradeCommissionList = JSON.parse(
              JSON.stringify(this.GradeCommissionList)
            );
          }
           
        });
      },

    },
    mounted() {
      this.getDistributor();
      this.GetDropdownList();
    },
    computed: {

    },
  };

</script>
