<template>
    <div class="home-styles-box">
        <div class="hc-home-input-box">
            <div class="hc-home-content">
                <div class="hc-slogan-icon">
                    <img class="logo" :src="ImgText3" alt="">
                </div>
                <SearchInput placeholder="请输入您想查找的内容" v-model="searchKey" @input="SearchKeyInput"/>
                <div class="home-link-box">
                    <span>他们都在搜索：</span>
                    <div class="home-link">
                        <router-link to="/data-fill/wbs">资料填报</router-link>
                    </div>
                    <div class="home-link">
                        <router-link to="/data-fill/query">资料查询</router-link>
                    </div>
                    <div class="home-link">
                        <router-link to="/ledger/query">日志填报</router-link>
                    </div>
                    <div class="home-link">
                        <router-link to="/schedule/data">资料进度</router-link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref, watch} from "vue";
import {useAppStore} from "~src/store";
import SearchInput from '~com/home/SearchInput.vue'
import ImgText3 from "~src/assets/view/text-3.png";

//变量
const useAppState = useAppStore()
const HomeTheme = ref(useAppState.getHomeTheme);

//监听
watch(() => [
    useAppState.getHomeTheme,
], ([theme]) => {
    HomeTheme.value = theme
})

//搜索
const searchKey = ref('')
const SearchKeyInput = (value) => {
    searchKey.value = value
}
</script>

<style lang="scss" scoped>
@import "../../styles/view/home.scss";
</style>

<style lang="scss">
.home-link a {
    color: inherit;
    text-decoration: none;
}
</style>
