define({
    name: "AnchorwomanBonus",
    template: `
   <div id="anchorwoman-bonus">
      <el-form label-width="200px">
          <div id="vue_head">
              <div class="base_set">
                  <div class="vue-main-title">
                      <div class="vue-main-title-left"></div>
                      <div class="vue-main-title-content">招商分红</div>
                  </div>
                  <el-divider></el-divider>
                  <div class="vue-main-form">
                      <el-form-item label="招商员分红">
                          <el-radio v-model="is_open_bonus_staff" :label="0">关闭</el-radio>
                          <el-radio v-model="is_open_bonus_staff" :label="1">开启</el-radio>
                      </el-form-item>
                      <el-form-item label="招商中心分红">
                          <el-radio v-model="is_open_bonus_center" :label="0">关闭</el-radio>
                          <el-radio v-model="is_open_bonus_center" :label="1">开启</el-radio>
                          <div class="help-block">招商独立分红设置<span style="color:red">(设置0，取统一设置, 设置为空，不做保存处理)</span></div>
                      </el-form-item>
                      <el-divider></el-divider>
                      <el-form-item label="招商员独立分红">
                          <el-row class="gutter">
                              <el-col :span="13" class="flex-col">
                                  <el-input placeholder="请输入百分比" v-model="staff_bonus"  size="small" oninput="if(value<0)value='';if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+4)}">
                                      <template slot="append">%</template>
                                  </el-input>
                              </el-col>
                          </el-row>
                      </el-form-item>
  
                      <el-form-item label="招商员等级独立分红">
                          <el-row class="gutter">
                              <el-col :span="13" class="flex-col" v-for="(item1, index) in staffLevels" :key="item1.id">
                                  <el-input placeholder="请输入百分比" v-model="item1.value" oninput="if(value<0)value='';if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+4)}" type="number"
                                      size="small ">
                                      <template slot="prepend" class="prepend">{{item1.level_name}}</template>
                                      <template slot="append">%</template>
                                  </el-input>
                              </el-col>
                          </el-row>
                      </el-form-item>
  
  
                      <el-form-item label="招商中心等级独立分红">
                          <el-row class="gutter">
                              <el-col :span="13" class="flex-col" v-for="(item2, index) in merchantLevels" :key="item2.id">
                                  <el-input placeholder="请输入百分比" v-model="item2.value"  size="small " oninput="if(value<0)value='';if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+4)}" type="number">
                                      <template slot="prepend" class="prepend">{{item2.level_name}}</template>
                                      <template slot="append">%</template>
                                  </el-input>
                              </el-col>
                          </el-row>
                      </el-form-item>
                      <el-divider></el-divider>
                  </div>
              </div>
          </div>
      </el-form>
  </div>
      `,
    style: `
      #anchorwoman-bonus .el-row{
          margin-top: 0;
      }
      .help-block{
          font-size:14px;
      }
      .location{
          display:flex;
          justify-content:flex-end;
      }
      .gutter{
          text-align:center;
      }
      .flex-col{
          margin-top:5px;
      }
      .el-form-item {
          margin-bottom:12px;
      }
      .prepend {
          width: 150px;
      }
      `,
    props: {
      form: {
        type: Object,
        default() {
          return {};
        },
      },
    },
    data() {
      return {
        staff_bonus: '',
        is_open_bonus_staff: 0,
        is_open_bonus_center: 0,
        staffLevels: [],
        merchantLevels: [],
      };
    },

    mounted() {
      if (this.form.merchant_goods && !Array.isArray(this.form.merchant_goods)) {
        let merchant = this.form.merchant_goods;
        this.staff_bonus = merchant.staff_bonus;
        this.is_open_bonus_staff = merchant.is_open_bonus_staff;
        this.is_open_bonus_center = merchant.is_open_bonus_center;
      }
      this.staffLevels = this.form.staff_levels ? JSON.parse(JSON.stringify(this.form.staff_levels)) : [];
      this.merchantLevels = this.form.merchant_levels ? JSON.parse(JSON.stringify(this.form.merchant_levels)) : [];
    },
    
    methods: {
        filterList () {
            let ruleArr = {};
            ruleArr.staff_levels = {};
            ruleArr.level = {};
            this.staffLevels.forEach(item => {
                ruleArr.staff_levels[item.id] = item.value;
            })
            this.merchantLevels.forEach(item => {
                ruleArr.level[item.id] = item.value;
            })
            return ruleArr;
        },
        validate() {
            return {
                is_open_bonus_staff: this.is_open_bonus_staff,
                is_open_bonus_center: this.is_open_bonus_center,
                staff_bonus: this.staff_bonus,
                ...this.filterList()
            }
        },
    },

  });