<template>
    <view class="test-page">
        <view class="header">
            <text class="title">企业搜索功能测试</text>
        </view>
        
        <view class="test-section">
            <view class="section-title">功能说明</view>
            <view class="description">
                <text class="desc-text">• 企业用户（isCompanyUser=0）：招聘公司输入框为普通输入框</text>
                <text class="desc-text">• 网格员（isCompanyUser=2）：招聘公司输入框为选择器，点击跳转到搜索页面</text>
                <text class="desc-text">• 搜索页面支持防抖节流，500ms延迟</text>
                <text class="desc-text">• 搜索接口：/app/company/likeList，参数：name</text>
            </view>
        </view>
        
        <view class="test-section">
            <view class="section-title">当前用户类型</view>
            <view class="user-type-info">
                <text class="type-label">用户类型：</text>
                <text class="type-value">{{ getCurrentTypeLabel() }} ({{ currentUserType }})</text>
            </view>
            <view class="user-type-info">
                <text class="type-label">是否企业用户：</text>
                <text class="type-value">{{ isCompanyUser ? '是' : '否' }}</text>
            </view>
        </view>
        
        <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="switchToGrid">切换到网格员</button>
                <button class="test-btn" @click="goToPublishJob">进入发布岗位页面</button>
            </view>
        </view>
    </view>
</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 isCompanyUser = computed(() => {
    return currentUserType.value === 0;
});

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

const switchToCompany = () => {
    userInfo.value.isCompanyUser = 0;
    uni.setStorageSync('userInfo', userInfo.value);
    uni.showToast({
        title: '已切换到企业用户',
        icon: 'success'
    });
};

const switchToGrid = () => {
    userInfo.value.isCompanyUser = 2;
    uni.setStorageSync('userInfo', userInfo.value);
    uni.showToast({
        title: '已切换到网格员',
        icon: 'success'
    });
};

const goToPublishJob = () => {
    uni.navigateTo({
        url: '/pages/job/publishJob'
    });
};
</script>

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

.header {
    text-align: center;
    margin-bottom: 40rpx;
    
    .title {
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
    }
}

.test-section {
    background: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    
    .section-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 20rpx;
    }
    
    .description {
        .desc-text {
            display: block;
            font-size: 26rpx;
            color: #666;
            line-height: 1.6;
            margin-bottom: 10rpx;
        }
    }
    
    .user-type-info {
        display: flex;
        align-items: center;
        margin-bottom: 15rpx;
        
        .type-label {
            font-size: 28rpx;
            color: #333;
            margin-right: 10rpx;
        }
        
        .type-value {
            font-size: 28rpx;
            color: #256BFA;
            font-weight: 500;
        }
    }
    
    .button-group {
        display: flex;
        flex-direction: column;
        gap: 20rpx;
        
        .test-btn {
            height: 80rpx;
            background: #256BFA;
            color: #fff;
            border: none;
            border-radius: 12rpx;
            font-size: 28rpx;
            font-weight: 500;
            
            &:active {
                background: #1e5ce6;
            }
        }
    }
}
</style>
