<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-11-13 16:37:02
 * @LastEditors: 无尘
 * @LastEditTime: 2019-11-20 14:18:23
 -->
<!--
<active-select></active-select>

import activeSelect from '@/components/active/active-select.vue';
-->

<template>
  <div class="active-select border-box">
    <div class="active-select-title font-22 color-303133 font-w-600">请选择您的活动目的</div>
    <ul class="flex flex-space-between">
      <template v-for="(item, index) in firstData">
        <li :class="['li-cell flex-1 ', firstGoalId == item.goalId ? 'li-cell-active' : '']" :key="index + 'first'" @click="selectFirst(item)">
          <div class="li-cell-inner flex ">
            <div class="li-cell-left flex flex-align-center flex-pack-center">
              <img :src="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>
    <div class="active-select-next"></div>
    <div class="active-select-title font-22 color-303133 font-w-600">请进一步明确活动目的</div>
    <ul class="flex  flex-pack-center m-t-48">
      <template v-for="(item, index) in secondData">
        <li :class="['li-cell li-second-cell flex-1 ', secondGoalId == item.goalId ? 'li-second-active' : '']" :key="index + 'second'" @click="selectSecond(item)">
          <div class="li-cell-inner">
            <div class="li-cell-top border-box flex flex-align-center flex-pack-center">
              <img src="" alt="" /><span class="p-l-15 font-18 color-303133">{{ item.goalName }}</span>
            </div>
            <div class="li-cell-bottom border-box">
              <div class="li-cell-scene">
                <div class="li-cell-scene_title font-14 color-303133">适用场景</div>
                <div class="li-cell-scene_text font-14 color-606266">{{ item.describe['适用场景'] }}</div>
              </div>
              <div class="li-cell-quality">
                <div class="li-cell-quality_title font-14 color-303133">优劣分析</div>
                <div class="li-cell-quality_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 class="active-select-next"></div>
    <div class="active-select-title font-22 color-303133 font-w-600 m-b-0">请配置受邀人的转化路径</div>
    <div class="active-select-subtitle font-14 color-606266">基于您的活动设计期望，配置受邀人的转化路径（即受邀人需要经历的交互步骤）。系统会根据您所选择的转化路径，自动配置服务号关注后回复、认证后卡券投放等营销脚本。您只需要根据自身需求选择路径，并选择相关的营销活动页、游戏计划或卡券。</div>
    <ul class="flex  flex-pack-center m-t-50">
      <template v-for="(item, index) in thirdData">
        <li :class="['li-cell li-third-cell flex-1 ', item.check ? 'li-third-active' : '', 'li-third-active-disable']" :key="index + 'third'" @click="selectThird(item)">
          <div class="li-cell-inner border-box">
            <div class="li-cell-path_img flex flex-pack-center flex-pack--center">
              <img src="" alt="" />
            </div>
            <div class="li-cell-path_title font-16 color-303133 text-center">{{ item.name }}</div>
            <div class="li-cell-path_text font-14 color-606266">{{ item.describe }}</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 class="active-select-next"></div>
    <div class="active-select-title font-22 color-303133 font-w-600 m-b-0">活动创建前准备工作</div>
    <div class="active-select-subtitle font-14 color-606266">根据您配置的转化路径，请确保完成以下工作，否则活动无法被正常执行。</div>
    <ul class="flex flex-pack-center m-t-50">
      <template v-for="(item, index) in fourData">
        <li class="li-four-cell flex-1 " :key="index + 'four'">
          <div class="li-cell-inner border-box">
            <div class="li-cell-title font-18 color-303133 font-w-600">{{ item.name }}</div>
            <div class="li-cell-subtitle font-14 color-606266">{{ item.describe }}</div>
            <div class="li-cell-tip font-14 color-303133">如果您还没有创建活动营销页，请立即前往创建。</div>
            <div class="li-cell-select">
              <el-select size="large" v-model="value" :placeholder="item.placeholder">
                <el-option v-for="item in markingList" :key="item.value" :label="item.label" :value="item.value"> </el-option>
              </el-select>
            </div>
            <div class="li-cell-seperator">OR</div>
            <div class="li-cell-btn">
              <el-button type="primary" plain @click="toRedirectPage(item)">立即前往创建</el-button>
            </div>
          </div>
        </li>
      </template>
    </ul>
    <div class="to-active-config">
      <div class="to-active-tip font-14 color-606266">确认完成了所有前期准备工作，即可前往活动配置。</div>
      <div class="to-active-btn">
        <el-button type="primary" @click="toCreate">前往活动配置<i class="el-icon-right"></i></el-button>
      </div>
    </div>
  </div>
</template>
<script>
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import { getRequest } from '@/api/api';
export default {
  name: 'active-select',
  data() {
    return {
      firstGoalId: '',
      firstData: [
        {
          goalId: 1,
          iconUrl: '',
          goalName: '品牌传播',
          describe: '主要以推广品牌服务号和品牌会员为目的，旨在和更多潜在消费者或老客加强品牌互动。',
          check: false
        },
        {
          goalId: 2,
          iconUrl: '',
          goalName: '活动宣传',
          describe: '有明确的活动主题，以提升活动的曝光范围和强度为核心目的，让更多受众能够了解和参与活动。',
          check: false
        },
        {
          goalId: 3,
          iconUrl: '',
          goalName: '分销推广',
          describe: '以产生成交转化作为活动的最终目的，通过分销（分享裂变）的方式，用存量老客带动新客，从而赢得销售增量。',
          check: false
        }
      ],
      secondGoalId: '',
      secondData: [
        {
          goalId: 1,
          iconUrl: '',
          goalName: '活动曝光',
          describe: { 适用场景: '针对线上营销且在线上（微信商城）完成消费的场景，即常规意义上的分销模式。', 优劣分析: '成交更便捷，转化路径通畅，但对尚未建立足够品牌认知的客户而言，微信商城的信赖度略显不足。' },
          check: false
        }
      ],
      thirdData: [
        {
          id: 1,
          name: '关注服务号',
          describe: '受邀人通过带服务号二维码的海报，关注并进入服务号对框框。',
          check: false
        }
      ],
      fourData: [
        {
          id: 1,
          name: '活动营销页',
          placeholder: '请选择活动着陆页',
          describe: '受邀人关注服务号后，系统将自动推送活动营销页的小程序卡片，请选择具体的活动营销页以协助系统完成自动回复配置。',
          check: false
        },
        {
          id: 2,
          name: '游戏计划',
          placeholder: '请选择游戏计划',
          describe: '系统将自动生成游戏页面的小程序或二维码海报，请选择具体的游戏计划以协助系统完成配置。',
          check: false
        },
        {
          id: 3,
          name: '卡券配置',
          placeholder: '请选择卡券',
          describe: '受邀人完成会员认证后可获得卡券，请选择具体的卡券以协助系统完成认证后自动推送配置。',
          check: false
        }
      ],
      // 三个卡片
      markingList: [],
      gameList: [],
      cardList: []
    };
  },
  methods: {
    /**
     * 选择一级
     */
    selectFirst(item) {
      const that = this;
      that.firstGoalId = item.goalId;
    },
    /**
     * 选择二级
     */
    selectSecond(item) {
      const that = this;
      that.secondGoalId = item.goalId;
    },
    /**
     * 选择三级
     */
    selectThird(item) {
      // const that = this;
      item.check = item.check ? false : true;
    },
    /**
     * 跳转卡片创建页
     */
    toRedirectPage(item) {
      if (item.id == 1) {
        window.open(`/gic-web/custom`);
      } else if (item.id == 2) {
        window.open(`/marketing/game/dzp`);
      } else {
        window.open(`marketing/card/list`);
      }
    },
    /**
     * 前往创建
     */
    toCreate() {
      const that = this;
      // 需要判断一级二级三级四级后，再判断能不能创建
      if (!that.firstGoalId) {
        showMsg.showmsg('请先选择活动目的', 'warning');
        return false;
      }
      if (!that.secondGoalId) {
        showMsg.showmsg('请先完善活动目的', 'warning');
        return false;
      }
      that.judgeCreate();
    },
    /**
     * 获取一级二级数据
     */
    getTwoList() {
      const that = this;
      let para = {};
      getRequest('/sharing-core-web/load-activity-dict', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.firstData = resData.result.result || [];
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 获取活动营销页
     */
    getMarkingList() {
      const that = this;
      let para = {};
      getRequest('/sharing-core-web/load-marking-page', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.markingList = resData.result.result || [];
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 获取游戏
     */
    getGameList() {
      const that = this;
      let para = {};
      getRequest('/sharing-core-web/load-game-page', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.gameList = resData.result.result || [];
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 获取卡券列表
     */
    getCardList() {
      const that = this;
      let para = {};
      getRequest('/sharing-core-web/load-card', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.cardList = resData.result.result || [];
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     *   是否可以创建活动
     */
    judgeCreate() {
      const that = this;
      let para = {};
      getRequest('/sharing-core-web/can-create', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.$router.push('/createActive');
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  }
};
</script>
<style lang="less" scoped>
.active-select {
  width: 100%;
  padding: 20px;
  background: #fff;
  .active-select-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;
  }
  .active-select-subtitle {
    width: 800px;
    margin: 14px auto;
    line-height: 20px;
    font-weight: 500;
    text-align: center;
  }
  .active-select-next {
    height: 15px;
    margin: 48px 0 46px 0;
    background: url(../../assets/images/step-arrow.png) no-repeat center center;
  }
  ul {
    .li-cell {
      position: relative;
      width: 427px;
      height: 131px;
      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 {
            margin-top: 13px;
            font-weight: 500;
            line-height: 20px;
          }
        }
      }
      .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: #2689f2;
              -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 {
        height: 311px;
        border: none;
        .li-cell-inner {
          .li-cell-top {
            height: 84px;
            background: rgba(240, 246, 255, 1);
            border-radius: 4px 4px 0px 0px;
            border: 1px solid rgba(220, 223, 230, 1);
          }
          .li-cell-bottom {
            padding: 20px;
            height: 227px;
            background: #fff;
            border-radius: 0 0 4px 4px;
            border: 1px solid rgba(220, 223, 230, 1);
            border-top: none;
            .li-cell-scene {
              .li-cell-scene_title {
                font-weight: 600;
                line-height: 20px;
              }
              .li-cell-scene_text {
                margin-top: 14px;
                font-weight: 500;
                line-height: 20px;
              }
            }
            .li-cell-quality {
              margin-top: 33px;
              .li-cell-quality_title {
                font-weight: 600;
                line-height: 20px;
              }
              .li-cell-quality_text {
                margin-top: 14px;
                font-weight: 500;
                line-height: 20px;
              }
            }
          }
        }
        .common-cell-check {
          .common-cell-triangle {
            .common-cell-outer {
              background: #1890ff;
              i {
                color: #fff;
              }
            }
          }
        }
      }
      &.li-second-active {
        border-radius: 4px;
        box-shadow: 0px 6px 8px 0px rgba(166, 181, 199, 0.34);

        .li-cell-inner {
          .li-cell-top {
            background: linear-gradient(63deg, #357bdf 0%, #72b4fb 100%);
            border: none;
            span {
              color: #fff;
            }
          }
          .li-cell-bottom {
            border: 1px solid rgba(38, 137, 242, 1);
            border-top: none;
            border-radius: 0 0 4px 4px;
          }
        }
        .common-cell-check {
          display: block;
          .common-cell-triangle {
            border-bottom-right-radius: 4px;
          }
        }
      }
      &.li-third-cell {
        width: 208px;
        max-width: 208px;
        height: 186px;
        background: rgba(255, 255, 255, 1);
        border-radius: 4px;
        border: 1px solid rgba(220, 223, 230, 1);
        .li-cell-inner {
          padding: 20px 15px;
          .li-cell-path_img {
            width: 35px;
            height: 35px;
            margin: 0 auto;
            img {
              max-width: 35px;
              max-height: 35px;
            }
          }
          .li-cell-path_title {
            margin-top: 13px;
            font-weight: 600;
            line-height: 22px;
          }
          .li-cell-path_text {
            margin-top: 15px;
            font-weight: 500;
            line-height: 20px;
          }
        }
        .common-cell-check {
          width: 30px;
          height: 30px;
          .common-cell-triangle {
            .common-cell-outer {
              width: 50px;
              background: #1890ff;
              i {
                left: 20px;
                color: #fff;
                font-size: 17px;
              }
            }
          }
        }
      }
      &.li-third-active {
        border-radius: 4px;
        border: 2px solid rgba(24, 144, 255, 1);
        .common-cell-check {
          display: block;
          .common-cell-triangle {
            border-bottom-right-radius: 0px;
          }
        }
      }
      &.li-third-active-disable {
        border-radius: 4px;
        border: 2px solid #bad9ff;
        .common-cell-check {
          display: block;
          .common-cell-triangle {
            border-bottom-right-radius: 0px;
            .common-cell-outer {
              background: #bad9ff;
              i {
                color: #fff;
              }
            }
          }
        }
      }
    }
    .li-four-cell {
      width: 337px;
      max-width: 337px;
      height: 355px;
      padding: 42px 11px 21px 11px;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(192, 196, 204, 1);
      margin-left: 10px;
      &:first-child {
        margin-left: 0;
      }
      .li-cell-inner {
        .li-cell-title {
          text-align: center;
          font-weight: 600;
          line-height: 25px;
        }
        .li-cell-subtitle {
          height: 81px;
          margin-top: 33px;
          text-align: center;
          font-weight: 500;
          line-height: 20px;
          overflow: hidden;
        }
        .li-cell-tip {
          text-align: left;
          font-weight: 500;
          line-height: 20px;
        }
        .li-cell-select {
          height: 40px;
          margin-top: 8px;
          .el-select {
            width: 100%;
          }
        }
        .li-cell-seperator {
          position: relative;
          height: 42px;
          line-height: 42px;
          text-align: center;
          color: #c0c4cc;
          font-size: 14px;
          &::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            width: 140px;
            height: 1px;
            border-top: 1px solid #dcdfe6;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
          }
          &::after {
            content: '';
            position: absolute;
            top: 50%;
            right: 0;
            width: 140px;
            height: 1px;
            border-top: 1px solid #dcdfe6;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
          }
        }
        .li-cell-btn {
          .el-button {
            width: 100%;
            height: 40px;
            line-height: 40px;
            padding: 0;
          }
        }
      }
    }
  }
  .to-active-config {
    margin-top: 58px;
    text-align: center;
    .to-active-tip {
      font-weight: 400;
      line-height: 20px;
    }
    .to-active-btn {
      width: 305px;
      margin: 17px auto 70px auto;
      .el-button {
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding: 0;
      }
    }
  }
}
</style>
