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

        <div class="contents">
            <div class="content-left">
                <div class="content-lefts">
                    <div class="leftss">
                        <div class="leftss-header">
                            <div>{{ detailData.contract_name || '-' }}</div>
                            <div>
                                <el-button size="small" type="danger" plain @click="showDeleteDialog">删除</el-button>
                                <el-button size="small" @click="btnEdint" style="background-color: #5165f7;color:white;">编辑</el-button>
                            </div>
                        </div>
                        <div class="table-area">
                            <div class="table-header">
                                <div>
                                    <div class="shu"></div> <span class="times"> 合同信息 </span>
                                </div>
                               
                            </div>
                        </div>
                    </div>
                    <div class="content-table">
                        <div class="content-areas">
                            <div class="contents-left">
                                <span style="margin-left: 20px;">合同（项目/费用）名称</span>
                            </div>
                            <div class="contents-right">
                                <span style="margin-left: 20px;">{{ detailData.contract_name || '-' }}</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">{{ formatDate(detailData.contract_sign_date) }}</span></div>
                                <div class="rightss rightss2"><span class="table-name">合同编号</span></div>
                                <div class="rightss rightss3"><span class="table-name">{{ detailData.contract_no || '-' }}</span></div>
                            </div>
                        </div>
                        <div class="content-areas content-areas2" style="top: 4px;">
                            <div class="contents-left" style="border-top: none;">
                                <span class="table-name">合同类型</span>
                            </div>
                            <div class="contents-right" style="border: none;">
                                <div class="rightss rightss1"><span class="table-name">
                                    {{ detailData.contract_type_text || '-' }}
                                    </span></div>
                                <div class="rightss rightss2" style="border-top: none;"><span
                                        class="table-name">合同金额（元）</span></div>
                                <div class="rightss rightss3"><span class="table-name">
                                    {{ formatAmount(detailData.contract_amount) }}
                                    </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">
                                    {{ formatAmount(calculateTotalExpense()) }}
                                    </span></div>
                                <div class="rightss rightss2" style="border-top: none;"><span
                                        class="table-name">付款截止期限</span></div>
                                <div class="rightss rightss3"><span class="table-name">
                                    {{ formatDate(detailData.payment_deadline) }}
                                    </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" style="border-top: none;">
                                <span style="margin-left: 20px;">{{ detailData.party_b_name || '-' }}</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;">
                                <span style="margin-left: 20px;">{{ detailData.remark || '-' }}</span>
                            </div>
                        </div>
                      
                    </div>
                    <div class="tabless">
                        <div class="table-area">
                            <div class="table-header">
                                <div>
                                    <div class="shu"></div> <span class="times"> 支付信息 <span><i  style="color: #D6D8EA;" class="el-icon-info"></i></span> </span>
                                </div>
                               
                            </div>
                            <div style="margin-top: 10px;">
                                <el-table
                                    :data="tableData"
                                    border
                                    style="width: 100%">
                                    <el-table-column
                                     align="center"
                                    prop="date"
                                    label="序号"
                                    width="80">
                                    </el-table-column>
                                    <el-table-column
                                     align="center"
                                    prop="payment_time"
                                    label="付款时间"
                                    width="180">
                                    <template slot-scope="scope">
                                        {{ formatDate(scope.row.payment_time) }}
                                    </template>
                                    </el-table-column>
                                    <el-table-column
                                    prop="name"
                                    label="摘要信息"
                                    align="center">
                                    </el-table-column>
                                    <el-table-column
                                     align="center"
                                    prop="address"
                                    label="凭证号"
                                    width="180">
                                    </el-table-column>
                                    <el-table-column
                                    align="center"
                                    prop="amount"
                                    label="支出金额（元）"
                                    width="180">
                                    <template slot-scope="scope">
                                        {{ formatAmount(scope.row.amount) }}
                                    </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </div>
             
                </div>
              
            </div>
            <div class="content-right">

                <div class="leftss-header right-header">
                    <div class="header-area">
                        <div class="area-name" v-for="(item, index) in listDate" :key="index" @click="btnNmae(index)"
                            :class="{ 'active': active == index }">
                            {{ item.name }}
                        </div>

                    </div>
                    <div> <el-button size="small" style="color:#5165f7;">
                            <i class="el-icon-download"></i> 下载</el-button>
                    </div>
                </div>
                <div class="right-area">
                    <div class="preview-images" v-if="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="deleteDialogVisible"
            width="500px"
            :show-close="false"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            class="delete-dialog">
            <div class="delete-dialog-content">
                <div class="delete-icon">
                    <img src="@/assets/err.png" alt="删除提醒" class="delete-icon-img" />
                </div>
                <div class="delete-title">删除提醒</div>
                <div class="delete-message">
                    <div>删除后,将一并删除所有内容且无法恢复</div>
                    <div>请谨慎选择!</div>
                </div>
                <div class="delete-buttons">
                    <el-button type="primary" class="confirm-delete-btn" @click="confirmDelete">确认删除</el-button>
                    <el-button class="cancel-delete-btn" @click="cancelDelete">取消</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {deletes,Details} from '@/api/projectmanagement/hetongmingxin'
import { getEnterpriseLogo } from '@/utils/auth'
export default {
    data() {
        return {
            enterpriseLogo: '', // 企业LOGO
            contractId: '', // 合同ID
            detailData: {}, // 详情数据
            paymentList: [], // 支付信息列表
            contractFileList: [], // 合同资料文件列表
            voucherFileList: [], // 支付凭证文件列表
            deleteDialogVisible: false, // 删除确认对话框
            active: 0,
            listDate: [
                {
                    name: '合同资料'
                },
                {
                    name: '支付凭证'
                },
               
            ],
            value1: "",
            yuanright: 0,
            tables: [
                {
                    name: '有效'
                },
                {
                    name: '无效'
                },
            ],
            shu: 0,
            lastActiveKey: 'headerActiveIndex',
            tableData: []
        }
    },
    computed: {
        // 根据当前 tab 返回对应的文件列表
        currentFileList() {
            if (this.active === 0) {
                return this.contractFileList
            } else if (this.active === 1) {
                return this.voucherFileList
            }
            return []
        }
    },

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

    watch: {

    },

    methods: {
        // 加载企业LOGO
        loadEnterpriseLogo() {
            const logo = getEnterpriseLogo()
            if (logo) {
                if (logo.startsWith('http://') || logo.startsWith('https://')) {
                    this.enterpriseLogo = logo
                } else {
                    const baseUrl = process.env.VUE_APP_BASE_API || ''
                    this.enterpriseLogo = baseUrl + logo
                }
            }
        },
        // 获取详情
        async fetchDetail() {
            this.contractId = this.$route.query.contract_id || this.$route.query.id || ''
            if (!this.contractId) {
                this.$message.warning('缺少合同ID')
                return
            }
            try {
                const res = await Details(this.contractId)
                if (res && res.code === 1 && res.data) {
                    const data = res.data.data || res.data
                    console.log('合同详情数据:', data)
                    
                    // 填充合同基本信息
                    this.detailData = {
                        contract_name: data.contract_name || '',
                        contract_sign_date: data.contract_sign_date || '',
                        contract_type_text: data.contract_type_text || '',
                        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 || '',
                        scan_file_path: data.scan_file_path || '',
                        word_file_path: data.word_file_path || ''
                    }
                    
                    // 处理支付信息列表（从 expenses 数组中提取 vouchers）
                    this.paymentList = []
                    if (data.expenses && Array.isArray(data.expenses)) {
                        data.expenses.forEach(expense => {
                            if (expense.vouchers && Array.isArray(expense.vouchers)) {
                                expense.vouchers.forEach((voucher, index) => {
                                    this.paymentList.push({
                                        id: voucher.id || index + 1,
                                        payment_time: voucher.voucher_records_payment || '',
                                        summary: expense.items && expense.items.length > 0 
                                            ? expense.items.map(item => item.item_name).join('、') 
                                            : '',
                                        voucher_no: voucher.id || '',
                                        amount: voucher.account_amount || voucher.project_amount || 0
                                    })
                                })
                            }
                        })
                    }
                    
                    // 处理合同资料文件
                    this.contractFileList = []
                    if (data.scan_file_path) {
                        this.contractFileList = [{
                            uid: Date.now(),
                            name: data.scan_file_path.split('/').pop() || '合同资料',
                            url: data.scan_file_path,
                            status: 'success'
                        }]
                    }
                    
                    // 处理支付凭证文件列表
                    this.voucherFileList = []
                    if (data.expenses && Array.isArray(data.expenses)) {
                        data.expenses.forEach(expense => {
                            if (expense.vouchers && Array.isArray(expense.vouchers)) {
                                expense.vouchers.forEach(voucher => {
                                    if (voucher.voucher_file_path) {
                                        this.voucherFileList.push({
                                            uid: Date.now() + Math.random(),
                                            name: voucher.voucher_file_path.split('/').pop() || '支付凭证',
                                            url: voucher.voucher_file_path,
                                            status: 'success'
                                        })
                                    }
                                })
                            }
                        })
                    }
                    
                    // 更新表格数据
                    this.tableData = this.paymentList.map((item, index) => ({
                        date: index + 1, // 序号
                        name: item.summary, // 摘要信息
                        address: item.voucher_no, // 凭证号
                        payment_time: item.payment_time, // 付款时间
                        amount: item.amount // 支出金额
                    }))
                } else {
                    this.$message.error(res?.msg || '获取详情失败')
                }
            } catch (error) {
                console.error('获取详情失败:', error)
                this.$message.error('获取详情失败')
            }
        },
        // 格式化日期
        formatDate(date) {
            if (!date) return '-'
            if (typeof date === 'number') {
                const d = new Date(date * 1000)
                return d.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }).replace(/\//g, '-')
            }
            if (typeof date === 'string' && date.includes('T')) {
                return date.split('T')[0]
            }
            return date
        },
        // 格式化金额
        formatAmount(amount) {
            if (!amount && amount !== 0) return '-'
            const num = parseFloat(amount)
            if (isNaN(num)) return '-'
            return num.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
        },
        // 计算合计支出金额
        calculateTotalExpense() {
            let total = 0
            this.paymentList.forEach(item => {
                const amount = parseFloat(item.amount) || 0
                total += amount
            })
            return total
        },
        // 图片预览
        handlePictureCardPreview(file) {
            const imageUrl = file.url || file.path || ''
            if (imageUrl) {
                window.open(imageUrl, '_blank')
            }
        },
        // 显示删除确认对话框
        showDeleteDialog() {
            this.deleteDialogVisible = true
        },
        // 取消删除
        cancelDelete() {
            this.deleteDialogVisible = false
        },
        // 确认删除
        async confirmDelete() {
            if (!this.contractId) {
                this.$message.error('缺少合同ID参数')
                return
            }
            try {
                const res = await deletes(this.contractId)
                if (res && res.code === 1) {
                    this.$message.success('删除成功')
                    this.deleteDialogVisible = false
                    // 删除成功后返回上一页
                    this.$router.go(-1)
                } else {
                    this.$message.error(res?.msg || '删除失败')
                }
            } catch (error) {
                console.error('删除失败:', error)
                this.$message.error('删除失败，请稍后重试')
            }
        },
        btnNmae(e) {
            this.active = e
        },
        //切换时效性
        btnYuan(e) {
            this.yuanright = e
        },
        //编辑跳转
        btnEdint() {
            const projectId = this.$route.query.project_id || ''
            this.$router.push({
                path: '/hetongmingxin',
                query: {
                    contract_id: this.contractId,
                    id: this.contractId,
                    project_id: projectId
                }
            })
        },
        btnShang() {
            this.$router.go(-1)
        }

    }
}
</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>
.tabless{
    width: 90%;
    margin: 0 auto;
    margin-top: 30px;
}
.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;
}

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

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

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

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

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

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

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

.financial-table .nested-label {

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

.table-right {
    flex: 1;
}

.table-left {
    flex: 1;
}

.content-table {

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

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

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

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

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

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

}

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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




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

    top: -6px;
}

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

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

.img-right {
    font-size: 14px;
    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%;
  
    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;
}



.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;
}
.name-title{
    position: relative;
    top: -6px;
    font-weight: bold;
}
.right-name{
    font-size: 12px;
}
.img-right{
    font-size: 14px;
    position: relative;
    top: 40px;
    height: 40px;
    margin-left: 12px;
}
.imgs{
    width: 45px;
    height: 46px;
    background: #5165f7;
    border-radius: 6px;
    position: relative;
    top: 26px;
    margin-left: 24px;
    overflow: hidden;
}

.enterprise-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
}
.headers-right{
    flex: 1;
    background: white;
  
}
.headers-left{
    width: 222px;
    height: 100%;
    display: flex;
    background: white;
    border-right: 1px solid #EDEFFE;
}
.headers{
  width: 100%;
    height: 90px;
    display: flex
;
    border-bottom: 1px solid #EDEFFE;
}

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

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

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

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

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

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

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

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

.confirm-delete-btn {
    background-color: #5165f7;
    border-color: #5165f7;
    padding: 10px 40px;
}

.cancel-delete-btn {
    padding: 10px 40px;
}
</style>