<template>
  <ele-modal
    :width="740"
    :visible="visible"
    :confirm-loading="loading"
    :title="`安装应用`"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    :footer="null"
    @ok="save"
  >
    <a-page-header :ghost="false" :title="data.appName">
      <div class="ele-text-secondary" v-html="data.comments"> </div>
    </a-page-header>
    <div class="ele-body">
      <a-card :bordered="false">
        <div style="max-width: 700px; margin: 0 auto">
          <div style="margin: 10px 0 30px 0">
            <a-steps
              :current="active"
              direction="horizontal"
              :responsive="styleResponsive"
            >
              <a-step title="第一步" description="下载更新包" />
              <a-step title="第二步" description="数据初始化" />
              <a-step title="第三步" description="安装成功" />
            </a-steps>
          </div>
          <div class="step-next" v-if="active === 0">
            <a-button type="primary" @click="onDone()"> 下一步 </a-button>
          </div>
          <div class="step-next" v-if="active === 1">
            <a-button type="primary" @click="onNext()"> 下一步 </a-button>
          </div>
          <div class="step-next" v-if="active === 2">
            <a-button type="primary" @click="onSuccess()"> 完成 </a-button>
          </div>
        </div>
      </a-card>
    </div>
  </ele-modal>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { storeToRefs } from 'pinia';
  import { useThemeStore } from '@/store/modules/theme';
  import StepEdit from './components/step-edit.vue';
  import StepConfirm from './components/step-confirm.vue';
  import StepSuccess from './components/step-success.vue';
  import type { StepForm } from './model';
  import { App } from '@/api/dashboard/appstore/model';

  // 是否开启响应式布局
  const themeStore = useThemeStore();
  const { styleResponsive } = storeToRefs(themeStore);
  const emit = defineEmits<{
    (e: 'done'): void;
    (e: 'update:visible', visible: boolean): void;
  }>();

  defineProps<{
    // 弹窗是否打开
    visible: boolean;
    // 修改回显的数据
    data?: App | null;
    // 上级应用id
    parentId?: number;
  }>();

  // 选中步骤
  const active = ref(0);

  //
  const form = reactive<StepForm>({});

  //
  const onDone = (data: StepForm) => {
    Object.assign(form, data);
    active.value = 1;
  };

  //
  const onNext = (data: StepForm) => {
    Object.assign(form, data);
    active.value = 2;
  };

  const onSuccess = () => {};

  //
  const onBack = () => {
    active.value = 0;
  };

  /* 更新visible */
  const updateVisible = (value: boolean) => {
    emit('update:visible', value);
  };
</script>

<script lang="ts">
  export default {
    name: 'FormStep'
  };
</script>

<style lang="less" scoped>
  .step-next {
    text-align: center;
  }
</style>
