<template>
  <div class="step-row">
    <el-steps style="width: 800px" :active="active" align-center>
      <el-step :title="item.title" :description="item.description" v-for="(item,index) in stepContent" :key="index"/>
    </el-steps>
  </div>
  <div class="step-content">
    <component :is="stepArray[active]" ref="comRef" @nextStep="nextStep" @updateData="queryObjData" :rowId="rowId"/>
  </div>
  <div class="step-row">
    <el-button type="primary" @click="active--" v-if="active > 0">上一步</el-button>
    <el-button type="primary" @click="handleSave">{{ stepArray.length - 1 === active ? '完成' : '下一步' }}</el-button>
  </div>
</template>
<script setup lang="ts">
import step1 from "./step1.vue"
import step2 from "./step2.vue"
import step3 from "./step3.vue"
import step4 from "./step4.vue"

import {nextTick, ref} from "vue";
const comRef = ref(null)

const {proxy,emit} = getCurrentInstance();
const props=defineProps({
  rowId:{type:Number,default:null}
})

const stepArray = [step1, step2, step3, step4]
const active = ref(0)
const stepContent = [
  {title: "基本信息", description: "请填写业务基本信息"},
  {title: "模板选择", description: "请选择模板"},
  {title: "自定义指标", description: "请选择自定义指标"},
  {title: "数据接口配置", description: "配置数据获取接口地址"},
]

const nextStep = (step:number) => {
  if (active.value === stepArray.length - 1) {
    emit("handleDone")
    active.value = 0
  } else {
    active.value += step
  }
}

const handleSave=()=>{
  comRef.value.submitForm()
}

const queryObjData=(res)=>{
  if(res.data && res.data.objId){
    emit("changeRowId",res.data.objId)
  }
}

const reset=()=>{
  active.value=0
  nextTick(()=>{
    comRef.value.resetForm()
  })
}

defineExpose({reset})

</script>
<style scoped lang="scss">
@import "@/assets/styles/common";

.step-row {
  @include flexCenter;
}

.step-content {
  margin: 20px -20px;
  padding: 20px;
  border-width: 1px 0 1px 0;
  border-color: #f1f1f1;
  border-style: solid;
}
</style>
