<template>
  <popup v-model:value="value" content-animate="scale" @close="$emit('destroy-popup')">
    <section class="settle-container flex">
      <!--  标题   -->
      <header class="settle-header row aCenter">
        <div class="flex-1">{{config.game_name}}</div>
        <div class="settle-close cursor-pointer animate-rotate-hover" @click="close">
          <icon type="close"></icon>
        </div>
      </header>
      <!--   步骤类   -->
      <section class="center settle-step">
        <div class="rowACenter">
          <aside
            v-for="(item,index) in stepData"
            :key="'step-'+index"
            class="row"
            :class="{'settle-step-checked': index <= stepNumber}"
          >
            <div class="settle-step-line" v-if="index!==0"></div>
            <section class="center">
              <div class="settle-step-icon center">{{index+1}}</div>
              <div class="settle-step-label">{{item.label}}</div>
            </section>

          </aside>
        </div>
      </section>

      <!--   剩余空间   -->
      <aside class="flex-1" style="overflow: visible">
        <component
          v-if="stepItem.component"
          :is="stepItem.component"
          :config="config"
        ></component>
      </aside>
    </section>
  </popup>
</template>

<script>
import {
  Popup,
  icon
} from '$components';
import mixins from '../mixins';
import props from '../props';
import skillCertification from '../components/skill-certification';
import fillInformation from '../components/fill-information';
export default {
  name: "popup-settle",
  components:{
    Popup,
    icon,
    skillCertification,
    fillInformation
  },
  props,
  mixins
}
</script>

<style scoped lang="scss" src="../style.scss"></style>