<template>
    <div class="detail-container">
        <!-- 返回按钮 -->
        <div class="back-btn">
            <el-button type="danger" plain icon="el-icon-close" size="mini" @click="handleClose">返回</el-button>
        </div>


        <!-- 移交内容区域 -->
        <div class="content-section">
            <div class="section-title">
                <div class="title-bar"></div>
                <span>移交内容</span>
            </div>
            <div class="content-info">
                <span class="project-name">{{ projectName }}</span>
                <span class="receiving-org">接收组织: {{ receivingOrg }}</span>
            </div>
        </div>

        <!-- 文件详情表格 -->
        <div class="table-section">
            <el-table :data="fileList" border style="width: 100%" class="detail-table" v-if="viewStatus === 'record'" max-height="800">
                <el-table-column prop="index" label="序号" width="80" align="center">
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="proName" label="项目名称" min-width="150">
                    <template slot-scope="scope">
                        {{ scope.row.proName || '--' }}
                    </template>
                </el-table-column>
                <el-table-column prop="singleProName" label="单项工程名称" min-width="150">
                    <template slot-scope="scope">
                        {{ scope.row.singleProName || '--' }}
                    </template>
                </el-table-column>
                
                <el-table-column prop="transferTime" label="移交时间" min-width="120">
                    <template slot-scope="scope">
                        {{ scope.row.transferTime || '--' }}
                    </template>
                </el-table-column>
                <el-table-column prop="archiveName" label="档案名称" min-width="300">
                    <template slot-scope="scope">
                        <div class="archive-name-cell file-name-link" @click="viewFile(scope.row)">{{
                            scope.row.archiveName }}</div>
                    </template>
                </el-table-column>

            </el-table>
            <el-table :data="fileList" border style="width: 100%" class="detail-table" v-if="viewStatus === 'accept'" max-height="800">
                <el-table-column prop="index" label="序号" width="80" align="center">
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="transferTime" label="移交时间" min-width="150">
                    <template slot-scope="scope">
                        {{ scope.row.transferTime || '--' }}
                    </template>
                </el-table-column>


                <el-table-column prop="archiveName" label="档案名称" min-width="300">
                    <template slot-scope="scope">
                        <div class="archive-name-cell file-name-link" @click="viewFile(scope.row)">{{
                            scope.row.archiveName }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="接收状态" min-width="120">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.receiveStatus === '1' ? 'success' : 'danger'">
                            {{ scope.row.receiveStatus === '1' ? '已接收' : '未接收' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="archiveName" label="操作" min-width="100" v-if="viewStatus === 'accept'">
                    <template slot-scope="scope">
                        <el-button plain icon="el-icon-check" type="primary" size="mini" v-if="scope.row.receiveStatus === '0'" hasPermi="['transfer:Receice:accept']"
                            @click="handleAccept(scope.row)">确认接收</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 移交接收确认 -->
        <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="confirmTransferStatus">确定</el-button>
            </span>
        </el-dialog>
        <!-- 预览文件 -->
        <ViewFile v-if="isViewflag" :rowData="row" :title="title" @closeDialog="closeDialog" @showColose="showColose"
            :width="600" />
    </div>
</template>

<script>
import { decryptWithSM4 } from '@/utils/sm'
import { getTransferRecordDetailApi } from '@/api/filesTransfer/record'
import {
    getTransferReceiceDetailApi,
    transferReceiveApi
} from '@/api/filesTransfer/accept'
import ViewFile from '@/views/viewFile/viewFile.vue'
export default {
    name: 'RecordDetail',
    components: { ViewFile },
    data() {
        return {
            id: decryptWithSM4(this.$route.query.id),
            viewStatus: decryptWithSM4(this.$route.query.viewStatus),
            projectName: '',
            receivingOrg: '',
            fileList: [],
            confirmDialogVisible: false,
            isViewflag: false,
            row: {},
            title: "",
            form: {},
        }
    },

    mounted() {
        // 禁用页面滚动
        document.body.style.overflow = 'hidden';
    },
    beforeDestroy() {
        // 恢复页面滚动
        document.body.style.overflow = 'auto';
    },
    created() {
        this.initData();
    },
    methods: {
        // 预览文件
        viewFile(row) {
            this.title = "预览";
            this.row = row;
            this.isViewflag = true;
        },
        closeDialog() {
            this.isViewflag = false;
        },
        showColose() {
            this.isflag = false;
        },
        handleClose() {
            let obj = null;
            if (this.viewStatus === 'record') {
                obj = { path: "/archivesManagement/filesTransfer/record" }
            } else {
                obj = { path: "/archivesManagement/filesTransfer/accept" }
            }
            this.$tab.closeOpenPage(obj)
        },
        async initData() {
            this.fileList = [];

            const res = this.viewStatus === 'accept' ? await getTransferReceiceDetailApi({ id: this.id }) : await getTransferRecordDetailApi({ id: this.id });
            this.projectName = res?.data?.proName || '/';
            this.receivingOrg = res?.data?.deptName || '/';

            if (Array.isArray(res.data.transferFileDtos) && res.data.transferFileDtos.length > 0) {
                res.data.transferFileDtos.map(item => {
                    const newFile = {
                        id: item.id,
                        proName: item.proName,
                        singleProName: item.singleProName,
                        transferTime: item.transferTime,
                        archiveName: item?.parParentName + '/' + item?.parentName + '/' + item?.fileName,
                        receiveStatus: item.receiveStatus || '0',
                        transferDate: item.transferDate,
                        fileId: item?.fileId || '',
                        proId: item?.proId ||'',
                    }
                    this.fileList.push(newFile);
                })
            }
            // console.log(this.fileList);
            
        },
        // 确认接收
        handleAccept(row) {
            this.form = row;
            this.confirmDialogVisible = true;
            
        },
        // 确认完整性状态
        confirmTransferStatus() {
            this.closeConfirmDialog();
            console.error(this.form);
            
            const id = this.form.id,transferApplyId = this.id,proId = this.form.proId;
            
            transferReceiveApi({ id,transferApplyId,proId }).then(res => {
                if (res.code === 200) {
                    this.$message.success(res.msg || '确认接收成功');
                    this.refreshData();
                } else {
                    this.$message.error(res.msg || '确认接收失败');
                }
            })
        },
        // 关闭确认弹框
        closeConfirmDialog() {
            this.confirmDialogVisible = false;
        },
        // 刷新数据
        async refreshData() {
            this.fileList = [];
            const res = await getTransferReceiceDetailApi({ id: this.id })
            if (Array.isArray(res.data.transferFileDtos) && res.data.transferFileDtos.length > 0) {
                res.data.transferFileDtos.map(item => {
                    const newFile = {
                        id: item.id,
                        proName: item.proName,
                        singleProName: item.singleProName,
                        transferTime: item.transferTime,
                        proId: item.proId,
                        archiveName: item?.parParentName + '/' + item?.parentName + '/' + item?.fileName,
                        receiveStatus: item.receiveStatus || '0',
                        transferDate: item.transferDate,
                        fileId: item?.fileId || '',
                    }
                    this.fileList.push(newFile);
                })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.detail-container {
    padding: 20px;
    background: #fff;
    height: calc(100vh - 120px);
    /* 减去头部导航栏的高度 */
    overflow-y: auto;
    box-sizing: border-box;

    /* 自定义滚动条样式 */
    &::-webkit-scrollbar {
        width: 6px;
        background: #f5f5f5;
    }

    &::-webkit-scrollbar-track {
        background: #f5f5f5;
        border-radius: 3px;
    }

    &::-webkit-scrollbar-thumb {
        background: #c0c4cc;
        border-radius: 3px;
        transition: background 0.3s;
    }

    &::-webkit-scrollbar-thumb:hover {
        background: #909399;
    }
}

.status-section {
    text-align: center;
    margin-bottom: 40px;

    .status-icon {
        margin-bottom: 15px;

        i {
            font-size: 80px;
            color: #409eff;
        }
    }

    .status-text {
        font-size: 24px;
        font-weight: bold;
        color: #333;
    }
}

.content-section {
    margin-bottom: 30px;

    .section-title {
        display: flex;
        align-items: center;
        margin-bottom: 15px;

        .title-bar {
            width: 4px;
            height: 20px;
            background: #409eff;
            margin-right: 10px;
        }

        span {
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }
    }

    .content-info {
        display: flex;
        align-items: center;
        gap: 30px;

        .project-name {
            font-size: 16px;
            color: #333;
        }

        .receiving-org {
            font-size: 14px;
            color: #666;
        }
    }
}

.table-section {
    margin-bottom: 30px;

    .detail-table {
        .archive-name-cell {
            white-space: normal;
            word-break: break-word;
            line-height: 1.4;
        }
    }
}

.back-btn {
    height: 50px;
}

/* 确认弹框样式 */
.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;
}

.file-name-link {
    color: #409EFF;
    cursor: pointer;
}

.file-name-link:hover {
    text-decoration: underline;
}
</style>