<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>
            </div>
        </div>
        
        <div class="contents">
            <div class="content-left">
                
                <div class="content-lefts">
                    <div class="leftss">

                        

                        <div class="leftss-header">
                            <div>合同资料｜</div>
                            <div>
                                <el-button size="small"
                                    @click="btnEdint"
                                    style="background-color: #5165f7;color:white;">保存提交</el-button>
                                <el-button size="small"
                                    @click="closeguan"
                                    style="width: 82px;">取消</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 style="width: 97%">
                                <el-table-column prop="date" label="合同资料（签章扫描件）" align="center">
                                    <template #default>
                                        <el-upload
                                            ref="upload0"
                                            class="upload-demo"
                                            :class="{ 'hide-upload': fileListMap[0].length > 0 }"
                                            action="#"
                                            list-type="picture-card"
                                            :http-request="handleUpload0"
                                            :file-list="fileListMap[0]"
                                            :on-preview="handlePictureCardPreview"
                                            :on-remove="(file) => handleRemove(file, 0)"
                                            :auto-upload="true"
                                            :limit="1">
                                            <i class="el-icon-plus"></i>
                                            <div class="shangchuang">上传材料</div>
                                        </el-upload>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="name" label="合同Word文档（选传）" align="center">
                                    <template #default>
                                        <el-upload
                                            ref="upload1"
                                            class="upload-demo"
                                            :class="{ 'hide-upload': fileListMap[1].length > 0 }"
                                            action="#"
                                            list-type="picture-card"
                                            :http-request="handleUpload1"
                                            :file-list="fileListMap[1]"
                                            :on-preview="handlePictureCardPreview"
                                            :on-remove="(file) => handleRemove(file, 1)"
                                            :auto-upload="true"
                                            :limit="1">
                                            <i class="el-icon-plus"></i>
                                            <div class="shangchuang">上传材料</div>
                                        </el-upload>
                                    </template>
                                </el-table-column>
                               
                            </el-table>
                            <!-- 图片预览对话框 -->
                            <el-dialog :visible.sync="dialogVisible" :destroy-on-close="true" :append-to-body="true">
                                <img width="100%" :src="dialogImageUrl" alt="">
                            </el-dialog>
                           </div>
                        </div>
                        
                        <div class="table-area" style="margin-top: 30px;">
                            <div class="table-header">
                                <div>
                                    <span class="times"> 合同信息｜  </span>
                                </div>
                               
                            </div>
                        </div>
                    </div>
                    <div class="content-table">
                       <div class="content-areas">
                         <div class="contents-left">
                           <span style="margin-left: 20px;">合同（项目/费用）名称</span>
                         </div>
                         <div class="contents-right">
                            <span style="margin-left: 20px;">  <el-input v-model="formData.contract_name" placeholder="" style="width: 88%;"></el-input></span>
                         </div>
                       </div>
                       <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"> <el-date-picker
                                style="width: 88%;"
                                v-model="formData.contract_sign_date"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="选择日期">
                                </el-date-picker>  </span></div>
                            <div class="rightss rightss2"><span class="table-name">合同编号</span></div>
                            <div class="rightss rightss3" ><span class="table-name">  <el-input v-model="formData.contract_no" placeholder="" style="width: 88%;"></el-input></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">
                                <el-select v-model="formData.contract_type" placeholder="请选择" style="width: 88%;">
                                <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                                </el-option>
                            </el-select>
                            </span></div>
                            <div class="rightss rightss2" style="border-top: none;"><span class="table-name">合同金额（元）</span></div>
                            <div class="rightss rightss3" ><span class="table-name">
                                <el-input v-model="formData.contract_amount" placeholder="" style="width: 88%;"></el-input>
                            </span></div>
                         </div>
                       </div>
                       <div class="content-areas" style="position: relative;top: 5px;">
                         <div class="contents-left">
                           <span style="margin-left: 20px;">支付截止期限</span>
                         </div>
                         <div class="contents-right">
                            <span style="margin-left: 20px;">
                                <el-date-picker
                                style="width: 88%;"
                                v-model="formData.payment_deadline"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="选择日期">
                                </el-date-picker> 
                            </span>
                         </div>
                       </div>
                       <div class="content-areas" style="position: relative;top: 5px;">
                         <div class="contents-left">
                           <span style="margin-left: 20px;">乙方名称（承接方）</span>
                         </div>
                         <div class="contents-right" style="border-top: none;">
                            <el-input v-model="formData.party_b_name" placeholder=""></el-input>
                         </div>
                       </div>
                       <div class="content-areas" style="position: relative;top: 5px;">
                         <div class="contents-left">
                           <span style="margin-left: 20px;">备注</span>
                         </div>
                         <div class="contents-right" style="border-top: none;">
                            <el-input v-model="formData.remark" placeholder=""></el-input>
                         </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;">
                           解析中</el-button>
                    </div>
                </div>
                <div class="right-area">
                    <div class="preview-images" v-if="currentFileList.length > 0">
                        <div class="image-item" v-for="(file, index) in currentFileList" :key="index" @click="handlePictureCardPreview(file)">
                            <img :src="file.url" alt="预览图片" />
                        </div>
                    </div>
                    <div class="no-image-tip" v-else>暂无图片</div>
                </div>

            </div>
        </div>

        <!-- 保存成功弹框 -->
        <el-dialog 
            :visible.sync="saveSuccessDialog" 
            width="400px" 
            :show-close="false" 
            center 
            :destroy-on-close="true" 
            :append-to-body="true"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            class="success-dialog">
            <div class="success-dialog-content">
                <div class="success-icon-wrapper">
                    <img src="@/assets/succes.png" alt="成功" class="success-icon" />
                </div>
                <div class="success-title">提交保存成功</div>
                <div class="success-message">您的信息已提交成功,请耐心等待审核结果</div>
                <el-button 
                    type="primary" 
                    @click="closeSuccessDialog" 
                    class="success-button"
                    style="background-color: #5165f7; border-color: #5165f7;">
                    知道了
                </el-button>
            </div>
        </el-dialog>

        <!-- 保存失败弹框 -->
        <el-dialog :visible.sync="saveFailDialog" width="400px" :show-close="false" center :destroy-on-close="true" :append-to-body="true">
            <div class="fail-dialog-content">
                <img src="@/assets/err.png" alt="失败" class="fail-icon" />
                <div class="fail-title">保存失败</div>
                <div class="fail-message">{{ errorMessage }}</div>
                <el-button type="primary" @click="closeFailDialog" style="background-color: #5165f7; margin-top: 20px;">知道了</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
import {save,Details} from '@/api/projectmanagement/hetongmingxin'
import { getEnterpriseLogo } from '@/utils/auth'
import { images } from '@/api/public'
export default {
    data() {
        return {
            enterpriseLogo: '', // 企业LOGO
            active:0,
            listDate:[
                {
                    name:'合同资料'
                },
             
               
            ],
            dialogVisible: false,
            dialogImageUrl: '',
            // 文件列表（按类型分）
            fileListMap: {
                0: [], // 合同资料（签章扫描件）
                1: []  // 合同Word文档
            },
            // 表单数据
            formData: {
                contract_name: '',        // 合同(项目/费用)名称
                contract_sign_date: '',   // 合同签订日期
                contract_type: '',        // 合同类型
                contract_no: '',          // 合同编号
                contract_amount: '',      // 合同金额(元)
                payment_deadline: '',     // 支付截止期限
                party_b_name: '',         // 乙方名称(承接方)
                remark: ''                 // 备注
            },
            // 合同类型选项
            options: [
                { value: 1, label: '技术合同' },
                { value: 2, label: '采购租赁' },
                { value: 3, label: '外聘劳务' },
                { value: 4, label: '其他' }
            ],
            projectId: '',                // 项目ID
            // 保存弹框
            saveSuccessDialog: false,
            saveFailDialog: false,
            errorMessage: '',
            // 编辑模式
            isEdit: false,
            editId: '',
            yuanright: 0,
            tables: [
                {
                    name: '有效'
                },
                {
                    name: '无效'
                },
            ],
            shu: 0,
           
            lastActiveKey: 'headerActiveIndex',
            tableData: [
                {
                    date: "其中",
                    name: "",
                    address: "",
                    children: [
                        { date: "2024", name: "年度审计报告及财务情况说明书", address: "8000" },
                        { date: "2025", name: "年度审计报告及财务情况说明书", address: "7500" },
                      
                    ],
                },
                { date: "其他项目", name: "5000", address: "4000" },
            ],

            tableData2: [
       
            { date: "2025", name: "年度审计报告及财务情况说明书", address: "7500" },]
        }
    },

    created() {
        this.loadEnterpriseLogo()
        // 获取项目ID（优先从 project_id 获取，其次从 id 获取）
        this.projectId = this.$route.query.project_id || this.$route.query.id || ''
        console.log('合同明细编辑页面 - 路由参数:', this.$route.query)
        console.log('合同明细编辑页面 - 项目ID:', this.projectId)
        
        // 检查是否为编辑模式（contract_id 是合同ID，不是项目ID）
        if (this.$route.query.contract_id) {
            this.isEdit = true
            this.editId = this.$route.query.contract_id
            this.fetchDetail()
        } else if (this.$route.query.id && !this.$route.query.project_id) {
            // 如果只有 id 且没有 project_id，可能是编辑模式（id 是合同ID）
            // 这种情况下需要从详情接口获取项目ID
            this.isEdit = true
            this.editId = this.$route.query.id
            this.fetchDetail()
        }
    },

    computed: {
        // 只返回合同资料文件列表（不显示Word文档）
        currentFileList() {
            const list = this.fileListMap[0] || []
            console.log('currentFileList 计算属性触发，合同资料列表:', list)
            return list
        }
    },

    watch: {
        // 监听路由变化，更新项目ID
        '$route'(to) {
            this.projectId = to.query.project_id || to.query.id || ''
            if (to.query.contract_id || to.query.id) {
                this.isEdit = true
                this.editId = to.query.contract_id || to.query.id
                this.fetchDetail()
            } else {
                this.isEdit = false
                this.editId = ''
            }
        }
    },

    methods: {
        // 加载企业LOGO
        loadEnterpriseLogo() {
            const logo = getEnterpriseLogo()
            if (logo) {
                // 如果是完整URL，直接使用
                if (logo.startsWith('http://') || logo.startsWith('https://')) {
                    this.enterpriseLogo = logo
                } else {
                    // 如果是相对路径，拼接基础URL
                    const baseUrl = process.env.VUE_APP_BASE_API || ''
                    this.enterpriseLogo = baseUrl + logo
                }
            } else {
                console.warn('未获取到企业LOGO')
            }
        },
        //取消
        closeguan(){
            this.$router.go(-1)
        },
        btnNmae(e){
            this.active=e
        },
        //切换时效性
        btnYuan(e) {
            this.yuanright = e
        },
        // 获取详情（编辑模式）
        async fetchDetail() {
            try {
                const res = await Details(this.editId)
                if (res && res.code === 1 && res.data) {
                    const data = res.data.data || res.data
                    // 如果项目ID为空，从详情数据中获取
                    if (!this.projectId && data.project_id) {
                        this.projectId = data.project_id
                        console.log('从详情数据中获取项目ID:', this.projectId)
                    }
                    // 填充表单数据
                    this.formData = {
                        contract_name: data.contract_name || '',
                        contract_sign_date: data.contract_sign_date || '',
                        contract_type: data.contract_type || '',
                        contract_no: data.contract_no || '',
                        contract_amount: data.contract_amount || '',
                        payment_deadline: data.payment_deadline || '',
                        party_b_name: data.party_b_name || '',
                        remark: data.remark || ''
                    }
                    // 填充文件
                    this.$nextTick(() => {
                        this.$nextTick(() => {
                            // 处理合同签章扫描件
                            if (data.scan_file_path) {
                                const scanUrl = data.scan_file_path.trim()
                                const scanFile = {
                                    uid: Date.now() + Math.random(),
                                    name: scanUrl.split('/').pop() || '合同材料',
                                    url: scanUrl,
                                    path: scanUrl,
                                    status: 'success'
                                }
                                this.$set(this.fileListMap, 0, [scanFile])
                                if (this.$refs.upload0) {
                                    this.$refs.upload0.fileList = [scanFile]
                                    this.$refs.upload0.$forceUpdate()
                                }
                            } else {
                                this.$set(this.fileListMap, 0, [])
                            }
                            // 处理Word文档
                            if (data.word_file_path) {
                                const wordUrl = data.word_file_path.trim()
                                const wordFile = {
                                    uid: Date.now() + Math.random() + 1,
                                    name: wordUrl.split('/').pop() || 'Word文档',
                                    url: wordUrl,
                                    path: wordUrl,
                                    status: 'success'
                                }
                                this.$set(this.fileListMap, 1, [wordFile])
                                if (this.$refs.upload1) {
                                    this.$refs.upload1.fileList = [wordFile]
                                    this.$refs.upload1.$forceUpdate()
                                }
                            } else {
                                this.$set(this.fileListMap, 1, [])
                            }
                        })
                    })
                }
            } catch (error) {
                console.error('获取详情失败:', error)
                this.$message.error('获取详情失败')
            }
        },
        // 保存提交
        async btnEdint() {
            // 验证必填字段
            if (!this.formData.contract_name) {
                this.$message.warning('请输入合同(项目/费用)名称')
                return
            }
            if (!this.formData.contract_sign_date) {
                this.$message.warning('请选择合同签订日期')
                return
            }
            if (!this.formData.contract_type) {
                this.$message.warning('请选择合同类型')
                return
            }
            // 再次尝试获取项目ID
            if (!this.projectId) {
                this.projectId = this.$route.query.project_id || this.$route.query.id || ''
            }
            
            console.log('保存时检查项目ID:', this.projectId, '路由参数:', this.$route.query)
            
            if (!this.projectId) {
                this.$message.warning('缺少项目ID，无法保存。请从项目详情页进入编辑页面。')
                return
            }
            // 验证合同签章扫描件（必填）
            if (!this.fileListMap[0] || this.fileListMap[0].length === 0) {
                this.$message.warning('请上传合同签章扫描件')
                return
            }
            
            // 直接执行保存逻辑
            try {
                // 获取文件路径
                let scanFilePath = ''
                if (this.fileListMap[0] && this.fileListMap[0].length > 0) {
                    const file = this.fileListMap[0][0]
                    scanFilePath = file.path || file.url || ''
                }
                
                let wordFilePath = ''
                if (this.fileListMap[1] && this.fileListMap[1].length > 0) {
                    const file = this.fileListMap[1][0]
                    wordFilePath = file.path || file.url || ''
                }
                
                // 构建保存数据（按照接口要求）
                const saveData = {
                    project_id: Number(this.projectId) || this.projectId,
                    contract_name: this.formData.contract_name,
                    contract_sign_date: this.formData.contract_sign_date,
                    contract_type: Number(this.formData.contract_type) || this.formData.contract_type,
                    contract_no: this.formData.contract_no || '',
                    contract_amount: this.formData.contract_amount || '',
                    payment_deadline: this.formData.payment_deadline || '',
                    party_b_name: this.formData.party_b_name || '',
                    remark: this.formData.remark || '',
                    scan_file_path: scanFilePath,
                    word_file_path: wordFilePath || ''
                }
                
                // 编辑模式时添加 id
                if (this.isEdit && this.editId) {
                    saveData.id = Number(this.editId) || this.editId
                }
                
                console.log('保存数据:', saveData)
                const res = await save(saveData)
                if (res.code === 1) {
                    this.saveSuccessDialog = true
                } else {
                    this.errorMessage = res.msg || '保存失败，请重试'
                    this.saveFailDialog = true
                }
            } catch (error) {
                console.error('保存失败:', error)
                this.errorMessage = error.message || '网络错误，请重试'
                this.saveFailDialog = true
            }
        },
        // 关闭成功弹框
        closeSuccessDialog() {
            this.saveSuccessDialog = false
            this.$router.go(-1)
        },
        // 关闭失败弹框
        closeFailDialog() {
            this.saveFailDialog = false
            this.errorMessage = ''
        },
        btnShang() {
            this.$router.push('/annual')
        },
        // 图片预览
        handlePictureCardPreview(file) {
            // 兼容不同的文件对象格式
            const imageUrl = file.url || file.response?.url || file.path || ''
            this.dialogImageUrl = imageUrl
            this.dialogVisible = true
        },
        // 图片删除
        handleRemove(file, tabIndex) {
            const index = this.fileListMap[tabIndex].findIndex(item => item.uid === file.uid)
            if (index > -1) {
                this.fileListMap[tabIndex].splice(index, 1)
                // 确保响应式更新
                this.$set(this.fileListMap, tabIndex, [...this.fileListMap[tabIndex]])
            }
        },
        // 图片加载错误处理
        handleImageError(event) {
            console.error('图片加载失败:', event.target.src)
            event.target.style.display = 'none'
        },
        // 合同资料上传
        handleUpload0(options) {
            this.handleUpload(options, 0)
        },
        // 合同Word文档上传
        handleUpload1(options) {
            this.handleUpload(options, 1)
        },
        // 自定义上传
        async handleUpload(options, tabIndex) {
            console.log('开始上传，tabIndex:', tabIndex, '文件:', options.file)
            const formData = new FormData()
            formData.append('image', options.file)
            try {
                const res = await images(formData)
                console.log('上传接口响应:', res)
                if (res && res.code === 1) {
                    let imageUrl = ''
                    let imagePath = ''  // 相对路径，用于传给后台
                    if (res.data && res.data.data) {
                        const data = res.data.data
                        imageUrl = data.fullURL || (data.host + data.path) || data.url
                        imagePath = data.path || ''  // 提取相对路径
                    } else if (res.data) {
                        imageUrl = res.data.fullURL || res.data.url || res.data
                        imagePath = res.data.path || ''  // 提取相对路径
                    }
                    
                    // 如果 imageUrl 是相对路径，需要拼接基础URL
                    if (imageUrl && !imageUrl.startsWith('http://') && !imageUrl.startsWith('https://')) {
                        const baseUrl = process.env.VUE_APP_BASE_API || 'http://api.sg199.net'
                        imageUrl = baseUrl + (imageUrl.startsWith('/') ? imageUrl : '/' + imageUrl)
                    }
                    
                    console.log('解析后的图片URL:', imageUrl, '图片路径:', imagePath)
                    
                    if (imageUrl) {
                        const newFile = {
                            uid: Date.now() + Math.random(),
                            name: options.file.name,
                            url: imageUrl,
                            path: imagePath,  // 保存相对路径
                            status: 'success'
                        }
                        
                        // 使用 $set 确保响应式更新，由于 limit=1，直接替换文件列表
                        this.$set(this.fileListMap, tabIndex, [newFile])
                        
                        // 只有合同资料（tabIndex=0）上传时才更新右侧显示
                        if (tabIndex === 0) {
                            this.active = 0
                            // 强制更新视图
                            this.$nextTick(() => {
                                console.log('合同资料上传成功，文件列表:', this.fileListMap[0])
                                console.log('当前文件列表:', this.currentFileList)
                                console.log('文件URL:', newFile.url)
                            })
                        } else {
                            // Word文档上传成功，但不显示在右侧
                            console.log('Word文档上传成功，但不显示在右侧，文件列表:', this.fileListMap[1])
                        }
                        
                        this.$message.success('上传成功')
                    } else {
                        console.error('图片URL为空，上传响应:', res)
                        this.$message.error('获取图片URL失败')
                    }
                } 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{
   
    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;
    height: 80vh;
    background: #f8f8f8;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
    overflow-y: auto;
    box-sizing: border-box;
}

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

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

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

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

.right-area ::v-deep .el-upload--picture-card {
    width: 300px;
    height: 300px;
    line-height: 300px;
}

.preview-images {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

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

.image-item:hover {
    border-color: #409EFF;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}

.image-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: white;
}

.no-image-tip {
    color: #999;
    font-size: 14px;
    margin-top: 100px;
    text-align: center;
    width: 100%;
}

/* 隐藏上传按钮 */
.hide-upload ::v-deep .el-upload--picture-card {
    display: none;
}

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

/* 选中"有效"时的样式 */
.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;
  min-height: 100%;  /* 确保最小高度填满父容器 */
}

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

.contents {
    width: 100%;
  min-height: calc(100vh - 70px);  /* 70px 是 headers 的高度 */
  background: #f8f8f8;
  display: flex;
  margin-top: 6px;
}


.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;
    left: 32vw;
    top: -6px;
}

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

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

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

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

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

.headers-left {
    width: 222px;
    height: 100%;
    display: flex;
    background: white;
}

.headers {
    width: 100%;
    height: 70px;
    display: flex;
}





.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;
    display: flex;
    justify-content: center;
}
.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;
}

/* 保存成功弹框样式 */
.success-dialog ::v-deep .el-dialog {
    border-radius: 8px;
    padding: 0;
}

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

.success-dialog-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 30px 30px;
    text-align: center;
}

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

.success-icon {
    width: auto;
    height: auto;
    max-width: 120px;
    max-height: 120px;
    object-fit: contain;
}

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

.success-message {
    font-size: 14px;
    color: #666;
    text-align: center;
    line-height: 24px;
    margin-bottom: 30px;
}

.success-button {
    padding: 10px 40px;
    border-radius: 4px;
    font-size: 14px;
}

/* 保存失败弹框样式 */
.fail-dialog-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.fail-icon {
    margin-bottom: 16px;
}

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

.fail-message {
    font-size: 14px;
    color: #666;
    text-align: center;
    margin-bottom: 20px;
}

/* 保存确认对话框样式 */
</style>