<script setup lang="ts">

import {useUserStore} from "@/store";
import {storeToRefs} from "pinia";
import {computed} from "vue";

const {theme} = storeToRefs(useUserStore());
const lightTheme = computed(() => theme.value === 'light');
</script>
<template>
    <div class="search content" :class="{'light-mode':lightTheme,'dark-mode':!lightTheme}">
        <t-typography-title level="h2">借阅</t-typography-title>
        <div id="formDiv">
            <t-form :class="{'light-mode':lightTheme,'dark-mode':!lightTheme}" class="form">
                <t-form-item label="借阅证号" class="input">
                    <t-input placeholder="借阅证号"></t-input>
                </t-form-item>
                <t-form-item label="图书标识号" class="input">
                    <t-input placeholder="图书标识号"></t-input>
                </t-form-item>
                <t-form-item label="借阅时间" class="input">
                    <t-input placeholder="借阅时间" suffix="天"></t-input>
                </t-form-item>
                <t-form-item  >
                    <t-button>生成借阅表</t-button>
                </t-form-item>
            </t-form>
        </div>
    </div>
</template>

<style lang="less" scoped>
@import '@/index.less';

@basic-color: var(--basic-color);
.search {
    background-color: @basic-color;
}

.form {
    background-color: @basic-color;
}

#formDiv {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.input {
    width: 490px;
}
</style>