<template>
    <view class="aiHelper">
        <view class="aiHelperContainer">
            <!-- 标题区域 -->
       <!--     <view class="aiHelperTitle" :style="{'background-image': `url(${aiHelperTitleBackground})`}">
                {{ aiHelperTitle }}
            </view> -->
            
            <!-- AI类型卡片容器 -->
            <view class="aiBox">
                <view class="aiType" v-for="(item, index) in aiType" :key="item.id" @click="goAiType(item)">
                    <view class="aiTypeContainer" :style="{'background-image': `url(${item.background})`}">
                        <view class="aiLeft" :style="{'background-image': `url(${item.imagePath})`}">
                            <view class="aiLeftTitle">{{ item.name }}</view>
                        </view>
                        <view class="aiRight">
                            <view class="aiRightTitle"><text>{{ item.description }}</text></view>
                            <view class="aiDescription"><text>开始对话></text></view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        
       
			<Copyright/>
			<Footer></Footer>
		
    </view>
</template>

<script>
    import Footer from '@/components/footer_common.vue';
	import Copyright from '@/components/gx-copyright.vue';
    import { get, post } from '@/utils/request';
    import { IMAGE_BASE_URL, BASE_URL } from '@/utils/config';
	import {navigateTo} from '@/utils/router.js'
    export default {
        name: 'aiHelper',
        components: { Footer,Copyright},
        data() {
            return {
                aiHelperTitle: 'AI智能助手',
                aiHelperTitleBackground: '../../static/imgs/ai/title.png',
                aiType: [],
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            goAiType(item) {
				console.log(item);
                navigateTo({
                    url: `/pages/chat/chatPage?serviceUrl=${item.serviceUrl}&apiKey=${item.apiKey}&id=${item.id}&name=${item.name}&icon=${item.icon}`
                });
            },
            async getData() {
                let params = {
                    current: 1,
                    pageSize: 10,
                };
                try {
                    const res = await get('/api/v1/apps/ai_request', params);
                    if (!res || !res.success) {
                        throw new Error('获取AI助手失败');
                    }
                    if (res.data.length > 0) {
                        res.data.forEach((item) => {
                            item.background = IMAGE_BASE_URL + item.background
                            item.imagePath = IMAGE_BASE_URL + item.imagePath
                            item.icon = IMAGE_BASE_URL + item.icon
                        })
                    }
                    this.aiType = res.data
                } catch (err) {
                    console.error('获取AI助手失败:', err);
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    // 引入变量和混入
    // @import "@/styles/variables.scss"; // 假设你有这个文件，没有可以忽略
    
    .aiHelper {
        // 使用安全区域适配，避免底部被遮挡
        // padding-bottom: constant(safe-area-inset-bottom);
        // padding-bottom: env(safe-area-inset-bottom);
        height: 83vh;
        .aiHelperContainer {
            padding: 30rpx; // 使用rpx单位适配不同屏幕
            box-sizing: border-box; // 确保padding不会增加总宽度
            
            .aiHelperTitle {
                font-size: 36rpx;
                font-weight: 600;
                color: #000;
                text-align: center;
                // padding: 20rpx 0 30rpx; // 增加底部内边距
                background-repeat: no-repeat;
                background-position: 50% 80%;
                background-size: 30%;
                line-height: 1.5;
            }
            
            .aiBox {
                // 增加容器内边距，避免卡片贴边
                padding: 10rpx 0;
                
                .aiType {
                    // 关键优化：使用固定间距代替百分比，确保不同设备一致
                    margin-bottom: 30rpx; 
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    
                    .aiTypeContainer {
                        display: flex;
                        border-radius: 20rpx; // 更大的圆角更美观
                        background-size: cover;
                        background-position: 30% 50%;
                        background-repeat: no-repeat;
                        width: 100%;
                        // 关键优化：使用固定高度代替aspect-ratio，避免变形
                        height: 320rpx;
                        box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.15); // 更柔和的阴影
                        overflow: hidden; // 防止内容溢出
                        
                        .aiLeft {
                            border-radius: 16rpx;
                            padding: 5% 0;
                            margin-right: 12%;
                            background-size: cover;
                            background-position: center;
                            background-repeat: no-repeat;
                            width: 35%;
                            position: relative;
                            // 增加内边距，避免内容贴边
                            padding: 20rpx;
                            
                            .aiLeftTitle {
                                font-size: 30rpx;
                                font-weight: 900;
                                color: #fff;
                                text-align: left;
                                position: absolute;
                                bottom: 20rpx;
                                left: 20rpx;
                                text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3); // 增加文字阴影提高可读性
                            }
                        }
                        
                        .aiRight {
                            flex: 1;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            padding-right: 30rpx; // 增加右侧内边距
                            
                            .aiRightTitle {
                                font-size: 30rpx;
                                font-weight: 700;
                                color: #000;
                                text-align: left;
                                margin-bottom: 20rpx;
                                line-height: 1.5; // 增加行高，避免文字拥挤
                                // 限制最大宽度，防止文字溢出
                                max-width: 100%;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                display: -webkit-box;
                                -webkit-line-clamp: 2;
                                -webkit-box-orient: vertical;
                            }
                            
                            .aiDescription {
                                font-size: 26rpx;
                                font-weight: 700;
                                color: #999;
                                text-align: right;
                                width: 100%;
                                padding-top: 10rpx;
                                // 增加交互提示
                                transition: color 0.3s ease;
                            }
                        }
                    }
                    
                    // 增加hover效果，提升交互体验
                    &:active .aiTypeContainer {
                        transform: scale(0.98);
                        transition: transform 0.2s ease;
                    }
                    
                    &:active .aiDescription {
                        color: #666;
                    }
                }
            }
        }
    }
    
    // 响应式适配：针对不同屏幕尺寸调整
    @media screen and (min-width: 750rpx) {
        .aiTypeContainer {
            height: 340rpx !important;
        }
    }
    
    @media screen and (max-width: 375rpx) {
        .aiTypeContainer {
            height: 280rpx !important;
        }
        
        .aiRightTitle {
            font-size: 28rpx !important;
        }
    }
</style>