<template>
    <!-- 查看 -->
    <div class="analysis-detail-container">
        <div class="content-header">
            <el-button class="reset-btn" @click="handleClose">返回</el-button>
        </div>
        <div class="content-scrollable">
            <el-card class="analysis-detail-card">
                <template slot="header">
                    <div class="card-header">
                        <div class="card-header-left">
                            <img src="@/assets/enterpriseLibrary/basic-info.png" alt="项目信息">
                            <h3>项目信息</h3>
                        </div>
                        <el-button type="text" v-hasPermi="['enterpriseLibrary:analysis:edit']" class="edit-btn"
                            @click="handleEditProject">
                            编辑
                        </el-button>
                    </div>
                </template>
                <div class="analysis-detail-content">
                    <!-- 两列布局的字段 -->
                    <el-row :gutter="24" class="detail-row">
                        <el-col :span="12" class="detail-col">
                            <div class="detail-field">
                                <div class="field-label">项目名称</div>
                                <div class="field-value">{{ detailData.proName || '--' }}</div>
                            </div>
                        </el-col>
                        <el-col :span="12" class="detail-col">
                            <div class="detail-field">
                                <div class="field-label">项目编号</div>
                                <div class="field-value">{{ detailData.proCode || '--' }}</div>
                            </div>
                        </el-col>
                    </el-row>

                    <el-row :gutter="24" class="detail-row">
                        <el-col :span="12" class="detail-col">
                            <div class="detail-field">
                                <div class="field-label">招标人</div>
                                <div class="field-value">{{ detailData.tenderer || '--' }}</div>
                            </div>
                        </el-col>
                        <el-col :span="12" class="detail-col">
                            <div class="detail-field">
                                <div class="field-label">代理机构</div>
                                <div class="field-value">{{ detailData.agency || '--' }}</div>
                            </div>
                        </el-col>
                    </el-row>

                    <el-row :gutter="24" class="detail-row">
                        <el-col :span="12" class="detail-col">
                            <div class="detail-field">
                                <div class="field-label">开标时间</div>
                                <div class="field-value">{{ detailData.bidOpeningTime || '--' }}</div>
                            </div>
                        </el-col>
                        <el-col :span="12" class="detail-col">
                            <div class="detail-field">
                                <div class="field-label">开标方式</div>
                                <div class="field-value">{{ detailData.bidOpeningMethod || '--' }}</div>
                            </div>
                        </el-col>
                    </el-row>

                    <!-- 项目简介 - 占满宽度 -->
                    <div class="detail-field full-width">
                        <div class="field-label">项目简介</div>
                        <div class="field-value description-value">{{ detailData.proIntroduction || '--' }}</div>
                    </div>
                </div>
            </el-card>
            <div class="table-container">
                <TableModel :showSearch="false" :showOperation="true" :showRightTools="false" ref="detailTableRef"
                    :columnsList="detailColumnsList" :request-api="getBidListAPI" :sendParams="sendParams"
                    :handleColWidth="180" :isShowtableCardStyle="false" :autoLoad="true">
                    <template slot="tableTitle">
                        <div class="card-header">
                            <img src="@/assets/enterpriseLibrary/basic-info.png" alt="标的信息">
                            <h3>标的信息</h3>
                        </div>
                    </template>

                    <template slot="handle" slot-scope="{ data }">
                        <el-button type="text" v-hasPermi="['enterpriseLibrary:analysis:edit']" class="action-btn"
                            style="#FE9400" @click="handleUpdate(data)">
                            修改
                        </el-button>
                    </template>
                </TableModel>
            </div>
        </div>
        <!-- 标段编辑弹窗 -->
        <BidForm v-if="showBidForm" :width="600" :rowData="rowData" :title="title"
            @closeDialog="showBidForm = false" @handleQuery="handleQuery" />
        <!-- 项目信息编辑弹窗 -->
        <ProForm v-if="showProForm" :width="600" :rowData="rowData" :title="title"
            @closeDialog="showProForm = false" @handleProQuery="handleProQuery" />
    </div>
</template>

<script>
import { decryptWithSM4 } from '@/utils/sm'
import { getProDetailAPI,getBidListAPI } from '@/api/analysis/analysis'
import { formLabel, detailColumnsList } from '../config'
import TableModel from '@/components/TableModel2'
import BidForm from './BidForm.vue'
import ProForm from './ProForm.vue'

export default {
    name: 'AnalysisDetail',
    components: {
        TableModel,
        BidForm,
        ProForm
    },
    data() {
        return {
            formLabel,
            detailColumnsList,
            getBidListAPI,
            proId: decryptWithSM4(this.$route.query.proId),
            detailData: {},
            sendParams: {
                proId: decryptWithSM4(this.$route.query.proId),
            },
            showBidForm: false,
            showProForm: false,
            title: '',
            rowData: {},
        }
    },
    created() {
        this.getDetail()
    },
    methods: {
        // 获取详情数据
        async getDetail() {
            try {
                const res = await getProDetailAPI({ proId: this.proId })
                console.log('res:', res);
                if (res.code === 200) {
                    this.detailData = res.data || {}
                } else {
                    this.$message.error(res.msg || '获取详情失败')
                }
            } catch (error) {
                console.error('获取详情失败:', error)
            }
        },
        // 返回
        handleClose() {
            const obj = { path: "/analysis" }
            this.$tab.closeOpenPage(obj)
        },
        // 编辑标段
        handleUpdate(data) {
            this.title = '编辑'
            this.rowData = data
            this.showBidForm = true
        },
        
        /* 搜索操作 */
        handleQuery() {
            this.rowData = {}
            this.$refs.detailTableRef.getTableList()
        },
        /* 更新项目信息 */
        handleProQuery(data){
            this.rowData = {}
            this.detailData = data
        },
        /* 编辑项目信息 */
        handleEditProject() {
            this.title = '编辑'
            this.rowData = this.detailData
            this.showProForm = true
        },
    }
}
</script>

<style scoped lang="scss">
.analysis-detail-container {
    padding: 24px;
    background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%);
    height: calc(100vh - 84px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.content-scrollable {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px; // 为滚动条留出空间

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

    &::-webkit-scrollbar-track {
        background: transparent;
    }

    &::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2);
        border-radius: 3px;

        &:hover {
            background: rgba(0, 0, 0, 0.3);
        }
    }
}

.content-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 20px;
    gap: 12px;
}

.reset-btn {
    width: 98px;
    height: 36px;
    background: #FFFFFF;
    box-shadow: 0px 4px 8px 0px rgba(76, 76, 76, 0.2);
    border-radius: 4px;
    border: none;
    color: #606266;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    cursor: pointer;

    &:hover {
        background: #f5f7fa;
        color: #409EFF;
        box-shadow: 0px 6px 12px 0px rgba(76, 76, 76, 0.3);
    }
}

.analysis-detail-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0px 4px 20px 0px rgba(31, 35, 55, 0.1);
    border: none;
    margin-top: 5px;
    margin-bottom: 10px;

    ::v-deep .el-card__header {
        padding: 20px 24px;
        border-bottom: 1px solid #EBEEF5;
    }

    ::v-deep .el-card__body {
        padding: 24px;
    }
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    .card-header-left {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .header-icon {
        font-size: 20px;
        color: #409EFF;
    }

    h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: #303133;
    }

    .edit-btn {
        color: #409EFF;
        font-size: 14px;
        font-weight: 500;
        padding: 0;
        
        &:hover {
            color: #66b1ff;
        }
    }
}

.analysis-detail-content {
    .detail-row {
        margin-bottom: 10px;

        &:last-of-type {
            margin-bottom: 0;
        }
    }

    .detail-col {
        margin-bottom: 10px;
    }

    .detail-field {
        .field-label {
            color: #424242;
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 8px;
            line-height: 1.5;
        }

        .field-value {
            background: #f5f7fa;
            border-radius: 4px;
            padding: 12px 16px;
            color: #303133;
            font-size: 14px;
            line-height: 1.5;
            min-height: 20px;
            word-break: break-word;
        }

        &.full-width {
            margin-bottom: 0;

            .description-value {
                min-height: 80px;
                white-space: pre-wrap;
                word-wrap: break-word;
            }
        }
    }
}

.table-container {
    margin-bottom: 5px;
}
</style>