<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2019-07-22 19:27:37
 * @LastEditors: 无尘
 * @LastEditTime: 2019-10-18 15:52:48
 -->
<template>
  <div class="api-body-content border-box">
    <div class="common-nav">
      <nav-bread :navPath="navPath"></nav-bread>
    </div>
    <div class="api-body-main common-body-main border-box">
      <!-- style="height: auto;" -->
      <div class="api-main-content border-box">
        <div class="create-api-body">
          <div class="create-api-step font-0">
            <!-- || index + 1 <= activeStep  -->
            <div :class="['api-step-cell inline-block border-box', index + 1 == activeStep ? 'active-step' : '']" v-for="(item, index) in stepData" :key="index + item.stepName" :style="{ width: 100 / stepData.length + '%', 'max-width': 100 / stepData.length + '%' }">
              <div class="api-step-cell_inner border-box">
                <div v-if="index < stepData.length - 1" class="api-step-cell_line"></div>
                <div class="api-step-cell_title">
                  <div class="el-step__icon is-text inline-block">
                    <div class="el-step__icon-inner font-14">{{ index + 1 }}</div>
                  </div>
                  <div class="api-step-cell_txt p-lr-10 bg-fff inline-block font-16">{{ item.stepName }}</div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="activeStep == '1'" class="create-api-base">
            <create-base @submitNext="submitNext"></create-base>
          </div>
          <div v-if="activeStep == '2'" class="create-api-front">
            <create-front @submitBack="submitBack" @submitNext="submitNext"></create-front>
          </div>
          <div v-if="activeStep == '3'" class="create-api-back">
            <create-backend @submitBack="submitBack" @submitNext="submitNext"></create-backend>
          </div>
          <div v-if="activeStep == '4'" class="create-api-result">
            <create-result @submitBack="submitBack" @submitNext="submitNext"></create-result>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import navBread from '@/components/nav/nav-bread.vue';
import createBase from '@/components/createApi/create-base.vue';
import createFront from '@/components/createApi/create-front.vue';
import createBackend from '@/components/createApi/create-backend.vue';
import createResult from '@/components/createApi/create-result.vue';
export default {
  name: 'createApi',
  components: {
    navBread,
    createBase,
    createFront,
    createBackend,
    createResult
  },
  data() {
    return {
      // 面包屑参数
      navPath: [
        {
          name: 'API管理',
          path: '/apiProgram'
        },
        {
          name: `${this.$route.query.projectName}项目列表`,
          path: '/apiProgramGroup'
        },
        {
          name: `${this.$route.query.interfaceGroupName}分组列表`,
          path: '/groupApiList'
        },
        /*  {
          name: this.$route.query.interfaceName ? `${this.$route.query.interfaceName}` : '',
          path: '/apiListManage'
        }, */
        {
          name: this.$route.query.interfaceId ? '编辑API' : '创建API',
          path: ''
        }
      ],
      activeStep: 1,
      stepData: [
        {
          stepName: '基础信息'
        },
        {
          stepName: '前端配置'
        },
        {
          stepName: '后端配置'
        },
        {
          stepName: '定义返回'
        }
      ],
      // 项目 id
      projectId: this.$route.query.projectId,
      // 项目中分组 id
      interfaceGroupId: this.$route.query.interfaceGroupId
    };
  },
  methods: {
    /**
     * 下一步
     */
    submitNext() {
      const that = this;
      that.activeStep++;
    },
    /**
     * 上一步
     */
    submitBack() {
      const that = this;
      that.activeStep--;
      // 上一步是基础配置，获取基础配置数据

      // 上一步是前端配置，获取前端配置数据

      // 上一步是后端配置，获取后端配置数据
    }
  },
  watch: {
    $route: {
      handler: function(val, oldVal) {},
      // 深度观察监听
      deep: true
    }
  },

  /* 接收数据 */
  mounted() {
    const that = this;
    that.$emit('showTab', 22);
  },
  beforeDestroy() {
    this.$store.dispatch('clearApiData');
  }
};
</script>

<style lang="less" scoped>
.create-api-body {
  padding: 42px 0px;
  .create-api-step {
    .api-step-cell {
      padding: 0 10px;
      .bg-fff {
        background: #fff;
      }
      .api-step-cell_inner {
        position: relative;
        width: 100%;
        padding-right: 10px;
        .api-step-cell_line {
          position: absolute;
          height: 1px;
          top: 11px;
          left: 0;
          right: 0;
          background: #c0c4cc;
          z-index: 0;
        }
        .api-step-cell_title {
          position: relative;
          z-index: 1;
          .el-step__icon {
            border: 1px solid #c0c4cc;
            color: #c0c4cc;
          }
          .api-step-cell_txt {
            position: relative;
            z-index: 1;
            color: #909399;
          }
        }
      }
      &.active-step {
        .api-step-cell_inner {
          .api-step-cell_line {
            background: #5584ff;
          }
          .api-step-cell_title {
            .el-step__icon {
              color: #fff;
              border-color: #5584ff;
              background: #5584ff;
            }
            .api-step-cell_txt {
              color: #303133;
            }
          }
        }
      }
    }
  }
}
</style>
