<template>
    <div class="wrap">
        <div class="header">随访详情</div>
        <div class="card-body">
            <el-row :gutter="20">
                <el-col :span="12" class="card-item">
                    <el-card class="demo-tabs">
                        <el-tabs v-model="activeName" @tab-click="handleClick">
                            <el-tab-pane label="患者档案" name="first">
                                <div class="tabList">
                                    <patient-detail :taskId="taskId" :patientId="patientId" :descColumn="3"></patient-detail>
                                </div>
                            </el-tab-pane>
                            <!-- <el-tab-pane label="随访记录（2）" name="second">
                                <div class="tabList">
                                    <operation-log></operation-log>
                                </div>
                            </el-tab-pane> -->
                            <el-tab-pane label="知识库" name="third">
                                <div class="tabList">
                                    <knowledge-list></knowledge-list>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </el-card>
                </el-col>
                <el-col :span="12" class="card-item">
                    <el-card class="demo-tabs">
                        <visit-details :planId="planId" :taskId="taskId" @submit="submit"></visit-details>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <!-- 10s倒计时弹框 -->
        <el-dialog v-model="dialogVisible" title="任务提醒" width="500" :before-close="closePage">
            <span>点击确定进入下一个任务，{{ countdown }}秒后将关闭当前页面</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="closePage">关闭</el-button>
                    <el-button type="primary" @click="skipNextTask">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>


</template>
<script setup name="TaskDetails">
import { ref, onMounted } from "vue";
import patientDetail from "@/views/main/patientFile/patientFileList/cpns/patientDetail/patientDetail";

// import operationLog from "./operationLog";
import knowledgeList from "@/views/main/knowledgeBase/knowledgeList/knowledgeList";
import visitDetails from "./visitDetails";
import { useRoute, useRouter } from 'vue-router';
// import { getTasks } from  '@/api/patient/task';

const router = useRoute();
const route = useRouter();

let taskDetail = ref({});
const countdown = ref(10);
const dialogVisible = ref(false); // 对话框的可见性

const patientId = ref(router.query.patientId);
const taskId = ref(Number(router.query.id || 0));
const planId = ref(Number(router.query.planId || 0));
const getPlanId = computed(() => {
  return router.query.planId;
});
const getTaskId = computed(() => {
  return router.query.id;
});
// onMounted(() => {
//     console.log(taskId.value)
// })
watch(getPlanId, (nweProps) => {
    planId.value  = Number(router.query.planId || 0)
});
// watch(taskId, (nweProps) => {
//     console.log(taskId.value)
//     taskId.value  = Number(router.query.id || 0)
// });
const activeName = ref('first')
function handleClick() {
    console.log('tab点击事件')
}

let timer = null; // 计时器

const showCountdown = () => {
    dialogVisible.value = true; // 显示对话框

    timer = setInterval(() => {
        countdown.value--; // 更新剩余时间

        if (countdown.value <= 0) { // 如果时间到达0
            closePage();
        }
    }, 1000); // 每秒更新一次
};

// 提交成功
const submit = () => {
    // 获取下一个任务编号
    closePage();
}

// 跳转到下一个任务
const skipNextTask = () => {
    dialogVisible.value = false; // 关闭对话框
    if (timer) clearInterval(timer); // 清除计时器
    
}

// 关闭页面，跳转到列表页面
const closePage = () => {
    dialogVisible.value = false; // 关闭对话框
    if (timer) clearInterval(timer); // 清除计时器
    
    route.push({
        path: '/followUp/followUpTask'
    });

}

</script>
<style lang="scss" scoped>
.wrap {
    .header {
        font-size: 18px;
        line-height: 38px;
        font-weight: bold;
        padding: 15px;
    }

    .card-body {
        .card-item {
            .demo-tabs{
                height: calc(100vh - 160px);
                scrollbar-width: none;
                /* firefox */
                -ms-overflow-style: none;
                /* IE 10+ */
                overflow-x: hidden;
                overflow-y: auto;
            }
            .tabList {
                height: calc(100vh - 280px);
                margin-bottom: 15px;
                scrollbar-width: none;
                /* firefox */
                -ms-overflow-style: none;
                /* IE 10+ */
                overflow-x: hidden;
                overflow-y: auto;
            }
        }
    }
}
</style>