<template>
    <div>
        <div class="headers">
            <div class="headers-left">
                <div class="imgs">
                    <img v-if="enterpriseLogo" :src="enterpriseLogo" alt="企业LOGO" class="enterprise-logo-img" />
                </div>
                <div class="img-right">
                    <div class="name-title">微育科技</div>
                    <div class="right-name">数智科创 · 通达未来 </div>
                </div>
            </div>
            <div class="headers-right">
                <div class="rights">
                    <div class="rights-names" @click="closeguan">
                        <span>上一级 &lt; </span> <span style="color:#3333;margin-left:8px;">资质详情</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="contents">
            <div class="content-left">
                <div class="content-lefts">
                    <div class="leftss">
                        <div class="leftss-header">
                            <div>{{ detailData.qualification_name || '资质详情' }}</div>
                            <div>
                                <el-button size="small" type="danger" plain @click="showDeleteDialog">删除</el-button>
                                <el-button @click="btnEdint" size="small" style="background-color: #5165f7;color:white;">编辑</el-button>
                            </div>
                        </div>
                        <div class="table-area">
                            <div class="table-header">
                                <div>
                                   <div class="shu"></div> <span class="times"> 资质信息 </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="content-table">
                       
                        <div class="content-areas content-areas2">
                            <div class="contents-left">
                                <span class="table-name">资质认证名称</span>
                            </div>
                            <div class="contents-right">
                                <div class="rightss rightss1"><span class="table-name">{{ detailData.qualification_name || '-' }}</span></div>
                            </div>
                        </div>
                        <div class="content-areas content-areas2" style="top: 4px;">
                            <div class="contents-left" style="border-top: none;">
                                <span class="table-name">证书编号</span>
                            </div>
                            <div class="contents-right" style="border: none;">
                                <div class="rightss rightss1"><span class="table-name">{{ detailData.certificate_number || '-' }}</span></div>
                                <div class="rightss rightss2" style="border-top: none;width: 32%;"><span class="table-name">发证日期</span></div>
                                <div class="rightss rightss3"><span class="table-name">{{ detailData.issue_date || '-' }}</span></div>
                            </div>
                        </div>
                        <div class="content-areas content-areas2" style="top: 5px;">
                            <div class="contents-left" style="border-top: none;">
                                <span class="table-name">有效期至</span>
                            </div>
                            <div class="contents-right">
                                <div class="rightss rightss1"><span class="table-name">{{ detailData.valid_until || '-' }}</span></div>
                                <div class="rightss rightss2" style="width: 32%;"><span class="table-name">发证机构</span></div>
                                <div class="rightss rightss3"><span class="table-name">{{ detailData.issuing_authority || '-' }}</span></div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
            <div class="content-right">

                <div class="leftss-header right-header">
                    <div class="header-area">
                        <div class="area-name" v-for="(item, index) in listDate" :key="index" @click="btnNmae(index)"
                            :class="{ 'active': active == index }">
                            {{ item.name }}
                        </div>
                    </div>
                    <div> <el-button size="small" style="color:#5165f7;">
                            <i class="el-icon-download"></i> 下载</el-button>
                    </div>
                </div>
                <div class="right-area">
                    <div class="preview-images" v-if="detailData.document_path">
                        <div class="image-item">
                            <img :src="detailData.document_path" alt="资质证书" @click="previewImage" />
                        </div>
                    </div>
                    <div class="no-image-tip" v-else>
                        <span>暂无资质证书图片</span>
                    </div>
                </div>

            </div>
        </div>

        <!-- 删除确认弹框 -->
        <el-dialog :visible.sync="deleteDialogVisible" width="400px" :show-close="false" center :destroy-on-close="true" :append-to-body="true">
            <div class="delete-dialog-content">
                <img src="@/assets/err.png" alt="警告" class="delete-icon" />
                <div class="delete-title">确认删除</div>
                <div class="delete-message">确定要删除该资质信息吗？删除后无法恢复</div>
                <div class="delete-buttons">
                    <el-button @click="cancelDelete">取消</el-button>
                    <el-button type="danger" @click="confirmDelete">确定删除</el-button>
                </div>
            </div>
        </el-dialog>

        <!-- 图片预览弹框 -->
        <el-dialog :visible.sync="dialogVisible" :destroy-on-close="true" :append-to-body="true">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>

    </div>
</template>
<script>
import { Details, deletes } from '@/api/resource/qualification/enterprise'
import { getEnterpriseLogo } from '@/utils/auth'

export default {
    data() {
        return {
            enterpriseLogo: '', // 企业LOGO
            active: 0,
            listDate: [
                {
                    name: '资质证书'
                },
            ],
            // 详情数据
            detailData: {
                id: '',
                qualification_name: '',
                certificate_number: '',
                issue_date: '',
                valid_until: '',
                issuing_authority: '',
                document_path: ''
            },
            // 删除确认弹框
            deleteDialogVisible: false,
            // 图片预览
            dialogVisible: false,
            dialogImageUrl: ''
        }
    },

    created() {
        this.loadEnterpriseLogo()
        this.fetchDetail()
    },

    beforeDestroy() {
        this.deleteDialogVisible = false
        this.dialogVisible = false
    },

    methods: {
        // 加载企业LOGO
        loadEnterpriseLogo() {
            const logo = getEnterpriseLogo()
            if (logo) {
                this.enterpriseLogo = logo
            }
        },
        // 获取详情数据
        async fetchDetail() {
            const id = this.$route.query.id
            if (!id) {
                this.$message.warning('缺少资质ID')
                return
            }
            try {
                const res = await Details(id)
                if (res.code === 1 && res.data) {
                    this.detailData = res.data
                } else {
                    this.$message.error(res.msg || '获取详情失败')
                }
            } catch (error) {
                console.error('获取详情失败:', error)
                this.$message.error('获取详情失败')
            }
        },
        // 返回
        closeguan() {
            setTimeout(() => {
                this.$router.go(-1)
            }, 100)
        },
        btnNmae(e) {
            this.active = e
        },
        // 图片预览
        previewImage() {
            if (this.detailData.document_path) {
                this.dialogImageUrl = this.detailData.document_path
                this.dialogVisible = true
            }
        },
        // 编辑跳转
        btnEdint() {
            this.$router.push({
                path: '/enterpriseEdit',
                query: { id: this.detailData.id }
            })
        },
        // 显示删除确认弹框
        showDeleteDialog() {
            this.deleteDialogVisible = true
        },
        // 取消删除
        cancelDelete() {
            this.deleteDialogVisible = false
        },
        // 确认删除
        async confirmDelete() {
            try {
                const res = await deletes(this.detailData.id)
                if (res.code === 1) {
                    this.$message.success('删除成功')
                    this.deleteDialogVisible = false
                    setTimeout(() => {
                        this.$router.go(-1)
                    }, 100)
                } else {
                    this.$message.error(res.msg || '删除失败')
                }
            } catch (error) {
                console.error('删除失败:', error)
                this.$message.error('删除失败')
            }
        }
    }
}
</script>
<style>
.el-tooltip__popper.is-dark {
    color: #F04B4B !important;
    background: #FCF1EB !important;
}

.el-tooltip__popper .popper__arrow {
    border-top-color: #FCF1EB !important;
}

.el-tooltip__popper .popper__arrow::after {
    border-top-color: #FCF1EB !important;
}

.el-tooltip__popper[x-placement^='bottom'] .popper__arrow {
    border-bottom-color: #FCF1EB !important;
}

.el-tooltip__popper[x-placement^='left'] .popper__arrow {
    border-left-color: #FCF1EB !important;
}

.el-tooltip__popper[x-placement^='right'] .popper__arrow {
    border-right-color: #FCF1EB !important;
}
</style>
<style scoped>
.area-name {
    margin-left: 30px;
    cursor: pointer;
}

.active {
    color: #5165f7 !important;
    height: 48px;
}

.header-area {
    display: flex;
    position: relative;
    left: -30px;
}

.rightss3 {
    border-right: none;
    border-left: none;
}

.table-name {
    margin-left: 20px;
}

.rightss2 {
    background: #EDEFFE;
}

.rightss1 {
    border-left: none !important;
    border-right: none !important;
}

.rightss {
    height: 100%;
    border: 1px solid #DCE0FD;
    width: 100%;
    border-top: none;
}

.content-areas2 {
    position: relative;
    top: 1px;
}

.contents-right {
    flex: 1;
    border: 1px solid #DCE0FD;
    line-height: 50px;
    font-size: 14px;
    color: #363636;
    display: flex
}

.contents-left {
    width: 30%;
    border: 1px solid #DCE0FD;
    background: #EDEFFE;
    line-height: 50px;
    font-size: 14px;
    color: #363636;
}

.content-areas {
    display: flex;
    height: 50px;
    flex-wrap: wrap;
}

.right-area {
    width: 90%;
    margin: 0 auto;
    height: calc(100% - 80px);
    background: #f8f8f8;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
}

.preview-images {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.image-item {
    width: 200px;
    height: 200px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background: white;
}

.image-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: #5165f7;
}

.image-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    height: auto;
    display: block;
    object-fit: contain;
}

.no-image-tip {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #999;
    font-size: 14px;
}

.right-header {
    width: 90%;
    margin: 0 auto;
}

.content-table {
    width: 90%;
    margin: 0 auto;
    margin-top: 14px;
}

.times {
    position: relative;
    top: 3px;
}

.table-header {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
}

.table-area {
    margin-top: 12px;
    font-size: 15px;
}

.leftss-header {
    display: flex;
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #3333;
    font-weight: bold;
    justify-content: space-between;
}

.leftss {
    width: 90%;
    margin: 0 auto;
}

.content-lefts {
    background: white;
    height: 100%;
    width: 100%;
    overflow-y: auto;
}

.content-left {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.content-right {
    width: 600px;
    background: white;
}

.contents {
    width: 100%;
    height: calc(100vh - 100px);
    background: #f8f8f8;
    display: flex;
    margin-top: 6px;
}

.shu {
    width: 3px;
    height: 18px;
    background: #5165f7;
    position: relative;
    display: inline-block;
    top: 7px;
}

.rights-names {
    margin-left: 32px;
    cursor: pointer;
    color: #5165f7;
}

.rights {
    width: 96%;
    height: 100%;
    margin: 0 auto;
    line-height: 94px;
    display: flex;
    position: relative;
    left: -27px;
}

.name-title {
    position: relative;
    top: -6px;
    font-weight: bold;
}

.right-name {
    font-size: 12px;
}

.img-right {
    font-size: 14px;
    position: relative;
    top: 40px;
    height: 40px;
    margin-left: 12px;
}

.imgs {
    width: 45px;
    height: 46px;
    background: #5165f7;
    border-radius: 6px;
    position: relative;
    top: 26px;
    margin-left: 24px;
    overflow: hidden;
}

.enterprise-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
}

.headers-right {
    flex: 1;
    background: white;
}

.headers-left {
    width: 222px;
    height: 100%;
    display: flex;
    background: white;
    border-right: 1px solid #EDEFFE;
}

.headers {
    width: 100%;
    height: 90px;
    display: flex;
    border-bottom: 1px solid #EDEFFE;
}

/* 删除确认弹框样式 */
.delete-dialog-content {
    text-align: center;
    padding: 20px;
}

.delete-icon {
 
    margin-bottom: 15px;
}

.delete-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.delete-message {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

.delete-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}
</style>
