<template>
    <AppLayout title="企业信息" back-gorund-color="#F4F4F4">
        <!-- 头部进度显示 -->
        <view class="header-progress">
            <text class="progress-text">{{ companyInfo.completeness || '100%' }}</text>
        </view>

        <!-- 编辑头像 -->
        <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/icon/company-avatar.png'"></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 || '6217171301012562295' }}</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 || '公司成立于2003年01月27日,位于北京市大兴区经济技术产业开发区天泰一路3号一号楼南四、五楼,目前处于开业状态,经营范围包括信息技术咨询服务;科技中介服务;人工智能等。' }}</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="info-item btn-feel" @click="editInfo('contact1')">
                <view class="info-label">企业联系人名称</view>
                <view class="info-content">
                    <text class="info-value">{{ companyInfo.contact1Name || '吴宣萱' }}</text>
                    <uni-icons color="#A2A2A2" type="right" size="16"></uni-icons>
                </view>
            </view>

            <view class="info-item btn-feel" @click="editInfo('contact1Phone')">
                <view class="info-label">企业联系人电话</view>
                <view class="info-content">
                    <text class="info-value">{{ companyInfo.contact1Phone || '15547143804' }}</text>
                    <uni-icons color="#A2A2A2" type="right" size="16"></uni-icons>
                </view>
            </view>

            <view class="info-item btn-feel" @click="editInfo('contact2')">
                <view class="info-label">企业联系人名称</view>
                <view class="info-content">
                    <text class="info-value">{{ companyInfo.contact2Name || '李杰' }}</text>
                    <uni-icons color="#A2A2A2" type="right" size="16"></uni-icons>
                </view>
            </view>

            <view class="info-item btn-feel" @click="editInfo('contact2Phone')">
                <view class="info-label">企业联系人电话</view>
                <view class="info-content">
                    <text class="info-value">{{ companyInfo.contact2Phone || '10700010700' }}</text>
                    <uni-icons color="#A2A2A2" type="right" size="16"></uni-icons>
                </view>
            </view>
        </view>
    </AppLayout>
</template>

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

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

// 企业信息数据
const companyInfo = reactive({
    name: '科里(北京)科技有限公司(喀什分公司)',
    avatar: '/static/icon/company-avatar.png',
    completeness: '100%',
    socialCode: '6217171301012562295',
    location: '北京',
    description: '公司成立于2003年01月27日,位于北京市大兴区经济技术产业开发区天泰一路3号一号楼南四、五楼,目前处于开业状态,经营范围包括信息技术咨询服务;科技中介服务;人工智能等。',
    legalPerson: '孙正云',
    contact1Name: '吴宣萱',
    contact1Phone: '15547143804',
    contact2Name: '李杰',
    contact2Phone: '10700010700'
});

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',
        contact1: '/pages/mine/edit-contact1',
        contact1Phone: '/pages/mine/edit-contact1-phone',
        contact2: '/pages/mine/edit-contact2',
        contact2Phone: '/pages/mine/edit-contact2-phone'
    };
    
    if (editPages[type]) {
        navTo(editPages[type]);
    }
}

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

function getCompanyInfo() {
    // 这里可以调用API获取企业信息
    // $api.createRequest('/app/company/info').then((resData) => {
    //     Object.assign(companyInfo, resData.data);
    // });
}
</script>

<style lang="stylus" scoped>
.header-progress {
    text-align: center;
    padding: 20rpx 0;
    
    .progress-text {
        font-size: 28rpx;
        color: #6C7282;
    }
}

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