<template>
  <el-steps style="width: 100%" :active="currentStep" align-center>
    <el-step v-for="(t, i) in stepTitle" :key="i" :title="t" />
  </el-steps>
  <el-divider style="width: 90%; margin: 20px auto" />
  <el-row style="padding-left: 20px; padding-right: 20px">
    <el-col :span="2" style="cursor: pointer">
      <el-icon @click="up" v-if="currentStep !== 0">
        <ArrowLeftBold />
      </el-icon>
    </el-col>
    <el-col
      :span="20"
      style="
        text-align: center;
        font-weight: 600;
        font-size: 16px;
        color: #333333;
        line-height: 18px;
      "
    >
      {{ currentTitle }}
    </el-col>
    <el-col
      :span="2"
      style="text-align: right; cursor: pointer"
      v-if="currentStep !== stepTitle.length - 1"
    >
      <el-icon @click="next">
        <ArrowRightBold />
      </el-icon>
    </el-col>
  </el-row>
  <div class="page" >
    <div class="top">
      <slot></slot>
    </div>
    <el-button
      type="primary"
      style="height: 32px"
      @click="next"
      :disabled="stepPageLoading"
      v-if="currentStep !== stepTitle.length - 1"
    >
      下一步：{{ nextTitle }}
    </el-button>
    <el-button type="primary" style="height: 32px" @click="create" v-else :disabled="createButtonDisabled">生成文档</el-button>
  </div>
</template>
<script setup lang="ts">
import { ArrowRightBold } from '@element-plus/icons-vue'
import useStore from '@/stores'
import { isFunction } from 'lodash-es'
import { computed } from 'vue'


interface Props {
  nextBeforeCallBack?: Function // 下一步前置操作
  stepPageLoading: boolean
  createButtonDisabled?: boolean

}

const props = withDefaults(defineProps<Props>(), {})

const emit = defineEmits(['create'])

const { docs } = useStore()

const currentStep = computed(() => docs.currentAiWritingStep)
// 写作右侧步骤条
const stepTitle: any = ['选择场景', '基础信息', '大纲信息', '参考文档']
// 当前步骤标题
const currentTitle = computed(() => stepTitle[currentStep.value])
// 下一步标题
const nextTitle = computed(() => {
  if (currentStep.value >= stepTitle.length - 1) {
    return stepTitle[currentStep.value]
  }
  return stepTitle[currentStep.value + 1]
})

// 写作 上一步
const up = () => {
  if (currentStep.value <= 0) {
    docs.setCurrentAiWritingStep(0)
    return
  }
  // @ts-ignore
  docs.setCurrentAiWritingStep(currentStep.value - 1)
}
// 写作下一步
const next = async () => {
  // 传进来前置方法，如果返回 false 则拦截。
  if (isFunction(props.nextBeforeCallBack) && !await props.nextBeforeCallBack()) return false;
  // @ts-ignore
  if (currentStep.value >= stepTitle.length - 1) {
    // @ts-ignore
    docs.setCurrentAiWritingStep(stepTitle.length - 1)
    return
  }
  // @ts-ignore
  docs.setCurrentAiWritingStep(currentStep.value + 1)
}

const create = async () => {
  emit('create')
}
</script>

<style scoped lang="scss">
.page {
  height: calc(100% - 104px);
  padding: 0 20px;
  display: flex;
  flex-direction: column;

  .top {
    flex: 1;
    overflow-y: scroll;
  }
}
</style>
