<template>
  <div class="mu-steps">
    <el-steps 
        :active="config.active" 
        :direction="config.direction" 
        :space="config.space"
        :process-status="config.processStatus"
        :finish-status="config.finishStatus"
        :align-center="config.alignCenter"
        :simple="config.simple"
        >
        <el-step 
            :title="step.title"
            :icon="step.icon"
            :description="step.description"
            :status="step.status"
            v-for="(step, index) in config.steps" 
            :key="index">
            <slot
                :title="step.title"
                :icon="step.icon"
                :description="step.description"
            ></slot>
        </el-step>
    </el-steps>
    <div class="container">
      <slot :name="currentSlot" v-if="!currentScript"
            >
      </slot>
      <div v-if="currentScript">
          <component v-bind:is="currentComponent"></component>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { Component, Prop, Vue, Watch, Emit } from 'vue-property-decorator';

  import HttpVueLoader from '../../../public/httpVueLoader'
  interface StepsConfig {
      active: any,
      direction: string,  //vertical/horizontal
      space: any,
      processStatus: string,  //wait / process / finish / error / success
      finishStatus: string,
      alignCenter: boolean,
      simple: boolean,
      steps: any
  }

  @Component({
    name: 'muSteps',
    components: {
    }
  })
  export default class extends Vue {
    @Prop({ default: () => [] }) private config!: StepsConfig;

    private defaultConfig: any = {
      active: 0,
      finishStatus: "success"
    };

    // 合并默认数据
    get currentConfig() {
      const result = this.config;
      Object.keys(this.defaultConfig).forEach((key: string) => {
        if (this.config[key] === undefined) result[key] = this.defaultConfig[key];
      });
      return result;
    }

    get currentSlot() {
      const { active } = this.config;
      return this.config.steps[active].name
    }

    get currentScript() {
      const { active } = this.config;
      return this.config.steps[active].script
    }

    get currentComponent() {
      const { active } = this.config;
      return new HttpVueLoader(this.config.steps[active].script) 
    }
    /**
     * 输入框值改变
     * @author tanxj
     * @param value 值
     */
    @Emit('on-change')
    handleChange(value: string) {
      this.$emit('input', value);
    }
  }
</script>
