<template>
    <div class="container">
        <div class="title">
            <div style="flex:1;">
                工作计划
            </div>
            <div>
                <PlusOutlined @click="createWorkPlan(null)" />
            </div>
        </div>
        <div class="filter-container">
            <div>
                <a-select
                    ref="select"
                    style="width: 140px"
                    placeholder="计划状态"
                    >
                    <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>
            </div>

            <div class="filter-buttons">
                <a-input-search v-model:value="pageQuery.key"
                    @keyup.enter="getTaskList"
                    placeholder="输入计划名称"
                />
            </div>
        </div>
 

        <div class="routers-container">
            
            <div class="routers-list">
                <div class="ari-line" v-for="(item,index) in ariLineList" :key="index" @click="checkAriLine(item)">
                    <div class="title">
                        <div :class="item.status == 0 ? 'state-no' : 'state' ">
                            {{item.status == 0 ? '未开始' : '进行中'}}
                        </div>
                        <div style="flex:1;">
                            {{item.taskName}}
                        </div>
                        <div>
                            <a-dropdown>
                                <MoreOutlined />
                                <template #overlay>
                                    <a-menu>
                                        <a-menu-item  @click="toDoPlan(item.id)">
                                            <a href="javascript:;" >执行</a>
                                        </a-menu-item>
                                        <a-menu-item @click="createWorkPlan(item)">
                                            <a href="javascript:;">编辑</a>
                                        </a-menu-item>
                                        <a-menu-item @click="deletePlan(item.id)">
                                            <a href="javascript:;">删除</a>
                                        </a-menu-item>
                                    </a-menu>
                                </template>
                            </a-dropdown>
                        </div>
                    </div>
                    <div class="type" >
                        {{item.description}}
                    </div>
                    <div class="time">更新时间：{{item.createTime}}</div>
                    <div class="username"><UserOutlined />&nbsp;{{item.createId}}</div>
                </div> 
            </div>
        </div>

        <div class="pagenation">
            <a-pagination v-model:current="pageQuery.page" :total="lineListTotal" @change="onPageChange" show-less-items />
        </div>
    </div>    
</template>
<script lang="ts" setup>
    import { UserOutlined,PlusOutlined,FileAddOutlined,LeftOutlined,ImportOutlined,MoreOutlined,EditOutlined } from '@ant-design/icons-vue';
    import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
    import {ref,defineEmits,defineProps,createVNode,watch} from 'vue'
    import { Modal, message } from 'ant-design-vue';
    import { getTaskPageList, deleteTask,executeFlyTask,pendingFlyTask } from '@/api/sys/workplan';

    const emit = defineEmits(["planDetail","createWorkPlan"])
    
    const createWorkPlan = (data) => {
        emit("createWorkPlan",data);
    }

    const props = defineProps(["planListShow"])
    watch(
        ()=>props.planListShow,
        (newVal,oldVal)=>{
            getTaskList();
        }
    )

    const ariLineList = ref([]);
    
    const lineListTotal = ref(0);

    const pageQuery = ref({
        page:0,
        limit:10,
        key:null
    })

    const getTaskList = async ()=>{

        let res = await  getTaskPageList(pageQuery.value);
        ariLineList.value = res.items;
        lineListTotal.value = res.total;
    }

    getTaskList();

    const deletePlan = async (id) => {
        Modal.confirm({
          title: '是否确认删除?',
          icon: createVNode(ExclamationCircleOutlined),
          onCancel() {},
          async onOk() {
            let res = await  deleteTask({id:id});
            if(res){
                message.success("操作成功!");
                getTaskList();
            }else{
                message.error("操作失败!");
            }
            getTaskList();
          },
        });

       
    }

    const toDoPlan = async (id) => {

        Modal.confirm({
          title: '是否确认执行任务?',
          icon: createVNode(ExclamationCircleOutlined),
          onCancel() {},
          async onOk() {
            let res = await  executeFlyTask({id:id});
            if(res){
                message.success("操作成功!");
                getTaskList();
            }else{
                message.error("操作失败!");
            }
            getTaskList();
          },
        });
        
    }

    const detail = (item) => {

    }

    const pendingPlan = async (id) => {

        Modal.confirm({
        title: '是否确认挂起任务?',
        icon: createVNode(ExclamationCircleOutlined),
        onCancel() {},
        async onOk() {
            let res = await  pendingFlyTask({id:id});
            if(res){
                message.success("操作成功!");
                getTaskList();
            }else{
                message.error("操作失败!");
            }
        },
        });

    }

    const checkAriLine = (item)=> {
        emit("planDetail",item);
    }

    const expandedKeys = ref<string[]>(['0-0', '0-1']);
    const selectedKeys = ref<string[]>([]);
    const treeData = ref(
        [
            {
                title: '默认文件夹',
                key: '1',
                children: [
                    {
                        title: '文件夹1',
                        key: '2',
                        isLeaf: true,
                    },
                    {
                        title: '文件夹2',
                        key: '3',
                        isLeaf: true,
                    },
                ],
            }
        ]
    )
 

    const onPageChange = (e)=>{
        pageQuery.value.page = e;
        getTaskList();
    }
            


</script>
<style scoped>
.container{
    width:100%;
    height:100%;
}
.title{
    padding:30px 15px;
    color:#fff;
    font-size:16px;
    display:flex;
}
.filter-container{
    padding:0px 15px;
    display:flex;
    gap:8px;
}
.search-container{
    width: calc( 100% -  30px);
    border-radius: 3px;
    margin: 15px;
    border:1px solid #3a57e890;
}
.filter-buttons{
    display:flex;
    gap:8px;
    text-align: center;
    
}
.filter-button{
    width:32px;
    height:32px;
    border-radius: 3px;
    padding-top:4px;
    background: #3F4150;
    cursor:pointer;
}
.routers-container{
    height: calc( 100% - 160px);
    overflow-y:auto;
    display:flex;
    gap:10px;
    font-size:14px;
}

.file-container{
    width:220px;
    border-right: 1px solid rgba(204, 204, 204, 0.496) ;
    padding:15px
}
.file-container .tip{
    display: flex;
    color:#fff;
    padding:8px 0px;
}

.file-container .tip .info{
    flex:1;
}
.routers-list{
    flex:1;
    padding:15px;
}

.routers-list .tip{
    display: flex;
    color:#fff;
    padding:8px 0px;
}
.routers-list .tip .info{
    flex:1;
}
.ari-line{
    background:#3F4150;
    color:#fff;
    padding:5px 10px;
    margin-bottom:10px;
    position:relative;
    font-size: 13px;
    border-radius: 3px;
}

.ari-line .title{
    width: 100%;
    line-height: 28px;
    padding:2px 0px;
    border-bottom:1px solid #4E5778;
    display: flex;
    gap:8px;
}


.ari-line .state{
    border:1px solid green;
    color:green;
    font-size:12px;
    height:24px;
    line-height:20px;
    padding:0px 4px;
    position:relative;
    top:2px;
}

.ari-line .state-no{
    border:1px solid rgb(246, 18, 18);
    color:rgb(246, 18, 18);;
    font-size:12px;
    height:24px;
    line-height:20px;
    padding:0px 4px;
    position:relative;
    top:2px;
}

.ari-line .type{
    padding:12px 0px;

}

.ari-line .type img{
    width:16px;
}



.ari-line .time{
    font-size: 12px;
    color:#ccc;
}

.ari-line .username{
    margin-top:10px;
    color:#ccc;
}

.pagenation{
    padding:10px 15px;
}

::v-deep .ant-select-selector{
    border:none!important;
    color:#fff!important;
    background:#3F4150!important ;
    border-radius: 3px!important;
}


::v-deep .ant-select-selection-placeholder {
    color:rgba(255, 255, 255, 0.533)!important;
  }
::v-deep .ant-select-arrow {
    color:rgba(255, 255, 255, 0.533)!important;
  }
::v-deep .ant-select-selection-search-input::placeholder{
    color:rgba(255, 255, 255, 0.933)!important;
}


::v-deep .ant-tree {
    background:none!important;
    color:#fff!important;
}

::v-deep .ant-tree-treenode-selected{
    background:#3a57e877!important;
}

::v-deep .ant-tree-treenode-selected::before{
    background:none!important;
}

::v-deep .ant-tree-treenode-selected::after{
    content:"";
    height:28px;
    width:4px;
    background:#3A57E8;
    position:absolute;
    top:0px;
    left:0px;
}

::v-deep .ant-input{
    background:#3F4150!important ;
    border:none!important;
    border-top-left-radius: 3px !important;
    border-bottom-left-radius: 3px !important;
}

::v-deep .ant-input::placeholder{
    color:rgba(255, 255, 255, 0.533)!important;
}


::v-deep .ant-btn-default{
    background:none!important;
    border:none!important;
    outline:none!important;
    color:#fff!important;
    height:30px !important;
    background:#3F4150!important ;
}

::v-deep .ant-pagination-item-link{
    color:#fff!important;
}

::v-deep .ant-pagination .ant-pagination-item a {
    color:#fff!important;
}
::v-deep  .ant-pagination .ant-pagination-item-active a{
    color:#408eff;
}
  
::v-deep .ant-input{
    background:#3c3c3c!important ;
    border:none!important;
    border-top-left-radius: 3px !important;
    border-bottom-left-radius: 3px !important;
    color:#fff!important;
}

::v-deep .ant-input::placeholder{
    color:rgba(255, 255, 255, 0.533)!important;
}
</style>