<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">
                    <span>{{ isEdit ? '标准编辑' : '标准添加' }}</span>
                </div>
            </div>
        </div>
        
        <div class="contents">
            <div class="content-left">
                
                <div class="content-lefts">
                    <div class="leftss">

                        

                        <div class="leftss-header">
                            <div>标准信息编辑</div>
                            <div @click="btnEdint"> <el-button size="small"
                                    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">
                            <div class="upload-area">
                                <div class="upload-label">标准文献</div>
                                <div class="upload-content">
                                    <el-upload
                                        action="#"
                                        list-type="picture-card"
                                        :http-request="handleUpload"
                                        :on-preview="handlePictureCardPreview"
                                        :on-remove="handleRemove"
                                        :file-list="fileList">
                                        <i class="el-icon-plus"></i>
                                        <div class="shangchuang">上传材料</div>
                                    </el-upload>
                                </div>
                            </div>
                           </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
                                        }" @click="btnYuan(index)">
                                            {{ item.name }}
                                        </div>


                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="content-table">
                       
                       <!-- 标准标题 -->
                       <div class="content-areas22 content-areas2">
                           <div class="contents-left">
                               <span style="margin-left: 20px;">标准标题</span>
                           </div>
                           <div class="contents-right">
                               <el-input v-model="formData.title" style="width: calc(100% - 40px); margin: 10px 20px;" placeholder="请输入标准标题"></el-input>
                           </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-input v-model="formData.standard_code" style="width: 88%;" placeholder="如 T/GSIA 002-2023"></el-input>
                            </span></div>
                               <div class="rightss rightss2"><span class="table-name">标准类型</span></div>
                               <div class="rightss rightss3"><span class="table-name">
                                <el-select v-model="formData.level" placeholder="请选择" style="width: 88%;">
                                    <el-option v-for="item in levelOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                               </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.participation_type" placeholder="请选择" style="width: 88%;">
                                    <el-option v-for="item in participationOptions" :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-select v-model="formData.status" placeholder="请选择" style="width: 88%;">
                                    <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                </el-select>
                                   </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" style="border: none;">
                               <div class="rightss rightss1"><span class="table-name">
                                    <el-date-picker v-model="formData.publish_date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
                                   </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-date-picker v-model="formData.implementation_date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
                                   </span></div>
                           </div>
                       </div>
                       <!-- 起草人 -->
                       <div class="content-areas22 content-areas2" style="top: 5px;">
                           <div class="contents-left">
                               <span style="margin-left: 20px;">起草人</span>
                           </div>
                           <div class="contents-right">
                            <el-input v-model="formData.drafters" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" style="width: calc(100% - 40px); margin: 10px 20px;" placeholder="多个姓名用逗号分隔"></el-input>
                           </div>
                       </div>
                       <!-- 起草（编制）单位 -->
                       <div class="content-areas22 content-areas2" style="top: 5px;">
                           <div class="contents-left">
                               <span style="margin-left: 20px;">起草（编制）单位</span>
                           </div>
                           <div class="contents-right">
                               <el-input v-model="formData.drafting_units" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" style="width: calc(100% - 40px); margin: 10px 20px;" 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="fileList.length > 0">
                        <div class="image-item" v-for="(file, index) in fileList" :key="index" @click="handlePictureCardPreview(file)">
                            <img :src="file.url" alt="预览图片" />
                        </div>
                    </div>
                    <div class="no-image-tip" v-else>
                        <i class="el-icon-picture-outline"></i>
                        <p>暂无上传文件</p>
                    </div>
                </div>
                <!-- 图片预览弹框 -->
                <el-dialog :visible.sync="dialogVisible" append-to-body>
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>

            </div>
        </div>

        <!-- 保存成功弹框 -->
        <el-dialog :visible.sync="saveSuccessDialog" width="400px" :show-close="false" center>
            <div class="success-dialog-content">
                <img src="@/assets/succes.png" alt="成功" class="success-icon" />
                <div class="success-title">提交保存成功</div>
                <div class="success-message">您提交的内容已保存成功，请等待审核</div>
                <el-button type="primary" @click="closeSuccessDialog" style="background-color: #5165f7; margin-top: 20px;">知道了</el-button>
            </div>
        </el-dialog>

        <!-- 保存失败弹框 -->
        <el-dialog :visible.sync="saveFailDialog" width="400px" :show-close="false" center>
            <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 { deletes, save, Details } from '@/api/resource/achievement/standard'
import { getEnterpriseLogo } from '@/utils/auth'
import { images } from '@/api/public'
export default {
    data() {
        return {
            enterpriseLogo: '',
            isEdit: false,
            active: 0,
            listDate: [
                { name: '标准文献' }
            ],
            yuanright: 0,
            tables: [
                { name: '有效' },
                { name: '无效' }
            ],
            // 表单数据
            formData: {
                title: '',
                standard_code: '',
                level: '',
                participation_type: '',
                status: '1',
                publish_date: '',
                implementation_date: '',
                drafters: '',
                drafting_units: '',
                document_path: ''
            },
            // 文件列表
            fileList: [],
            // 弹框控制
            saveSuccessDialog: false,
            saveFailDialog: false,
            errorMessage: '',
            dialogVisible: false,
            dialogImageUrl: '',
            // 标准级别选项
            levelOptions: [
                { value: '1', label: '国际' },
                { value: '2', label: '国家' },
                { value: '3', label: '行业' },
                { value: '4', label: '地方' },
                { value: '5', label: '团体' }
            ],
            // 参与方式选项
            participationOptions: [
                { value: '1', label: '主持' },
                { value: '2', label: '参与' }
            ],
            // 标准状态选项
            statusOptions: [
                { value: '1', label: '现行' },
                { value: '0', label: '废止' }
            ],
        }
    },

    created() {
        this.loadEnterpriseLogo()
        // 如果有id参数，说明是编辑模式，获取详情数据
        if (this.$route.query.id) {
            this.isEdit = true
            this.fetchDetail()
        }
    },

    watch: {

    },

    methods: {
        // 加载企业Logo
        loadEnterpriseLogo() {
            const logo = getEnterpriseLogo()
            if (logo) {
                this.enterpriseLogo = logo
            }
        },
        // 获取详情数据（编辑模式）
        async fetchDetail() {
            try {
                const id = this.$route.query.id
                const res = await Details(id)
                if (res.code === 1 && res.data) {
                    const data = res.data
                    // 填充表单数据
                    this.formData.title = data.title || ''
                    this.formData.standard_code = data.standard_code || ''
                    this.formData.level = data.level ? String(data.level) : ''
                    this.formData.participation_type = data.participation_type ? String(data.participation_type) : ''
                    this.formData.status = data.status ? String(data.status) : '1'
                    this.formData.publish_date = data.publish_date || ''
                    this.formData.implementation_date = data.implementation_date || ''
                    this.formData.drafters = data.drafters || ''
                    this.formData.drafting_units = data.drafting_units || ''
                    this.formData.document_path = data.document_path || ''
                    
                    // 设置有效性状态
                    this.yuanright = data.status == 1 ? 0 : 1
                    
                    // 如果有文献图片，添加到文件列表
                    if (data.document_path) {
                        this.fileList = [{
                            name: '标准文献',
                            url: data.document_path
                        }]
                    }
                }
            } catch (error) {
                console.error('获取详情失败:', error)
                this.$message.error('获取详情失败')
            }
        },
        //取消
        closeguan(){
            this.$nextTick(() => {
                this.$router.go(-1)
            })
        },
        btnNmae(e){
            this.active=e
        },
        //切换时效性
        btnYuan(e) {
            this.yuanright = e
            this.formData.status = e === 0 ? '1' : '0'
        },
        // 格式化日期
        formatDate(date) {
            if (!date) return ''
            const d = new Date(date)
            if (isNaN(d.getTime())) return ''
            const year = d.getFullYear()
            const month = String(d.getMonth() + 1).padStart(2, '0')
            const day = String(d.getDate()).padStart(2, '0')
            return `${year}-${month}-${day}`
        },
        // 保存提交
        async btnEdint() {
            // 验证必填字段
            if (!this.formData.title) {
                this.$message.warning('请输入标准标题')
                return
            }
            if (!this.formData.standard_code) {
                this.$message.warning('请输入标准号')
                return
            }
            
            try {
                const saveData = {
                    title: this.formData.title,
                    standard_code: this.formData.standard_code,
                    level: this.formData.level,
                    participation_type: this.formData.participation_type,
                    status: this.formData.status,
                    publish_date: this.formatDate(this.formData.publish_date),
                    implementation_date: this.formatDate(this.formData.implementation_date),
                    drafters: this.formData.drafters,
                    drafting_units: this.formData.drafting_units,
                    document_path: this.formData.document_path
                }
                
                // 编辑模式下添加id
                if (this.isEdit && this.$route.query.id) {
                    saveData.id = this.$route.query.id
                }
                
                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.$nextTick(() => {
                this.$router.go(-1)
            })
        },
        // 关闭失败弹框
        closeFailDialog() {
            this.saveFailDialog = false
            this.errorMessage = ''
        },
        // 自定义上传
        async handleUpload(options) {
            const formData = new FormData()
            formData.append('image', options.file)
            
            try {
                const res = await images(formData)
                let imageUrl = ''
                
                // 处理返回数据
                if (res.data && res.data.data) {
                    const data = res.data.data
                    imageUrl = data.fullURL || (data.host + data.path) || data.url
                } else if (res.data) {
                    const data = res.data
                    imageUrl = data.fullURL || (data.host + data.path) || data.url
                }
                
                if (imageUrl) {
                    const fileObj = {
                        name: options.file.name,
                        url: imageUrl
                    }
                    this.fileList.push(fileObj)
                    this.formData.document_path = imageUrl
                    this.$message.success('上传成功')
                }
            } catch (error) {
                console.error('上传失败:', error)
                this.$message.error('上传失败')
            }
        },
        // 图片预览
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url
            this.dialogVisible = true
        },
        // 图片删除
        handleRemove(file) {
            const index = this.fileList.findIndex(item => item.url === file.url)
            if (index > -1) {
                this.fileList.splice(index, 1)
            }
            this.formData.document_path = this.fileList.length > 0 ? this.fileList[0].url : ''
        },
        btnShang() {
            this.$router.push('/annual')
        }

    }
}
</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>
::v-deep .el-textarea__inner {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* 上传区域样式 */
.upload-area {
    display: flex;
    border: 1px solid #DCE0FD;
    border-radius: 4px;
    overflow: hidden;
}

.upload-label {
    width: 120px;
    background: #DCE0FD;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #363636;
    font-weight: bold;
}

.upload-content {
    flex: 1;
    padding: 20px;
    display: flex;
    align-items: center;
    background: white;
}

body, html {
  width: 100%;
  overflow-x: hidden;
}

.area-name{
margin-left: 30px;
cursor: pointer;
}
.active{
   
    border-bottom: 1px solid #5165f7;
    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;
}
.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 {
    height: calc(100% - 60px);
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.preview-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 15px;
    width: 100%;
}

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

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

.no-image-tip {
    text-align: center;
    color: #999;
}

.no-image-tip i {
    font-size: 60px;
    margin-bottom: 15px;
}

.no-image-tip p {
    font-size: 14px;
}

.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-areas22 {
    display: flex;

    flex-wrap: wrap;
}
.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;
    padding-bottom: 30px;
    width: 100%;
}

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

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

.contents {
    width: 100%;
    box-sizing: border-box;
    height: auto;
    background: #f8f8f8;
    display: flex;
    margin-top: 6px;
    /* flex-wrap: wrap */
}


.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: 100%;
    height: 100%;
    line-height: 88px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.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;
    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;
    height: 70px;
}

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

/* 成功弹框样式 */
.success-dialog-content {
    text-align: center;
    padding: 20px;
}
.success-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
}
.success-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}
.success-message {
    font-size: 14px;
    color: #666;
}

/* 失败弹框样式 */
.fail-dialog-content {
    text-align: center;
    padding: 20px;
}
.fail-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
}
.fail-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}
.fail-message {
    font-size: 14px;
    color: #F04B4B;
}

</style>