<script setup>
import { ref, computed } from 'vue'
import { useThemeStore } from "@/store/useThemeStore";
import { useAppStore } from '@/store/useAppStore'

const themeStore = useThemeStore()
const appStore = useAppStore()
const scrollHeight = computed(() => {
    return appStore.windowInfo.screenHeight - appStore.windowInfo.statusBarHeight - 50
})
const questions = ref([
    {
        id: 1,
        question: 'What is the capital of France?',
    },
    {
        id: 2,
        question: 'Which planet is known as the Red Planet?',
    },
    {
        id: 3,
        question: 'What is the largest mammal in the world?',
    }
])
const inputVal = ref('')

</script>
<template>
    <mobile-custom-layout title="Self-service Customer" bgColor="#2F0101"
        :headBgColor="themeStore.theme.bgColor" :paddingTop="appStore.headerStyle.height">
        <template #head-right>
            <view>
                <theme-image src="@/static/account/customer_head.png" class="icon-kf-head"></theme-image>
            </view>
        </template>
        <scroll-view scroll-y class="w-full p-2 scroll" :style="{ height: scrollHeight + 'px' }">
            12
        </scroll-view>
        <view class="w-full input-line safe-area">
            <view class="w-full flex items-center input-content">
                <view class="flex-1 p-1 input-box">
                    <input type="text" v-model="inputVal" class="w-full ft12" placeholder="Please enter your question" />
                </view>
                <view class="submit-btn ml-2 ft13 flex-center">Send</view>
            </view>
        </view>
    </mobile-custom-layout>
</template>
<style lang="scss" scoped>
.scroll{
    box-sizing: border-box;
}
.icon-kf-head{
    width: 46rpx;
    height: 46rpx;
}
.input-line {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 1000;
    background-color: #280000;

    .input-content {
        height: 120rpx;
        padding: 0 24rpx;

        .input-box{
            height: 56rpx;
            background-color: #5A0107;
            border-radius: 4px;
        }
        .submit-btn{
            height: 56rpx;
            width: 100rpx;
            background-color: #5A0107;
            border-radius: 4px;
        }
    }
}
</style>