<template>
    <div>
        <div class="headers">
            <div class="headers-left">
                <div class="imgs">
                    <img v-if="enterpriseLogo" :src="enterpriseLogo" alt="企业LOGO" class="enterprise-logo-img" />
                </div>
                <div class="img-right">
                    <div class="name-title">微育科技</div>
                    <div class="right-name">数智科创 · 通达未来 </div>
                </div>
            </div>
            <div class="headers-right">
                <div class="rights">
                    <div class="rights-names" >

                        <span>企业利润信息编辑</span>
                    </div>

                </div>
            </div>
        </div>
        <div class="contents">
            <div class="content-left">
                <div class="content-lefts">
                    <div class="leftss">
                        <div class="leftss-header">
                            <div>
                                <el-button type="primary" size="small" style="background-color: #5165f7;" @click="handleSave">提交保存</el-button>
                                <el-button size="small" @click="btnClose">取消</el-button>
                            </div>
                          
                        </div>
                        <div class="upload-area">
                            <div class="upload-header">
                                <span>企业利润表</span>
                                <span class="upload-name">（以下数据解析内容，请仔细核对，可点击重新编辑输入内容）</span>
                            </div>
                            <div class="uploads">
                                <div class="uploads-headers">上传企业利润表</div>
                                <div class="img-area">
                                    <el-upload
                                    :http-request="handleUpload"
                                    list-type="picture-card"
                                    :file-list="fileList"
                                    :on-preview="handlePictureCardPreview"
                                    :on-remove="handleRemove">
                                    <i class="el-icon-plus"></i>
                                    <div class="shangchuang">上传材料</div>
                                    </el-upload>
                                    <el-dialog :visible.sync="dialogVisible">
                                    <img width="100%" :src="dialogImageUrl" alt="">
                                    </el-dialog>
                                    <!-- <el-upload
                                        class="upload-demo"
                                     
                                        action="https://jsonplaceholder.typicode.com/posts/"
                                        multiple>
                                        <i class="el-icon-plus"></i>
                                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                                        </el-upload> -->
                                </div>
                            </div>
                        </div>
                        <div class="table-area">
                            <div class="table-header">
                                <div class="table-header-left">
                                    <span class="times">年度确认</span>
                                    <el-date-picker
                                        size="small"
                                        style="width: 120px;"
                                        v-model="value"
                                        type="year"
                                        placeholder="选择年度"
                                        format="yyyy"
                                        value-format="yyyy">
                                    </el-date-picker>
                                <span class="times" style="margin-left: 20px;">金额单位 (元)</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="table-left">
                            <el-table :data="tableData2" border style="width: 97%">
                                <el-table-column prop="date" label="项目" align="center">
                                    <template #default="{ row }">
                                        <span style="font-weight: bold;">
                                            {{ row.date }}
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="name" label="本年 (期) 金额" align="center">
                                    <template #default="{ row }">
                                        <input 
                                            v-model="row.name" 
                                            class="input2" 
                                            type="text"
                                            placeholder="请输入金额">
                                    </template>
                                </el-table-column>
                                <el-table-column prop="address" label="上年 (期) 金额" align="center">
                                    <template #default="{ row }">
                                        <input 
                                            v-model="row.address" 
                                            class="input2" 
                                            type="text"
                                            placeholder="请输入金额">
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="table-right">
                            <table class="financial-table">
                                <thead>
                                    <tr class="tou">
                                        <th colspan="2" class="ths" style="text-align: center;">项目</th>
                                        <th class="ths" style="text-align: center;">本年（期）金额</th>
                                        <th class="ths" style="text-align: center;">上年（期）金额</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="tou">
                                        <td colspan="2" style="text-align: center;">营业成本</td>
                                        <td><input v-model="tableData3[0].currentAmount" class="input2" type="text" placeholder="请输入金额"></td>
                                        <td><input v-model="tableData3[0].lastAmount" class="input2" placeholder="请输入金额" type="text"></td>
                                    </tr>
                                    <tr class="tou">
                                        <td rowspan="4" class="nested-label">其中</td>
                                        <td>销售费用</td>
                                        <td><input v-model="tableData3[1].currentAmount" class="input2" type="text" placeholder="请输入金额"></td>
                                        <td><input v-model="tableData3[1].lastAmount" class="input2" type="text" placeholder="请输入金额"></td>
                                    </tr>
                                    <tr class="tou">
                                        <td>管理费用</td>
                                        <td><input v-model="tableData3[2].currentAmount" class="input2" type="text" placeholder="请输入金额"></td>
                                        <td><input v-model="tableData3[2].lastAmount" class="input2" type="text" placeholder="请输入金额"></td>
                                    </tr>
                                    <tr class="tou">
                                        <td>研发费用</td>
                                        <td><input v-model="tableData3[3].currentAmount" class="input2" type="text" placeholder="请输入金额"></td>
                                        <td><input v-model="tableData3[3].lastAmount" class="input2" type="text" placeholder="请输入金额"></td>
                                    </tr>
                                    <tr class="tou">
                                        <td>财务费用</td>
                                        <td><input v-model="tableData3[4].currentAmount" class="input2" type="text" placeholder="请输入金额"></td>
                                        <td><input v-model="tableData3[4].lastAmount" class="input2" type="text" placeholder="请输入金额"></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-right">

                <div class="leftss-header right-header">
                    <div>材料展示</div>
                    <div> <el-button size="small" style="color:#304156;background-color: #EDEFFE;">
                            <img src="@/assets/resource/jianxi.png" alt="">
                            <span style="position: relative;top: -4px;left: 6px;">材料解析</span>    
                        </el-button>
                    </div>
                </div>
                <div class="right-area">
                    <img v-if="currentImageUrl" :src="currentImageUrl" alt="企业利润表" class="uploaded-image" />
                    <div v-else class="no-image-tip">暂无图片</div>
                </div>

            </div>
        </div>

        <!-- 保存成功对话框 -->
        <el-dialog
            :visible.sync="saveSuccessDialog"
            width="450px"
            :show-close="false"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            class="save-success-dialog">
            <div class="success-dialog-content">
                <div class="success-icon-wrapper">
                   <img src="@/assets/succes.png" alt="">
                </div>
                <div class="success-title">提交保存成功</div>
                <div class="success-message">
                    <p>提交内容未审核通过时资源资料库不展示该内容</p>
                    <p>审核状态请前往审核中心查看</p>
                </div>
                <div class="success-footer">
                    <el-button type="primary" @click="closeSuccessDialog" style="background-color: #5165f7;width: 100px;">知道了</el-button>
                </div>
            </div>
        </el-dialog>

        <!-- 保存失败对话框 -->
        <el-dialog
            :visible.sync="saveFailDialog"
            width="450px"
            :show-close="false"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            class="save-fail-dialog">
            <div class="fail-dialog-content">
                <div class="fail-icon-wrapper">
                   <img src="@/assets/err.png" alt="">
                </div>
                <div class="fail-title">提交失败</div>
                <div class="fail-message">
                    <p>{{ errorMessage || '提交失败原因描述' }}</p>
                </div>
                <div class="fail-footer">
                    <el-button type="primary" @click="closeFailDialog" style="background-color: #5165f7;width: 100px;">知道了</el-button>
                </div>
            </div>
        </el-dialog>

    </div>
</template>
<script>
import { show } from '@/api/homepage/corporateInformation'
import { getEnterpriseLogo } from '@/utils/auth'
import { images } from '@/api/public'
import { save, Detailss } from '@/api/finance/operate/qiye'
export default {
    data() {
        return {
            enterpriseLogo: '', // 企业LOGO图片URL
            dialogVisible: false, // 图片预览对话框显示状态
            dialogImageUrl: '', // 预览图片URL
            fileList: [], // 上传文件列表
            saveSuccessDialog: false, // 保存成功对话框显示状态
            saveFailDialog: false, // 保存失败对话框显示状态
            errorMessage: '', // 错误信息
            editId: null, // 编辑时的ID，新增时为null
            yuanright: 0,
            value: "", // 年度选择
            tables: [
                {
                    name: '有效'
                },
                {
                    name: '无效'
                },
            ],
            shu: 0,
            active: 0,
            lastActiveKey: 'headerActiveIndex',
            tableData: [
                {
                    date: "其中",
                    name: "",
                    address: "",
                    children: [
                        { date: "营业利润", name: "10000", address: "8000" },
                        { date: "利润总额", name: "9500", address: "7500" },
                        { date: "净利润", name: "8500", address: "7000" },
                        { date: "综合收益总额", name: "9000", address: "6500" },
                    ],
                },
                { date: "其他项目", name: "5000", address: "4000" },
            ],

            tableData2: [{
                date: '营业收入',
                name: '',
                address: ''
            }, {
                date: '营业利润',
                name: '',
                address: ''
            }, {
                date: '利润总额',
                name: '',
                address: ''
            }, {
                date: '净利润',
                name: '',
                address: ''
            },
            {
                date: '综合收益总额',
                name: '',
                address: ''
            }],
            // 营业成本表格数据 arr2
            tableData3: [
                {
                    project: '营业成本',
                    currentAmount: '',
                    lastAmount: ''
                },
                {
                    project: '销售费用',
                    currentAmount: '',
                    lastAmount: ''
                },
                {
                    project: '管理费用',
                    currentAmount: '',
                    lastAmount: ''
                },
                {
                    project: '研发费用',
                    currentAmount: '',
                    lastAmount: ''
                },
                {
                    project: '财务费用',
                    currentAmount: '',
                    lastAmount: ''
                }
            ]
        }
    },

    created() {
        this.loadEnterpriseLogo()
        // 从路由参数获取 id
        const id = this.$route.query.id
        if (id) {
            this.editId = id
            this.fetchDetail(id)
        }
    },

    watch: {

    },

    computed: {
        // 获取当前显示的图片URL
        currentImageUrl() {
            if (this.fileList && this.fileList.length > 0) {
                // 获取第一个文件的URL
                const firstFile = this.fileList[0]
                return firstFile.url || ''
            }
            return ''
        }
    },

    methods: {
        // 获取详情数据并填充表单
        async fetchDetail(id) {
            try {
                const res = await Detailss(id)
                if (res && res.code === 1 && res.data) {
                    const data = res.data
                    
                    // 设置年度
                    this.value = data.year || ''
                    
                    // 设置有效性：status 1是有效，0是无效
                    this.yuanright = data.status === 1 ? 0 : 1
                    
                    // 设置上传的图片
                    if (data.file) {
                        let imageUrl = data.file
                        // 如果 file 是完整 URL，直接使用
                        if (!data.file.startsWith('http://') && !data.file.startsWith('https://')) {
                            // 如果不是完整 URL，可能需要拼接 host（这里可以根据实际情况调整）
                            imageUrl = data.file
                        }
                        
                        // 添加到文件列表
                        this.fileList = [{
                            uid: Date.now(),
                            name: '企业利润表.jpg',
                            url: imageUrl,
                            status: 'success'
                        }]
                    }
                    
                    // 填充 arr1 数据（营业收入相关）- 编辑页面使用原始数值，不需要格式化
                    if (data.arr1) {
                        this.tableData2[0].name = this.removeFormatting(data.arr1.operating_revenue || '0') // 营业收入
                        this.tableData2[0].address = this.removeFormatting(data.arr1.last_operating_revenue || '0') // 营业收入（上年）
                        this.tableData2[1].name = this.removeFormatting(data.arr1.operating_profit || '0') // 营业利润
                        this.tableData2[1].address = this.removeFormatting(data.arr1.last_operating_profit || '0') // 营业利润（上年）
                        this.tableData2[2].name = this.removeFormatting(data.arr1.total_profit || '0') // 利润总额
                        this.tableData2[2].address = this.removeFormatting(data.arr1.last_total_profit || '0') // 利润总额（上年）
                        this.tableData2[3].name = this.removeFormatting(data.arr1.net_profit || '0') // 净利润
                        this.tableData2[3].address = this.removeFormatting(data.arr1.last_net_profit || '0') // 净利润（上年）
                        this.tableData2[4].name = this.removeFormatting(data.arr1.total_comprehensive_income || '0') // 综合收益总额
                        this.tableData2[4].address = this.removeFormatting(data.arr1.last_total_comprehensive_income || '0') // 综合收益总额（上年）
                    }
                    
                    // 填充 arr2 数据（营业成本相关）- 编辑页面使用原始数值
                    if (data.arr2) {
                        this.tableData3[0].currentAmount = this.removeFormatting(data.arr2.business_cost || '0') // 营业成本
                        this.tableData3[0].lastAmount = this.removeFormatting(data.arr2.last_business_cost || '0') // 营业成本（上年）
                        this.tableData3[1].currentAmount = this.removeFormatting(data.arr2.sales_expenses || '0') // 销售费用
                        this.tableData3[1].lastAmount = this.removeFormatting(data.arr2.last_sales_expenses || '0') // 销售费用（上年）
                        this.tableData3[2].currentAmount = this.removeFormatting(data.arr2.administrative_expenses || '0') // 管理费用
                        this.tableData3[2].lastAmount = this.removeFormatting(data.arr2.last_administrative_expenses || '0') // 管理费用（上年）
                        this.tableData3[3].currentAmount = this.removeFormatting(data.arr2.rd_expenses || '0') // 研发费用
                        this.tableData3[3].lastAmount = this.removeFormatting(data.arr2.last_rd_expenses || '0') // 研发费用（上年）
                        this.tableData3[4].currentAmount = this.removeFormatting(data.arr2.financial_expenses || '0') // 财务费用
                        this.tableData3[4].lastAmount = this.removeFormatting(data.arr2.last_financial_expenses || '0') // 财务费用（上年）
                    }
                }
            } catch (error) {
                console.error('获取详情失败:', error)
                this.$message.error('获取详情失败，请稍后重试')
            }
        },
        // 移除格式化字符（如逗号），返回原始数值
        removeFormatting(value) {
            if (value === null || value === undefined || value === '') {
                return ''
            }
            // 移除逗号，保留数字、小数点和负号
            const numStr = String(value).replace(/,/g, '')
            // 如果是纯数字格式，直接返回；否则返回空字符串
            if (/^-?\d+(\.\d+)?$/.test(numStr)) {
                return numStr
            }
            return value
        },
        // 从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.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
                        })
                    }
                    
                    // 查找 parent_id: 0 的基本信息（图片数据）
                    if (dataToProcess['0'] && dataToProcess['0'].list && Array.isArray(dataToProcess['0'].list)) {
                        dataToProcess['0'].list.forEach(imgItem => {
                            if (imgItem.name === 'logo' && imgItem.value) {
                                // 如果 value 是完整 URL，直接使用
                                if (imgItem.value.startsWith('http://') || imgItem.value.startsWith('https://')) {
                                    this.enterpriseLogo = imgItem.value
                                } else if (imgItem.host) {
                                    // 如果有 host，组合完整的 URL
                                    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 handleUpload(options) {
            try {
                // 创建 FormData，参数名是 image
                const formData = new FormData()
                formData.append('image', options.file)
                
                // 调用上传接口
                const res = await images(formData)
                
                if (res && res.code === 1) {
                    // 根据实际接口返回的字段设置图片URL
                    const fileData = res.data?.data || res.data
                    let imageUrl = ''
                    let imageHost = ''
                    
                    if (fileData && fileData.host && fileData.path) {
                        // 保存 host
                        imageHost = fileData.host
                        // 确保 host 以 / 结尾，path 不以 / 开头
                        const host = fileData.host.endsWith('/') ? fileData.host : fileData.host + '/'
                        const path = fileData.path.startsWith('/') ? fileData.path.slice(1) : fileData.path
                        imageUrl = host + path
                    } else {
                        imageUrl = res.data?.url || res.data || res.url
                    }
                    
                    // 添加到文件列表
                    const fileItem = {
                        uid: options.file.uid,
                        name: options.file.name,
                        url: imageUrl,
                        host: imageHost,
                        path: fileData?.path || '',
                        status: 'success'
                    }
                    this.fileList.push(fileItem)
                    
                    this.$message.success('文件上传成功')
                } else {
                    
                    // 上传失败，移除文件
                    const index = this.fileList.findIndex(item => item.uid === options.file.uid)
                    if (index > -1) {
                        this.fileList.splice(index, 1)
                    }
                }
            } catch (error) {
                console.error('文件上传失败:', error)
                
                // 上传失败，移除文件
                const index = this.fileList.findIndex(item => item.uid === options.file.uid)
                if (index > -1) {
                    this.fileList.splice(index, 1)
                }
            }
        },
        // 图片预览
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url || (file.raw ? URL.createObjectURL(file.raw) : '')
            this.dialogVisible = true
        },
        // 删除文件
        handleRemove(file, fileList) {
            // 更新文件列表
            this.fileList = fileList
        },
        //切换时效性
        btnYuan(e) {
            this.yuanright = e
        },
        //取消
        btnClose(){
            // 获取保存的 tab 索引，返回到对应的 tab
            const activeTab = this.$route.query.activeTab || localStorage.getItem('financeOperateActiveTab') || '0'
            this.$router.push({
                name: 'operate',
                query: { activeTab: activeTab }
            })
        },
        btnShang() {
            const activeTab = this.$route.query.activeTab || localStorage.getItem('financeOperateActiveTab') || '0'
            this.$router.push({
                name: 'operate',
                query: { activeTab: activeTab }
            })
        },
        // 格式化金额，移除逗号等格式化字符
        formatAmount(value) {
            if (!value) return '0.00'
            // 移除逗号，保留数字和小数点
            const numStr = String(value).replace(/,/g, '')
            // 转换为数字再格式化为两位小数
            const num = parseFloat(numStr)
            if (isNaN(num)) return '0.00'
            return num.toFixed(2)
        },
        // 提交保存
        async handleSave() {
            try {
                // 验证必填字段
                if (!this.value) {
                    this.$message.warning('请选择年度')
                    return
                }

                // 构建 arr1 数据（营业收入相关）- 包含本年数据和上年数据
                const arr1 = {
                    // 本年数据
                    operating_revenue: this.formatAmount(this.tableData2[0].name) || '0.00', // 营业收入
                    operating_profit: this.formatAmount(this.tableData2[1].name) || '0.00', // 营业利润
                    total_profit: this.formatAmount(this.tableData2[2].name) || '0.00', // 利润总额
                    net_profit: this.formatAmount(this.tableData2[3].name) || '0.00', // 净利润
                    total_comprehensive_income: this.formatAmount(this.tableData2[4].name) || '0.00', // 综合收益总额
                    // 上年数据（在本年字段前加上 last_ 前缀）
                    last_operating_revenue: this.formatAmount(this.tableData2[0].address) || '0.00', // 营业收入（上年）
                    last_operating_profit: this.formatAmount(this.tableData2[1].address) || '0.00', // 营业利润（上年）
                    last_total_profit: this.formatAmount(this.tableData2[2].address) || '0.00', // 利润总额（上年）
                    last_net_profit: this.formatAmount(this.tableData2[3].address) || '0.00', // 净利润（上年）
                    last_total_comprehensive_income: this.formatAmount(this.tableData2[4].address) || '0.00' // 综合收益总额（上年）
                }

                // 构建 arr2 数据（营业成本相关）- 包含本年数据和上年数据
                const arr2 = {
                    // 本年数据
                    business_cost: this.formatAmount(this.tableData3[0].currentAmount) || '0.00', // 营业成本
                    sales_expenses: this.formatAmount(this.tableData3[1].currentAmount) || '0.00', // 销售费用
                    administrative_expenses: this.formatAmount(this.tableData3[2].currentAmount) || '0.00', // 管理费用
                    rd_expenses: this.formatAmount(this.tableData3[3].currentAmount) || '0.00', // 研发费用
                    financial_expenses: this.formatAmount(this.tableData3[4].currentAmount) || '0.00', // 财务费用
                    // 上年数据（在本年字段前加上 last_ 前缀）
                    last_business_cost: this.formatAmount(this.tableData3[0].lastAmount) || '0.00', // 营业成本（上年）
                    last_sales_expenses: this.formatAmount(this.tableData3[1].lastAmount) || '0.00', // 销售费用（上年）
                    last_administrative_expenses: this.formatAmount(this.tableData3[2].lastAmount) || '0.00', // 管理费用（上年）
                    last_rd_expenses: this.formatAmount(this.tableData3[3].lastAmount) || '0.00', // 研发费用（上年）
                    last_financial_expenses: this.formatAmount(this.tableData3[4].lastAmount) || '0.00' // 财务费用（上年）
                }

                // 获取上传的文件URL
                const fileUrl = this.fileList.length > 0 ? this.fileList[0].url : null

                // 构建请求数据
                const saveData = {
                    id: this.editId || 0, // 新增时传0，编辑时传实际id
                    year: this.value, // 年度
                    status: this.yuanright === 0 ? 1 : 0, // status: 1是有效，0是无效
                    arr1: arr1, // 营业收入数据
                    arr2: arr2, // 营业成本数据
                    file: fileUrl || null // 上传的文件
                }

                // 调用保存接口
                const res = await save(saveData)
                
                if (res && res.code === 1) {
                    // 显示成功对话框
                    this.saveSuccessDialog = true
                } else {
                    // 显示失败对话框，优先使用 message 字段，其次使用 msg 字段
                    this.errorMessage = res?.message || res?.msg || '保存失败，请稍后重试'
                    this.saveFailDialog = true
                }
            } catch (error) {
                console.error('保存失败:', error)
                // 显示失败对话框，优先使用响应中的 message 字段
                const errorData = error?.response?.data || {}
                this.errorMessage = errorData?.message || errorData?.msg || error?.message || '保存失败，请稍后重试'
                this.saveFailDialog = true
            }
        },
        // 关闭成功对话框
        closeSuccessDialog() {
            this.saveSuccessDialog = false
            // 获取保存的 tab 索引，返回到对应的 tab
            const activeTab = this.$route.query.activeTab || localStorage.getItem('financeOperateActiveTab') || '0'
            this.$router.push({
                name: 'operate',
                query: { activeTab: activeTab }
            })
        },
        // 关闭失败对话框
        closeFailDialog() {
            this.saveFailDialog = false
            this.errorMessage = ''
        }

    }
}
</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>
.shangchuang{
    font-size: 12px;
    position: relative;
    top: -62px;
}
.img-area{
    display: flex;
    justify-content: center;
    margin-top: 12px;
}
:deep(.el-upload-list--picture-card .el-upload-list__item) {
  width: 80px !important;  /* 缩略图宽度 */
  height: 80px !important;  /* 缩略图高度 */
}

:deep(.el-upload--picture-card) {
  width: 80px !important;  /* 调整卡片宽度 */
  height: 80px !important;  /* 调整卡片高度 */
  line-height: 80px !important;  /* 调整内部的 "+" 图标居中 */
}

.uploads-headers{
    width: 100%;
    height: 50px;
    background: #EDEFFE;
    text-align: center;
    line-height: 50px;
    font-size: 14px;
}
.uploads{
    width: 100%;
    height: 150px;
    border:1px solid #DCE0FD;
    background:white;
    margin-top: 15px;
    padding-bottom: 12px;
}
.upload-name{
    font-size: 12px;
    color: #6C6C6C;
    margin-left: 6px;
}
.upload-header{
    font-size: 14px;
}
.upload-area{
    margin-top: 12px;
}
.selects{
    width: 120px;
    margin-left: 12px;
    position: relative;
    top: 3px;
}
/* 日期选择器样式 */
:deep(.el-date-editor.el-input) {
    margin-left: 12px;
}
:deep(.el-date-editor.el-input .el-input__inner) {
    border: 1px solid #DCDFE6 !important;
}
:deep .el-tooltip__popper.is-dark{
    color: #F04B4B !important;
}
.right-area {
    width: 90%;
    margin: 0 auto;
    height: 80vh;
    background: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    overflow: auto;
}

.uploaded-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.no-image-tip {
    color: #909399;
    font-size: 14px;
    text-align: center;
}

.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: 8.6px 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 {
    display: flex;
    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;
}
.input2{
    width: 100px;
    height: 28px;
    line-height: 28px;
    border: 1px solid #DCDFE6;
    padding: 0 8px;
    text-align: center;
    border-radius: 4px;
    font-size: 12px;
    box-sizing: border-box;
}
.input2:focus {
    outline: none;
    border-color: #5165f7;
}
/* 表格中输入框样式 */
:deep(.el-table .input2) {
    margin: 0 auto;
}
.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;
    height: 100%;
}

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

.contents {
    width: 100%;
    height: 92vh;
    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;
}

.shu{
  width: 10px;
    height: 20px;
    background: #5165f7;
    position: relative;
    top: -24px;
    left: 40%;
}
.active{
    color: #5165f7 !important;
}
.rights-names{
    margin-left: 32px;
    cursor: pointer;
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.rights{
    width: 96%;
    height: 100%;
    margin: 0 auto;
    line-height: 94px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    left: -27px;
}
.name-title{
    position: relative;
    top: -6px;
    font-weight: bold;
}
.right-name{
    font-size: 12px;
}
.img-right{
    font-size: 14px;
    position: relative;
    top: 40px;
    height: 40px;
    margin-left: 12px;
}
.imgs{
    width: 45px;
    height: 46px;
    background: #5165f7;
    border-radius: 6px;
    position: relative;
    top: 26px;
    margin-left: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.enterprise-logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.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;
}
::v-deep .el-table .el-table__cell {
    padding: 10px 0 !important;
    min-width: 0;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    text-align: left;
}
/* 保存成功对话框样式 */
.save-success-dialog ::v-deep .el-dialog {
    border-radius: 8px;
    padding: 0;
}
.save-success-dialog ::v-deep .el-dialog__body {
    padding: 0;
}
.success-dialog-content {
    padding: 40px 30px 30px;
    text-align: center;
}
.success-icon-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
}
.success-icon-bg {
    font-size: 64px;
    color: #5165f7;
    position: relative;
}
.success-icon-bg i {
    font-size: 64px;
}
.success-icon-check {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #5165f7;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    font-weight: bold;
}
.success-icon-check i {
    font-size: 20px;
}
.success-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}
.success-message {
    font-size: 14px;
    color: #666;
    line-height: 24px;
    margin-bottom: 30px;
    text-align: center;
    padding: 0 20px;
}
.success-message p {
    margin: 8px 0;
}
.success-footer {
    text-align: center;
}
/* 保存失败对话框样式 */
.save-fail-dialog ::v-deep .el-dialog {
    border-radius: 8px;
    padding: 0;
}
.save-fail-dialog ::v-deep .el-dialog__body {
    padding: 0;
}
.fail-dialog-content {
    padding: 40px 30px 30px;
    text-align: center;
}
.fail-icon-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
}
.fail-icon-bg {
    font-size: 64px;
    color: #F56C6C;
    position: relative;
}
.fail-icon-bg i {
    font-size: 64px;
}
.fail-icon-x {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #F56C6C;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    font-weight: bold;
    border: 3px solid white;
}
.fail-icon-x i {
    font-size: 20px;
}
.fail-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
}
.fail-message {
    font-size: 14px;
    color: #666;
    line-height: 24px;
    margin-bottom: 30px;
    text-align: left;
    padding: 0 20px;
    min-height: 48px;
    text-align: center;
}
.fail-message p {
    margin: 8px 0;
}
.fail-footer {
    text-align: center;
}
</style>