<!--
@ 作者: 秦东
@ 时间: 2024-11-01 09:19:48
@ 备注: 任务列表
-->
<script lang='ts' setup>
import { useRoute,useRouter } from 'vue-router'

import { gainAppTask } from '@/api/lowCode/type'
import { gainAppAllTaskList,getAppTaskList } from '@/api/lowCode/index'

import Header from '@/views/common/header/formTable/header.vue'
import SearchTask from '@/views/common/header/formTable/search.vue'
import AppPageInfo  from '@/views/formTable/pageInfo.vue'

const openAppPage = ref(false)  //打开页面
const lookInfo = ref<any>("") //查看内容
const route = useRoute()
const router = useRouter()
const appKey = ref<number>(route.query.id)
const taskTitle = ref<number>(route.query.title)
const taskScrollbar = ref(null) //滚动条
const loadingList = ref(false)  //是否显示加载
const loadText = ref("数据加载中，请稍后......")
const _scrollTop = ref<number>(0)
const appContent = reactive<any>({
    appKey:route.query.id,
	appId:"",
	taskTitle:route.query.title,
	taskId:"",
	taskKey:"",
})

const searchInfo = reactive<gainAppTask>({
    page: 1,
    pagesize: 6,
    id: appKey,
    class: route.query.class,
    title:""
})
const appTaskList = ref<any>([])
const logCount = ref<number>(0)
const classType = ref<number>(route.query.class*1)
/**
@ 作者: 秦东
@ 时间: 2024-11-01 14:06:42
@ 功能: 获取列表内容
*/
const gainAppTaskList = () => {
    loadText.value = "数据加载中，请稍后......"
    loadingList.value = true
    console.log("route.query.class:",route.query.class)
    switch (route.query.class*1) {
        case 1:
            searchInfo.class = 2
            console.log("获取任务列表内容---------->",searchInfo)
            getAppTaskList(searchInfo)
                .then((data:any) => {
                    console.log("获取任务列表内容===========>",data)
                    logCount.value = logCount.value + data.data.count
                    if(data.data.list){
                        appTaskList.value.push(...data.data.list)
                    }
                    let allPageCount = data.data.total
                    console.log("获取任务列表内容=====111======>",allPageCount,logCount.value)
                    if(allPageCount > 0){
                        if(logCount.value < allPageCount){
                            let pagenum = searchInfo.pagesize - data.data.count
                            console.log("获取任务列表内容====pagenum=======>",pagenum)
                            if (pagenum > 0) {
                                loadText.value = ""
                                loadingList.value = true
                            }else{
                                loadText.value = ""
                                loadingList.value = false
                            }
                        }else{
                            let pagenum = searchInfo.pagesize - data.data.count
                            if (pagenum < 0) {
                                loadText.value = ""
                                loadingList.value = true
                            }else{
                                loadText.value = "此选项没有数据！"
                                loadingList.value = true
                            }
                            
                        }
                    }else{
                        loadText.value = "此选项没有数据！"
                        loadingList.value = true
                    }
                })
            break;
        case 2:
            searchInfo.class = 3        
            getAppTaskList(searchInfo)
                .then((data:any) => {
                    console.log("获取任务列表内容===========>",data)
                    logCount.value = logCount.value + data.data.count
                    if(data.data.list){
                        appTaskList.value.push(...data.data.list)
                    }
                    
                    if(data.data.total > 0){
                        if(logCount.value < data.data.total){
                            let pagenum = searchInfo.pagesize - data.data.count
                            if (pagenum > 0) {
                                loadText.value = ""
                                loadingList.value = true
                            }else{
                                loadText.value = ""
                                loadingList.value = false
                            }
                        }else{
                            let pagenum = searchInfo.pagesize - data.data.count
                            if (pagenum < 0) {
                                loadText.value = ""
                                loadingList.value = true
                            }else{
                                loadText.value = "此选项没有数据！"
                                loadingList.value = true
                            }
                        }
                    }else{
                        loadText.value = "此选项没有数据！"
                        loadingList.value = true
                    }
                })
            break;
        case 3:
            searchInfo.class = 5        
            getAppTaskList(searchInfo)
                .then((data:any) => {
                    console.log("获取任务列表内容===========>",data)
                    logCount.value = logCount.value + data.data.count
                    if(data.data.list){
                        appTaskList.value.push(...data.data.list)
                    }
                    
                    if(data.data.total > 0){
                        if(logCount.value < data.data.total){
                            let pagenum = searchInfo.pagesize - data.data.count
                            if (pagenum > 0) {
                                loadText.value = ""
                                loadingList.value = true
                            }else{
                                loadText.value = ""
                                loadingList.value = false
                            }
                        }else{
                            let pagenum = searchInfo.pagesize - data.data.count
                            if (pagenum < 0) {
                                loadText.value = ""
                                loadingList.value = true
                            }else{
                                loadText.value = "此选项没有数据！"
                                loadingList.value = true
                            }
                        }
                    }else{
                        loadText.value = "此选项没有数据！"
                        loadingList.value = true
                    }
                })
            break;
        case 4:
            console.log("route.query.class:222",route.query.class)
            searchInfo.class = 1
            gainAppAllTaskList(searchInfo)
                .then((data:any) => {
                    console.log("获取列表内容",data)
                    logCount.value = logCount.value + data.data.count
                    if(data.data.list){
                        appTaskList.value.push(...data.data.list)
                    }
                    
                    if(data.data.total > 0){
                        if(logCount.value < data.data.total){
                            let pagenum = searchInfo.pagesize - data.data.count
                            if (pagenum > 0) {
                                loadText.value = ""
                                loadingList.value = true
                            }else{
                                loadText.value = ""
                                loadingList.value = false
                            }
                        }else{
                            let pagenum = searchInfo.pagesize - data.data.count
                            if (pagenum < 0) {
                                loadText.value = ""
                                loadingList.value = true
                            }else{
                                loadText.value = "此选项没有数据！"
                                loadingList.value = true
                            }
                        }
                    }else{
                        loadText.value = "此选项没有数据！"
                        loadingList.value = true
                    }
                })
            break;
        case 5:
            searchInfo.class = 2
            gainAppAllTaskList(searchInfo)
                .then(({data}) => {
                    console.log("获取列表内容",data)
                    logCount.value = logCount.value + data.data.count
                    appTaskList.value.push(...data.list)
                    if(data.data.total > 0){
                        if(logCount.value < data.data.total){
                            let pagenum = searchInfo.pagesize - data.data.count
                            if (pagenum > 0) {
                                loadText.value = ""
                                loadingList.value = true
                            }else{
                                loadText.value = ""
                                loadingList.value = false
                            }
                        }else{
                            let pagenum = searchInfo.pagesize - data.data.count
                            if (pagenum < 0) {
                                loadText.value = ""
                                loadingList.value = true
                            }else{
                                loadText.value = "此选项没有数据！"
                                loadingList.value = true
                            }
                        }
                    }else{
                        loadText.value = "此选项没有数据！"
                        loadingList.value = true
                    }
                })
            break;
        default:
            break;
    }
}

onMounted(() => {
    gainAppTaskList()
})

/**
@ 作者: 秦东
@ 时间: 2024-11-01 11:26:50
@ 功能: 搜索
*/
const searchQuery = (val:any) => {
    console.log("执行收缩",val);
    searchInfo.page = 1
    searchInfo.title = val
    logCount.value = 0
    appTaskList.value = []
    _scrollTop.value = 0
    gainAppTaskList()
}

/**
@ 作者: 秦东
@ 时间: 2024-11-01 11:44:03
@ 功能: 监听滚动条状态
*/
const onHandleAppTaskScroll = (event:any) => {
    console.log("onHandleScroll",loadingList.value, event)
    if (loadingList.value === true) {
        return
    }
    let wrapRef = taskScrollbar.value.wrapRef
    taskScrollbar.value.moveY = wrapRef.scrollTop * 100 / wrapRef.clientHeight
    taskScrollbar.value.moveX = wrapRef.scrollLeft * 100 / wrapRef.clientWidth
    let poor = wrapRef.scrollHeight - wrapRef.clientHeight
    if (event.scrollTop + 2 >= poor) {
        _scrollTop.value = event.scrollTop
        
        loadingList.value=true
        searchInfo.page++
        // console.log("searchInfo.page",searchInfo.page++)
        gainAppTaskList()
    }
}
/**
@ 作者: 秦东
@ 时间: 2024-10-28 13:40:15
@ 功能: 监听当前页面是否回归到首页
*/
watch(()=>searchInfo.page,(val:number)=>{
    if(val <= 1){
        _scrollTop.value = 0
        taskScrollbar.value.setScrollTop(_scrollTop)
    }
})
/**
@ 作者: 秦东
@ 时间: 2024-11-02 08:34:52
@ 功能: 删除任务
*/
const delTask = (val:any) => {
    ElMessageBox.confirm(
        "您确定要删除此条记录?一经删除！数据将不可恢复！",
        "删除提示",
        {
            confirmButtonText: '同意',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
}
/**
@ 作者: 秦东
@ 时间: 2024-11-02 08:39:12
@ 功能: 撤回申请
*/
const withdrTask = (val:any) => {
    ElMessageBox.confirm(
        "您确定要撤回此次申请？一经撤回！需要此流程重新提交申请！",
        "撤回提示",
        {
            confirmButtonText: '同意',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
}

const stateForm = reactive<any>({
  type: 1, // 1新增；2修改；3查看（表单模式） 
  formData: {
    list: [],
    form: {},
    config: {},
    powerstr: {},
  },
  dict: {},
  appKey: route.query.key,
  appId: route.query.id,
  taskTitle: route.query.title,
  taskId:route.query.formid,
  taskKey:route.query.formKey,
  flowIsTrue:false,
  flowKey:"",
  loading: true,
});
/**
@ 作者: 秦东
@ 时间: 2024-11-04 09:25:31
@ 功能: 查看表单
*/
const openLook = (val:any) => {
    console.log("查看表单",val)
    lookInfo.value = val
    lookInfo.value.masters_key = val.mastersKeyStr
    lookInfo.value.runFlowId = val.runFlowIdStr
    appContent.appKey = val.appKeyStr
    appContent.appId = val.version
    appContent.taskId = val.version
    appContent.taskKey = val.tableKeyStr
    stateForm.type = 3
    stateForm.flowIsTrue = true
    stateForm.flowKey = val.flowkeys
    openAppPage.value = true
}
</script>
<template>
    <div>
        <Header :header-title="taskTitle" :app-key="appKey" menu-tree="" :call-back-click="true" />
        <SearchTask @searchQuery="searchQuery" />
        <el-scrollbar ref="taskScrollbar" class="taskScrollbarCss" @scroll="onHandleAppTaskScroll">
                <el-card v-for="item in appTaskList" :key="item.idStr" class="taskCardBox" shadow="always">
                    <table>
                        <tbody  @click="openLook(item)">
                            <tr>
                                <!-- <td width="80">标题：</td> -->
                                <td colspan="2" class="cardTitle">
                                    {{ item.title }}
                                    <el-tag v-if="item.status==1" size="small" type="info">草稿</el-tag>
                                    <el-tag v-else-if="item.status==2" size="small" type="success">发表</el-tag>
                                    <el-tag v-else-if="item.status==3" size="small" type="warning">审批中</el-tag>
                                    <el-tag v-else-if="item.status==4" size="small" type="info">归档</el-tag>
                                    <el-tag v-else size="small" type="danger">已删除</el-tag>
                                </td>
                            </tr>  
                            <tr>
                                <td class="cardInfoTitle">发起人：</td>
                                <td v-if="[1,2,3].includes(classType)" class="cardInfoTitle">{{ item.creatorInfo.name }}(No.{{ item.creatorInfo.number }})</td>
                                <td v-else class="cardInfoTitle">{{ item.createrInfo.name }}(No.{{ item.createrInfo.number }})</td>
                            </tr> 
                            <tr>
                                <td class="cardInfoTitle" >发起日期：</td>
                                <td class="cardInfoTitle">{{ item.createrTimeStr }}</td>
                            </tr> 
                            <tr>
                                <td class="cardInfoTitle">任务性质：</td>
                                <td class="cardInfoTitle">
                                    <el-text  class="cardInfoTitle" v-if="item.types==1">流程任务</el-text>
                                    <el-text  class="cardInfoTitle" v-else>普通任务</el-text>
                                </td>
                            </tr>   
                        </tbody>
                    </table>
                    <div class="cardFoot">
                        <el-button-group v-if="item.types==1">
                            <el-button v-if="item.isRetract" size="small" @click="withdrTask(item)">撤回</el-button>
                            <el-button v-if="item.status==1" type="success" size="small">提交审批</el-button>
                            <el-button v-if="item.status==2" type="info" size="small">修改</el-button>
                            <el-button v-if="item.status==2" type="primary" size="small">重新发起</el-button>
                            <el-button v-if="item.status==4" type="warning" size="small">申请修改</el-button>
                            <el-button v-if="item.status==1||item.status==2" type="danger" size="small" @click="delTask(item)">删除</el-button>
                        </el-button-group>
                        <el-button-group v-else>
                            <el-button type="warning" size="small">修改</el-button>
                            <el-button type="danger" size="small" @click="delTask(item)">删除</el-button>
                        </el-button-group>
                    </div>
                    <el-descriptions
                        class="margin-top"
                        title=""
                        :column="1"
                        border
                        style="display:none"
                    >
                        <el-descriptions-item width="50">
                            <template #label>
                                <div class="cell-item">标题：</div>
                            </template>
                            {{ item.title }}
                        </el-descriptions-item>
                        <el-descriptions-item width="50">
                            <template #label>
                                <div class="cell-item">发起人：</div>
                            </template>
                            <el-text v-if="[1,2,3].includes(classType)">{{ item.creatorInfo.name }}(No.{{ item.creatorInfo.number }})</el-text>
                            <el-text v-else>{{ item.createrInfo.name }}(No.{{ item.createrInfo.number }})</el-text>
                        </el-descriptions-item>
                        <el-descriptions-item width="50">
                            <template #label>
                                <div class="cell-item">发起日期：</div>
                            </template>
                            {{ item.createrTimeStr }}
                        </el-descriptions-item>
                        <el-descriptions-item width="50">
                            <template #label>
                                <div class="cell-item">状态：</div>
                            </template>
                            <el-tag v-if="item.status==1" type="info">草稿</el-tag>
                            <el-tag v-else-if="item.status==2" type="success">发表</el-tag>
                            <el-tag v-else-if="item.status==3" type="warning">审批中</el-tag>
                            <el-tag v-else-if="item.status==4" type="info">归档</el-tag>
                            <el-tag v-else type="danger">已删除</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item width="50">
                            <template #label>
                                <div class="cell-item">任务性质：</div>
                            </template>
                            <el-text v-if="item.types==1">流程任务</el-text>
                            <el-text v-else>普通任务</el-text>
                        </el-descriptions-item>
                        <!-- <el-descriptions-item width="50">
                            <template #label>
                                <div class="cell-item">当前节点：</div>
                            </template>
                            kooriookami
                        </el-descriptions-item>
                        <el-descriptions-item width="50">
                            <template #label>
                                <div class="cell-item">节点操作人：</div>
                            </template>
                            kooriookami
                        </el-descriptions-item> -->

                    </el-descriptions>
                    <!-- <template #footer>
                        <el-button-group v-if="item.types==1">
                            <el-button v-if="item.isRetract" size="small" @click="withdrTask(item)">撤回</el-button>
                            <el-button v-if="item.status==1" type="success" size="small">提交审批</el-button>
                            <el-button v-if="item.status==2" type="info" size="small">修改</el-button>
                            <el-button v-if="item.status==2" type="primary" size="small">重新发起</el-button>
                            <el-button v-if="item.status==4" type="warning" size="small">申请修改</el-button>
                            <el-button v-if="item.status==1||item.status==2" type="danger" size="small" @click="delTask(item)">删除</el-button>
                        </el-button-group>
                        <el-button-group v-else>
                            <el-button type="warning" size="small">修改</el-button>
                            <el-button type="danger" size="small" @click="delTask(item)">删除</el-button>
                        </el-button-group>
                    </template> -->
                </el-card>
                <div v-if="loadingList" class="loading">{{loadText}}</div>
                <AppPageInfo v-model:is-show="openAppPage" :app-info="appContent" :app-page-info="lookInfo" :state-form="stateForm" :app-flow-info="appFlowInfo" @searchData="gainAppTaskList" />
        </el-scrollbar>
    </div>
</template>
<style  lang='scss' scoped>
.taskScrollbarCss{
    width: 100%;
    padding: 5px 10px 0 10px;
    height: calc(100vh - 130px);
    .taskCardBox{
        width: 100%;
        margin-top:10px;
        :deep .el-card__footer{
            padding: 10px 5px;
            text-align: right;
        }
    }
    :deep .el-card__body{
        padding: 10px 10px;
    }
    .cell-item{
        width: 100%;
    }
}
.cardFoot{
    width: 100%;
    text-align: right;
}
.cardTitle{
    line-height: 30px;
}
.cardInfoTitle{
    font-size:14px;
    line-height:20px;
    color: #999999;
}
.loading{
    width:100%;
    text-align: center;
    height:40px;
    line-height: 40px;
}
</style>