<template>
    <div class="store-page">
        <Breadcrumb />
        <a-card title="路径详情">
            <a-descriptions :data="info" :column="2" />
            <div class="buttonGroup">
                <a-button type="primary" status="danger" size="large" :loading="buttonLoading"
                    @click="changePathState(2)" :disabled="data.state === 2">{{ data.state === 2 ? '已拒绝' :
                    '拒绝'}}</a-button>
                <a-button type="primary" status="success" size="large" :loading="buttonLoading"
                    @click="changePathState(1)" :disabled="data.state === 1">{{ data.state === 1 ? '已通过' :
                    '通过'}}</a-button>
            </div>
            <MapContainer v-if="showMap" :point_list="data.point_list" :pathData="data.data" />
        </a-card>
    </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { GetPathDetail, ChangePathState } from '@/api/pathData'
import { Notification } from '@arco-design/web-vue'
import { useRoute, useRouter } from 'vue-router'
import MapContainer from '@/components/Map/MapContainer.vue'

const route = useRoute()
const router = useRouter()

const loading = ref(false)
const buttonLoading = ref(false)
const showMap = ref(false)
const data = ref({})
const nextId = ref()
const info = ref([])

function getState(state) {
    switch (state) {
        case 0:
            return '待审核'
        case 1:
            return '审核通过'
        case 2:
            return '审核失败'
    }
    return '未知'
}

const changePathState = async (state) => {
    try {
        buttonLoading.value = true
        const res = await ChangePathState({ id: data.value.id, state })
        if (!res || res.code !== 0)
            return Notification.error({
                title: '改变路径状态失败！',
                content: res?.msg ?? '请稍后再试'
            })
        Notification.success({
            title: '改变成功！',
            content: res.msg
        })
        router.push(`/path/detail/${res.data || Number(data.value.id) + 1}`)
    } catch (error) {
        Notification.error({
            title: '改变路径状态失败！',
            content: error.message || '请稍后再试'
        })
    } finally {
        buttonLoading.value = false
    }
}

const getPathDetail = async (id) => {
    try {
        loading.value = true
        showMap.value = false
        const res = await GetPathDetail({ id })
        if (!res || res.code !== 0)
            return Notification.error({
                title: '获取路径数据失败！',
                content: res?.msg ?? '请稍后再试'
            })

        data.value = res.data
        showMap.value = true

        info.value = [
            { label: '路径ID', value: res.data.id },
            { label: '跑区名称', value: res.data.run_zone_name },
            { label: '跑步距离', value: res.data.distance + ' Km' },
            { label: '跑步时长', value: formatSecondsToMinSec(res.data.time) },
            { label: '平均配速', value: res.data.speed },
            { label: '审核状态', value: getState(res.data.state) }
        ]
    } catch (error) {
        Notification.error({
            title: '获取路径数据失败！',
            content: error.message || '请稍后再试'
        })
    } finally {
        loading.value = false
    }
}

onMounted(() => {
    getPathDetail(route.params.id)
})

watch(() => route.params.id, (newId) => {
    getPathDetail(newId)
})

function formatSecondsToMinSec(totalSeconds) {
    const minutes = Math.floor(totalSeconds / 60);
    const seconds = totalSeconds % 60;

    return `${minutes}分${seconds.toString().padStart(2, '0')}秒`;
}

</script>

<style scoped lang="less">
.buttonGroup {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 16px 0;
}
</style>