<template>
  <div class="app_build-container">
    <div class="sevice_breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>在线组件工具</el-breadcrumb-item>
        <el-breadcrumb-item>应用构建（镜像形式）</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <app-build-steps :active-step="step">
      <app-build-step
        title="上传应用镜像"
        :step="0"
        :active-icon="require('@/assets/imgs/progress_ic_jingxiang.png')"
      >
        <h3 style="margin: 30px 0;">上传应用镜像</h3>
        <div class="step_action">
          <el-button type="primary" @click="nextStep">
            下一步
          </el-button>
        </div>
      </app-build-step>
      <app-build-step
        title="上传部署文件"
        :step="1"
        :active-icon="require('@/assets/imgs/progress_ic_bushudata.png')"
      >
        <h3 style="margin: 30px 0;">上传部署文件</h3>
        <div class="step_action">
          <el-button type="primary" plain @click="preStep">
            上一步
          </el-button>
          <el-button type="primary" @click="nextStep">
            下一步
          </el-button>
        </div>
      </app-build-step>
      <app-build-step
        title="应用基础信息填写"
        :step="2"
        :active-icon="require('@/assets/imgs/progress_ic_xinxitx.png')"
      >
        <h3 style="margin: 30px 0;">用基础信息填写</h3>
        <div class="step_action">
          <el-button type="primary" plain @click="preStep">
            上一步
          </el-button>
          <el-button type="primary" @click="sunbmitAction">
            提交
          </el-button>
        </div>
      </app-build-step>
    </app-build-steps>
  </div>
</template>

<script>
import appBuildSteps from "@/components/app-build-steps";
import appBuildStep from "@/components/app-build-step";

export default {
  components: {
    appBuildSteps,
    appBuildStep,
  },
  data: () => ({
    step: 0,
  }),
  methods: {
    preStep() {
      this.step--;
    },
    nextStep() {
      this.step++;
    },
    sunbmitAction() {
      console.log("submit action");
    },
  },
};
</script>

<style scoped>
.app_build-container {
  max-width: 1200px;
  margin: -157px auto 20px;
}
.app_build-container > .app_build_steps {
  border-radius: 12px;
  background-color: #fff;
  padding: 30px;
}
.step_action {
  text-align: right;
}
.step_action > .el-button {
  min-width: 124px;
  height: 44px;
  margin-right: 30px;
}
.step_action > .el-button--primary {
  color: #fff;
  background-color: #0f2683;
  border-color: #0f2683;
}
.step_action > .el-button--primary.is-plain {
  color: #0f2683;
  background-color: #e1e4fb;
  border-color: #e1e4fb;
}
</style>

<style>
.app_build-container .sevice_breadcrumb {
  padding: 0 20px;
}
.app_build-container .sevice_breadcrumb > .el-breadcrumb .el-breadcrumb__inner {
  color: #626de9;
}
.app_build-container
  .sevice_breadcrumb
  > .el-breadcrumb
  .el-breadcrumb__item:last-child
  .el-breadcrumb__inner {
  color: #b4c0f5;
}
</style>
