
<template>
  <div class="api-body-content border-box">
    <div class="common-nav">
      <nav-bread :nav-path="navPath" />
    </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
              v-for="(item, index) in stepData"
              :key="index + item.stepName"
              :class="['api-step-cell inline-block border-box', index + 1 == activeStep ? 'active-step' : '']"
              :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 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-event-base @submitNext="submitNext" />
          </div>
          <div
            v-if="activeStep == '2'"
            class="create-api-front">
            <create-event-field
              @submitBack="submitBack"
              @submitNext="submitNext" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import navBread from '@/components/nav/nav-bread.vue';
import createEventBase from '@/components/createApi/create-event-base.vue';
import createEventField from '@/components/createApi/create-event-field.vue';
export default {
  name: 'CreateEventApi',
  components: {
    navBread,
    createEventBase,
    createEventField
  },
  data() {
    return {
      // 面包屑参数
      createNav: [
        {
          name: 'API管理',
          path: '/apiProgram'
        },
        {
          name: `${this.$route.query.projectName}项目列表`,
          path: '/apiProgramGroup'
        },
        {
          name: `${this.$route.query.interfaceGroupName}分组列表`,
          path: '/groupApiList'
        },
        {
          name: this.$route.query.interfaceId ? '编辑API' : '创建API',
          path: ''
        }
      ],
      editNav: [
        {
          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: ''
        }
      ],
      navPath: [],
      activeStep: 1,
      stepData: [
        {
          stepName: '基础信息'
        },
        {
          stepName: '字段配置'
        }
      ],
      // 项目 id
      projectId: this.$route.query.projectId,
      // 项目中分组 id
      interfaceGroupId: this.$route.query.interfaceGroupId
    };
  },

  /* 接收数据 */
  mounted() {
    const that = this;
    that.$emit('showTab', 22);
    that.navPath = this.$route.query.interfaceId ? this.editNav : this.createNav;
  },
  beforeDestroy() {
    this.$store.dispatch('clearApiData');
  },
  methods: {
    /**
     * 下一步
     */
    submitNext() {
      const that = this;
      that.activeStep++;
    },
    /**
     * 上一步
     */
    submitBack() {
      const that = this;
      that.activeStep--;
    }
  },
  watch: {
    $route: {
      handler: function(val, oldVal) {},
      // 深度观察监听
      deep: true
    }
  }
};
</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>
