<template>
    <div class="app-container">
        <el-card class="toolbar-card">
            <div class="toolbar">
                <div class="toolbar-left">
                    <el-button type="warning" plain icon="el-icon-bottom" size="mini" @click="handleFileExtract"
                        v-if="fileStatus === '0' && !integrityStatus">档案抽取</el-button>
                    <el-button type="success" plain icon="el-icon-finished" size="mini" @click="moveListConfirm"
                        v-if="fileStatus === '0' && !integrityStatus">移交清单确认</el-button>
                    <el-button type="success" plain icon="el-icon-finished" size="mini" @click="handleIntegrityStatus"
                        v-if="fileStatus === '0' && integrityStatus">完整性确认</el-button>
                    <el-button type="danger" plain icon="el-icon-close" size="mini" @click="handleClose">返回</el-button>
                </div>

            </div>
        </el-card>
        <el-row :gutter="24" class="content-row">
            <el-col :span="8" class="pane-left">
                <LeftTree @handleNodeClick="handleNodeClick" :projectId="projectId" :fileStatus="fileStatus" />
            </el-col>
            <el-col :span="16" class="pane-right">
                <RightTable :selectedNode="selectedNode" :projectId="projectId" :fileStatus="fileStatus" />
            </el-col>
        </el-row>

        <!-- 档案同步进度弹框 -->
        <el-dialog :visible.sync="syncDialogVisible" :close-on-click-modal="false" :close-on-press-escape="false"
            :show-close="false" width="400px">
            <div slot="title" class="dialog-title">
                <span>档案同步</span>
            </div>
            <div class="sync-content">
                <div class="sync-icon">
                    <i class="el-icon-loading" v-if="isSyncing"></i>
                    <i class="el-icon-success" v-else-if="syncSuccess"></i>
                    <i class="el-icon-error" v-else-if="syncError"></i>
                </div>
                <div class="sync-text">
                    <p v-if="isSyncing">档案同步中，请稍候...</p>
                    <p v-else-if="syncSuccess" class="success-text">同步档案已完成</p>
                    <p v-else-if="syncError" class="error-text">档案同步失败</p>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="clear-btn" @click="closeSyncDialog" v-if="!isSyncing">取消</el-button>
                <el-button type="primary" class="search-btn" @click="closeSyncDialog" v-if="!isSyncing">确定</el-button>
            </span>
        </el-dialog>

        <!-- 完整性确认弹框 -->
        <el-dialog :visible.sync="confirmDialogVisible" :close-on-click-modal="false" :close-on-press-escape="false"
            :show-close="true" width="450px">
            <div slot="title" class="dialog-title">
                <span>操作确认</span>
            </div>
            <div class="confirm-content">
                <div class="confirm-icon">
                    <i class="el-icon-question"></i>
                </div>
                <div class="confirm-text">
                    <p class="main-message">确认所有档案已完整,可以进行移交?</p>
                    <p class="sub-message">确认后不可再上传文件。</p>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="clear-btn" @click="confirmDialogVisible = false">取消</el-button>
                <el-button type="primary" class="search-btn" @click="confirmIntegrityStatus">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import LeftTree from './components/leftTree.vue'
import RightTable from './components/rightTable.vue'
import { fileExtractApi, updateIntegrityStatusApi } from '@/api/archivesManagement/fileManager/fileManager'
import { decryptWithSM4 } from '@/utils/sm'
export default {
    name: 'FileData',
    components: {
        LeftTree,
        RightTable,
    },
    data() {
        return {
            projectId: null,
            fileStatus: null,
            // 选中的节点
            selectedNode: null,
            // 档案同步弹框相关
            syncDialogVisible: false,
            isSyncing: false,
            syncSuccess: false,
            syncError: false,
            integrityStatus: false,
            // 确认弹框相关
            confirmDialogVisible: false,
        }
    },
    created() {
        // 获取传递的项目ID
        this.projectId = decryptWithSM4(this.$route.query.id)
        this.fileStatus = decryptWithSM4(this.$route.query.fileStatus)
    },
    methods: {
        handleClose() {
            const obj = { path: "/archivesManagement/fileManager" }
            this.$tab.closeOpenPage(obj)
        },
        // 节点点击事件
        handleNodeClick(data) {
            this.selectedNode = data;
        },
        // 移交清单确认
        moveListConfirm() {
            this.integrityStatus = true;
        },
        // 完整性确认
        handleIntegrityStatus() {
            this.confirmDialogVisible = true;
        },
        // 确认完整性状态
        confirmIntegrityStatus() {
            this.closeConfirmDialog();
            // 调用完整性确认接口
            updateIntegrityStatusApi({ proId: this.projectId })
                .then(res => {
                    if (res.code === 200) {
                        this.$message.success('完整性确认成功');
                        this.closeConfirmDialog();
                        // 可以在这里添加其他逻辑，比如刷新页面或更新状态
                    } else {
                        this.$message.error(res.msg || '完整性确认失败');
                    }
                })
                .catch(error => {
                    this.$message.error('完整性确认失败，请重试');
                    console.error('完整性确认失败:', error);
                });
        },
        // 关闭确认弹框
        closeConfirmDialog() {
            this.confirmDialogVisible = false;
            setTimeout(() => {
                const obj = { path: "/archivesManagement/fileManager" }
                this.$tab.closeOpenPage(obj)
            }, 200);
        },
        // 档案抽取
        handleFileExtract() {
            // 显示同步弹框
            this.syncDialogVisible = true;
            this.isSyncing = true;
            this.syncSuccess = false;
            this.syncError = false;

            // 调用档案抽取接口
            setTimeout(() => {
                fileExtractApi({ projectId: this.projectId })
                    .then(res => {
                        this.isSyncing = false;

                        if (res.code === 200) {
                            this.syncSuccess = true;
                        } else {
                            this.syncError = true;
                        }
                    })
                    .catch(error => {
                        this.isSyncing = false;
                        this.syncError = true;
                        console.error('档案抽取失败:', error);
                    });
            }, 2000);
        },
        // 关闭同步弹框
        closeSyncDialog() {
            this.syncDialogVisible = false;
            this.isSyncing = false;
            this.syncSuccess = false;
            this.syncError = false;
        },

    }
}
</script>

<style scoped>
.app-container {
    padding: 12px;
}

.toolbar-card {
    margin-bottom: 12px;
}

.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.toolbar-left :deep(.el-button)+ :deep(.el-button) {
    margin-left: 8px;
}

.toolbar-right :deep(.el-tag) {
    border-color: #dcdfe6;
}

.content-row {
    min-height: calc(100vh - 200px);
}

.pane-left,
.pane-right {
    background: #fff;
    border-radius: 6px;
    height: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.pane-left {
    overflow: auto;
}

.pane-right {
    overflow: hidden;
}

/* 档案同步弹框样式 */
.dialog-title {
    text-align: left;
}

.dialog-footer {
    text-align: right !important;
}

.dialog-footer .el-button+.el-button {
    margin-left: 8px;
}

.sync-content {
    text-align: center;
    padding: 20px 0;
}

.sync-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.sync-icon .el-icon-loading {
    color: #409EFF;
    animation: rotating 2s linear infinite;
}

.sync-icon .el-icon-success {
    color: #67C23A;
}

.sync-icon .el-icon-error {
    color: #F56C6C;
}

.sync-text p {
    margin: 0;
    font-size: 16px;
    color: #606266;
}

.success-text {
    color: #67C23A !important;
}

.error-text {
    color: #F56C6C !important;
}

@keyframes rotating {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 确认弹框样式 */
.confirm-content {
    display: flex;
    align-items: flex-start;
    padding: 20px 0;
}

.confirm-icon {
    font-size: 48px;
    color: #E6A23C;
    margin-right: 16px;
    flex-shrink: 0;
}

.confirm-text {
    flex: 1;
}

.main-message {
    margin: 0 0 8px 0;
    font-size: 16px;
    color: #303133;
    line-height: 1.5;
}

.sub-message {
    margin: 0;
    font-size: 14px;
    color: #909399;
    line-height: 1.4;
}
</style>