define({
  name:"rebate",
  template:`
    <div class="rebate">
      <el-form>
        <div style="margin:0 auto;width:80%;">
          <el-form-item label="是否参与推广佣金" label-width="155px">
            <el-radio v-model="json.is_open" :label="0">关闭</el-radio>
            <el-radio v-model="json.is_open" :label="1">开启</el-radio>
          </el-form-item>
        </div>
        <template v-if="json.is_open == 1">
            <div style="margin:0 auto;width:80%;">
                <el-form-item label="是否独立设置" label-width="155px">
                    <el-radio v-model="json.is_alone" :label="0">默认设置</el-radio>
                    <el-radio v-model="json.is_alone" :label="1">独立设置</el-radio>
                </el-form-item>
                <el-form-item v-if="json.is_alone == 1" label="返利季度">
                    <el-input placeholder="请输入返利总季度" v-model.number="json.total_quarter" min="0" type="number" class="shortInput">
                        <template slot="prepend">总共返利</template>
                        <template slot="append">个季度</template>
                    </el-input>
                    <!--循环每个季度-->
                    <div v-for="(quarter,index) in json.quarter_list" :key="index" class="quarter-block">
                        <div class="title">第 {{ index }} 季度</div>
                        <el-input v-model.number="quarter.total_month" min="0" type="number" class="shortInput">
                            <template slot="prepend">本季度总</template>
                            <template slot="append">个月</template>
                        </el-input>
                        <div class="tips">本季度总的月数，必须大于等于1</div>
                        <div class="isRepurchase">
                            是否需要复购：
                            <el-radio-group v-model.number="quarter.is_repurchase">
                                <el-radio :label="0">不需要</el-radio>
                                <el-radio :label="1">需要</el-radio>
                            </el-radio-group>
                        </div>
                        <template v-if="quarter.is_repurchase == 1">
                            <el-input v-model.number="quarter.repurchase_money" type="number" class="shortInput">
                                <template slot="prepend">复购需要支付</template>
                                <template slot="append">元</template>
                            </el-input>
                        </template>
                        <div class="tips">不需要复购：在下一个季度开始返利时可以直接领取；需要复购：在本季度最后一笔返利领取后指定时间内需要重新购买指定产品，否则后续不在返利，后续未领取返利全部失效！</div>
                        <div class="monty-list" v-if="Object.values(quarter.month_list).length > 0">
                            <el-input
                                    v-for="(month,monthIndex) in quarter.month_list"
                                    :value="month"
                                    :key="monthIndex"
                                    placeholder="返利金额"
                                    type="number"
                                    step="0.01"
                                    class="monthInput"
                                    v-model="quarter.month_list[monthIndex]"
                            >
                                <template slot="prepend">第 <span class="prepend-month">{{ monthIndex }}</span> 个月返利</template>
                                <template slot="append">元</template>
                            </el-input>
                        </div>
                    </div>
                </el-form-item>
            </div>
        </template>
      </el-form>
    </div>
  `,
  style:`
     .shortInput{
            width: 500px!important;
        }
        .quarter-block{
            border: 1px solid #DCDFE6;
            margin-top: 20px;
            padding: 0 15px;
        }
        .quarter-block .tips{
            font-size: 12px;
            color: #737373;
            line-height: 20px;
            width: 100%;
        }
        .quarter-block .title{
            height: 40px;
            line-height: 40px;
            font-weight: bold;
            font-size: 14px;
            padding-left: 10px;
            position: relative;
        }
        .quarter-block .title:after{
            content: "";
            position: absolute;
            left: 0;
            top: 11px;
            width: 4px;
            height: 18px;
            background: #29ba9c;
        }
        .quarter-block .isRepurchase{
            margin-top: 15px;
            margin-right: 50px;
        }
        .quarter-block .monthInput{
            min-width: 350px;
            width: calc((100% - 30px) / 4);
            margin-bottom: 10px;
            margin-right: 10px;
        }
        .quarter-block .monthInput:nth-child(4n){
            margin-right: 0!important;
        }
        .quarter-block .monthInput .prepend-month{
            font-weight: bold;
        }
        .quarter-block .monty-list{
            margin-top: 15px;
        }
  `,
  props: {
    form: {
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      json: {
        is_open: 0,
        is_alone: 0,
        total_quarter: '',
        quarter_list: {},
      }
    }
  },
  computed:{
    countTotalMonth(){
      let json = Object.assign({}, this.json);
      let quarterList = Object.assign({}, json.quarter_list);

      return Object.values(quarterList).reduce((sum, item) => sum + item.total_month, 0);
    }
  },
  watch:{
    // 总季度信息变更
    'json.total_quarter':{
      handler(val, olVal) {
        let value = Number(val) >= 0 ? Number(val) : 0;
        let newQuarterList = {};
        if(Number(value) > 0){
          let quarterList = Object.assign({}, this.json.quarter_list);
          for(value;value > 0;value--){
            let currentQuarter = quarterList[value] || {};
            if(Object.values(currentQuarter).length <= 0){
              // 当前季度信息不存在
              newQuarterList[value] = {
                total_month: 0,// 本季度总多少月
                is_repurchase: 0,// 是否需要复购
                repurchase_money: 0,// 复购支付金额
                month_list: {},// 每月返利金额
              };
            }else{
              // 当前季度信息存在
              newQuarterList[value] = currentQuarter;
            }
          }
        }

        this.$set(this.json, 'quarter_list', newQuarterList)
        this.$forceUpdate();
      },
      deep:true
    },
    // 月度信息变更
    countTotalMonth:{
      handler(val, olVal) {
        if(Number(val) !== Number(olVal)){
          let json = Object.assign({}, this.json);
          let quarterList = Object.assign({}, json.quarter_list);
          // 循环处理每个季度
          for(const index in quarterList){
            let currentMonthInfo = quarterList[index] || {};
            let totalMonth = Number(currentMonthInfo.total_month) || 0;
            let monthList = currentMonthInfo.month_list || {};
            let newMonthList = {};
            if(totalMonth > 0){
              for(totalMonth;totalMonth > 0;totalMonth--){
                let currentMonth = monthList[totalMonth] || '';
                newMonthList[totalMonth] = currentMonth || '';
              }
            }

            quarterList[index].month_list = newMonthList;
          }

          this.$set(this.json, 'quarter_list', quarterList)
          this.$forceUpdate();
        }
      },
      deep:true
    },
  },
  mounted() {
    if (this.form) {
      let rebate = this.form || {};
      this.json.is_alone = rebate.is_alone ? rebate.is_alone : 0;
      this.json.is_open = rebate.is_open ? rebate.is_open : 0;
      this.json.total_quarter = rebate.total_quarter ? rebate.total_quarter : '';
      this.json.quarter_list = rebate.quarter_list ? rebate.quarter_list : {};
    }
  },
  methods:{
    validate(){

      return this.json;
    }
  }
})