<template>
    <AppLayout back-gorund-color="#F4F4F4">
        <!-- 编辑头像 -->
        <view class="avatar-section btn-feel" @click="editAvatar">
            <view class="avatar-label">编辑信息</view>
            <view class="avatar-container">
                <image class="company-avatar" :src="companyInfo.avatar || '/static/imgs/avatar.jpg'"></image>
                <!-- <uni-icons color="#A2A2A2" type="right" size="16"></uni-icons> -->
            </view>
        </view>

        <!-- 企业详细信息 -->
        <view class="info-section">
            <view class="info-item btn-feel" @click="editInfo('name')">
                <view class="info-label">企业名称</view>
                <view class="info-content">
                    <text class="info-value">{{ companyInfo.name || '暂无公司名称' }}</text>
                    <!-- <uni-icons color="#A2A2A2" type="right" size="16"></uni-icons> -->
                </view>
            </view>

            <view class="info-item btn-feel" @click="editInfo('code')">
                <view class="info-label">统一社会代码</view>
                <view class="info-content">
                    <text class="info-value">{{ companyInfo.socialCode || '暂无统一社会代码' }}</text>
                    <!-- <uni-icons color="#A2A2A2" type="right" size="16"></uni-icons> -->
                </view>
            </view>

            <view class="info-item btn-feel" @click="editInfo('location')">
                <view class="info-label">企业注册地点</view>
                <view class="info-content">
                    <text class="info-value">{{ companyInfo.location || '暂无注册地点' }}</text>
                    <!-- <uni-icons color="#A2A2A2" type="right" size="16"></uni-icons> -->
                </view>
            </view>

            <view class="info-item btn-feel" @click="editInfo('description')">
                <view class="info-label">企业信息介绍</view>
                <view class="info-content">
                    <text class="info-value">{{ companyInfo.description || '暂无企业介绍' }}</text>
                    <!-- <uni-icons color="#A2A2A2" type="right" size="16"></uni-icons> -->
                </view>
            </view>

            <view class="info-item btn-feel" @click="editInfo('legalPerson')">
                <view class="info-label">企业法人姓名</view>
                <view class="info-content">
                    <text class="info-value">{{ companyInfo.legalPerson || '暂无法人信息' }}</text>
                    <!-- <uni-icons color="#A2A2A2" type="right" size="16"></uni-icons> -->
                </view>
            </view>

            <!-- 企业联系人管理 -->
            <view class="contact-management-section">
                <view class="contact-section-header">
                    <view class="contact-section-title">企业联系人</view>
                    <view class="edit-contacts-btn btn-feel" @click="editContacts">
                        <uni-icons type="compose" size="16" color="#256BFA"></uni-icons>
                        <text class="edit-text">编辑联系人</text>
                    </view>
                </view>
                
                <!-- 联系人列表展示 -->
                <view v-for="(contact, index) in companyInfo.companyContactList" :key="contact.id || index" class="contact-display-item">
                    <view class="contact-display-title">联系人{{ index + 1 }}</view>
                    <view class="contact-display-content">
                        <view class="contact-field">
                            <text class="field-label">姓名：</text>
                            <text class="field-value">{{ contact.contactPerson || '暂无' }}</text>
                        </view>
                        <view class="contact-field">
                            <text class="field-label">电话：</text>
                            <text class="field-value">{{ contact.contactPersonPhone || '暂无' }}</text>
                        </view>
                    </view>
                </view>
                
                <!-- 如果没有联系人，显示提示 -->
                <view v-if="!companyInfo.companyContactList || companyInfo.companyContactList.length === 0" class="no-contacts">
                    <text class="no-contacts-text">暂无联系人信息</text>
                </view>
            </view>
        </view>
    </AppLayout>
</template>

<script setup>
import { reactive, inject, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import AppLayout from '@/components/AppLayout/AppLayout.vue';

const { $api, navTo } = inject('globalFunction');

// 企业信息数据
const companyInfo = reactive({
    name: '',
    avatar: '/static/imgs/avatar.jpg',
    completeness: '65%',
    socialCode: '',
    location: '',
    description: '',
    legalPerson: '',
    companyContactList: [], // 企业联系人列表
    isVerified: false // 实名状态
});

function editAvatar() {
    // 编辑头像逻辑
    // uni.chooseImage({
    //     count: 1,
    //     success: (res) => {
    //         // 上传头像
    //         uploadAvatar(res.tempFilePaths[0]);
    //     }
    // });
}

function uploadAvatar(filePath) {
    // 上传头像到服务器
    uni.uploadFile({
        url: '/api/upload/avatar',
        filePath: filePath,
        name: 'avatar',
        success: (res) => {
            const data = JSON.parse(res.data);
            if (data.success) {
                companyInfo.avatar = data.data.url;
                uni.showToast({
                    title: '头像更新成功',
                    icon: 'success'
                });
            }
        }
    });
}

function editInfo(type) {
    // 根据类型跳转到不同的编辑页面
    const editPages = {
        name: '/pages/mine/edit-company-name',
        code: '/pages/mine/edit-company-code',
        location: '/pages/mine/edit-company-location',
        description: '/pages/mine/edit-company-description',
        legalPerson: '/pages/mine/edit-legal-person'
    };
    
    if (editPages[type]) {
        navTo(editPages[type]);
    }
}

function editContacts() {
    // 跳转到联系人编辑页面
    navTo('/packageA/pages/company-mine/edit-company-contacts');
}

onShow(() => {
    // 获取企业信息
    getCompanyInfo();
});

// 从缓存获取公司信息
function getCompanyInfo() {
    try {
        const cachedUserInfo = uni.getStorageSync('userInfo') || {};
        // console.log('缓存中的userInfo:', cachedUserInfo);
        
        // 检查是否有company字段
        if (cachedUserInfo.company) {
            const company = cachedUserInfo.company;
            
            // 基本信息
            companyInfo.name = company.name || '';
            companyInfo.socialCode = company.code || '';
            companyInfo.location = company.registeredAddress || '';
            companyInfo.description = company.description || '';
            companyInfo.legalPerson = company.legalPerson || '';
            
            // 联系人信息 - 直接使用companyContactList数组
            companyInfo.companyContactList = company.companyContactList || [];
            
            // 判断是否实名：legalIdCard字段有值则表示已实名
            companyInfo.isVerified = !!(company.legalIdCard && company.legalIdCard.trim());
            
            console.log('公司名称:', companyInfo.name);
            console.log('实名状态:', companyInfo.isVerified);
            console.log('legalIdCard值:', company.legalIdCard);
        } else {
            console.log('缓存中没有company字段');
            // 保持默认值
        }
    } catch (error) {
        console.error('获取公司信息失败:', error);
        // 保持默认值
    }
}

function goBack() {
    uni.navigateBack();
}
</script>

<style lang="stylus" scoped>

.avatar-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    background: #FFFFFF;
    margin: 20rpx;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
    
    .avatar-label {
        font-size: 28rpx;
        color: #333333;
    }
    
    .avatar-container {
        display: flex;
        align-items: center;
        
        .company-avatar {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            margin-right: 16rpx;
        }
    }
}

.info-section {
    background: #FFFFFF;
    margin: 0 20rpx 40rpx;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
    
    .info-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30rpx;
        border-bottom: 1rpx solid #F5F5F5;
        
        &:last-child {
            border-bottom: none;
        }
        
        .info-label {
            font-size: 28rpx;
            color: #6C7282;
            min-width: 200rpx;
        }
        
        .info-content {
            display: flex;
            align-items: center;
            flex: 1;
            
            .info-value {
                font-size: 28rpx;
                color: #333333;
                flex: 1;
                text-align: right;
                margin-right: 16rpx;
                word-break: break-all;
            }
        }
    }
}

.btn-feel {
    transition: transform 0.2s ease;
    
    &:active {
        transform: scale(0.98);
    }
}

.contact-management-section {
    border-top: 20rpx solid #F4F4F4;
    
    .contact-section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20rpx 30rpx;
        background: #F8F8F8;
        border-bottom: 1rpx solid #F5F5F5;
        
        .contact-section-title {
            font-size: 24rpx;
            color: #999999;
        }
        
        .edit-contacts-btn {
            display: flex;
            align-items: center;
            padding: 8rpx 16rpx;
            background: #E6F7FF;
            border-radius: 8rpx;
            
            .edit-text {
                font-size: 24rpx;
                color: #256BFA;
                margin-left: 8rpx;
            }
        }
    }
    
    .contact-display-item {
        padding: 20rpx 30rpx;
        border-bottom: 1rpx solid #F5F5F5;
        
        &:last-child {
            border-bottom: none;
        }
        
        .contact-display-title {
            font-size: 26rpx;
            font-weight: 600;
            color: #333333;
            margin-bottom: 16rpx;
        }
        
        .contact-display-content {
            .contact-field {
                display: flex;
                align-items: center;
                margin-bottom: 12rpx;
                
                &:last-child {
                    margin-bottom: 0;
                }
                
                .field-label {
                    font-size: 26rpx;
                    color: #6C7282;
                    min-width: 120rpx;
                }
                
                .field-value {
                    font-size: 26rpx;
                    color: #333333;
                    flex: 1;
                }
            }
        }
    }
    
    .no-contacts {
        padding: 40rpx 30rpx;
        text-align: center;
        
        .no-contacts-text {
            font-size: 26rpx;
            color: #999999;
        }
    }
}
</style>
