<template>
  <div>
    <ToolCard class="main_content">
      <Step :activeStep="activeStep" class="pt50-pl60"/>
      <div>
        <MailStepOne v-if="activeStep === 0" class="pt-50"/>
        <MailStepTwo v-if="activeStep === 1" class="pt-50"/>
        <div class="main_content_btn">
          <div class="step_prev step_btn" @click="handlePrev" :disabled="activeStep === 0">上一步</div>
          <div class="step_next step_btn" @click="handleNext">下一步</div>
          <div class="step_finished step_btn" @click="handlePreview">点击生成预览</div>
        </div>
      </div>
    </ToolCard>
  </div>
</template>

<script>
import ToolCard from '@/components/base/ToolCard.vue'
import MailStepOne from '../components/mail/MailStepOne.vue'
import Step from '@/components/base/Step.vue'
import MailStepTwo from '../components/mail/MailStepTwocopy.vue'
export default {
  components: {
    ToolCard,
    MailStepOne,
    Step,
    MailStepTwo
  },
  data() {
    return {
      activeStep: 0
    }
  },
  methods: {
    // 上一步
    handlePrev() {
      this.activeStep--
    },
    // 下一步
    handleNext() {
      this.activeStep++
    },
    // 点击生成预览
    handlePreview() {}
  }
}
</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;
      background: #49bba2;
      opacity: 1;
      border-radius: 16px;
      font-size: 18px;
      line-height: 32px;
      color: #ffffff;
      text-align: center;
      margin-right: 10px;
      // margin-top: 200px;
    }
  }
}
.pt50-pl60{
  padding: 50px 0 0 60px;
}
.pt-50{
  padding-top: 50px;
}
</style>
