<!--
 * @Descripttion: 当前组件信息-即时奖励设置
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-11-21 16:37:02
 * @LastEditors: 无尘
 * @LastEditTime: 2019-12-15 14:29:16
 -->
<!--
<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
                :disabled="$route.query.editFlag"
                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.pointAwardMode"
                  :disabled="$route.query.editFlag"
                >
                  <el-radio :label="1">定额奖励</el-radio>
                  <el-radio
                    v-if="basePath.map(ele => ele.transName).includes('消费') && invitedAward.stepType == 6"
                    :label="2"
                  >阶梯奖励</el-radio>
                  <el-radio
                    v-if="basePath.map(ele => ele.transName).includes('消费') && invitedAward.stepType == 6"
                    :label="3"
                  >成交额等比奖励</el-radio>
                </el-radio-group>
              </div>
            </div>
            <div
              v-if="invitedAward.pointAwardMode == 1"
              class="m-t-20"
            >
              <div class="store-select-title">
                <span class="font-14 color-606266">奖励额度：</span>
                <el-input-number
                  :disabled="$route.query.editFlag"
                  v-model="invitedAward.pointAwardPoint"
                  controls-position="right"
                  :step="1"
                  :step-strictly="true"
                  :min="1"
                  :max="999999"
                > </el-input-number>
                <span class="font-14 color-606266">积分</span>
              </div>
            </div>
            <div
              v-if="invitedAward.pointAwardMode == 2"
              class="m-t-20 w-845"
            >
              <div class="store-select-title">
                <el-table
                  :data="invitedAward.pointAwardStepParam"
                  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
                            :disabled="$route.query.editFlag"
                            v-model="scope.row.amount"
                            controls-position="right"
                            :step="1"
                            :step-strictly="true"
                            :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
                          :disabled="$route.query.editFlag"
                          v-model="scope.row.point"
                          controls-position="right"
                          :step="1"
                          :step-strictly="true"
                          :min="1"
                          :max="999999"
                        > </el-input-number>
                        <el-button
                          :disabled="$route.query.editFlag"
                          v-if="scope.$index != 0"
                          class="m-l-16"
                          @click.stop="deleteRow(scope.$index, invitedAward.pointAwardStepParam)"
                          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.pointAwardMode == 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
                  :disabled="$route.query.editFlag"
                  v-model="invitedAward.pointAwardPerAmount"
                  controls-position="right"
                  :step="1"
                  :step-strictly="true"
                  :min="1"
                  :max="999"
                > </el-input-number>
                <span class="font-14 color-606266 p-l-3 p-r-10">元 奖励 </span>
                <el-input-number
                  :disabled="$route.query.editFlag"
                  v-model="invitedAward.pointAwardPerPoint"
                  controls-position="right"
                  :step="1"
                  :step-strictly="true"
                  :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
                :disabled="$route.query.editFlag"
                v-model="invitedAward.cardSettingFlag"
                active-text=""
                inactive-text=""
              > </el-switch>
            </div>
          </div>
          <div
            v-if="invitedAward.cardSettingFlag"
            class="point-cell-body"
          >
            <div
              v-if="invitedAward.stepType == 6"
              class="point-title-tip font-14 color-606266"
            >该奖励仅适用于消费行为后的奖励，消费行为之前如果有送受邀人卡券的需求，请在转化路径中增加“卡券领取”环节。受邀人奖励中的卡券仅单纯作为奖励，不做转化路径的漏斗分析、活动效果分析等。</div>
            <div
              v-if="invitedAward.stepType != 6"
              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.cardAwardMode"
                  :disabled="$route.query.editFlag"
                >
                  <el-radio :label="1">固定奖励</el-radio>
                  <el-radio
                    v-if="basePath.map(ele => ele.transName).includes('消费') && invitedAward.stepType == 6"
                    :label="2"
                  >阶梯奖励</el-radio>
                </el-radio-group>
              </div>
            </div>

            <div
              v-if="invitedAward.cardAwardMode == 1"
              class="m-t-20 child-select-wrap"
            >
              <div class="store-select-title">
                <span class="font-14 color-606266">选择卡券：</span>
                <el-select
                  :disabled="$route.query.editFlag"
                  class="w-240"
                  v-model="invitedAward.cardId"
                  placeholder="请选择"
                  @change="changeSingleCard($event)"
                >
                  <el-option
                    v-for="item in cardList"
                    :key="item.coupCardId"
                    :label="item.cardName"
                    :value="item.coupCardId"
                  > </el-option>
                </el-select>
              </div>
            </div>

            <div
              v-if="invitedAward.cardAwardMode == 2"
              class="m-t-20 child-select-wrap"
            >
              <el-table
                :data="invitedAward.cardAwardStepParam"
                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
                          :disabled="$route.query.editFlag"
                          v-model="scope.row.amount"
                          controls-position="right"
                          :step="1"
                          :step-strictly="true"
                          :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
                        :disabled="$route.query.editFlag"
                        class="w-240"
                        v-model="scope.row.cardId"
                        placeholder="请选择"
                        @change="changeCard($event, scope.row)"
                      >
                        <el-option
                          v-for="item in cardList"
                          :key="item.coupCardId"
                          :label="item.cardName"
                          :value="item.coupCardId"
                        > </el-option>
                      </el-select>
                      <el-button
                        v-if="scope.$index != 0"
                        class="m-l-16"
                        :disabled="$route.query.editFlag"
                        @click.stop="deleteRow(scope.$index, invitedAward.cardAwardStepParam)"
                        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>
import errMsg from '@/common/js/error';
import { getRequest } from '@/api/api';
export default {
  name: 'invitee-reward',
  props: {
    value: {
      type: [Object, Array],
      default() {
        return {
          pointSettingFlag: true, //积分奖励开关 1开启
          cardSettingFlag: false, //卡券开关 1开启
          pointAwardMode: 1, //1、定额，2、阶梯，3、等比
          pointAwardPoint: 1, //定额奖励积分
          pointAwardStepParam: [
            {
              amount: 1,
              point: 1
            }
          ],
          pointAwardPerAmount: 1, //等比奖励中的每成交多少元
          pointAwardPerPoint: 1, //等比奖励中积分
          cardAwardMode: 1,
          cardId: '',
          cardName: '',
          cardAwardStepParam: [
            {
              amount: 1,
              cardId: '',
              cardName: ''
            }
          ],
          "stepType": 1 //步骤类型 类型：1服务号关注，2活动营销页访问奖励，3会员认证奖励，4游戏参与奖励，5卡券领取奖励6，消费奖励
        };
      }
    }
  },
  components: {},
  data() {
    return {
      basePath: [],
      invitedAward: {
        pointSettingFlag: true, //积分奖励开关 1开启
        cardSettingFlag: false, //卡券开关 1开启
        pointAwardMode: 1, //1、定额，2、阶梯，3、等比
        pointAwardPoint: 1, //定额奖励积分
        pointAwardStepParam: [
          {
            amount: 1,
            point: 1
          }
        ],
        pointAwardPerAmount: 1, //等比奖励中的每成交多少元
        pointAwardPerPoint: 1, //等比奖励中积分
        cardAwardMode: 1,
        cardId: '',
        cardName: '',
        cardAwardStepParam: [
          {
            amount: 1,
            cardId: '',
            cardName: ''
          }
        ],
        stepType: 1 //步骤类型 类型：1服务号关注，2活动营销页访问奖励，3会员认证奖励，4游戏参与奖励，5卡券领取奖励6，消费奖励
      },
      cardList: []
    };
  },
  methods: {
    /**
     * 表单提交
     */
    submitForm() {
      const that = this;
      return new Promise(function(resolve, reject) {
        that.$refs['rewardForm'].validate(valid => {
          if (valid) {
            that.$emit('input', that.invitedAward);
            /*  if (!that.invitedAward.pointSettingFlag && !that.invitedAward.cardSettingFlag){
              resolve(false);
            } */
            if (that.invitedAward.pointSettingFlag && that.invitedAward.pointAwardMode == 1 && !that.invitedAward.pointAwardPoint) {
              resolve(false);
            }
            if (that.invitedAward.pointSettingFlag && that.invitedAward.pointAwardMode == 3 && (!that.invitedAward.pointAwardPerAmount|| !that.invitedAward.pointAwardPerPoint)) {
              resolve(false);
            }
            if (that.invitedAward.pointSettingFlag && that.invitedAward.pointAwardMode == 2 && !that.invitedAward.pointAwardStepParam.length) {
              resolve(false);
            }
            if (that.invitedAward.pointSettingFlag && that.invitedAward.pointAwardMode == 2 && that.invitedAward.pointAwardStepParam.length) {
              let flag = true;
              that.invitedAward.pointAwardStepParam.forEach(ele => {
                if (!ele.amount || !ele.point) {
                  flag = false;
                }
              });
              if (!flag) {
                resolve(false);
              }
            }
            if (that.invitedAward.pointSettingFlag && that.invitedAward.pointAwardMode == 2 && that.invitedAward.pointAwardStepParam.length>1) {
              let flag = true
              const arr = [];
              that.invitedAward.pointAwardStepParam.forEach(ele => {
                arr.push(ele.amount);
              });

              for(let i = 0; i<arr.length-1; i++) {
                for(let j = i+1; j<arr.length; j++){
                  if(arr[i]>=arr[j]){
                    flag = false;
                    break;
                  }
                }
                if (!flag) {
                  break;
                }
              }
              if (!flag) {
                resolve(false);
              }
            }
            if (that.invitedAward.cardSettingFlag && that.invitedAward.cardAwardMode == 1 && !that.invitedAward.cardId) {
              resolve(false);
            }
            if (that.invitedAward.cardSettingFlag && that.invitedAward.cardAwardMode == 2 && !that.invitedAward.cardAwardStepParam.length) {
              resolve(false);
            }
            if (that.invitedAward.cardSettingFlag && that.invitedAward.cardAwardMode == 2 && that.invitedAward.cardAwardStepParam.length) {
              let flag = true;
              that.invitedAward.cardAwardStepParam.forEach(ele => {
                if (!ele.amount||!ele.cardId) {
                  flag = false;
                }
              });
              if (!flag) {
                resolve(false);
              }
            }
            if (that.invitedAward.cardSettingFlag && that.invitedAward.cardAwardMode == 2 && that.invitedAward.cardAwardStepParam.length>1) {
              let flag = true
              const arr = [];
              that.invitedAward.cardAwardStepParam.forEach(ele => {
                arr.push(ele.amount);
                if (!ele.cardId) {
                  flag = false;
                }
              });
              for(let i = 0; i<arr.length-1; i++) {
                for(let j = i+1; j<arr.length; j++){
                  if(arr[i]>=arr[j]){
                    flag = false;
                    break;
                  }
                }
                if (!flag) {
                  break;
                }
              }
              if (!flag) {
                resolve(false);
              }
            }
            resolve(that.invitedAward);
          } else {
            resolve(false);
          }
        });
      });
    },
    /**
     * 删除：
     */
    deleteRow(index, arr) {
      const that = this;
      if (that.$route.query.hasOwnProperty('editFlag')) {
        return false;
      }
      arr.splice(index, 1);
    },
    /**
     * 阶梯奖励添加奖项：
     */
    addPointItem() {
      const that = this;
      if (that.$route.query.hasOwnProperty('editFlag')) {
        return false;
      }
      that.invitedAward.pointAwardStepParam.push({
        amount: 1,
        point: 1
      });
    },
    addCardItem() {
      const that = this;
      if (that.$route.query.hasOwnProperty('editFlag')) {
        return false;
      }
      that.invitedAward.cardAwardStepParam.push({
        amount: 1,
        cardId: '',
        cardName: ''
      });
    },
    /**
     * 获取卡券列表
     */
    getCardList() {
      const that = this;
      let para = {};
      getRequest('/sharing-core-web/list-card', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.cardList = resData.result || [];
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 选择卡券
     */
    changeSingleCard(e) {
      const that = this;
      that.cardList.forEach(ele => {
        if (ele.coupCardId == e) {
          that.invitedAward.cardName = ele.cardName;
        }
      });
    },
    changeCard(e, row) {
      const that = this;
      that.cardList.forEach(ele => {
        if (ele.coupCardId == e) {
          row.cardName = ele.cardName;
        }
      });
    }
  },
  watch: {
    value(newData) {
      const that = this;
      that.invitedAward = JSON.parse(JSON.stringify(newData));
    }
  },
  mounted() {
    const that = this;
    that.getCardList();
    that.invitedAward = JSON.parse(JSON.stringify(that.value));
    if (Object.keys(that.$store.state.baseInfo).length) {
      that.basePath = JSON.parse(JSON.stringify(that.$store.state.baseInfo)).router;
    }
  }
};
</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>
