<template>
    <view class="main">
        <view class="mainTop" :style="{
            height: menu.bottom + 6 + 'px',
            paddingTop: menu.top - 6 + 'px',
        }">
            <view class="mainTopContent" :style="{ height: menu.height + 12 + 'px' }">
                <image class="backIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg" />
                <view class="robotBox">
                    <image class="robotImg" src="https://eshangtech.com/ShopICO/ahyd-BID/robot/robotIcon.png" />
                    <view class="robotDetail">
                        <span class="name">小驿</span>
                        <span class="desc">商业智能助理 </span>
                    </view>
                </view>
            </view>
        </view>

        <view class="dialogContentBox">
            <view :class="item.type === 1 ? 'item itemLeft' : 'item rightItem'" v-for="(item, index) in dialogueList"
                :key="index" :style="{ marginTop: index !== 0 ? '30rpx' : '' }">
                <view :id="'printBox' + index" :class="item.type === 1 ? `dialogItem white` : `dialogItem green`">
                    {{ item.text || "" }}
                    <!-- <view class="line" v-if="item.searchType === 'default'"></view> -->
                    <!-- <view class="defaultBox">
                        <view>你可能想问：</view>
                    </view> -->
                </view>
            </view>

            <view class="loadingBox" v-if="isLoading"> 小驿分析中... </view>
        </view>

        <view class="inputBox">
            <!-- <image class="microphone" src="https://eshangtech.com/ShopICO/ahyd-BID/robot/microphone.png" /> -->
            <div class="textBox">
                <textarea class="searchText" auto-height :value="searchText" @input="handleInput" placeholder="有问题尽管问我～"
                    placeholder-class="placeholder-style" maxlength="-1" cursor-spacing="20" :adjust-position="false" />
            </div>

            <view class="searchBtn" @click="handleSubmit"> 发送 </view>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            searchText: "",
            dialogueList: [], // 对话list  type 1 是居左 2 是居右 searchType default
            printText: "",
            isLoading: false, // 是否加载中
            useInfo: {},
            menu: {},
            qaList: [
                {
                    "request": "扫码充电功能",
                    "answers": "尊敬的客户您好！使用扫码充电功能时，请您先进入小程序端的扫码充电页面，系统会默认显示您附近服务区的充电桩信息。如需查询其他服务区，可以使用页面上方的搜索框。您也可以通过扫一扫功能扫描充电商二维码，直接跳转到对应小程序。目前APP端暂不支持小程序跳转功能，但可以查看充电桩信息。如有任何疑问，欢迎随时咨询。"
                },
                {
                    "request": "我要加油功能",
                    "answers": "亲爱的用户您好！感谢您使用我们的加油服务。在'我要加油'页面中，系统会自动定位并显示您附近服务区的最新油价信息。如果您需要查询其他服务区油价，只需在页面上方的搜索框输入相关信息即可。祝您旅途愉快！"
                },
                {
                    "request": "线上点餐功能",
                    "answers": "尊敬的顾客您好！欢迎使用我们的线上点餐服务。您可以在该页面浏览各服务区餐厅的美食，选择心仪的商品后进入对应门店下单。我们还特别提供预约点餐功能，让您提前安排好用餐时间。如有特殊需求，请随时联系我们的客服人员。"
                },
                {
                    "request": "出行导航功能",
                    "answers": "亲爱的用户您好！感谢您使用我们的出行导航服务。只需在页面输入您的目的地，系统就会为您智能规划最佳路线，并详细显示预计到达时间、路程距离和费用情况。同时还会标注沿途服务区位置，方便您做好行程规划。祝您一路顺风！"
                },
                {
                    "request": "道路救援功能",
                    "answers": "尊敬的客户您好！如在高速公路上遇到紧急情况，请您立即点击'道路救援'功能，我们的专业救援团队将第一时间响应。为了您的安全，请尽量将车辆移至应急车道，开启危险警示灯，并在车后方放置警示牌。我们的救援人员会以最快速度赶到现场。"
                },
                {
                    "request": "失物招领功能",
                    "answers": "亲爱的旅客您好！请您先点击进入'失物招领'功能页面。在该页面您可以：1.查询各服务区已登记的拾获物品信息；2.填写遗失物品登记表。我们的工作人员会在收到信息后第一时间协助查找，同时建议您同步联系当地服务区管理处(联系电话可在页面查询)。我们将全力帮您寻回失物！"
                },
                {
                    "request": "我要修车功能",
                    "answers": "尊敬的客户您好！请点击进入'我要修车'功能页面，您将看到：1.自动定位显示附近服务区维修点；2.详细门店信息(营业时间/联系电话/导航路线)；3.实时营业状态更新。遇到紧急情况时，页面还提供道路救援快捷入口。为保障您的行车安全，建议提前查询维修点信息哦！"
                },
                {
                    "request": "投诉建议功能",
                    "answers": "尊敬的客户您好！请您点击进入'投诉建议'页面，在这里您可以：1.选择问题类型(服务/设施/卫生等)；2.上传现场照片；3.填写详细情况描述。我们承诺在24小时内响应处理，重要问题将有专人跟进回访。您的意见对我们非常重要，感谢您的监督与支持！"
                }
            ]
        };
    },
    onLoad() {
        this.menu = uni.getMenuButtonBoundingClientRect();
        console.log("menu", this.menu);
        this.dialogueList.push({
            text: `您好！我是服务区商业智能助理小驿。\n您想了解服务区哪些方面的信息？`,
            type: 1,
            searchType: "default",
        });
        // this.handlePrintText();
        // this.printText = `您好！我是服务区商业智能助理小驿。<br>您想了解服务区哪些方面的信息？`
    },
    methods: {
        handleInput(e) {
            console.log('e', e);
            this.searchText = e.detail.value
        },
        handleSubmit() {
            console.log("this.searchText", this.searchText);
            if (this.searchText) {
                let list = this.dialogueList;
                let text = this.searchText
                list.push({ text: text, type: 2 });
                this.searchText = "";
                let _this = this
                _this.isLoading = true
                setTimeout(() => {
                    const data = _this.findClosestMatch(text)
                    if (data) {
                        list.push({ text: data.answers, type: 1 });
                        _this.dialogueList = list;
                    } else {
                        list.push({ text: '小驿不太明白您的意思。', type: 1 });
                        _this.dialogueList = list;
                    }
                    _this.isLoading = false
                    _this.$forceUpdate();
                }, 500)
            }
        },
        // 简单关键词匹配（评分方式）
        findClosestMatch(input) {
            if (!input) return null;
            const keywords = input.split(/[\s，。？！、]/).filter(Boolean);
            let maxScore = 0;
            let bestMatch = null;

            this.qaList.forEach(item => {
                let score = 0;
                keywords.forEach(kw => {
                    if (item.request.includes(kw)) {
                        score += 1;
                    }
                });
                if (score > maxScore) {
                    maxScore = score;
                    bestMatch = item;
                }
            });
            console.log('bestMatch', bestMatch);

            return bestMatch;
        }
    },
};
</script>

<style scoped lang="scss">
.main {
    width: 100%;
    height: 100vh;
    // background: #f0f0f0;
    background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/robot/robotBackground.png");
    background-repeat: no-repeat;

    .mainTop {
        width: 100%;
        box-sizing: border-box;

        .mainTopContent {
            width: 100%;
            box-sizing: border-box;
            padding-left: 32rpx;
            display: flex;
            align-items: center;

            .backIcon {
                width: 52rpx;
                height: 52rpx;
                margin-right: 16rpx;
            }

            .robotBox {
                display: flex;
                align-items: center;

                .robotImg {
                    width: 68rpx;
                    height: 68rpx;
                    margin-right: 16rpx;
                }

                .robotDetail {
                    display: flex;
                    flex-direction: column;

                    .name {
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 600;
                        font-size: 28rpx;
                        color: #090c1a;
                        line-height: 40rpx;
                        text-align: left;
                        font-style: normal;
                    }

                    .desc {
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #787879;
                        line-height: 36rpx;
                        text-align: justify;
                        font-style: normal;
                    }
                }
            }
        }
    }

    .dialogContentBox {
        width: 100%;
        // height: calc(100vh - 90px);
        height: calc(100vh - var(--nav-height) - 180rpx - env(safe-area-inset-bottom));
        overflow-y: scroll;
        box-sizing: border-box;
        padding: 32rpx;
        padding-bottom: calc(180rpx + env(safe-area-inset-bottom));
        /* 增加底部内边距 */
        /* 新增平滑滚动 */
        scroll-behavior: smooth;

        .item {
            display: flex;
            align-items: center;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 30rpx;
            color: #090c1a;
            line-height: 44rpx;
            text-align: left;
            font-style: normal;

            .dialogItem {
                max-width: calc(100vw - 64rpx);
                display: block;
                box-sizing: border-box;
                // padding: 24rpx 32rpx;
                padding: 16rpx 30rpx;
                border-radius: 4px;
                background: #ffffff;
                border-radius: 0rpx 24rpx 24rpx 24rpx;

                .line {
                    width: 100%;
                    height: 2rpx;
                    background: #f2f2f2;
                    border-radius: 16rpx;
                    margin: 24rpx 0;
                }

                .defaultBox {
                    .clickItem {
                        font-family: PingFangSC, PingFang SC;
                        font-weight: 400;
                        font-size: 30rpx;
                        color: #2363ff;
                        line-height: 44rpx;
                        text-align: left;
                        font-style: normal;
                    }
                }
            }

            .white {
                background: #fff;
                color: #000;
                border-radius: 20rpx 20rpx 20rpx 5rpx;
            }

            .green {
                background: #009DFF;
                color: #fff;
                border-radius: 20rpx 20rpx 5rpx 20rpx;
            }
        }

        .itemLeft {
            justify-content: flex-start;
        }

        .rightItem {
            justify-content: flex-end;
        }

        .loadingBox {
            font-size: 12px;
            color: #ccc;
            width: 100%;
            display: flex;
            justify-content: center;
        }
    }

    .inputBox {
        width: 100%;
        min-height: 180rpx;
        background: #fff;
        position: fixed;
        left: 0;
        bottom: 0;
        box-sizing: border-box;
        padding: 16rpx 32rpx;
        padding-bottom: env(safe-area-inset-bottom);
        display: flex;
        align-items: flex-end;
        /* 修改为底部对齐 */
        border-top: 1rpx solid #f2f2f2;

        .microphone {
            width: 48rpx;
            height: 48rpx;
            margin-right: 16rpx;
        }

        .textBox {
            width: calc(100% - 140rpx);
            min-height: 88rpx;
            max-height: 300rpx;
            /* 设置最大高度 */
            background: #f2f3f7;
            border-radius: 44rpx;
            padding: 16rpx 32rpx;
            box-sizing: border-box;
            display: flex;
            align-items: center;
        }

        .searchText {
            width: 100%;
            font-size: 28rpx;
            line-height: 1.5;
            max-height: 268rpx;
            /* textBox高度减去padding */
            overflow-y: auto;
            /* 内容过多时可滚动 */
        }

        .placeholder-style {
            color: #999;
            font-size: 28rpx;
            display: flex;
            align-items: center;
        }

        .searchBtn {
            width: 128rpx;
            height: 88rpx;
            box-sizing: border-box;
            color: #fff;
            background: #009DFF;
            border-radius: 44rpx;
            margin-left: 16rpx;
            font-family: "Microsoft YaHei";
            font-weight: 400;
            font-size: 28rpx;
            color: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}
</style>
