<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" style=" 
    padding-left: 32px">
                <div class="rights" @click="btnFan">
                     <span style="color:#3333 ;"> {{ titleName }}</span>  <span style="margin-left: 6px;"> > 详情</span>
                </div>
            </div>
        </div>
        
        <div class="contents">
            <div class="content-left">
                <div class="content-lefts">
                    <div class="leftss">
                        <div class="leftss-header">
                            <div>{{ detailTitle }}</div>
                            <div>
                                <el-button size="small" type="danger" plain @click="showDeleteDialog">删除</el-button>
                                <el-button size="small" style="background-color: #5165f7;color:white;" @click="btnEdint">编辑</el-button>
                            </div>
                        </div>
                        <div class="table-area">
                            <div class="table-header">
                                <div class="names">
                                    <span class="times">上传凭证｜<span class="namess">上传《产权证书》后可对其进行数据解析，解析结果自动填充</span> </span>
                                </div>
                            </div>
                           <div class="tab-area">
                            <el-table :data="tableData2" border >
                                <el-table-column prop="date" label="产权证书" align="center">
                                    <template #default>
                                        <div class="image-preview-list">
                                            <div v-for="(file, index) in fileListMap[0]" :key="index" class="preview-item">
                                                <img :src="file.url" alt="产权证书" @click="handlePictureCardPreview(file)" />
                                            </div>
                                        </div>
                                        <el-dialog :visible.sync="dialogVisible">
                                            <img width="100%" :src="dialogImageUrl" alt="">
                                        </el-dialog>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="name" label="缴费证明（最近一次）" align="center">
                                    <template #default>
                                        <div class="image-preview-list">
                                            <div v-for="(file, index) in fileListMap[1]" :key="index" class="preview-item">
                                                <img :src="file.url" alt="缴费证明" @click="handlePictureCardPreview(file)" />
                                            </div>
                                        </div>
                                        <el-dialog :visible.sync="dialogVisible">
                                            <img width="100%" :src="dialogImageUrl" alt="">
                                        </el-dialog>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="name" label="变更证明（若有请上传）" align="center">
                                    <template #default>
                                        <div class="image-preview-list">
                                            <div v-for="(file, index) in fileListMap[2]" :key="index" class="preview-item">
                                                <img :src="file.url" alt="变更证明" @click="handlePictureCardPreview(file)" />
                                            </div>
                                        </div>
                                        <el-dialog :visible.sync="dialogVisible">
                                            <img width="100%" :src="dialogImageUrl" alt="">
                                        </el-dialog>
                                    </template>
                                </el-table-column>
                            </el-table>
                           </div>
                        </div>
                        
                        <div class="table-area" style="margin-top: 30px;">
                            <div class="table-header">
                                <div>
                                    <span class="times"> 产权信息｜ </span>
                                </div>
                                <div style="display: flex;">
                                    <div class="youxiaos">
                                        <el-tooltip class="item" effect="dark"
                                            content="注意！设置无效，设置无效后改内容仅保留展但不做应用，默认有效" placement="top-start">
                                            <span>
                                                <i class="el-icon-info" style="margin-right: 5px;"></i>
                                                <span class="youxiao">有效性设置</span>
                                            </span>
                                        </el-tooltip>
                                    </div>
                                    <div class="yuan">
                                        <div class="yuan-left" v-for="(item, index) in tables" :key="index" :class="{
                                            'yuanright': yuanright === index,
                                            'left-radius': yuanright === 0 && index === 0,
                                            'right-radius': yuanright === 1 && index === 1
                                        }">
                                            {{ item.name }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="content-table">
                       <!-- 动态渲染字段 -->
                       <template v-for="(field, index) in fieldConfig.fields">
                         <!-- 普通单行字段 -->
                         <div v-if="!field.split && field.type !== 'select' && field.condition !== 'transferor'" 
                              :key="`field-${index}`"
                              class="content-areas" 
                              :style="{ 'position': 'relative', 'top': index > 0 ? '5px' : '0' }">
                           <div class="contents-left">
                             <span style="margin-left: 20px;">{{ field.label }}</span>
                           </div>
                           <div class="contents-right" :style="{ 'border-top': index === 0 ? '1px solid #DCE0FD' : 'none' }">
                             <span style="margin-left: 20px;">{{ formData[field.key] || '-' }}</span>
                           </div>
                         </div>
                         
                         <!-- 获得方式下拉字段 -->
                         <div v-else-if="field.key === 'acquisitionMethod'" 
                              :key="`acquisition-${index}`"
                              class="content-areas" 
                              :style="{ 'position': 'relative', 'top': index > 0 ? '5px' : '0' }">
                           <div class="contents-left">
                             <span style="margin-left: 20px;">{{ field.label }}</span>
                           </div>
                           <div class="contents-right" :style="{ 'border-top': index === 0 ? '1px solid #DCE0FD' : 'none' }">
                             <span style="margin-left: 20px;">{{ formData.acquisitionMethod || '-' }}</span>
                           </div>
                         </div>
                         
                         <!-- 转让方字段（条件显示） -->
                         <div v-else-if="field.condition === 'transferor' && showTransferor" 
                              :key="`transferor-${index}`"
                              class="content-areas" 
                              :style="{ 'position': 'relative', 'top': '5px' }">
                           <div class="contents-left">
                             <span style="margin-left: 20px;">{{ field.label }}</span>
                           </div>
                           <div class="contents-right">
                             <span style="margin-left: 20px;">{{ formData.transferor || '-' }}</span>
                           </div>
                         </div>
                         
                         <!-- 三列分割字段（授权公告号+专利号） -->
                         <div v-else-if="field.split && field.split[0] === 'patentNumber'" 
                              :key="`patent-${index}`"
                              class="content-areas content-areas2">
                           <div class="contents-left">
                             <span class="table-name">{{ field.label }}</span>
                           </div>
                           <div class="contents-right">
                             <div class="rightss rightss1">
                               <span class="table-name">{{ formData[field.key] || '-' }}</span>
                             </div>
                             <div class="rightss rightss2">
                               <span class="table-name">{{ field.split[1] }}</span>
                             </div>
                             <div class="rightss rightss3">
                               <span class="table-name">{{ formData.patentNumber || '-' }}</span>
                             </div>
                           </div>
                         </div>
                         
                         <!-- 三列分割字段（下年度缴费日期+年费缴纳情况） -->
                         <div v-else-if="field.split && field.split[0] === 'annualFeeStatus'" 
                              :key="`annual-${index}`"
                              class="content-areas content-areas2" 
                              style="top: 7px;">
                           <div class="contents-left" style="border-top: none;">
                             <span class="table-name">{{ field.label }}</span>
                           </div>
                           <div class="contents-right" style="border: none;">
                             <div class="rightss rightss1">
                               <span class="table-name">{{ formatDisplayDate(formData.nextPaymentDate) || '-' }}</span>
                             </div>
                             <div class="rightss rightss2" style="border-top: none;">
                               <span class="table-name">{{ field.split[1] }}</span>
                             </div>
                             <div class="rightss rightss3">
                               <span class="table-name">{{ formData.annualFeeStatus || '-' }}</span>
                             </div>
                           </div>
                         </div>
                         
                         <!-- 日期字段 -->
                         <div v-else-if="field.type === 'date'" 
                              :key="`date-${index}`"
                              class="content-areas" 
                              :style="{ 'position': 'relative', 'top': index > 0 ? '5px' : '0' }">
                           <div class="contents-left">
                             <span style="margin-left: 20px;">{{ field.label }}</span>
                           </div>
                           <div class="contents-right" :style="{ 'border-top': index === 0 ? '1px solid #DCE0FD' : 'none' }">
                             <span style="margin-left: 20px;">{{ formatDisplayDate(formData[field.key]) || '-' }}</span>
                           </div>
                         </div>
                       </template>
                    </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="upload-area">
                        <el-upload
                            class="upload-demo"
                            action="#"
                            list-type="picture-card"
                            :file-list="currentFileList"
                            :on-preview="handlePictureCardPreview"
                            :disabled="true">
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible" :destroy-on-close="true" :append-to-body="true">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 删除确认对话框 -->
        <el-dialog
            :visible.sync="deleteDialogVisible"
            width="500px"
            :show-close="false"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            class="delete-dialog">
            <div class="delete-dialog-content">
                <div class="delete-icon">
                    <img src="@/assets/err.png" alt="删除提醒" class="delete-icon-img" />
                </div>
                <div class="delete-title">删除提醒</div>
                <div class="delete-message">
                    <div>删除后,将一并删除所有内容且无法恢复</div>
                    <div>请谨慎选择!</div>
                </div>
                <div class="delete-buttons">
                    <el-button type="primary" class="confirm-delete-btn" @click="confirmDelete">确认删除</el-button>
                    <el-button class="cancel-delete-btn" @click="cancelDelete">取消</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { show } from '@/api/homepage/corporateInformation'
import { getEnterpriseLogo } from '@/utils/auth'
import { Details,deletes } from '@/api/resource/achievement/knowledge'
export default {
    data() {
        return {
            enterpriseLogo: '', // 企业LOGO图片URL
            type: null, // 知识产权类型
            titleName: '发明专利详情', // 标题名称
            detailTitle: '', // 详情标题（发明名称等）
            typeNameMap: {
                1: '发明专利详情',
                2: '植物新品种详情',
                3: '国家新药详情',
                4: '集成电路布图设计专有权详情',
                5: '实用新型专利详情',
                6: '软件著作权详情',
                7: '外观设计专利详情',
                8: '商标信息详情'
            },
            active: 0,
            listDate: [
                {
                    name: '产权证书'
                },
                {
                    name: '缴费证明'
                },
                {
                    name: '变更证明'
                }
            ],
            yuanright: 0,
            tables: [
                {
                    name: '有效'
                },
                {
                    name: '无效'
                },
            ],
            tableData2: [
                { date: "2025", name: "年度审计报告及财务情况说明书", address: "7500" }
            ],
            // 上传相关
            fileListMap: {
                0: [], // 产权证书的文件列表
                1: [], // 缴费证明的文件列表
                2: []  // 变更证明的文件列表
            },
            dialogVisible: false, // 图片预览对话框
            dialogImageUrl: '', // 预览图片URL
            deleteDialogVisible: false, // 删除确认对话框
            // 获得方式选项
            acquisitionMethodOptions: [
                { label: '自主研发', value: '自主研发', code: 1 },
                { label: '受让', value: '受让', code: 2 },
                { label: '受赠', value: '受赠', code: 3 },
                { label: '并购', value: '并购', code: 4 }
            ],
            // 年费缴纳情况选项
            annualFeeOptions: [
                { label: '已缴纳', value: '已缴纳', code: 1 },
                { label: '未缴纳', value: '未缴纳', code: 0 },
                { label: '待缴纳', value: '待缴纳', code: 2 }
            ],
            // 表单数据
            formData: {
                // 发明专利/实用新型/外观设计通用字段
                inventionName: '', // 发明名称/外观设计名称
                invention_name: '', // 知识产权类型名称（如"发明专利"）
                authorizationNumber: '', // 授权公告号
                patentNumber: '', // 专利号
                authorizationDate: '', // 授权公告日
                acquisitionMethod: '', // 获得方式
                transferor: '', // 转让方
                patentee: '', // 专利权人
                inventor: '', // 发明人/设计人
                address: '', // 地址
                nextPaymentDate: '', // 下年度缴费日期
                annualFeeStatus: '', // 年费缴纳情况
                // 软件著作权字段
                softwareName: '', // 软件名称
                registrationNumber: '', // 登记号
                completionDate: '', // 开发完成日期
                firstReleaseDate: '', // 首次发布日期
                copyrightOwner: '', // 著作权人
                // 集成电路布图字段
                layoutDesignName: '', // 布图设计名称
                rightHolder: '', // 权利人的姓名或者名称
                firstCommercialUseDate: '', // 首次商业利用的时间
                applicationDate: '', // 申请日
                // 国家新药字段
                drugName: '', // 药品名称
                certificateNumber: '', // 证书编号
                mainIngredients: '', // 主要成分
                holder: '', // 持有者
                // 植物新品种字段
                varietyName: '', // 品种名称
                varietyRightNumber: '', // 品种权号
                varietyRightHolder: '', // 品种权人
                genusOrSpecies: '', // 属或者种
                breeder: '', // 培育人
                authorizationDate2: '', // 授权日
                // 商标信息字段
                trademarkName: '', // 商标名称
                internationalClassification: '', // 国际分类
                applicationRegistrationNumber: '', // 申请/注册号
                registrationDate: '' // 注册日期
            }
        }
    },

    computed: {
        // 根据当前激活的tab返回对应的文件列表
        currentFileList() {
            return this.fileListMap[this.active] || []
        },
        // 根据知识产权类型返回字段配置
        fieldConfig() {
            const configs = {
                1: { // 发明专利
                    fields: [
                        { key: 'invention_name', label: '发明名称', type: 'text' },
                        { key: 'authorizationNumber', label: '授权公告号', type: 'text', split: ['patentNumber', '专利号'] },
                        { key: 'authorizationDate', label: '授权公告日', type: 'date' },
                        { key: 'acquisitionMethod', label: '获得方式', type: 'select' },
                        { key: 'transferor', label: '转让方', type: 'input', condition: 'transferor' },
                        { key: 'patentee', label: '专利权人', type: 'text' },
                        { key: 'inventor', label: '发明人', type: 'text' },
                        { key: 'address', label: '地址', type: 'text' },
                        { key: 'nextPaymentDate', label: '下年度年费缴纳日期', type: 'date', split: ['annualFeeStatus', '年费缴纳情况', 'select'] }
                    ]
                },
                5: { // 实用新型
                    fields: [
                        { key: 'invention_name', label: '实用新型名称', type: 'text' },
                        { key: 'authorizationNumber', label: '授权公告号', type: 'text', split: ['patentNumber', '专利号'] },
                        { key: 'authorizationDate', label: '授权公告日', type: 'date' },
                        { key: 'acquisitionMethod', label: '获得方式', type: 'select' },
                        { key: 'transferor', label: '转让方', type: 'input', condition: 'transferor' },
                        { key: 'patentee', label: '专利权人', type: 'text' },
                        { key: 'inventor', label: '发明人', type: 'text' },
                        { key: 'address', label: '地址', type: 'text' },
                        { key: 'nextPaymentDate', label: '下年度年费缴纳日期', type: 'date', split: ['annualFeeStatus', '年费缴纳情况', 'select'] }
                    ]
                },
                6: { // 软件著作权
                    fields: [
                        { key: 'invention_name', label: '软件名称', type: 'text' },
                        { key: 'registrationNumber', label: '登记号', type: 'text' },
                        { key: 'completionDate', label: '开发完成日期', type: 'date' },
                        { key: 'firstReleaseDate', label: '首次发布日期', type: 'date' },
                        { key: 'acquisitionMethod', label: '获得方式', type: 'select' },
                        { key: 'transferor', label: '转让方', type: 'input', condition: 'transferor' },
                        { key: 'copyrightOwner', label: '著作权人', type: 'text' }
                    ]
                },
                4: { // 集成电路布图
                    fields: [
                        { key: 'invention_name', label: '布图设计名称', type: 'text' },
                        { key: 'rightHolder', label: '权利人的姓名或者名称', type: 'text' },
                        { key: 'firstCommercialUseDate', label: '首次商业利用的时间', type: 'date' },
                        { key: 'applicationDate', label: '申请日', type: 'date' },
                        { key: 'registrationNumber', label: '登记号', type: 'text' },
                        { key: 'acquisitionMethod', label: '获得方式', type: 'select' },
                        { key: 'transferor', label: '转让方', type: 'input', condition: 'transferor' },
                        { key: 'nextPaymentDate', label: '下年度年费缴纳日期', type: 'date', split: ['annualFeeStatus', '年费缴纳情况', 'select'] }
                    ]
                },
                7: { // 外观设计
                    fields: [
                        { key: 'invention_name', label: '外观设计名称', type: 'text' },
                        { key: 'authorizationNumber', label: '授权公告号', type: 'text', split: ['patentNumber', '专利号'] },
                        { key: 'authorizationDate', label: '授权公告日', type: 'date' },
                        { key: 'acquisitionMethod', label: '获得方式', type: 'select' },
                        { key: 'transferor', label: '转让方', type: 'input', condition: 'transferor' },
                        { key: 'patentee', label: '专利权人', type: 'text' },
                        { key: 'address', label: '地址', type: 'text' },
                        { key: 'inventor', label: '设计人', type: 'text' },
                        { key: 'nextPaymentDate', label: '下年度年费缴纳日期', type: 'date', split: ['annualFeeStatus', '年费缴纳情况', 'select'] }
                    ]
                },
                3: { // 国家新药
                    fields: [
                        { key: 'invention_name', label: '药品名称', type: 'text' },
                        { key: 'certificateNumber', label: '证书编号', type: 'text' },
                        { key: 'mainIngredients', label: '主要成分', type: 'text' },
                        { key: 'holder', label: '持有者(可能包含多个)', type: 'text' },
                        { key: 'acquisitionMethod', label: '获得方式', type: 'select' },
                        { key: 'nextPaymentDate', label: '下年度年费缴纳日期', type: 'date', split: ['annualFeeStatus', '年费缴纳情况', 'select'] }
                    ]
                },
                2: { // 植物新品种
                    fields: [
                        { key: 'invention_name', label: '品种名称', type: 'text' },
                        { key: 'varietyRightNumber', label: '品种权号', type: 'text' },
                        { key: 'varietyRightHolder', label: '品种权人', type: 'text' },
                        { key: 'genusOrSpecies', label: '属或者种', type: 'text' },
                        { key: 'breeder', label: '培育人', type: 'text' },
                        { key: 'authorizationDate2', label: '授权日', type: 'date' },
                        { key: 'acquisitionMethod', label: '获得方式', type: 'select' },
                        { key: 'nextPaymentDate', label: '下年度年费缴纳日期', type: 'date', split: ['annualFeeStatus', '年费缴纳情况', 'select'] }
                    ]
                },
                8: { // 商标信息
                    fields: [
                        { key: 'invention_name', label: '商标名称', type: 'text' },
                        { key: 'internationalClassification', label: '国际分类', type: 'text' },
                        { key: 'applicationRegistrationNumber', label: '申请/注册号', type: 'text' },
                        { key: 'registrationDate', label: '注册日期', type: 'date' },
                        { key: 'acquisitionMethod', label: '获得方式', type: 'select' },
                        { key: 'nextPaymentDate', label: '下年度年费缴纳日期', type: 'date', split: ['annualFeeStatus', '年费缴纳情况', 'select'] }
                    ]
                }
            }
            return configs[this.type] || configs[1] // 默认返回发明专利配置
        },
        // 是否显示转让方字段
        showTransferor() {
            const method = this.formData.acquisitionMethod
            return method === '受让' || method === '受赠' || method === '并购'
        }
    },

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

    methods: {
        //返回
        btnFan(){
            this.$router.go(-1)
        },
        // 从localStorage加载企业LOGO
        loadEnterpriseLogo() {
            const logo = getEnterpriseLogo()
            if (logo) {
                this.enterpriseLogo = logo
            }
        },
        // 获取企业LOGO（保留作为备用方法，如果localStorage没有则调用API）
        async fetchEnterpriseLogo() {
            // 先尝试从localStorage读取
            const logo = getEnterpriseLogo()
            if (logo) {
                this.enterpriseLogo = logo
                return
            }
            try {
                const res = await show({})
                if (res && res.code === 1 && res.data) {
                    let dataToProcess = res.data
                    if (Array.isArray(res.data)) {
                        dataToProcess = {}
                        res.data.forEach((item, index) => {
                            const parentId = item.parent_id !== undefined ? item.parent_id : index
                            dataToProcess[String(parentId)] = item
                        })
                    }
                    if (dataToProcess['0'] && dataToProcess['0'].list && Array.isArray(dataToProcess['0'].list)) {
                        dataToProcess['0'].list.forEach(imgItem => {
                            if (imgItem.name === 'logo' && imgItem.value) {
                                if (imgItem.value.startsWith('http://') || imgItem.value.startsWith('https://')) {
                                    this.enterpriseLogo = imgItem.value
                                } else if (imgItem.host) {
                                    const host = imgItem.host.endsWith('/') ? imgItem.host : imgItem.host + '/'
                                    const path = imgItem.value.startsWith('/') ? imgItem.value.slice(1) : imgItem.value
                                    this.enterpriseLogo = host + path
                                } else {
                                    this.enterpriseLogo = imgItem.value
                                }
                            }
                        })
                    }
                }
            } catch (error) {
                console.error('获取企业LOGO失败:', error)
            }
        },
        // 获取详情数据
        async fetchDetail() {
            const id = this.$route.query.id
            if (!id) {
                this.$message.error('缺少ID参数')
                this.$router.go(-1)
                return
            }
            try {
                const res = await Details(id)
                if (res && res.code === 1 && res.data) {
                    this.loadDetailData(res.data)
                } else {
                    this.$message.error(res?.msg || '获取详情失败')
                    this.$router.go(-1)
                }
            } catch (error) {
                console.error('获取详情失败:', error)
                this.$message.error('获取详情失败，请稍后重试')
                this.$router.go(-1)
            }
        },
        // 加载详情数据
        loadDetailData(data) {
            // 设置类型和标题
            this.type = data.type || 1
            this.titleName = this.typeNameMap[this.type] || '发明专利详情'
            
            // 设置有效性
            this.yuanright = data.status === 0 || data.status === '0' ? 1 : 0
            
            // 设置详情标题（发明名称等）
            if (this.type === 1 || this.type === 5 || this.type === 7) {
                this.detailTitle = data.name || ''
            } else if (this.type === 6) {
                this.detailTitle = data.software_name || ''
            } else if (this.type === 4) {
                this.detailTitle = data.layout_design_name || ''
            } else if (this.type === 3) {
                this.detailTitle = data.drug_name || ''
            } else if (this.type === 2) {
                this.detailTitle = data.variety_name || ''
            } else if (this.type === 8) {
                this.detailTitle = data.trademark_name || ''
            }
            
            // 映射数据到formData
            if (this.type === 1 || this.type === 5 || this.type === 7) {
                // 发明专利、实用新型、外观设计
                this.formData.inventionName = data.name || ''
                this.formData.invention_name = data.invention_name || ''
                this.formData.authorizationNumber = data.grant_notice_no || ''
                this.formData.patentNumber = data.patent_no || ''
                this.formData.authorizationDate = data.grant_date || ''
                this.formData.patentee = data.patentee || ''
                this.formData.inventor = data.inventor || ''
                this.formData.address = data.address || ''
            } else if (this.type === 6) {
                // 软件著作权
                this.formData.softwareName = data.software_name || ''
                this.formData.registrationNumber = data.patent_no || ''
                this.formData.completionDate = data.completion_date || ''
                this.formData.firstReleaseDate = data.first_release_date || ''
                this.formData.copyrightOwner = data.copyright_owner || ''
            } else if (this.type === 4) {
                // 集成电路布图
                this.formData.layoutDesignName = data.layout_design_name || ''
                this.formData.rightHolder = data.right_holder || ''
                this.formData.firstCommercialUseDate = data.first_commercial_use_date || ''
                this.formData.applicationDate = data.application_date || ''
                this.formData.registrationNumber = data.patent_no || ''
            } else if (this.type === 3) {
                // 国家新药
                this.formData.drugName = data.drug_name || ''
                this.formData.certificateNumber = data.certificate_number || ''
                this.formData.mainIngredients = data.main_ingredients || ''
                this.formData.holder = data.holder || ''
            } else if (this.type === 2) {
                // 植物新品种
                this.formData.varietyName = data.variety_name || ''
                this.formData.varietyRightNumber = data.variety_right_number || ''
                this.formData.varietyRightHolder = data.variety_right_holder || ''
                this.formData.genusOrSpecies = data.genus_or_species || ''
                this.formData.breeder = data.breeder || ''
                this.formData.authorizationDate2 = data.authorization_date || ''
            } else if (this.type === 8) {
                // 商标信息
                this.formData.trademarkName = data.trademark_name || ''
                this.formData.internationalClassification = data.international_classification || ''
                this.formData.applicationRegistrationNumber = data.application_registration_number || ''
                this.formData.registrationDate = data.registration_date || ''
            }
            
            // 通用字段
            this.formData.transferor = data.transferor || ''
            this.formData.nextPaymentDate = data.next_payment_date || ''
            // 所有类型都可能有 invention_name 字段
            if (data.invention_name) {
                this.formData.invention_name = data.invention_name
            }
            
            // 获得方式
            const acquireMode = data.acquire_mode
            const acquisitionMethodOption = this.acquisitionMethodOptions.find(item => item.code === acquireMode)
            this.formData.acquisitionMethod = acquisitionMethodOption ? acquisitionMethodOption.value : ''
            
            // 年费缴纳情况
            const feeStatus = data.fee_status
            const annualFeeOption = this.annualFeeOptions.find(item => item.code === feeStatus)
            this.formData.annualFeeStatus = annualFeeOption ? annualFeeOption.value : ''
            
            // 加载图片
            this.loadImages(data)
        },
        // 加载图片
        loadImages(data) {
            // 产权证书
            if (data.property_right_file) {
                this.fileListMap[0] = [{
                    uid: Date.now(),
                    name: '产权证书',
                    url: this.buildImageUrl(data.property_right_file),
                    status: 'success'
                }]
            }
            // 缴费证明
            if (data.payment_file) {
                this.fileListMap[1] = [{
                    uid: Date.now() + 1,
                    name: '缴费证明',
                    url: this.buildImageUrl(data.payment_file),
                    status: 'success'
                }]
            }
            // 变更证明
            if (data.change_file) {
                this.fileListMap[2] = [{
                    uid: Date.now() + 2,
                    name: '变更证明',
                    url: this.buildImageUrl(data.change_file),
                    status: 'success'
                }]
            }
        },
        // 构建图片URL
        buildImageUrl(path) {
            if (!path) return ''
            if (path.startsWith('http://') || path.startsWith('https://')) {
                return path
            }
            // 如果path是相对路径，可能需要添加host
            return path
        },
        // 格式化日期显示
        formatDisplayDate(dateString) {
            if (!dateString) return ''
            const date = new Date(dateString)
            if (isNaN(date.getTime())) return dateString
            const year = date.getFullYear()
            const month = String(date.getMonth() + 1).padStart(2, '0')
            const day = String(date.getDate()).padStart(2, '0')
            return `${year}-${month}-${day}`
        },
        //取消
        closeguan() {
            this.$router.go(-1)
        },
        // 显示删除确认对话框
        showDeleteDialog() {
            this.deleteDialogVisible = true
        },
        // 取消删除
        cancelDelete() {
            this.deleteDialogVisible = false
        },
        // 确认删除
        async confirmDelete() {
            const id = this.$route.query.id
            if (!id) {
                this.$message.error('缺少ID参数')
                return
            }
            try {
                const res = await deletes(id)
                if (res && res.code === 1) {
                    this.$message.success('删除成功')
                    this.deleteDialogVisible = false
                    // 删除成功后返回上一页
                    this.$router.go(-1)
                } else {
                    this.$message.error(res?.msg || '删除失败')
                }
            } catch (error) {
                console.error('删除失败:', error)
                this.$message.error('删除失败，请稍后重试')
            }
        },
        btnNmae(e) {
            this.active = e
        },
        // 图片预览
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url || ''
            this.dialogVisible = true
        },
        //编辑跳转
        btnEdint() {
            const id = this.$route.query.id
            if (id) {
                this.$router.push({
                    path: '/knowledgeEdit',
                    query: { id: id, type: this.type }
                })
            }
        }
    }
}
</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 {

    border-bottom: 3px solid #5165f7;
    height: 45px;
}

.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;
}

.tab-area {
    margin-top: 24px;
}

.namess {
    color: #5B5E72;
    font-size: 13px;
    margin-left: 12px;
}

.names {
    font-size: 14px;
    color: #363636;
}

:deep .el-tooltip__popper.is-dark {
    color: #F04B4B !important;
}

.right-area {
    width: 90%;
    margin: 0 auto;
    flex: 1;
    background: #f8f8f8;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
    min-height: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.upload-area {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* 统一图片上传区域样式 */
.upload-area ::v-deep .el-upload-list--picture-card {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

.upload-area ::v-deep .el-upload--picture-card {
    width: 148px;
    height: 148px;
    line-height: 150px;
    display: none;
}

.upload-area ::v-deep .el-upload-list--picture-card .el-upload-list__item {
    width: 148px;
    height: 148px;
    margin: 0;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background: white;
}

.upload-area ::v-deep .el-upload-list--picture-card .el-upload-list__item:hover {
    border-color: #409EFF;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}

.upload-area ::v-deep .el-upload-list--picture-card .el-upload-list__item-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

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

.image-preview-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 10px 0;
}

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

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

.preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

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

.ths {
    text-align: center;
    background: #DCE0FD !important;
    color: #363636;
}

.tou {
    height: 30px;
    line-height: 30px;
    color: #606266;
    text-align: center;
}

.financial-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

.financial-table th,
.financial-table td {
    border: 1px solid #ddd;
    padding: 8px 7px;
    text-align: center;
}

.financial-table th {
    background-color: #f5f5f5;
    font-weight: bold;
}

.financial-table .nested-label {

    text-align: center;
    vertical-align: middle;
    font-weight: bold;
}

.table-right {
    flex: 1;
}

.table-left {
    flex: 1;
}

.content-table {

    width: 90%;
    margin: 0 auto;
    margin-top: 14px;
}

/* 默认情况（有效）左边圆角 */
.left-radius {
    border-bottom-left-radius: 16px !important;
    border-top-left-radius: 16px !important;
}

/* 无效情况右边圆角 */
.right-radius {
    border-bottom-right-radius: 16px !important;
    border-top-right-radius: 16px !important;
}

.yuan-left {
    flex: 1;
    text-align: center;
    line-height: 30px;
    background: #f8f8f8;
    /* border-bottom-left-radius: 16px;
    border-top-left-radius: 16px; */
    cursor: pointer;
}

.yuanright {
    flex: 1;
    background: #5165f7;
    color: white;

    /* border-bottom-right-radius: 16px;
    border-top-right-radius: 16px;  */
    text-align: center;
    line-height: 30px;
    cursor: pointer;

}

.youxiaos {
    position: relative;
    top: 6px;
    left: -12px;
    cursor: pointer;
}

/* 修改.yuan的样式，移除外层圆角 */
.yuan {
    width: 100px;
    height: 30px;
    background: white;
    display: flex;
    font-size: 14px;
    overflow: hidden;
    /* 关键：确保内部div的圆角效果不被截断 */
}

/* 默认状态下两个按钮的外侧圆角 */
.yuan-left:first-child {
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.yuan-left:last-child {
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

/* 选中状态样式 */
.yuanright {
    background: #5165f7;
    color: white;
}

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

/* 选中"有效"时的样式 */
.yuan-left.left-radius {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* 选中"无效"时的样式 */
.yuan-left.right-radius {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}


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

.youxiao {
    color: #5B5D76;
    font-size: 13px;
}

.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%;
}

.content-left {
    flex: 1;
    
    height: 100%;
}

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

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

.content-left {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.content-right {
    width: 600px;
    height: 100%;
    background: white;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.content-lefts {
    background: white;
    padding-bottom: 30px;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
}


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

::v-deep .el-table thead {
    background-color: #DCE0FD !important;
    color: #363636 !important;
    font-weight: bold;
}

::v-deep .el-table__header th {
    background-color: #DCE0FD !important;
    color: #363636 !important;
    font-weight: bold;
}




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

    top: -6px;
}

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

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

.img-right {
    font-size: 14px;
    height: 40px;
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.imgs {
    width: 42px;
    height: 40px;
    background: #5165f7;
    border-radius: 6px;
    margin-left: 24px;
    overflow: hidden;
    flex-shrink: 0;
}

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

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

.headers-left {
    width: 222px;
    height: 90px;
    display: flex;
    background: white;
    border-right: 1px solid #EDEFFE;
    align-items: center;
    overflow: hidden;
}

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





.patent-container {
    max-width: 1000px;
    margin: 0 auto;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.patent-header {
    background: linear-gradient(135deg, #6a5acd, #8a7dff);
    color: white;
    padding: 20px 30px;
    text-align: center;
}

.patent-header h1 {
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: 600;
}

.patent-header p {
    opacity: 0.9;
    font-size: 14px;
}

.search-box {
    padding: 15px 30px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #eaeaea;
}

.search-box input {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.3s;
}

.search-box input:focus {
    outline: none;
    border-color: #8a7dff;
    box-shadow: 0 0 0 2px rgba(138, 125, 255, 0.2);
}

.patent-table {
    width: 100%;
    border-collapse: collapse;
}

.patent-table th {
    background-color: #f0e6ff;
    color: #5a4fcf;
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    border-bottom: 1px solid #ddd;
}

.patent-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s;
}

.patent-table tr:hover td {
    background-color: #f9f7ff;
}

.patent-table tr:last-child td {
    border-bottom: none;
}

.status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.status-paid {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.patent-footer {
    padding: 15px 30px;
    text-align: center;
    color: #777;
    font-size: 14px;
    border-top: 1px solid #eaeaea;
    background-color: #fafafa;
}


.shu{
  width: 10px;
    height: 20px;
    background: #5165f7;
    position: relative;
    top: -24px;
    left: 40%;
}
.active{
    color: #5165f7 !important;
}
.rights-names{
    margin-left: 32px;
    cursor: pointer;
}
.rights{
    width: 96%;
    height: 100%;
    margin: 0 auto;
    line-height: 94px;
    display: flex;
    position: relative;
    left: -27px;
    cursor: pointer;
}
.name-title{
    position: relative;
    top: -6px;
    font-weight: bold;
}
.right-name{
    font-size: 12px;
}
.img-right{
    font-size: 14px;
    height: 40px;
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 删除确认对话框样式 */
.delete-dialog ::v-deep .el-dialog {
    border-radius: 8px;
    padding: 0;
}

.delete-dialog ::v-deep .el-dialog__body {
    padding: 0;
}

.delete-dialog-content {
    padding: 40px 30px 30px;
    text-align: center;
}

.delete-icon {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.delete-icon-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.delete-title {
    font-size: 18px;
    font-weight: 500;
    color: #363636;
    margin-bottom: 20px;
}

.delete-message {
    font-size: 14px;
    color: #606266;
    line-height: 24px;
    margin-bottom: 30px;
}

.delete-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.confirm-delete-btn {
    background-color: #5165f7;
    border-color: #5165f7;
    color: white;
    padding: 10px 30px;
    border-radius: 4px;
}

.confirm-delete-btn:hover {
    background-color: #4054e6;
    border-color: #4054e6;
}

.cancel-delete-btn {
    background-color: white;
    border: 1px solid #DCDFE6;
    color: #606266;
    padding: 10px 30px;
    border-radius: 4px;
}

.cancel-delete-btn:hover {
    border-color: #C0C4CC;
    color: #606266;
}
</style>