<template>
    <div style=" width:100%;">
        <el-card style="max-width: 100vw;">
            <template #header><strong>子模块{{ projectId }}</strong></template>
        </el-card>

        <el-card class="card">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-row v-for="item in projectItems" :key="item.label">
                        <el-col :span="24">
                            <div style="margin-top: 10%;"><strong>{{ item.label }}</strong></div>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col :span="12">
                    <el-row v-for="item in projectItems" :key="item.label">
                        <el-col :span="24">
                            <div v-if="item.label !== '07.简介'" style="margin-top: 11%;">
                                <template v-if="editMode">
                                    <input v-model="item.value" />
                                </template>
                                <template v-else>
                                    {{ item.value }}
                                </template>
                            </div>
                            <textarea v-if="item.label === '07.简介'" style="resize: none; margin-top: 15%; width: 100%;"
                                v-model="item.value" :disabled="!editMode" rows="4" cols="50">
                    </textarea>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-card>
        <div style="display: flex;justify-content: center;">
            <el-button style="width: 80px;background-color: #409eff;color: azure" @click="toBack" >完成</el-button>
        </div>
        

        <el-alert>
            <router-view />
        </el-alert>
    </div>
</template>


<script lang="ts" setup>

import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { getProjectModDetail} from '@/api/manage';
import { getToken } from '@/utils/auth';
import { ElMessage } from 'element-plus';


const projectItems = ref([
    { label: '01.模块名称', value: '' },
    { label: '02.模块周期', value: '' },
    { label: '03.工作量', value: '' },
    { label: '04.负责人ID', value: '' },
    { label: '05.状态', value: '' },
    { label: '06.时间', value: '' },
    { label: '07.简介', value: '' },
]);

const editMode = ref(false); // 编辑模式状态




//获取id
const route = useRoute();
const projectId = Number(route.query.ModId);



//加载数据
//修改表单内数据
const parseData = (data) => {


    projectItems.value.forEach(item => {
        if (item.label === '01.模块名称') {
            item.value = data.name;
        } else if (item.label === '02.模块周期') {
            item.value = data.cycle;
        } else if (item.label === '03.工作量') {
            item.value = data.workLoad ;
        } else if (item.label === '04.负责人ID') {
            item.value = "1";
        } else if (item.label === '05.状态') {
            item.value = data.status.toString();
        } else if (item.label === '06.时间') {
            item.value = new Date(data.deadLine).toLocaleDateString();
        } else if (item.label === '07.简介') {
            item.value = data.description;
        }
    })
}

//获取数据方法
const fetchData = async () => {
    console.log(projectId);
    
    const res = await getProjectModDetail(projectId, getToken());
    console.log(res);
    if (res.data.data) {
        parseData(res.data.data); // 解析数据
        ElMessage.success('加载成功!');
    }
};


//完成返回上一级
const toBack = () => {
    window.history.go(-1);
}



fetchData();










</script>
<style>
.my-autocomplete li {
    line-height: normal;
    padding: 7px;
}

.my-autocomplete li .name {
    text-overflow: ellipsis;
    overflow: hidden;
}

.my-autocomplete li .addr {
    font-size: 12px;
    color: #b4b4b4;
}

.my-autocomplete li .highlighted .addr {
    color: #ddd;
}

.card {
    width: 28%;
    margin-left: 50%;
    transform: translateX(-50%);
}
</style>