<template>
    <AppLayout title="企业我的页面测试" back-gorund-color="#F4F4F4">
        <view class="test-container">
            <view class="test-section">
                <view class="section-title">用户类型切换测试</view>
                <view class="button-group">
                    <button class="test-btn" @click="switchToCompany">切换到企业用户</button>
                    <button class="test-btn" @click="switchToJobSeeker">切换到求职者</button>
                </view>
                <view class="current-type">
                    当前用户类型：{{ getCurrentTypeLabel() }} ({{ currentUserType }})
                </view>
            </view>

            <view class="test-section">
                <view class="section-title">页面跳转测试</view>
                <view class="button-group">
                    <button class="test-btn" @click="goToCompanyMine">企业我的页面</button>
                    <button class="test-btn" @click="goToCompanyInfo">企业信息页面</button>
                    <button class="test-btn" @click="goToMine">普通我的页面</button>
                </view>
            </view>

            <view class="test-section">
                <view class="section-title">用户信息显示</view>
                <view class="info-display">
                    <text>用户类型：{{ userInfo.isCompanyUser }}</text>
                    <text>用户名：{{ userInfo.name || '未设置' }}</text>
                </view>
            </view>
        </view>
    </AppLayout>
</template>

<script setup>
import { ref, computed } from 'vue';
import { storeToRefs } from 'pinia';
import useUserStore from '@/stores/useUserStore';

const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);

const userTypes = [
    { value: 0, label: '企业用户' },
    { value: 1, label: '求职者' },
    { value: 2, label: '网格员' },
    { value: 3, label: '政府人员' }
];

const currentUserType = computed(() => userInfo.value?.isCompanyUser !== undefined ? userInfo.value.isCompanyUser : 1);

const switchToCompany = () => {
    userInfo.value.isCompanyUser = 0;
    userInfo.value.name = '科里喀什分公司';
    uni.setStorageSync('userInfo', userInfo.value);
    uni.showToast({
        title: '已切换到企业用户',
        icon: 'success'
    });
};

const switchToJobSeeker = () => {
    userInfo.value.isCompanyUser = 1;
    userInfo.value.name = '求职者用户';
    uni.setStorageSync('userInfo', userInfo.value);
    uni.showToast({
        title: '已切换到求职者',
        icon: 'success'
    });
};

const getCurrentTypeLabel = () => {
    const type = userTypes.find(t => t.value === currentUserType.value);
    return type ? type.label : '未知';
};

const goToCompanyMine = () => {
    uni.navigateTo({
        url: '/packageA/pages/company-mine/company-mine'
    });
};

const goToCompanyInfo = () => {
    uni.navigateTo({
        url: '/packageA/pages/company-mine/company-info'
    });
};

const goToMine = () => {
    uni.navigateTo({
        url: '/pages/mine/mine'
    });
};
</script>

<style lang="scss" scoped>
.test-container {
    padding: 40rpx;
    background: #f5f5f5;
    min-height: 100vh;
}

.test-section {
    background: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 20rpx;
}

.button-group {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    margin-bottom: 20rpx;
}

.test-btn {
    background: #256BFA;
    color: #fff;
    border: none;
    border-radius: 8rpx;
    padding: 20rpx;
    font-size: 28rpx;
    text-align: center;
}

.current-type {
    font-size: 28rpx;
    color: #666;
    padding: 20rpx;
    background: #f8f8f8;
    border-radius: 8rpx;
}

.info-display {
    display: flex;
    flex-direction: column;
    gap: 10rpx;
    
    text {
        font-size: 28rpx;
        color: #333;
        padding: 10rpx;
        background: #f8f8f8;
        border-radius: 4rpx;
    }
}
</style>
