<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-11-13 16:37:02
 * @LastEditors: 无尘
 * @LastEditTime: 2019-12-12 10:13:00
 -->
<!--
<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-pack-center">
      <template v-for="(item, index) in firstData">
        <li
          :class="['li-cell flex-1 ', firstGoal.goalId == 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="firstGoal.goalId == 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_description flex flex-align-center  font-14 color-606266">{{ item.description }}</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 v-if="!!firstGoal.goalId">
      <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 ', secondGoal.goalId == 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="secondGoal.goalId == item.goalId ? item.selectedIconUrl : item.iconUrl"
                  alt=""
                /><span class="p-l-15 font-18 color-303133 font-w-700">{{ 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.description['适用场景'] }}</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.description['优劣分析'] }}</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 v-if="!!secondGoal.goalId">
      <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
            v-if="item.display == 1"
            :class="['li-cell li-third-cell flex-1 ', item.check ? 'li-third-active' : '', item.mustFlag ? '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="item.iconUrl"
                  alt=""
                />
              </div>
              <div class="li-cell-path_title font-16 color-303133 text-center">{{ item.transName }}</div>
              <div class="li-cell-path_text font-14 color-606266">{{ item.description }}</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 v-if="pathNames.includes('访问活动营销页') || pathNames.includes('游戏参与') || pathNames.includes('卡券领取')">
      <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
            v-if="(item.id == 'marking' && pathNames.includes('访问活动营销页')) || (item.id == 'game' && pathNames.includes('游戏参与')) || (item.id == 'card' && pathNames.includes('卡券领取'))"
            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.title }}</div>
              <div class="li-cell-subtitle font-14 color-606266">{{ item.text }}</div>
              <div
                v-if="item.id == 'marking'"
                class="li-cell-tip font-14 color-303133"
              >如果您还没有创建活动营销页，请立即前往创建。</div>
              <div
                v-if="item.id == 'game'"
                class="li-cell-tip font-14 color-303133"
              >如果您还没有创建游戏计划，请立即前往创建。</div>
              <div
                v-if="item.id == 'card'"
                class="li-cell-tip font-14 color-303133"
              >如果您还没有创建卡券，请立即前往创建。</div>
              <div
                v-if="item.id == 'marking'"
                class="li-cell-select"
              >
                <el-select
                  size="large"
                  v-model="markingValue"
                  placeholder="请选择活动着陆页"
                  @change="changeMarking"
                >
                  <el-option
                    v-for="item in markingList"
                    :key="item.pageId"
                    :label="item.name"
                    :value="item.pageId"
                  > </el-option>
                </el-select>
              </div>
              <div
                v-if="item.id == 'game'"
                class="li-cell-select"
              >
                <game-select
                  v-model="gameValue"
                  @changeGame="changeGame"
                ></game-select>
              </div>
              <div
                v-if="item.id == 'card'"
                class="li-cell-select"
              >
                <el-select
                  size="large"
                  v-model="cardValue"
                  placeholder="请选择卡券"
                  @change="changeCard"
                >
                  <el-option
                    v-for="item in cardList"
                    :key="item.coupCardId"
                    :label="item.cardName"
                    :value="item.coupCardId"
                  > </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>

    <div class="to-active-config">
      <div class="to-active-tip font-14 color-606266">确认完成了所有前期准备工作，即可前往活动配置。</div>
      <div class="to-active-btn">
        <el-button
          type="primary"
          :disabled="disableCreate"
          @click="toCreate"
        >前往活动配置<i class="el-icon-right"></i></el-button>
      </div>
    </div>
  </div>
</template>
<script>
import gameSelect from '@/components/active/game-select.vue';
import showMsg from '@/common/js/showmsg';
import errMsg from '@/common/js/error';
import { getRequest } from '@/api/api';
export default {
  name: 'active-select',
  components: {
    gameSelect
  },
  data() {
    return {
      firstGoal: {},
      firstData: [
        /* {
          goalId: 1,
          iconUrl: '',
          selectedIconUrl: '',
          goalName: '品牌传播',
          description: '主要以推广品牌服务号和品牌会员为目的，旨在和更多潜在消费者或老客加强品牌互动。',
          check: false
        },
        {
          goalId: 2,
          iconUrl: '',
          selectedIconUrl: '',
          goalName: '活动宣传',
          description: '有明确的活动主题，以提升活动的曝光范围和强度为核心目的，让更多受众能够了解和参与活动。',
          check: false
        },
        {
          goalId: 3,
          iconUrl: '',
          selectedIconUrl: '',
          goalName: '分销推广',
          description: '以产生成交转化作为活动的最终目的，通过分销（分享裂变）的方式，用存量老客带动新客，从而赢得销售增量。',
          check: false
        } */
      ],
      secondGoal: {},
      secondData: [
        /* {
          goalId: 1,
          selectedIconUrl: '',
          iconUrl: '',
          goalName: '活动曝光',
          description: { 适用场景: '针对线上营销且在线上（微信商城）完成消费的场景，即常规意义上的分销模式。', 优劣分析: '成交更便捷，转化路径通畅，但对尚未建立足够品牌认知的客户而言，微信商城的信赖度略显不足。' },
          check: false
        } */
      ],
      thirdData: [
        /* {
          goalId: 1,
          iconUrl: '',
          selectedIconUrl: '',
          transName: '关注服务号',
          description: '受邀人通过带服务号二维码的海报，关注并进入服务号对框框。',
          check: false,
          transId: '', // 链路值
          selectOne: 0, //可选
          mustFlag: 1, // 必选不可取消
          display: 0 // 显示
        } */
      ],
      fourData: [
        /* {
          id: 'marking',
          title: '活动营销页',
          placeholder: '请选择活动着陆页',
          text: '受邀人关注服务号后，系统将自动推送活动营销页的小程序卡片，请选择具体的活动营销页以协助系统完成自动回复配置。',
          check: false,
          url: '/gic-web/custom'
        },
        {
          id: 'game',
          title: '游戏计划',
          placeholder: '请选择游戏计划',
          text: '系统将自动生成游戏页面的小程序或二维码海报，请选择具体的游戏计划以协助系统完成配置。',
          check: false,
          url: '/marketing/game/dzp'
        },
        {
          id: 'card',
          title: '卡券配置',
          placeholder: '请选择卡券',
          text: '受邀人完成会员认证后可获得卡券，请选择具体的卡券以协助系统完成认证后自动推送配置。',
          check: false,
          url: '/marketing/card/list'
        } */
      ],
      // 三个卡片
      markingList: [],
      markingValue: '',
      activityMarketPageName: '',
      gameList: [],
      gameValue: [],
      gamePlanName: '',
      gamePlanUrl: '',
      cardList: [],
      cardValue: '',
      cardCoupName: '',
      // 选择的路径
      pathNames: [],
      pathIds: [],
      disableCreate: true
    };
  },
  methods: {
    /**
     * 选择一级
     */
    selectFirst(item) {
      const that = this;
      that.firstGoal = item;
      let arr = JSON.parse(JSON.stringify(item.children));
      if (!!item.children && item.children.length) {
        arr.forEach(ele => {
          ele.description = JSON.parse(ele.description);
        });
      }
      that.secondData = JSON.parse(JSON.stringify(arr));
      // 二级选择变化，三级变化
      that.secondGoal = {};
      that.thirdData = [];
      that.pathNames = [];
      that.pathIds = [];
      that.markingValue = '';
      that.activityMarketPageName = '';
      that.gameValue = [];
      that.gamePlanName = '';
      that.cardValue = '';
      that.cardCoupName = '';
    },
    /**
     * 选择二级
     */
    selectSecond(item) {
      const that = this;
      that.secondGoal = item;
      that.getThirdData(item.goalId);
      that.markingValue = '';
      that.activityMarketPageName = '';
      that.gameValue = [];
      that.gamePlanName = '';
      that.cardValue = '';
      that.cardCoupName = '';
    },
    /**
     * 获取三级
     */
    getThirdData(goalId) {
      const that = this;
      let para = { goalId: goalId };
      that.pathNames = []; // 先清空，再赋值
      that.pathIds = [];
      getRequest('/sharing-core-web/list-activity-dict-trans', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            if (resData.result && resData.result.length) {
              resData.result.forEach(ele => {
                ele.check = false;
                if (ele.mustFlag) {
                  ele.check = true;
                  that.pathNames.push(ele.transName);
                  that.pathIds.push(ele.transId);
                  that.getText(ele.transId);
                }
              });
            }
            that.thirdData = resData.result || [];
            that.$nextTick(()=> {
              that.checkDisable();
            })
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 选择三级
     */
    selectThird(item) {
      const that = this;
      if (item.mustFlag) {
        return false;
      }
      item.check = item.check ? false : true;
      that.pathIds = [];
      that.thirdData.forEach(ele => {
        if (ele.check && ele.display) {
          that.pathIds.push(ele.transId); // 暂时预留，为了防止以后数据顺序变化，可以使用这个进行下面的内部判断
        }
      });
      that.thirdData.forEach(ele => {
        if (item.check && !!ele.mustCondition && ele.mustCondition.includes(item.transId)) {
          ele.mustFlag = 1;
          ele.check = true;
          ele.display = 1;
        }
        // console.log('----->:',that.pathIds,':<-----')
        if (!item.check && !!ele.mustCondition && ele.mustCondition.includes(item.transId) && (!that.thirdData[0].check && !that.thirdData[1].check)) {
          ele.mustFlag = 0;
          ele.check = false;
          ele.display = 0;
        }
        // 可选一
        if (item.check && !!ele.showCondition && ele.showCondition.includes(item.transId)) {
          ele.display = 1;
        }
        if (!item.check && !!ele.showCondition && ele.showCondition.includes(item.transId) && !ele.selectedConditions) {
          ele.display = 0;
        }
        // 取消
        if (!item.check && !!ele.canceCondition && ele.canceCondition.includes(item.transId)) {
          ele.check = false;
        }
        // 8选择 4必选，如果1，2不选中不显示
        if (item.check && ((!!ele.showCondition && that.thirdData[0].check) || (!!ele.showCondition && that.thirdData[1].check)) && !!ele.selectedConditions && ele.selectedConditions.includes(item.transId)) {
          ele.display = 1;
          ele.check = true;
        }
        if (item.check && (!!ele.showCondition && !that.thirdData[0].check && !that.thirdData[1].check) && !!ele.selectedConditions && ele.selectedConditions.includes(item.transId)) {
          ele.display = 0;
          ele.check = true;
        }
        if (!item.check && (!!ele.showCondition && !that.thirdData[0].check && !that.thirdData[1].check) && !!ele.selectedConditions && ele.selectedConditions.includes(item.transId)) {
          ele.display = 1;
          ele.check = false;
        }
      });
      that.getPathNameText();
    },
    /**
     * 计算路径获取文案
     */
    getPathNameText() {
      const that = this;
      let arr = [];
      let transIds = 0;
      that.pathIds = [];
      that.thirdData.forEach(ele => {
        if (ele.check && ele.display) {
          transIds += ele.transId;
          arr.push(ele.transName);
          that.pathIds.push(ele.transId);
        }
      });
      that.pathNames = arr;
      that.getText(transIds);
      that.$nextTick(()=> {
        that.checkDisable();
      })
    },
    /**
     * 判断按钮创建
     */
    checkDisable() {
      const that = this;
      if ((that.pathNames.includes('访问活动营销页') && !that.markingValue) || (that.pathNames.includes('游戏参与') && !that.gameValue.length) || (that.pathNames.includes('卡券领取') && !that.cardValue)) {
        that.disableCreate = true;
        return false;
      }
      // 整理路径id和值
      let pathArr = [];
      that.thirdData.forEach(ele => {
        if (ele.check && ele.display) {
          pathArr.push({
            transId: ele.transId,
            transName: ele.transName
          });
        }
      });
      // 判断会员招募
      if (that.secondGoal.goalId == 5 && pathArr.length == 1) {
        that.disableCreate = true;
        return false;
      }
      // 判断卡券营销
      if (that.secondGoal.goalId == 8 && (pathArr.length == 1 || (pathArr.length == 2 && pathArr.map(ele => ele.transId).includes(4)))) {
        that.disableCreate = true;
        return false;
      }
      // 判断线下门店，微信商城
      if ((that.secondGoal.goalId == 10 || that.secondGoal.goalId == 11) && (pathArr.length == 1 || ((pathArr.length == 2 && (pathArr.map(ele => ele.transId).includes(4) || pathArr.map(ele => ele.transId).includes(16))) || (pathArr.length == 3 && pathArr.map(ele => ele.transId).includes(4) && pathArr.map(ele => ele.transId).includes(16))))) {
        that.disableCreate = true;
        return false;
      }
      // 判断全渠道
      if (that.secondGoal.goalId == 9 && (pathArr.length == 1 || (pathArr.length == 2 && (pathArr.map(ele => ele.transId).includes(4) || pathArr.map(ele => ele.transId).includes(16))))) {
        that.disableCreate = true;
        return false;
      }
      that.disableCreate = false;
    },
    /**
     * 活动营销页改变
     */
    changeMarking() {
      const that = this;
      that.$nextTick(()=> {
        that.checkDisable();
      })
    },
    /**
     * 卡券改变
     */
    changeCard() {
      const that = this;
      that.$nextTick(()=> {
        that.checkDisable();
      })
    },
    /**
     * 游戏改变
     */
    changeGame(name, url) {
      const that = this;
      that.gamePlanName = name;
      that.gamePlanUrl = url;
      that.$nextTick(()=> {
        that.checkDisable();
      })
    },
    /**
     * 跳转卡片创建页
     */
    toRedirectPage(item) {
      window.open(item.url);
    },
    /**
     * 前往创建
     */
    toCreate() {
      const that = this;
      // 先清空原有状态中数据
      that.$store.dispatch('clearActiveData');
      // 需要判断一级二级三级四级后，再判断能不能创建
      if (!that.firstGoal.hasOwnProperty('goalId')) {
        showMsg.showmsg('请先选择活动目的', 'warning');
        return false;
      }
      if (!that.secondGoal.hasOwnProperty('goalId')) {
        showMsg.showmsg('请先完善活动目的', 'warning');
        return false;
      }
      if ((that.pathNames.includes('访问活动营销页') && !that.markingValue) || (that.pathNames.includes('游戏参与') && !that.gameValue.length) || (that.pathNames.includes('卡券领取') && !that.cardValue)) {
        showMsg.showmsg('请先完善活动创建前准备工作', 'warning');
        return false;
      }
      if (that.pathNames.includes('访问活动营销页') && that.markingValue) {
        that.markingList.forEach(ele => {
          if (that.markingValue == ele.pageId) {
            that.activityMarketPageName = ele.name;
          }
        });
      }
      if (that.pathNames.includes('卡券领取') && that.cardValue) {
        that.cardList.forEach(ele => {
          if (that.cardValue == ele.coupCardId) {
            that.cardCoupName = ele.cardName;
          }
        });
      }

      // 整理路径id和值
      let pathArr = [];
      that.thirdData.forEach(ele => {
        if (ele.check && ele.display) {
          pathArr.push({
            transId: ele.transId,
            transName: ele.transName
          });
        }
      });
      pathArr.sort(function (a, b) {
        return (a.transId - b.transId);
      });
      // 判断会员招募
      if (that.secondGoal.goalId == 5 && pathArr.length == 1) {
        showMsg.showmsg('请在可选项中至少选择一项', 'warning');
        return false;
      }
      // 判断卡券营销
      if (that.secondGoal.goalId == 8 && (pathArr.length == 1 || (pathArr.length == 2 && pathArr.map(ele => ele.transId).includes(4)))) {
        showMsg.showmsg('请在可选项中至少选择一项', 'warning');
        return false;
      }
      // 判断线下门店，微信商城
      if ((that.secondGoal.goalId == 10 || that.secondGoal.goalId == 11) && (pathArr.length == 1 || ((pathArr.length == 2 && (pathArr.map(ele => ele.transId).includes(4) || pathArr.map(ele => ele.transId).includes(16))) || (pathArr.length == 3 && pathArr.map(ele => ele.transId).includes(4) && pathArr.map(ele => ele.transId).includes(16))))) {
        showMsg.showmsg('请在可选项中至少选择一项', 'warning');
        return false;
      }
      // 判断全渠道
      if (that.secondGoal.goalId == 9 && (pathArr.length == 1 || (pathArr.length == 2 && (pathArr.map(ele => ele.transId).includes(4) || pathArr.map(ele => ele.transId).includes(16))))) {
        showMsg.showmsg('请在可选项中至少选择一项', 'warning');
        return false;
      }

      let indexObj = {
        firstGoal: that.firstGoal,
        secondGoal: that.secondGoal,
        pathArr: pathArr,
        markingValue: that.markingValue,
        activityMarketPageName: that.activityMarketPageName,
        gameValue: that.gameValue,
        gamePlanName: that.gamePlanName,
        gamePlanUrl: that.gamePlanUrl,
        cardValue: that.cardValue,
        cardCoupName: that.cardCoupName
      };
      that.judgeCreate(indexObj);
    },
    /**
     * 获取一级二级数据
     */
    getTwoList() {
      const that = this;
      let para = {};
      getRequest('/sharing-core-web/list-activity-dict', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.firstData = JSON.parse(JSON.stringify(resData.result)) || [];
            that.getMarkingList();
            that.getCardList();
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    },
    /**
     * 获取卡片文案
     */
    getText(transIds) {
      const that = this;
      let para = { transIds: transIds };
      getRequest('/sharing-core-web/list-activity-dict-text', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.fourData = resData.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/list-marking-page', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.markingList = resData.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/list-game', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            that.gameList = resData.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/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
          });
        });
    },
    /**
     *   是否可以创建活动
     */
    judgeCreate(indexObj) {
      const that = this;
      let para = {};
      getRequest('/sharing-core-web/can-create', para)
        .then(res => {
          let resData = res.data;
          if (resData.errorCode == 1) {
            console.log('indexObj:', indexObj);
            that.$store.dispatch('saveIndexInfo', indexObj);
            that.$router.push('/createActive');
            return false;
          }
          errMsg.errorMsg(resData);
        })
        .catch(function(error) {
          that.$message.error({
            duration: 1000,
            message: error.message
          });
        });
    }
  },
  mounted() {
    const that = this;
    that.getTwoList();
  }
};
</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;
      min-width: 405px;
      height: 131px;
      background: rgba(255, 255, 255, 1);
      border-radius: 4px;
      border: 1px solid rgba(220, 223, 230, 1);
      margin-left: 10px;
      cursor: pointer;
      transition: all 0.3s;
      max-width: 30%;
      &:hover {
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        -o-transform: translateY(-10px);
        transform: translateY(-10px);
        box-shadow: 0px 2px 10px 0px rgba(174, 181, 189, 0.5);
      }
      &: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_description {
            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(174, 181, 189, 0.5);
        border-radius: 4px;
        border: none;
        .li-cell-inner {
          .li-cell-right {
            .li-cell-active_name {
              color: #fff;
            }
            .li-cell-active_description {
              color: #fff;
            }
          }
        }
        .common-cell-check {
          display: block;
          .common-cell-triangle {
            border-bottom-right-radius: 4px;
          }
        }
      }
      /* 二级 */
      &.li-second-cell {
        min-width: 417px;
        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;
        min-width: 204px;
        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>
