<template>
  <div class="setdata-step">
    <el-steps :active="activeStep" finish-status="success" simple>
      <el-step title="数据区" />
      <el-step title="标题区" />
      <el-step title="附加信息" />
    </el-steps>

    <SetDataArea
      v-show="activeStep == 0"
      :areaTypeLen="areaTypeLen"
      ref="setDataAreaRef"
      @next="nextStep"
    />
    <SetDataAreaTitle
      ref="setDataAreaTitleRef"
      v-show="activeStep == 1"
      :current-area-mark="currentAreaMark"
      @next="nextStep"
    />
    <SetAttch
      ref="setAttchRef"
      v-show="activeStep == 2"
      :current-area-mark="currentAreaMark"
      @next="nextStep"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, unref } from 'vue'
import SetDataArea from '../SetDataArea/SetDataArea.vue'
import SetDataAreaTitle from '../SetDataAreaTitle/SetDataAreaTitle.vue'
import SetAttch from '../SetAttch/SetAttch.vue'
import type { Recordable } from '@/types/global'
import { addExcelArea } from '@/api/varExcel'
import { ElLoading, ElMessage } from 'element-plus'
import { storeToRefs } from 'pinia'
import { useCommentExcel } from '@/stores/commentExcel'

const props = defineProps(['areaTypeLen'])
const commentExcelStore = useCommentExcel()
const { getFileInfo } = storeToRefs(commentExcelStore)
const emits = defineEmits(['success'])
const activeStep = ref(0)
const setAttchRef = ref()
const setDataAreaRef = ref()
const setDataAreaTitleRef = ref()
const currentAreaMark = reactive<Recordable>({})

const nextStep = async (index = 1, data: any) => {
  switch (activeStep.value) {
    case 0:
      Object.assign(currentAreaMark, unref(data))
      break
    case 1:
      if (data) {
        Object.assign(currentAreaMark, {
          titleArea: JSON.stringify(data.titleArea),
          excelAreaTitle: data.excelAreaTitle
        })
      }
      if (index == -2) {
        currentAreaMark.desGroups = []
        // 保存
        await saveArea()
        index = -1
      }
      break
    case 2:
      if (index != -1) {
        if (data.desGroups.beginRow != '') {
          currentAreaMark.desGroups = [data.desGroups]
        } else {
          currentAreaMark.desGroups = []
        }
        try {
          // 保存
          saveArea()
        } catch {
          return
        }
      }

      break
    default:
      break
  }

  activeStep.value += index
}

const saveArea = async () => {
  currentAreaMark.fileId = getFileInfo.value.varFileId
  const loadingInstance = ElLoading.service({
    fullscreen: true
  })
  try {
    const { data } = await addExcelArea(currentAreaMark)
    if (data.code == 200 && data.result != null) {
      ElMessage.success('保存成功！')
      // 保存成功。清空组件状态
      setDataAreaRef.value.resetFormState()
      setDataAreaTitleRef.value.resetExcelAreaTitleState()
      setAttchRef.value.resetFormState()
      emits('success', data)
    } else {
      return ElMessage.error(data.message || '保存失败！')
    }
  } catch {}
  loadingInstance.close()
}
</script>
<style lang="scss">
.setdata-step {
  .el-steps--simple {
    padding: 8px 15px 0;
  }
  .el-step.is-simple {
    .el-step__title {
      font-size: 12px;
    }
    .el-step__arrow {
      &::before {
        transform: rotate(-45deg) translateY(-2px);
        transform-origin: 0 0;
        height: 8px;
      }
      &::after {
        transform: rotate(45deg) translateY(2px);
        transform-origin: 100% 100%;
        height: 8px;
      }
    }
  }
}
</style>
