<template>
    <view class="user-type-switcher">
        <view class="switcher-title">用户类型切换（测试用）</view>
        <view class="switcher-buttons">
            <button 
                v-for="(type, index) in userTypes" 
                :key="index"
                :class="['type-btn', { active: currentUserType === type.value }]"
                @click="switchUserType(type.value)"
            >
                {{ type.label }}
            </button>
        </view>
        <view class="current-type">
            当前用户类型：{{ getCurrentTypeLabel() }} ({{ currentUserType }})
        </view>
    </view>
</template>

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

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

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

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

const switchUserType = (userType) => {
    console.log('切换用户类型:', userType);
    console.log('切换前 userInfo:', userInfo.value);
    
    userInfo.value.isCompanyUser = userType;
    
    console.log('切换后 userInfo:', userInfo.value);
    
    // 保存到本地存储
    uni.setStorageSync('userInfo', userInfo.value);
    
    uni.showToast({
        title: `已切换到${getCurrentTypeLabel()}`,
        icon: 'success'
    });
};

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

<style lang="scss" scoped>
.user-type-switcher {
    padding: 20rpx;
    background: #f5f5f5;
    border-radius: 10rpx;
    margin: 20rpx;
    
    .switcher-title {
        font-size: 28rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 20rpx;
    }
    
    .switcher-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 10rpx;
        margin-bottom: 20rpx;
        
        .type-btn {
            padding: 10rpx 20rpx;
            border: 2rpx solid #ddd;
            border-radius: 8rpx;
            background: #fff;
            font-size: 24rpx;
            color: #666;
            
            &.active {
                background: #256BFA;
                color: #fff;
                border-color: #256BFA;
            }
        }
    }
    
    .current-type {
        font-size: 24rpx;
        color: #666;
    }
}
</style>
