<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-11-15 10:10:08
 * @LastEditors: 无尘
 * @LastEditTime: 2019-12-05 10:02:10
 -->

<template>
  <div class="create-completion common-wrap">
    <nav-crumb :navpath="navpath"></nav-crumb>
    <div class="right-content border-box">
      <div class="right-box border-box">
        <div class="step-top">
          <active-step
            :activeStep="activeStep"
            :stepData="stepData"
          ></active-step>
        </div>
        <div class="step-body">
          <base-config
            v-if="activeStep == '1'"
            @submitNext="submitNext"
          ></base-config>
          <center-config
            v-if="activeStep == '2'"
            @submitBack="submitBack"
            @submitNext="submitNext"
          ></center-config>
          <card-config
            v-if="activeStep == '3'"
            @submitBack="submitBack"
            @submitNext="submitNext"
          ></card-config>
          <poster-config
            v-if="activeStep == '4'"
            @submitBack="submitBack"
            @submitNext="submitNext"
          ></poster-config>
          <reward-config
            v-if="activeStep == '5'"
            @submitBack="submitBack"
            @submitNext="submitNext"
          ></reward-config>
        </div>
      </div>
    </div>
    <vue-gic-footer></vue-gic-footer>
  </div>
</template>
<script>
import navCrumb from '@/components/nav/nav.vue';
import activeStep from '@/components/active-config/active-step.vue';
import baseConfig from '@/components/active-config/base-config.vue';
import centerConfig from '@/components/active-config/center-config.vue';
import cardConfig from '@/components/active-config/card-config.vue';
import posterConfig from '@/components/active-config/poster-config.vue';
import rewardConfig from '@/components/active-config/reward-config.vue';
export default {
  name: 'createCompletion',
  components: {
    navCrumb,
    activeStep,
    baseConfig,
    centerConfig,
    cardConfig,
    posterConfig,
    rewardConfig
  },
  data() {
    return {
      // 面包屑参数
      navpath: [
        {
          name: '分享有礼',
          path: `/shareIndex`,
          /*relocation: true */
        },
        {
          name: this.$route.query.hasOwnProperty('editFlag')? '查看配置': this.$route.query.hasOwnProperty('activityId')?'编辑活动': '新建活动',
          /*relocation: true */
        },
      ],
      activeStep: 1,
      stepData: [
        {
          stepName: '基本信息',
          hasSet: false
        },
        {
          stepName: '活动中心配置',
          hasSet: false
        },
        {
          stepName: '小程序卡片配置',
          hasSet: false
        },
        {
          stepName: '分享海报配置',
          hasSet: false
        },
        {
          stepName: '奖励配置',
          hasSet: false
        }
      ],
    }
  },
  watch: {
    $route (to,from) {
      // console.log(to,from)
      // this.$store.dispatch('clearActiveData');

    }
  },
  methods: {
    /**
     * 下一步
     */
    submitNext() {
      const that = this;
      that.stepData[that.activeStep - 1 ].hasSet = true;
      that.activeStep++;
    },
    /**
     * 上一步
     */
    submitBack() {
      const that = this;
      that.activeStep--;
      that.stepData[that.activeStep - 1 ].hasSet = false;
    }
  },
  mounted(){
    this.judgeDue()
  }
}
</script>
<style lang="less" scoped>
.create-completion {
  width: 100%;
  .create-completion-icon {
    padding-top: 159px;
    img {
      width: 88px;
      height: 88px;
    }
  }
  .create-completion-text {
    margin-top: 18px;
  }
  .create-completion-btn {
    margin-top: 45px;
  }
}
</style>
