<script setup lang="ts">
import {onMounted, ref} from "vue";

import Login from "./components/login/index.vue";
import DataFields from "./components/data-fields/index.vue";
import Product from "./components/product/index.vue";
import Field from "./components/field/index.vue";
import Result from "./components/result/index.vue";

import {MenuItem, Menu, Icon} from "view-ui-plus";
import {useHash} from "./service/router.ts";

const page_data = ref({
    showLogin: false,
})
// 登录相关
const LOGIN_SESSION_KEY = 'x-yy-js-data-user';
const onLoginSuccess = () => {
    page_data.value.showLogin = false
    localStorage.setItem(LOGIN_SESSION_KEY, Date.now().toString(16));
}
onMounted(() => {
    const loginSession = localStorage.getItem(LOGIN_SESSION_KEY);
    console.log('loginSession', loginSession)
    if (!loginSession || (Date.now() - parseInt(loginSession, 16) > 3600 * 24 * 1000)) {
        page_data.value.showLogin = true
    }
})
const MENU_LIST = [
    {title: '药品管理', name: 'product', icon: 'ios-cube'},
    {title: '数据项管理', name: 'field', icon: 'ios-apps'},
    {title: '数据管理', name: 'product_value', icon: 'ios-paper'},
    {title: '计算结果', name: 'result', icon: 'ios-calculator'},
]
const hash = useHash()
const activeMenu = ref((hash.value || MENU_LIST[0].name))
const onMenuSelect = (name: string) => {
    activeMenu.value = name
    window.location.hash = name
}

</script>

<template>
    <div class="app-container">
        <Login v-if="page_data.showLogin" @login-success="onLoginSuccess"/>
        <!--        <Layout />-->
        <div class="app-header">
            <div class="app-logo">
                <img class="logo" src="./assets/images/logo.png" alt=""/>
            </div>
            <div class="app-menu">
                <Menu mode="horizontal" :active-name="activeMenu" @on-select="onMenuSelect">
                    <MenuItem v-for="m in MENU_LIST" :key="m.name" :name="m.name">
                        <Icon :type="m.icon" size="18"/>
                        <span>{{ m.title }}</span>
                    </MenuItem>
                </Menu>
            </div>
        </div>
        <div class="app-content">
            <DataFields v-if="activeMenu == 'product_value'"/>
            <Field v-else-if="activeMenu == 'field'"/>
            <Product v-else-if="activeMenu == 'product'"/>
            <Result v-else/>
        </div>
    </div>
</template>

<style scoped lang="scss">
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.app-header {
    display: flex;
    align-items: center;
    border-bottom: solid 1px #dcdee2;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    position: sticky;
    top: 0;
    padding: 0 50px;
    justify-content: space-between;
}

.app-menu {
    .ivu-menu {
        &:after {
            display: none;
        }
    }
}

.app-content {
    padding: 20px 50px;
}

.app-logo {
    padding: 10px;
    margin-right: 50px;
    display: flex;
    align-items: center;
}

body {
    background: #fff;
    color: #000;
}

.logo {
    height: 34px;
    will-change: filter;
    transition: filter 300ms;
}

</style>
