<template>
    <!-- 3840 x 2160 -->
    <!-- :fullScreen="true" width="1920" height="923" -->
    <v-scale-screen width="1920" height="1080">
        <!-- :style="{ height: Screen.height + 'px', width: Screen.width + 'px' }" -->
        <q-layout view="hHh LpR fFf" style="width: 100%;height:100%;">
            <!-- reveal -->
            <q-header elevated class="bg-primary text-white">
                <!-- shadow-18  rounded-borders -->
                <q-toolbar class="main-headers bg-primary text-white glossy ">
                    <!-- 收起菜單按鈕 -->
                    <!-- <transition appear enter-active-class="animated zoomIn">
                    <q-btn flat @click.capture="menuToggle" round :icon="drawer ? 'menu' : 'menu_open'" class="q-mr-sm">
                        <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[15, 15]"
                            content-style="font-size: 12px">{{
                                drawer ? "打开菜单" : "收起菜单" }}</q-tooltip>
                    </q-btn>
                </transition> -->
                    <!-- <q-separator dark vertical inset /> -->
                    <!-- 項目title -->
                    <q-img src="../../public/icons/icon.png" width="120px" />

                    <q-btn flat no-caps no-wrap class="q-ml-xs q-mr-xs" :to="{ name: 'screen1' }">
                        <!-- <transition appear enter-active-class="animated zoomIn"> -->
                        <!-- <q-icon name="img:https://cdn.quasar.dev/logo-v2/svg/logo.svg" /> -->
                        <q-toolbar-title shrink class="text-weight-bold desktop-only">
                            <!-- <q-img src="statics/icons/wms.png" width='28px' height='28px' style="margin-top:-5px" /> -->
                            CVD炉设备运行状态监测
                        </q-toolbar-title>
                        <q-toolbar-title shrink class="text-weight-bold mobile-only">CVD</q-toolbar-title>
                    </q-btn>
                    <q-separator dark vertical inset />
                    <q-btn flat no-caps no-wrap class="q-ml-xs q-mr-xs" :to="{ name: 'screen1' }">
                        <q-toolbar-title shrink class="text-weight-bold">
                            主页
                        </q-toolbar-title>
                    </q-btn>
                    <q-separator dark vertical inset />
                    <q-btn-dropdown flat no-caps no-wrap class="q-ml-xs q-mr-xs">
                        <template v-slot:label>
                            <q-toolbar-title shrink class="text-weight-bold">
                                运行报表
                            </q-toolbar-title>
                        </template>
                        <q-list>
                            <q-item clickable v-close-popup :to="{ name: 'screen2' }">
                                <q-item-section>
                                    <q-item-label>查询一</q-item-label>
                                </q-item-section>
                            </q-item>

                            <q-item clickable v-close-popup :to="{ name: 'screen4' }">
                                <q-item-section>
                                    <q-item-label>查询二</q-item-label>
                                </q-item-section>
                            </q-item>
                        </q-list>
                    </q-btn-dropdown>
                    <q-separator dark vertical inset />
                    <q-btn flat no-caps no-wrap class="q-ml-xs q-mr-xs" :to="{ name: 'screen3' }">
                        <q-toolbar-title shrink class="text-weight-bold">
                            设备状态
                        </q-toolbar-title>
                    </q-btn>
                    <!-- </transition> -->
                    <q-space />
                    <currentDateTime class="q-mr-md" />
                    <q-separator dark vertical inset />
                    <q-btn flat round dense class="q-ml-sm q-mr-sm"
                        :icon="AppFullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'" @click="fullScreen">
                        <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[15, 15]"
                            content-style="font-size: 12px">{{
                                AppFullscreen.isActive ? "退出全屏" : "全屏" }}</q-tooltip>
                    </q-btn>
                    <!-- <q-separator dark vertical inset /> -->
                    <!-- 右上角个人中心 -->
                    <transition appear enter-active-class="animated zoomIn">
                        <q-btn-dropdown stretch flat color="white-8" icon="account_circle" transition-show="jump-down"
                            transition-hide="jump-up">
                            <div class="row no-wrap q-pa-md">
                                <div class="column items-center">
                                    <!-- <q-avatar size="72px"><q-img src="statics/user/boy-avatar.png"></q-img></q-avatar> -->
                                    <q-avatar size="72px"><q-img src="icons/favicon-128x128.png"></q-img></q-avatar>
                                    <div class="text-subtitle2 q-mt-sm q-mb-sm">
                                        Hi! {{ user.userName }}
                                    </div>
                                    <q-btn v-if="userType == 'admin'" color="primary" label="用户管理" push v-close-popup
                                        icon="person" :to="{ name: 'sysUser' }">
                                        <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
                                            content-style="font-size: 12px">用户管理</q-tooltip>
                                    </q-btn>
                                    <q-btn v-if="userType == 'admin'" style="margin-top: 5px" color="primary"
                                        label="PLC管理" push v-close-popup icon="img:statics/icons/PLC.png"
                                        :to="{ name: 'device' }">
                                        <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
                                            content-style="font-size: 12px">PLC控制器管理</q-tooltip>
                                    </q-btn>
                                    <q-btn v-if="userType == 'admin'" style="margin-top: 5px" color="primary"
                                        label="设备管理" push v-close-popup icon="apps" :to="{ name: 'equipment' }">
                                        <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
                                            content-style="font-size: 12px">设备管理</q-tooltip>
                                    </q-btn>
                                    <q-btn v-if="userType == 'admin'" style="margin-top: 5px" color="primary"
                                        label="系统参数" push v-close-popup icon="settings" :to="{ name: 'sysConfig' }">
                                        <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
                                            content-style="font-size: 12px">系统参数设置</q-tooltip>
                                    </q-btn>
                                    <q-btn style="margin-top: 5px" color="primary" label="修改密码" push v-close-popup
                                        icon="lock" @click="updatePasswordForm()">
                                        <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
                                            content-style="font-size: 12px">修改密码</q-tooltip>
                                    </q-btn>
                                    <q-btn style="margin-top: 5px" color="negative" label="退出登录" push v-close-popup
                                        icon="login" @click="Logout()">
                                        <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
                                            content-style="font-size: 12px">退出登录</q-tooltip>
                                    </q-btn>
                                </div>
                            </div>
                        </q-btn-dropdown>
                    </transition>
                    <!--
          <q-btn stretch flat color="white-8" icon="account_circle">
            <q-icon class="q-ml-sm" name="arrow_drop_down"></q-icon>
            <q-menu anchor="bottom left" self="top left" transition-show="jump-down" transition-hide="jump-up">
              <div class="row no-wrap q-pa-md">
                <div class="column">
                  <div class="text-h6 q-mb-md">操作</div>
                </div>
                <q-separator vertical inset class="q-mx-lg" />
                <div class="column items-center">
                  <q-avatar size="72px">
                    <img src="statics/user/stafftype.png">
                  </q-avatar>
                  <div class="text-subtitle1 q-mt-md q-mb-xs">{{ user.userName }}</div>
                  <q-btn color="primary" label="修改密码" push v-close-popup icon="lock" @click="updatePasswordForm()">
                    <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
                      content-style="font-size: 12px">修改密码</q-tooltip>
                  </q-btn>
                  <q-btn style="margin-top: 5px" color="negative" label="退出登录" push v-close-popup icon="login"
                    @click="Logout()">
                    <q-tooltip content-class="bg-amber text-black shadow-4" :offset="[10, 10]"
                      content-style="font-size: 12px">退出登录</q-tooltip>
                  </q-btn>
                </div>
              </div>
            </q-menu>
          </q-btn> -->

                </q-toolbar>
            </q-header>
            <!--  侧边栏菜单 -->
            <!-- :mini="!drawerleft || miniState"  :mini-to-overlay="drawer" @mouseover="menuMouseover" @mouseout="menuMouseout"  -->
            <!-- <q-drawer v-model="miniState" elevated bordered show-if-above :width="200" :breakpoint="500"
            content-class="bg-grey-3 shadow-24">
            <q-scroll-area class="fit" style="overflow-y: auto">
                <q-list>
                    <dynamic-menu :menu="(menuInfo as menuType)" />
                </q-list>
            </q-scroll-area>
        </q-drawer> -->
            <!-- 内容页面 -->
            <q-page-container class="main-page" :style="{ height: (Platform.is.android ? '100%' : '100%') }">
                <router-view />
            </q-page-container>
            <!-- 修改密码 -->
            <q-dialog v-model="updatePasswordFormDialog" persistent>
                <q-card class="shadow-24" style="max-width: 20vw">
                    <q-card-section class="no-padding">
                        <q-card-actions class="bg-light-blue-10 text-white">
                            <q-card-actions class="text-h6">修改密码</q-card-actions>
                            <q-space />
                            <q-btn round flat icon="close" v-close-popup>
                                <q-tooltip content-class="bg-amber text-black shadow-4">关闭</q-tooltip>
                            </q-btn>
                        </q-card-actions>
                    </q-card-section>
                    <q-card-section style="max-width: 20vw" class="scroll">
                        <q-form ref="updatePasswordFormRef">
                            <div class="row q-col-gutter-md">
                                <div class="col-xl-12 col-lg-12 col-xs-12">
                                    <q-input class="text-h6" outlined v-model.trim="updatePasswordFormData.oldPwd"
                                        label="旧密码" autofocus
                                        :rules="[(val) => (val !== undefined && val !== '') || '请输入旧密码']" />
                                </div>
                                <!-- (val) => passwordEqual || '两次密码不一致' @update:model-value="validatePassword" -->
                                <div class="col-xl-12 col-lg-12 col-xs-12">
                                    <q-input class="text-h6" outlined v-model.trim="updatePasswordFormData.newPwd"
                                        label="新密码" :rules="[(val) => (val !== undefined && val !== '') || '请输入新密码']" />
                                </div>
                                <!-- <div class="col-xl-12 col-lg-12 col-xs-12">
                                <q-input class="text-h6" outlined v-model.trim="updatePasswordFormData.newPwd" label="确认新密码"
                                    :rules="[(val) => (val !== undefined && val !== '') || '请再次输入新密码',
                                    (val) => passwordEqual || '两次密码不一致']" @update:model-value="validatePassword" />
                            </div> -->
                            </div>
                        </q-form>
                    </q-card-section>
                    <q-separator />
                    <q-card-actions align="right">
                        <q-btn class="q-mr-md" @click="updatePasswordForm()">取消</q-btn>
                        <q-btn color="primary" @click="updatePasswordFormSubmit()">提交</q-btn>
                    </q-card-actions>
                </q-card>
            </q-dialog>
        </q-layout>
    </v-scale-screen>
</template>

<script setup lang="ts">
// import index from 'src/pages/Index.vue';
import { useRouter } from 'vue-router';
import { AppFullscreen, LocalStorage, Screen, Platform } from 'quasar';
import { useMenuStore } from 'src/stores/useMenuStore';
import { computed, onMounted, reactive, ref } from 'vue';
// import dynamicMenu from '../components/dynamic-menu.vue';
import { loginApi } from 'src/api/login/loginApi';
import { UpdatePasswordEntity } from 'src/api/login/model/login'
import currentDateTime from 'src/components/currentDateTime.vue';
import { useScreenStore } from 'src/stores/useScreenStore'
import VScaleScreen from 'v-scale-screen'

//公共数据
const userType = ref();
const screenStore = useScreenStore();
const userRouter = useRouter();
let user = reactive({
    userName: LocalStorage.getItem('userName'),
    userId: '',
    authin: '',
});
const drawer = ref(false);
// const drawerleft = ref(false);
const miniState = ref(false);

// 全屏/退出全屏
const fullScreen = () => {
    if (AppFullscreen.isActive) {
        // 退出全屏模式：
        AppFullscreen.exit().then(() => {
            // v1.5.0+
            // success!
            screenStore.CurrentAppFullscreen = false;
        }).catch(err => {
            // eslint-disable-next-line handle-callback-err
            // v1.5.0+
            // oh, no!!!
        })
    } else {
        // 请求全屏模式：
        AppFullscreen.request().then(() => {
            // v1.5.0+
            // success!
            screenStore.CurrentAppFullscreen = true;
        }).catch(err => {
            // eslint-disable-next-line handle-callback-err
            // v1.5.0+
            // oh, no!!!
        })
    }
}

// 左侧菜单栏切换事件
const menuToggle = (e: any) => {
    drawer.value = !drawer.value
    LocalStorage.set('menuState', drawer.value);
    miniState.value = !miniState.value
    e.stopPropagation()
}

// 左侧菜单栏 鼠标移入事件
const menuMouseover = () => {
    if (drawer.value) {
        miniState.value = false
    }
}
// 左侧菜单栏 鼠标移出事件
const menuMouseout = () => {
    if (drawer.value) {
        miniState.value = true
    }
}

// 菜单
const useMenu = useMenuStore();
const menuInfo = ref(LocalStorage.getItem('menuInfo') as menuType);

// 登出
const Logout = () => {
    // LocalStorage.remove('userName');
    LocalStorage.remove('id');
    LocalStorage.remove('token');
    // LocalStorage.remove('userName');
    LocalStorage.remove('userType');
    // 如果有免登录 退出时移除
    if (LocalStorage.has('noSignin')) {
        LocalStorage.remove('noSignin');
    }
    useMenu.$reset();
    userRouter.push({ name: 'loginIndex' });
    // Notify.create({
    //   message: '退出登录！',
    //   icon: 'emoji_emotions',
    //   color: 'positive',
    //   position: 'top'
    // });
};

// 修改密码 弹窗标识
let updatePasswordFormDialog = ref(false);
let updatePasswordFormData = ref(new UpdatePasswordEntity());

// 修改密码
const updatePasswordFormRef = ref();
const updatePasswordFormSubmit = () => {
    updatePasswordFormRef.value.validate().then((success: any) => {
        if (success) {
            updatePasswordFormData.value.id = LocalStorage.getItem('id') as string;
            loginApi.updatePassword(updatePasswordFormData.value).then(() => {
                updatePasswordForm();
                Logout();
            });
        }
    })
};

const validatePassword = () => {
    updatePasswordFormRef.value.resetValidation()
}

// 校验两次密码是否输入的相同
const passwordEqual = computed<boolean>(() => {
    let result = false;
    updatePasswordFormData.value.oldPwd !== updatePasswordFormData.value.newPwd ? result = false : result = true
    return result
})

// 关闭修改密码弹窗
const updatePasswordForm = () => {
    updatePasswordFormData.value = new UpdatePasswordEntity();
    updatePasswordFormDialog.value = !updatePasswordFormDialog.value;
};

//生命周期
onMounted(() => {
    userType.value = LocalStorage.getItem('userType')
    const menuState = LocalStorage.getItem('menuState') as boolean;
    if (menuState) {
        drawer.value = menuState
        miniState.value = menuState
    }
    // menus.value = useMenu.menuInfos as menuType;
    //userRouter.push({ path: '/index/home' });
});
</script>

<style lang="scss">
.tabs .q-tab__indicator {
    width: 25%;
    height: 1.5px;
    margin: auto;
    color: #d6d7d7;
}

.tabs .absolute-bottom {
    bottom: 8px;
}
</style>
