<template>
    <div class="container">
        <a-breadcrumb class="mt-6 ml-6">
            <a-breadcrumb-item><a href="">我的项目</a></a-breadcrumb-item>
            <a-breadcrumb-item><a href="">子系统</a></a-breadcrumb-item>
            <a-breadcrumb-item><a href="">子模块</a></a-breadcrumb-item>
        </a-breadcrumb>
        <div class="flex absolute right-8 mt-6 space-x-4">
            <button class="rounded-lg bg-green-400 hover:bg-green-500 p-1.5 text-white">编辑</button>
            <button class="rounded-lg bg-red-500 hover:bg-red-600 p-1.5 text-white" @click="showAddModal">新增子模块</button>
        </div>
    </div>
    <div class="mt-12 ml-8 flex space-x-16 h-full">
        <div class="flex flex-col space-y-6 border-r border-gray-200 w-80 h-full p-8">
            <p class="text-lg">子系统名称：后台管理系统</p>
            <p>子系统周期：10天</p>
            <p>项目开始时间：</p>
            <p>项目完成时间：</p>
            <div class="space-y-2">
                <p>工作量：</p>
                <p>20人/天</p>
            </div>
        </div>

        <div v-for="(ChildModule, index) in ChildModules" :key="index"  class="flex space-x-9">
            <a-card class="relative bg-blue-400 w-72 h-36 text-white rounded-xl">
                <div class="flex space-x-9">
                    <p class="absolute left-4 top-4">{{ChildModule.name}}</p>
                    <p class="absolute right-4 top-4">负责人: 无</p>
                </div>
                <div class="flex flex-col mt-8">
                    <p class="text-green-100">剩余 3 天</p>
                    <CaretUpOutlined class="absolute bottom-[32%] ml-2"/>
                </div>
                <div class="left-0 absolute bottom-0 h-[35%] w-full bg-white flex justify-center items-center space-x-3">
                    <div class="text-blue-400 flex absolute left-5">
                        <CheckOutlined class="mt-1"/>
                        <p >进行中</p>
                    </div>
                    <div class="flex absolute right-16">
                        <p class="text-blue-400 font-bold text-2xl">2</p>
                        <p class="text-blue-400 mt-2">人/天</p>
                    </div>
                    <button class="absolute right-8 w-6 h-6 flex items-center justify-center bg-blue-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105" @click="$router.push('/WorkLoad/I_Manage/LoginRegisterModule')">
                        <svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">
                            <path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
                        </svg>
                    </button>
                </div>
            </a-card>
        </div>
    </div>
  <!--新增子模块对话框-->
    <a-modal v-model:open="AddModule" :okButtonProps="{ style: { backgroundColor: '#347def',color: 'white'} }" cancel-text="取消" ok-text="确定" title="新增子模块">
        <a-form>
            <div class="flex space-x-5">
                <a-form-item class="my-4" label="子模块名称："><a-input  class="h-8 w-36 border-gray-300 rounded-md"/></a-form-item>
                <a-form-item class="my-4" label="状态：">
                    <a-select
                            ref="select"
                            style="width: 145px;margin-left: 1.7vw"
                            @focus="focus"
                    >
                        <a-select-option value="jack">进行中</a-select-option>
                        <a-select-option value="lucy">未开始</a-select-option>
                        <a-select-option value="disabled">已完成</a-select-option>
                    </a-select>
                </a-form-item>
            </div>
            <div class="flex space-x-5">
                <a-form-item class="my-4" label="周期："><a-input  class="ml-[43px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item>
                <a-form-item class="my-4" label="工作量："><a-input class="ml-[15px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item>
            </div>
            <div class="flex space-x-5">
                <a-form-item class="my-4" label="负责人："><a-input class="ml-[30px] h-8 w-36 border-gray-300 rounded-md"/></a-form-item>
                <a-form-item class="my-4"  label="系统描述：">
                    <a-textarea :rows="1" class="w-36 h-8" />
                </a-form-item>
            </div>

        </a-form>
    </a-modal >
</template>
<script setup>
import {CaretUpOutlined, CheckOutlined} from '@ant-design/icons-vue';
import {onMounted, ref} from 'vue';

const AddModule = ref(false)
function showAddModal(){
    AddModule.value = true;
}
//根据子系统id获取子模块
const token = window.localStorage.getItem('token')
const ChildModules = ref([]);

const params = new URLSearchParams(window.location.search);
const sysId = params.get('id');

onMounted(() => {
    // request.moduleGetBySysId(sysId, token).then((res) => {
    //     console.log("ChildModules:", res)
    //     ChildModules.value = res.data.data
    // })
})


</script>