<!--
 * @Descripttion: 当前组件信息-即时奖励设置
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-11-21 16:37:02
 * @LastEditors: 无尘
 * @LastEditTime: 2019-11-25 15:37:41
 -->
<!--
<invitee-reward></invitee-reward>

import inviteeReward from '@/components/active-config/configs/invitee-reward.vue';
-->

<template>
  <div class="invitee-reward border-box">
    <div
      role="alert"
      class="el-alert el-alert--info"
    >
      <i class="el-alert__icon el-icon-info font-12 color-1890ff"></i>
      <div class="el-alert__content">
        <span class="el-alert__title color-606266 font-14 font-w-400">给邀请人的奖励往往是为了扩大活动影响力和辐射范围，而受邀人奖励则能提升活动响应率和行为转化能力。<br />
          您可以配置受邀人奖励，当完成相关行为后，受邀人将实时获取相关奖励。<br />
          注意：与邀请人奖励不同，受邀人无论消费多少次，都只能获得一次受邀人奖励。</span>
      </div>
    </div>
    <el-form
      label-width="154px"
      :model="invitedAward"
      ref="rewardForm"
      :rules="rules"
    >
      <el-form-item
        label="奖励内容："
        prop=""
      >
        <div class="point-cell">
          <div class="point-cell-title border-box flex flex-space-between">
            <div class="point-cell-name font-14 color-303133 font-w-600">积分奖励</div>
            <div class="point-cell-switch">
              <el-switch
                v-model="invitedAward.pointSettingFlag"
                active-text=""
                inactive-text=""
              >
              </el-switch>
            </div>
          </div>
          <div
            v-if="invitedAward.pointSettingFlag"
            class="point-cell-body border-box"
          >
            <div class="point-title-tip font-14 color-606266">积分奖励只适用于受邀人有会员卡的场景（适合老客复购场景，不适合老带新场景），非会员受邀人即使完成相关行为也无法获取积分奖励。</div>
            <div
              data-v-6033a8b1=""
              class="el-form-item m-t-44"
            >
              <label
                for=""
                class="el-form-item__label"
                style="width: 85px;"
              >奖励模式：</label>
              <div
                class="el-form-item__content"
                style="margin-left: 85px;"
              >
                <el-radio-group v-model="invitedAward.point.awardMode">
                  <el-radio :label="1">定额奖励</el-radio>
                  <el-radio :label="2">阶梯奖励</el-radio>
                  <el-radio :label="3">成交额等比奖励</el-radio>
                </el-radio-group>
              </div>
            </div>
            <div
              v-if="invitedAward.point.awardMode == 1"
              class="m-t-20"
            >
              <div class="store-select-title">
                <span class="font-14 color-606266">奖励额度：</span>
                <el-input-number
                  v-model="invitedAward.awardPoint"
                  controls-position="right"
                  :min="1"
                  :max="999999"
                > </el-input-number>
                <span class="font-14 color-606266">积分</span>
              </div>
            </div>
            <div
              v-if="invitedAward.point.awardMode == 2"
              class="m-t-20 w-845"
            >
              <div class="store-select-title">
                <el-table
                  :data="invitedAward.point.awardStepParam"
                  style="width: 100%"
                >
                  <el-table-column label="成交额">
                    <template slot-scope="scope">
                      <div class="cell">
                        <div>
                          <span class="font-14 color-606266 p-r-10">满</span>
                          <el-input-number
                            v-model="scope.row.amount"
                            controls-position="right"
                            :min="1"
                            :max="9999999999"
                          > </el-input-number>
                          <span class="font-14 color-606266 p-l-10">元</span>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="奖励积分">
                    <template slot-scope="scope">
                      <div class="cell">
                        <el-input-number
                          v-model="scope.row.point"
                          controls-position="right"
                          :min="1"
                          :max="999999"
                        > </el-input-number>
                        <el-button
                          v-if="scope.$index !=0"
                          class="m-l-16"
                          @click.stop="deleteRow(scope.$index, invitedAward.point.awardStepParam)"
                          type="text"
                          size="small"
                        >
                          删除
                        </el-button>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
                <div
                  class="add-line text-center cursor-pointer"
                  @click="addPointItem"
                ><i class="el-icon-plus color-1890ff"></i><span class="color-1890ff font-14 p-l-10">添加奖项</span></div>
              </div>
            </div>
            <div
              v-if="invitedAward.point.awardMode == 3"
              class="m-t-20"
            >
              <div class="store-select-title">
                <span class="font-14 color-606266">奖励额度：</span>
                <span class="font-14 color-606266">每消费</span>
                <el-input-number
                  v-model="invitedAward.awardPerAmount"
                  controls-position="right"
                  :min="1"
                  :max="999"
                > </el-input-number>
                <span class="font-14 color-606266 p-l-3 p-r-10">元 奖励 </span>
                <el-input-number
                  v-model="invitedAward.awardPerPoint"
                  controls-position="right"
                  :min="1"
                  :max="999"
                > </el-input-number>
                <span class="font-14 color-606266">积分</span>
              </div>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item
        class="m-t-20"
        label=""
        prop=""
      >
        <div class="point-cell">
          <div class="point-cell-title flex flex-space-between">
            <div class="point-cell-name font-14 color-303133 font-w-600">卡券奖励</div>
            <div class="point-cell-switch">
              <el-switch
                v-model="invitedAward.cardSettingFlag"
                active-text=""
                inactive-text=""
              >
              </el-switch>
            </div>
          </div>
          <div
            v-if="invitedAward.cardSettingFlag"
            class="point-cell-body"
          >
            <div class="point-title-tip font-14 color-606266">该奖励仅适用于消费行为后的奖励，消费行为之前如果有送受邀人卡券的需求，请在转化路径中增加“卡券领取”环节。受邀人奖励中的卡券仅单纯作为奖励，不做转化路径的漏斗分析、活动效果分析等。</div>

            <div
              data-v-6033a8b1=""
              class="el-form-item m-t-44"
            >
              <label
                for=""
                class="el-form-item__label"
                style="width: 85px;"
              >奖励模式：</label>
              <div
                class="el-form-item__content"
                style="margin-left: 85px;"
              >
                <el-radio-group v-model="invitedAward.card.cardAwardMode">
                  <el-radio :label="0">固定奖励</el-radio>
                  <el-radio :label="1">阶梯奖励</el-radio>
                </el-radio-group>
              </div>
            </div>

            <div
              v-if="invitedAward.card.cardAwardMode == 0"
              class="m-t-20 child-select-wrap"
            >
              <div class="store-select-title">
                <span class="font-14 color-606266">选择卡券：</span>
                <el-select
                  class="w-240"
                  v-model="invitedAward.card.cardId"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in cardOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>

            <div
              v-if="invitedAward.card.cardAwardMode == 1"
              class="m-t-20 child-select-wrap"
            >
              <el-table
                :data="invitedAward.card.awardStepParam"
                style="width: 100%"
              >
                <el-table-column label="成交额">
                  <template slot-scope="scope">
                    <div class="cell">
                      <div>
                        <span class="font-14 color-606266 p-r-10">满</span>
                        <el-input-number
                          v-model="scope.row.amount"
                          controls-position="right"
                          :min="1"
                          :max="9999999999"
                        > </el-input-number>
                        <span class="font-14 color-606266 p-l-10">元</span>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="奖励卡券">
                  <template slot-scope="scope">
                    <div class="cell">
                      <el-select
                        class="w-240"
                        v-model="scope.row.cardId"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in cardOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                      <el-button
                        v-if="scope.$index !=0"
                        class="m-l-16"
                        @click.stop="deleteRow(scope.$index, invitedAward.card.awardStepParam)"
                        type="text"
                        size="small"
                      >
                        删除
                      </el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div
                class="add-line text-center cursor-pointer"
                @click="addCardItem"
              ><i class="el-icon-plus color-1890ff"></i><span class="color-1890ff font-14 p-l-10">添加奖项</span></div>
            </div>
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  name: 'invitee-reward',
  components: {

  },
  data() {
    return {
      invitedAward: {
        "pointSettingFlag": true, //积分奖励开关 1开启
        "cardSettingFlag": true, //卡券开关 1开启
        "point": {
          "awardMode": 1,//1、定额，2、阶梯，3、等比
          "awardPoint": 1,//定额奖励积分
          "awardStepParam": [
            {
              "amount": 1,
              "point": 1,
              "cardName": ""
            }
          ],
          "awardPerAmount": 0,//等比奖励中的每成交多少元
          "awardPerPoint": 0,//等比奖励中积分
          "shareFontColor": "分享按钮文字色"
        },
        "card": {
          "cardAwardMode": 0,
          "cardId": "",
          "cardName": "",
          "awardStepParam": [
            {
              "amount": 1,
              "cardId": "",
              "cardName": ""
            }
          ]
        },
        instanceContent: [
          {
            people: 10,
            point: 1
          },
          {
            minPeople: 10,
            maxPeople: 20,
            point: 1
          }
        ], //即时奖励内容（阶梯内容） 奖励内容json字符串
        awardLimitType: 1, //奖励限制类型 1、不限制奖励（推荐），2、限制奖励次数，3、限制奖励额度
        awardLimitNumber: 0, //限制奖励次数
        awardLimitPoint: 0, //限制奖励额度
        stepType: 1 //步骤类型 类型：1服务号关注，2活动营销页访问奖励，3会员认证奖励，4游戏参与奖励，5卡券领取奖励6，消费奖励
      },
      cardOptions: []
    };
  },
  methods: {
    /**
     * 表单提交
     */
    submitForm() {
      const that = this;
      that.consumeAction.storeList = that.refs.storeCard.rightList;
      that.$refs['rewardForm'].validate(valid => {
        if (valid) {
          that.consumeAction.storeList = that.refs.storeCard.rightList;
        } else {
          return false;
        }
      });
    },

    /**
     * 阶梯奖励添加奖项：
     */
    addPointItem() {
      const that = this;
      that.invitedAward.point.awardStepParam.push(
        {
          "amount": 1,
          "point": 1,
        }
      )
    },
    addCardItem() {
      const that = this;
      that.invitedAward.card.awardStepParam.push(
        {
          "amount": 1,
          "cardId": '',
        }
      )
    },
  },
  mounted() {
    const that = this;
    console.log(that.rightList);
  }
};
</script>
<style lang="less" scoped>
.w-240 {
  width: 240px;
}
.el-alert--info {
  width: 799px;
  margin-bottom: 17px;
  background: #e6f7ff;
  border: 1px solid #91d5ff;
  .el-alert__icon {
    padding-top: 5px;
    align-self: flex-start;
  }
  .el-alert__content {
    line-height: 22px;
    padding-right: 0;
  }
}
.p-l-3 {
  padding-left: 3px;
}
.p-l-10 {
  padding-left: 10px;
}
.p-r-10 {
  padding-right: 10px;
}
.m-l-10 {
  margin-left: 10px;
}
.m-l-16 {
  margin-left: 16px;
}
.m-t-44 {
  margin-top: 44px;
}
.invitee-reward {
  width: 100%;
  padding: 20px;
  background: #fff;
  .invitee-reward-title {
    margin: 0 auto;
    text-align: center;
    font-weight: 600;
    line-height: 30px;
    padding-top: 27px;
    margin-bottom: 48px;
  }
  .m-b-0 {
    margin-bottom: 0;
  }
  .m-t-48 {
    margin-top: 48px;
  }
  .m-t-50 {
    margin-top: 50px;
  }
  .invitee-reward-subtitle {
    width: 800px;
    margin: 14px auto;
    line-height: 20px;
    font-weight: 500;
    text-align: center;
  }
  .add-line {
    height: 50px;
    line-height: 50px;
    background: #fff;
    border-bottom: 1px solid #ebeef5;
  }
  .store-select-wrap {
    width: 580px;
    // height: 470px;
    margin-top: 10px;
    padding: 20px;
    background: rgba(245, 247, 250, 1);
    &.w-845 {
      width: 845px;
    }

    .el-input-number {
      width: 123px;
    }
    .store-select-body {
      margin-top: 20px;
    }
    &.child-select-wrap {
      padding-left: 20px;
      .el-input-number {
        width: 123px;
      }
    }
  }
  .point-cell {
    width: 749px;
    // min-height: 556px;
    border-radius: 4px;
    border: 1px solid rgba(220, 223, 230, 1);
    .point-cell-title {
      width: 100%;
      height: 40px;
      line-height: 40px;
      padding: 0 20px;
      background: rgba(240, 246, 255, 1);
      border-radius: 4px 4px 0px 0px;
      border-bottom: 1px solid rgba(220, 223, 230, 1);
    }
    .point-cell-body {
      width: 100%;
      padding: 20px;
      .point-title-tip {
        font-weight: 500;
        line-height: 20px;
      }
    }
  }
}
</style>
