<template>
  <div>
    <ToolCard class="main_content">
      <Step :activeStep="activeStep" class="pt50-pl60" />
      <div>
        <AppStepOne v-show="activeStep === 0" class="pt-50" :activeStep="activeStep" @getCardList="getCardList" />
        <AppStepTwo v-show="activeStep === 1" class="pt-50" @getStepTwoInfo="getStepTwoInfo" />
        <div class="step_prev step_btn" @click="handlePrev" v-if="activeStep > 0">上一步</div>
      </div>
    </ToolCard>
  </div>
</template>

<script>
import ToolCard from '@/components/base/ToolCard.vue'
import AppStepOne from '../components/app/AppStepOne.vue'
import Step from '@/components/base/Step.vue'
import AppStepTwo from '../components/app/AppStepTwo.vue'
export default {
  components: {
    ToolCard,
    AppStepOne,
    Step,
    AppStepTwo
  },
  data() {
    return {
      activeStep: 0,
      stepOneList: [],
      stepTwoList: [],
      time: ''
    }
  },

  methods: {
    // 上一步
    handlePrev() {
      this.activeStep--
    },
    // 下一步
    handleNext() {
      this.activeStep++
    },
    // 点击生成预览
    handlePreview() {},
    getCardList(val) {
      this.stepOneList = val
    },
    getStepTwoInfo(val, time) {
      this.stepTwoList = val
      this.time = time
    }
  }
}
</script>

<style lang="scss" scoped>
.main_content {
  display: flex;
  // padding: 42px 39px 52px 63px;
  // overflow: scroll;
  .main_content_btn {
    display: flex;
    justify-content: center;
    padding-bottom: 70px;
    .step_btn {
      width: 119px;
      height: 32px;
      opacity: 1;
      border-radius: 16px;
      font-size: 18px;
      line-height: 32px;
      color: #ffffff;
      text-align: center;
      margin-right: 10px;
      cursor: pointer;
      // margin-top: 200px;
    }
    .step_prev {
      border: 1px solid #cacaca;
      background: #fff;
      color: #ffffff;
      color: #6d6d71;
    }
    .step_next {
      background: #49bba2;
    }
    .step_finished {
      background: #49bba2;
    }
  }
}
.pt50-pl60 {
  padding: 50px 0 0 60px;
}
.pt-50 {
  padding-top: 50px;
}
</style>
