<template>
    <Header :show="false" backgroundBox="white">
        <van-nav-bar title="图组" :left-arrow="true" fixed placeholder @click-left="back" />
    </Header>
    <div class="container">
        <div class="steps-placeholder" :style="{ height: `${stepsRef?.offsetHeight}px` }">
            <div ref="stepsRef" class="steps-container">
                <van-steps :active="stepsActive" active-color="#2879fe" inactive-color="#b7bdc6">
                    <van-step>图组上传</van-step>
                    <van-step>基本信息</van-step>
                    <van-step>图组信息</van-step>
                </van-steps>
            </div>
        </div>
        <keep-alive>
            <component :is="componentName" @confirm="handleConfirm" :enclosureLists="enclosureLists"></component>
        </keep-alive>
    </div>
</template>
<script setup>
import AtlasUpload from './components/AtlasUpload/index.vue'
import BasicInfo from './components/BasicInfo/index.vue'
import AtlasInfo from './components/AtlasInfo/index.vue'
import { insertPicture, insertPictureUrl } from '@/api/publish'
import { showLoadingToast, closeToast } from 'vant'

const router = useRouter()
const stepsActive = ref(0)
const stepsRef = ref()
const componentList = [AtlasUpload, BasicInfo, AtlasInfo]
let componentName = AtlasUpload

const enclosureLists = ref([])
const catalog = ref({
    materialSource: 1,
    materialType: 3,
    checkState: 0,
    collect: 0
})
const coverIndex = ref(0)

const handleConfirm = async (data) => {
    if (data.code == 'next') {
        stepsActive.value++
        componentName = componentList[stepsActive.value]
        enclosureLists.value = data.enclosureLists ?? enclosureLists.value
        catalog.value = data.catalog ? { ...catalog.value, ...data.catalog } : catalog.value
        coverIndex.value = data.coverIndex ?? coverIndex.value
    }
    if (data.code == 'pre') {
        stepsActive.value--
        componentName = componentList[stepsActive.value]
    }
    if (data.code == 'submit') {
        showLoadingToast({
            message: '提交中',
            forbidClick: true,
            duration: 0

        })
        catalog.value = data.catalog ? { ...catalog.value, ...data.catalog } : catalog.value
        setCatalog()
        const res = await insertPicture(catalog.value)
        enclosureLists.value.forEach(item => {
            item.mediacatalogId = res.data
        })
        await insertPictureUrl({ enclosureLists: enclosureLists.value })
        closeToast()
        router.replace({ name: 'publish-result' })
    }
}

const setCatalog = () => {
    let materialFilePath = []
    let compressPath = []
    let watermarkPath = []
    let fileSize = 0
    catalog.value.materialFilePath = enclosureLists.value.forEach(item => {
        materialFilePath.push(item.enclosureAddr)
        compressPath.push(item.compressPath)
        watermarkPath.push(item.watermarkPath)
        fileSize += parseInt(item.fileSize)
    })
    catalog.value.materialFilePath = materialFilePath.join(',')
    catalog.value.compressPath = compressPath.join(',')
    catalog.value.watermarkPath = watermarkPath.join(',')
    catalog.value.fileSize = fileSize.toString()
    catalog.value.fileNum = enclosureLists.value.length
    catalog.value.coverpicture = enclosureLists.value[coverIndex.value].enclosureAddr
}

const back = () => {
    xma.navigateBack()
}

</script>
<style lang="scss" scoped>
:deep(#u-a-c .uni-system-choose-location .nav) {
  top: 20px !important;
  background-image: none;
}
:deep(#u-a-c .uni-system-choose-location .nav-btn) {
  background-color: #007aff;
  border-radius: 10px;
}
:deep(#u-a-c .uni-system-choose-location .nav-btn.back) {
  background-color: #007aff;
  border-radius: 10px;
  top: 80px;
  left: 10px;
}
:deep(#u-a-c .uni-system-choose-location .nav-btn.confirm) {
  background-color: #007aff;
  border-radius: 10px;
  top: 80px;
  right: 10px;
}
.steps-container {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 999;

    :deep(.van-steps--horizontal) {
        .van-steps__items {
            padding-bottom: 32px;

            .van-step__title {
                font-size: 16px;
            }

            .van-step__circle-container {
                top: 40px;
            }

            .van-step__line {
                top: 40px;
            }
        }


    }
}
</style>