<template>
    <view class="container">
        <view class="total-progress"><text>总进度：{{ milestones.progress }}%</text></view>
        <cu-timeline :dataList='milestones.tasks' gap='50px'>
            <template #left="{ item }">
                <view :style="{
                    color: milestoneStatus(item.status)?.color
                }">
                    <view style="margin-bottom: 10rpx;">
                        <text> {{ item.end_at }}</text>
                    </view>
                    <view>
                        <text> 状态：{{ milestoneStatus(item.status)?.label }}</text>
                    </view>
                </view>

            </template>
            <template #dot="{ item }">
                <uni-icons :size="25" :color="milestoneStatus(item.status)?.color"
                    :type="milestoneStatus(item.status)?.icon" style=" padding: 0 5px;"
                    v-if="[30, 40, 50].includes(item.status)"></uni-icons>
                <i class="my" :class="milestoneStatus(item.status)?.icon" style="width: 16px;height: 16px;" v-else></i>
            </template>
            <template #right="{ item }">
                <custom-button type="hollow" :color="milestoneStatus(item.status)?.color" ripple width="auto"
                    @click="redirectOutcomeListPage(item)" font-size="26" :radius="['15px']" autoWidth="auto">{{
                        item.name }}</custom-button>
            </template>
        </cu-timeline>
    </view>
</template>
<script lang="ts" setup>
import { getProjectMilestone } from '@/api/project-center/info';
import CuTimeline from '@/components/cu-timeline/index.vue'
import { MilestoneStatusList } from '@/enums/api';
import { Task } from '@/types/plan-task';


// const clearFiles =
const props = defineProps({
    prj_id: {
        type: String,
        required: true
    }
})


// 根据里程碑状态筛选获取对应的样式
const milestoneStatus = (status: number) => {
    return MilestoneStatusList.find(item => item.status === status)
}

// 里程碑
const milestones = reactive<{ progress: number; tasks: Task[] }>({
    progress: 0, // 总进度
    tasks: [] // 第一级任务信息
})

/**
 * 获取里程碑信息（第一级任务）
 * @param prjId 项目编号
 */
const getMilestone = async () => {
    const { tasks, progress } = await getProjectMilestone({ prj_id: props.prj_id })
    milestones.tasks = tasks
    milestones.progress = progress
    if (tasks.length > 0) {
        // selectedTask(tasks[0].task_id, tasks[0].name)
    }
}

// 进度看板跳转到交付物清单页面
const redirectOutcomeListPage = (task: Task) => {
    uni.navigateTo({ url: `/pages/project/progressing/outcome-list?task_id=${task.task_id}&task_name=${task.name}` })
}

onMounted(() => {
    getMilestone()
})

</script>
<style scoped>
.container {
    min-height: calc(100vh - 88rpx);
    background: #fff;
    margin: 5px;
    padding: 15px 5px 5px 5px;

}

.total-progress {
    font-size: 28rpx;
    margin: 2px 5px 10px 10px;
}
</style>