<template>
新闻展示


        <a-card title="dsdvsvdv" hoverable class="w-[23vw] h-[32vh]  flex flex-col rounded-lg border-gray-300">

            <template #extra >
           <div class="flex flex-row justify-start">
<!--                <span  class="text-blue-900 font-bold text-xl mt-1">后台管理系统</span>-->
                <button  v-if="edit === false" class=" 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="EnterChildModule(ChildSystem)" >
                <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>

                <button  v-if="edit === true" class=" w-6 h-6  flex items-center justify-center bg-red-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105" @click="EnterChildModule(ChildSystem)" >
                    <CloseOutlined   style="font-size: large ;color:white" />
                </button>
<!--            <a-button  v-else-if="edit === true" type="link"  class="mt-8 w-6 h-6 flex items-center justify-center bg-red-400 text-white rounded-full transition duration-300 ease-in-out transform " @click="deleteCard(index)">-->
<!--               -->
<!--            </a-button>-->
           </div>
            </template>
            <div class="flex flex-row justify-between ">
                <div class="flex-row flex justify-end space-x-5">
                    <div class="flex-col flex text-s text-blue-500">
                        <span class="text-blue-900 font-bold">负责人</span>
                        <span style="color: #04befe" class="font-bold text-blue-300 text-sm text-[80%]">杨怼怼</span>
                    </div>
                    <div class="flex-col flex">
                        <span class="text-blue-900 font-bold">系统周期</span>
                        <span style="color: #04befe" class="font-bold text-blue-300 text-sm text-[80%] ">60天</span>
                    </div>
                    <div class="flex-col flex">
                        <span class="text-blue-900 font-bold">系统状态</span>

                            <div  style="color: #04befe" class="text-sm text-[80%]  ml-1 text-blue-300 font-bold" v-if="project.isFinish===2">
                                <sync-outlined :spin="true"  style="color: #04befe" v-if="project.isFinish===2"/>
                                进行中
                            </div>



                            <div  style="color: #04befe" class="text-sm text-[80%]  ml-1 text-blue-300 font-bold" v-if="project.isFinish===1">
                                <check-circle-two-tone two-tone-color="cyan" v-if="project.isFinish===1"/>
                                已完成
                            </div>



                            <div style="color: #04befe" class="text-sm text-[80%]  ml-1 text-blue-300 font-bold" v-if="project.isFinish===0">
                                <PlayCircleOutlined two-tone-color="rgba(154, 154, 154, 1)" v-if="project.isFinish===0"/>
                                未开始
                            </div>


                            <div style="color: #04befe" class="text-sm text-[80%]  ml-1  font-bold" v-if="project.isFinish===-1">
                                <InfoCircleOutlined style="color: #04befe" v-if="project.isFinish===-1"/>
                                已暂停
                            </div>




                    </div>
                    <div class="flex flex-col mb-2 ">
                        <span  class="font-bold text-blue-900 ">系统工作量</span>
                        <span style="color: #04befe" class="text-blue-300 text-sm text-[85%] font-bold">120人/天</span>

                    </div>
                </div>
            </div>

            <div class="flex-col flex">
                <span class="font-bold text-blue-900">简介</span>
                <span style="color: #04befe" class="w-[15vw] break-words text-blue-300 text-sm text-[85%] ">dwhdbwudheuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuw</span>
            </div>

        </a-card>

</template>
<script setup>
import {
    CheckCircleTwoTone,
    CloseOutlined,
    InfoCircleOutlined,
    PlayCircleOutlined,
    SyncOutlined
} from "@ant-design/icons-vue";
import {reactive, ref} from "vue";
// const project = defineProps(["name","id","isFinish","principalUser","description","cycle","workLoad","tags"])
const project  = reactive({
    isFinish:2,
})
const edit = ref(false)
</script>