<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-11-18 10:37:02
 * @LastEditors: 无尘
 * @LastEditTime: 2019-11-27 20:41:29
 -->
<!--
<reward-config @submitBack="submitBack" @submitNext="submitNext"></reward-config>

import rewardConfig from '@/components/active-config/reward-config.vue';
-->
<template>
  <div class="reward-config-content">
    <div class="config-title font-14 color-303133">奖励配置</div>
    <el-form
      label-width="154px"
      :model="activeInfoData"
      ref="rewardForm"
      :rules="rules"
    >
      <el-form-item
        label="奖励模式："
        prop="awardMode"
      >
        <ul class="flex">
          <template v-for="(item, index) in awardData">
            <li
              :class="['li-cell flex-1 ', activeInfoData.awardMode == item.goalId ? 'li-cell-active' : '']"
              :key="index + 'first'"
              @click="selectMode(item)"
            >
              <div class="li-cell-inner flex ">
                <div class="li-cell-left flex flex-align-center flex-pack-center">
                  <img
                    :src="activeInfoData.awardMode == item.goalId ? item.selectedIconUrl : item.iconUrl"
                    alt=""
                  />
                </div>
                <div class="li-cell-right border-box flex flex-column ">
                  <div class="li-cell-active_name flex flex-align-center  font-18 color-303133">{{ item.goalName }}</div>
                  <div class="li-cell-active_describe flex flex-align-center  font-14 color-606266">{{ item.describe }}</div>
                </div>
              </div>
              <div class="common-cell-check">
                <div class="common-cell-triangle">
                  <div class="common-cell-outer">
                    <i class="el-icon-upload-success el-icon-check"></i>
                  </div>
                </div>
              </div>
            </li>
          </template>
        </ul>
      </el-form-item>
      <el-form-item
        label="奖励方案（多选）："
        prop="dateRange"
      >
        <ul class="flex  m-t-48">
          <template v-for="(item, index) in awardTypeData">
            <li
              :class="['li-cell li-second-cell flex-1 ', activeInfoData[item.key] ? 'li-second-active' : '']"
              :key="index + 'second'"
              @click="selectModeType(item, activeInfoData)"
            >
              <div class="li-cell-inner">
                <div class="li-cell-bottom border-box">
                  <div class="li-cell-scene">
                    <div class="li-cell-scene_title font-14 color-303133">{{ item.goalName }}</div>
                    <div class="li-cell-scene_text font-14 color-606266">{{ item.describe }}</div>
                  </div>
                </div>
              </div>
              <div class="common-cell-check">
                <div class="common-cell-triangle">
                  <div class="common-cell-outer">
                    <i class="el-icon-upload-success el-icon-check"></i>
                  </div>
                </div>
              </div>
            </li>
          </template>
        </ul>
      </el-form-item>
      <el-form-item class="m-t-50">
        <el-tabs
          v-model="activeName"
          type="card"
          @tab-click="handleClick"
        >
          <el-tab-pane
            label="消费行为控制"
            name="first"
          >
            <!-- 消费行为控制 -->
            <consume-config></consume-config>
          </el-tab-pane>
          <el-tab-pane
            label="即时奖励配置"
            name="second"
          >
            <!-- 即时奖励配置 -->
            <spot-award></spot-award>
          </el-tab-pane>
          <el-tab-pane
            label="闯关奖励配置"
            name="third"
          >
            <!-- 闯关奖励配置 -->
            <entry-award></entry-award>
          </el-tab-pane>
          <el-tab-pane
            label="竞赛奖励配置"
            name="four"
          >
            <competition-award></competition-award>
            <!-- 竞赛奖励配置 -->
          </el-tab-pane>
          <el-tab-pane
            label="受邀人奖励"
            name="five"
          >
            <!-- 受邀人奖励 -->
            <invitee-reward></invitee-reward>
          </el-tab-pane>
          <el-tab-pane
            label="防欺诈风险控制"
            name="six"
          >
            <!-- 防欺诈风险控制 -->
            <fraud-control></fraud-control>
          </el-tab-pane>
        </el-tabs>
      </el-form-item>
      <el-form-item class="m-t-50">
        <ul class="active-big-class">
          <template v-for="(parentItem, ind) in ProgressiveData">
            <li
              :key="ind + 'set'"
              :class="['parent-li-cell border-box', parentItem.serviceAttentionFlag ? 'show-active-li' : '']"
            >
              <div
                class="progress-active-title flex  flex-space-between border-box"
                @click.stop="selectLi(parentItem)"
              >
                <div class="active-title-left">
                  <div class="active-title-title font-16 color-303133">{{ parentItem.title }}</div>
                  <div class="active-title-subtitle font-14 color-606266 m-t-7">{{ parentItem.subTitle }}</div>
                </div>
                <div class="active-title-right flex flex-align-center">
                  <el-switch
                    v-model="parentItem.serviceAttentionFlag"
                    active-text=""
                    inactive-text=""
                  > </el-switch>
                </div>
              </div>
              <div
                v-if="parentItem.serviceAttentionFlag"
                class="set-body"
              >
                <div
                  data-v-6033a8b1=""
                  class="el-form-item m-t-44"
                >
                  <label
                    for=""
                    class="el-form-item__label"
                    style="width: 115px;"
                  >奖励模式：</label>
                  <div
                    class="el-form-item__content"
                    style="margin-left: 115px;"
                  >
                    <ul class="flex  m-t-48">
                      <template v-for="(item, index) in awardTypeData">
                        <li
                          :class="['li-cell li-second-cell flex-1 ', parentItem[item.key] ? 'li-second-active' : '']"
                          :key="index + 'second'"
                          @click="selectModeType(item, parentItem)"
                        >
                          <div class="li-cell-inner">
                            <div class="li-cell-bottom border-box">
                              <div class="li-cell-scene">
                                <div class="li-cell-scene_title font-14 color-303133">{{ item.goalName }}</div>
                                <div class="li-cell-scene_text font-14 color-606266">{{ item.describe }}</div>
                              </div>
                            </div>
                          </div>
                          <div class="common-cell-check">
                            <div class="common-cell-triangle">
                              <div class="common-cell-outer">
                                <i class="el-icon-upload-success el-icon-check"></i>
                              </div>
                            </div>
                          </div>
                        </li>
                      </template>
                    </ul>
                  </div>
                </div>
                <el-tabs
                  class="m-t-30"
                  v-model="parentItem.activeName"
                  type="card"
                  @tab-click="handleClick"
                >
                  <el-tab-pane
                    label="消费行为控制"
                    name="first"
                  >
                    <!-- 消费行为控制 -->
                    <consume-config></consume-config>
                  </el-tab-pane>
                  <el-tab-pane
                    label="即时奖励配置"
                    name="second"
                  >
                    <!-- 即时奖励配置 -->
                    <spot-award></spot-award>
                  </el-tab-pane>
                  <el-tab-pane
                    label="闯关奖励配置"
                    name="third"
                  >
                    <!-- 闯关奖励配置 -->
                    <entry-award></entry-award>
                  </el-tab-pane>
                  <el-tab-pane
                    label="竞赛奖励配置"
                    name="four"
                  >
                    <competition-award></competition-award>
                    <!-- 竞赛奖励配置 -->
                  </el-tab-pane>
                  <el-tab-pane
                    label="受邀人奖励"
                    name="five"
                  >
                    <!-- 受邀人奖励 -->
                    <invitee-reward></invitee-reward>
                  </el-tab-pane>
                  <el-tab-pane
                    label="防欺诈风险控制"
                    name="six"
                  >
                    <!-- 防欺诈风险控制 -->
                    <fraud-control></fraud-control>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </li>
          </template>
        </ul>
      </el-form-item>
      <el-form-item class="m-t-50">
        <el-button
          type="primary"
          @click="submitBack"
        >上一步</el-button>
        <el-button
          type="primary"
          @click="submitForm('rewardForm')"
        >确认新建</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
/* eslint-disable */
import consumeConfig from '@/components/active-config/configs/consume-config.vue';
import spotAward from '@/components/active-config/configs/spot-award.vue';
import entryAward from '@/components/active-config/configs/entry-award.vue';
import competitionAward from '@/components/active-config/configs/competition-award.vue';
import inviteeReward from '@/components/active-config/configs/invitee-reward.vue';
import fraudControl from '@/components/active-config/configs/fraud-control.vue';
import { _debounce } from '@/common/js/public';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';

import { getRequest, postJson } from '@/api/api';
export default {
  name: 'reward-config',
  props: {},
  components: {
    consumeConfig,
    spotAward,
    entryAward,
    competitionAward,
    inviteeReward,
    fraudControl
  },
  data() {
    return {
      activeInfoData: {
        activityId: '',
        awardMode: '',
        instantAwardFlag: 0, // 即时
        passAwardFlag: 0, // 闯关
        competitionAwardFlag: 0, // 竞赛
        dateRange: []
      },
      rules: {
        awardMode: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        dateRange: [{ required: true, message: '请选择活动有效期', trigger: 'blur' }]
      },
      awardData: [
        {
          goalId: 1,
          selectedIconUrl: require('../../assets/images/jl-pre.png'),
          iconUrl: require('../../assets/images/jl.png'),
          goalName: '单次奖励（推荐）',
          describe: '无论活动的转化路径分多少步，只有当受邀人完成了最后一步的行为，邀请人才能得到奖励。',
          check: false
        },
        {
          goalId: 2,
          selectedIconUrl: require('../../assets/images/lc-pre.png'),
          iconUrl: require('../../assets/images/lc.png'),
          goalName: '渐进式奖励',
          describe: '可以对转化路径当中的每一步单独配置奖励信息，即可以将转化路径理解为漏斗模型，邀请人可以分层获得奖励。'
        }
      ],
      awardTypeData: [
        {
          goalId: 1,
          key: 'instantAwardFlag',
          goalName: '即时奖励（推荐）',
          describe: '当受邀人满足完成了相关的行为，即时发放邀请人或受邀人的奖励。',
          check: false
        },
        {
          goalId: 2,
          key: 'passAwardFlag',
          goalName: '闯关奖励',
          describe: '满足相关行为的受邀人数量满足条件后，邀请人即可领取相关奖励，可设置难度逐级递增的多个阶段目标。',
          check: false
        },
        {
          goalId: 3,
          key: 'competitionAwardFlag',
          goalName: '竞赛奖励',
          describe: '活动结束后进行统一排名结算和奖励发放的模式，奖项信息可自定义设置。',
          check: false
        }
      ],
      // el-tabs
      activeName: 'first',
      ProgressiveData: [
        {
          activeName: 'first', // tab,
          serviceAttentionFlag: true,
          title: '服务号关注奖励',
          subTitle: '当受邀人成功关注了服务号之后触发的奖励，开启后可配置相关奖励内容，若该行为无奖励则保持关闭状态即可。',
          instantAwardFlag: 0, // 即时
          passAwardFlag: 0, // 闯关
          competitionAwardFlag: 0 // 竞赛
        },
        {
          activeName: 'first',
          serviceAttentionFlag: true,
          title: '活动营销页访问奖励',
          subTitle: '当受邀人成功访问了指定活动营销页之后触发的奖励，开启后可配置相关奖励内容，若该行为无奖励则保持关闭状态即可。',
          instantAwardFlag: 0, // 即时
          passAwardFlag: 0, // 闯关
          competitionAwardFlag: 0 // 竞赛
        }
      ]
    };
  },
  methods: {
    /**
     * 选择模式
     */
    selectMode(item) {
      const that = this;
      that.activeInfoData.awardMode = item.goalId;
    },
    selectModeType(item, pItem) {
      const that = this;
      pItem[item.key] = pItem[item.key] ? 0 : 1;
    },
    /**
     * 选择tab
     */
    handleClick(tab, event) {
      console.log(tab, event);
    },
    /**
     * 上一步
     */
    submitBack() {
      const that = this;
      that.$store.dispatch('saveRewardInfo', that.activeInfoData);
      that.$emit('submitBack');
    },
    /**
     * 下一步
     */
    submitForm: _debounce(function(formName) {
      const that = this;

      that.$refs[formName].validate(valid => {
        if (valid) {
          that.$store.dispatch('clearActiveData');
        } else {
          return false;
        }
      });
    }, 500),
    postSave() {
      const that = this;
      let para = {
        activityId: that.activeInfoData.activityId,
        palyBillUrl: that.activeInfoData.palyBillUrl,
        templateType: that.activeInfoData.templateType,
        qrcodeBackColor: that.activeInfoData.qrcodeBackColor,
        qrcodeFrontColor: that.activeInfoData.qrcodeFrontColor,
        qrcodePadding: that.activeInfoData.qrcodePadding
      };
      // 最后需要中心组装数据， [{}] json数组形式传递
      postJson('/sharing-core-web/edit-activity-award', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            showMsg.showmsg('活动创建成功', 'success');
            that.$store.dispatch('clearActiveData');
            return;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 获取活动中心数据
     */
    getData(activityId) {
      const that = this;
      let para = {
        activityId: activityId || that.$route.query.activityId
      };
      getRequest('/sharing-core-web/get-activity-award', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.activeInfoData = resData.result;
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  mounted() {
    const that = this;
    if (that.$route.query.hasOwnProperty('activityId')) {
      that.getData();
    }
    if (Object.keys(that.$store.state.baseInfo).length) {
      that.activeInfoData.activityId = JSON.parse(JSON.stringify(that.$store.state.baseInfo)).activityId;
    }
    if (Object.keys(that.$store.state.rewardInfo).length) {
      that.activeInfoData = JSON.parse(JSON.stringify(that.$store.state.rewardInfo));
    }
  }
};
</script>
<style lang="less" scoped>
.reward-config-content {
  padding: 48px 0 0 0;
  .config-title {
    font-weight: 600;
    margin-bottom: 30px;
  }
  .m-t-30 {
    margin-top: 30px;
  }
  .m-t-50 {
    margin-top: 50px;
  }
  .el-form-item {
    /deep/ .el-form-item__label {
      color: #606266;
    }
  }
  ul {
    .li-cell {
      position: relative;
      width: 362px;
      height: 124px;
      background: rgba(255, 255, 255, 1);
      border-radius: 4px;
      border: 1px solid rgba(220, 223, 230, 1);
      margin-left: 10px;
      cursor: pointer;
      max-width: 30%;
      &:first-child {
        margin-left: 0;
      }
      .li-cell-inner {
        border-radius: 4px;
        width: 100%;
        height: 100%;
        .li-cell-left {
          height: 100%;
          padding-left: 30px;
          img {
            max-width: 66px;
            max-height: 66px;
          }
        }
        .li-cell-right {
          height: 100%;
          padding: 16px 36px;
          .li-cell-active_name {
            font-weight: 600;
            line-height: 25px;
          }
          .li-cell-active_describe {
            height: 60px;
            margin-top: 10px;
            font-weight: 500;
            line-height: 20px;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3; //规定几行显示省略号
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
        }
      }
      .common-cell-check {
        display: none;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 22px;
        height: 22px;
        z-index: 1;
        .common-cell-triangle {
          position: relative;
          width: 100%;
          height: 100%;
          overflow: hidden;
          .common-cell-outer {
            position: absolute;
            right: -16px;
            bottom: -6px;
            width: 32px;
            height: 20px;
            background: #fff;
            text-align: center;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            transform: rotate(-45deg);

            i {
              position: absolute;
              top: 0px;
              left: 7px;
              font-size: 12px;
              color: #1890ff;
              -webkit-transform: rotate(45deg);
              -moz-transform: rotate(45deg);
              transform: rotate(45deg);
            }
          }
        }
      }
      &.li-cell-active {
        background: linear-gradient(63deg, #357bdf 0%, #72b4fb 100%);
        box-shadow: 0px 2px 10px 0px rgba(58, 127, 178, 0.5);
        border-radius: 4px;
        border: none;
        .li-cell-inner {
          .li-cell-right {
            .li-cell-active_name {
              color: #fff;
            }
            .li-cell-active_describe {
              color: #fff;
            }
          }
        }
        .common-cell-check {
          display: block;
          .common-cell-triangle {
            border-bottom-right-radius: 4px;
          }
        }
      }
      /* 二级 */
      &.li-second-cell {
        max-width: 234px;
        height: 141px;
        padding: 20px;
        .li-cell-inner {
          .li-cell-bottom {
            height: 60px;
            background: #fff;
            border-radius: 0 0 4px 4px;
            .li-cell-scene {
              .li-cell-scene_title {
                font-weight: 600;
                line-height: 20px;
              }
              .li-cell-scene_text {
                margin-top: 10px;
                font-weight: 500;
                line-height: 20px;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 4; //规定几行显示省略号
                -webkit-box-orient: vertical;
                overflow: hidden;
              }
            }
          }
        }
        .common-cell-check {
          .common-cell-triangle {
            .common-cell-outer {
              background: #1890ff;
              i {
                color: #fff;
              }
            }
          }
        }
      }
      &.li-second-active {
        border-radius: 4px;
        border: 2px solid rgba(24, 144, 255, 1);
        box-shadow: 0px 6px 8px 0px rgba(166, 181, 199, 0.34);
        .common-cell-check {
          display: block;
          .common-cell-triangle {
            border-bottom-right-radius: 1px;
          }
        }
      }
    }
  }

  .active-big-class {
    width: 1200px;
    .progress-active-title {
      width: 100%;
      padding: 0 20px;
      height: 70px;

      .active-title-left {
        padding-top: 12px;
      }
      .active-title-title {
        font-weight: 600;
        line-height: 22px;
      }
      .active-title-subtitle {
        font-weight: 500;
        line-height: 20px;
      }
    }
    .parent-li-cell {
      border-bottom: 1px solid rgba(220, 223, 230, 1);
      &:first-child {
        border-top: 1px solid rgba(220, 223, 230, 1);
      }
      .set-body {
        padding: 15px 20px 0 20px;
      }

      &.show-active-li {
        box-shadow: 0px 1px 8px 0px rgba(170, 170, 170, 0.32);
        border: 1px solid rgba(220, 223, 230, 1);
        background: #fff;
        &:not(:first-child) {
          border-top: none;
        }
        .progress-active-title {
          background: rgba(243, 246, 249, 1);
        }
      }
    }
  }
}
</style>
