<script lang="ts" setup name="Layout">
import hotkeys from 'hotkeys-js'
import LinkView from './components/views/link.vue'
import Header from './components/Header/index.vue'
import MainSidebar from './components/MainSidebar/index.vue'
import SubSidebar from './components/SubSidebar/index.vue'
import Tabbar from './components/Tabbar/index.vue'
import useSettingsStore from '@/store/modules/settings'
import useKeepAliveStore from '@/store/modules/keepAlive'
import useKeepAliveCompCache from '@/store/modules/keepAliveCompCache'
import useMenuStore from '@/store/modules/menu'
import { markRaw } from "vue";
import { commonPageConfig } from "@/utils/enum";
import {
  Close
} from "@element-plus/icons-vue";
import { getAllMessageList, getMessageCount, updateMessageState, updateAllFinish } from '@/api/modules/queryService';
import useUserStore from "@/store/modules/user";
import useDataFinanceStore from "@/store/modules/dataFinance";
import Moment from 'moment';

const router = useRouter()
const userStore = useUserStore();
const userData = JSON.parse(userStore.userData)
const financeStore = useDataFinanceStore();
const { proxy } = getCurrentInstance() as any;

const routeInfo = useRoute()

const settingsStore = useSettingsStore()
const keepAliveStore = useKeepAliveStore()
const menuStore = useMenuStore()
const keepAliveCompCache = useKeepAliveCompCache();

const isLink = computed(() => !!routeInfo.meta.link)
const isRouterAlive = ref(true);
// 局部组件刷新
const reload = () => {
  isRouterAlive.value = false;
  nextTick(() => {
    isRouterAlive.value = true;
  });
}
provide("reload", reload);

watch(() => settingsStore.settings.menu.subMenuCollapse, (val) => {
  if (settingsStore.mode === 'mobile') {
    if (!val) {
      document.body.classList.add('overflow-hidden')
    }
    else {
      document.body.classList.remove('overflow-hidden')
    }
  }
})

watch(() => routeInfo.path, () => {
  if (settingsStore.mode === 'mobile') {
    settingsStore.$patch((state) => {
      state.settings.menu.subMenuCollapse = true
    })
  }
})

onMounted(() => {
  hotkeys('f5', (e) => {
    if (settingsStore.settings.toolbar.enablePageReload) {
      e.preventDefault()
      useMainPage().reload()
    }
  })
  hotkeys('alt+`', (e) => {
    if (settingsStore.settings.menu.enableHotkeys) {
      e.preventDefault()
      useMenu().switchTo(menuStore.actived + 1 < menuStore.allMenus.length ? menuStore.actived + 1 : 0)
    }
  })
})
onUnmounted(() => {
  hotkeys.unbind('f5')
  hotkeys.unbind('alt+`')
})

/**
 * 在组件外面包一层，使用fullPath进行缓存，否则会出现，不同的编辑页面同时存在，关闭其中一个再次打开，缓存未被清除。
*/
const wrap = (route, component) => {
  if (!route.meta.reuse) {
    return component;
  }
  let name = route.fullPath;
  let wrapper: any = null;
  let wrapperMap = keepAliveCompCache.keepAliveCompCache;
  if (wrapperMap.has(name)) {
    wrapper = wrapperMap.get(name)
  } else {
    wrapper = {
      name: name,
      render() {
        return markRaw(component)
      },
    }
    keepAliveCompCache.add(name, wrapper);
  }
  return markRaw(wrapper);
}

/** 消息列表分页 */
const pageInfo = ref({
  ...commonPageConfig,
  limit: 50,
  rows: 0,
  type: "normal",
  pageSizeShow: false,
});

/** 待办列表分页 */
const dealPageInfo = ref({
  ...commonPageConfig,
  limit: 50,
  rows: 0,
  type: "normal",
  pageSizeShow: false,
});

/** 待办消息列表数据 */
const dealMessageList: any = ref([]);
/** 所有的消息列表数据 */
const messageAllList: any = ref([]);

const msgCntPromise = ref();

const drawerVisible = ref(false);

const tabList = ref([{ tabName: '待办' }, { tabName: '消息' }])

const noFinishCnt = ref(0);
/** 待办消息总数 */
const dealTotalRows = ref(0)
/** 消息总数 */
const messageTotalRows = ref(0)
const messageType = ref(1); // 1为待办，2为消息
// 代办消息切换
const tabClick = (index) => {
  messageType.value = index == 0 ? 1 : 2;
}

const pageChange = (info) => {
  if (messageType.value == 2) {
    pageInfo.value.curr = Number(info.curr);
    pageInfo.value.limit = Number(info.limit);
    getMessageList(messageType.value);
  } else {
    dealPageInfo.value.curr = Number(info.curr);
    dealPageInfo.value.limit = Number(info.limit);
    getMessageList(messageType.value);
  }
};

const messageJump = (item) => {
  if (!item.jumpUrl || item.jumpUrl == '/') {
    return;//不跳转    
  }
  if (item.jumpUrl.startsWith('/data-finance/financial-Match?')) {
    let index = item.jumpUrl.indexOf("?");
    if (index == -1) {
      proxy.$ElMessage.error('url地址不对');
      return;
    }
    let params = item.jumpUrl.substring(index + 1);
    let searchParams = new URLSearchParams(params);
    financeStore.setCircuGUid(searchParams.get("guid") || '');
    financeStore.setGoodsName(searchParams.get("goodsName") || "");
    let goPath = item.jumpUrl.substring(0, index);
    router.push({
      path: goPath
    });
    drawerVisible.value = false;
  } else {
    router.push(item.jumpUrl);
    drawerVisible.value = false;
  }
}

//消息已读
const messageRemark = (item) => {
  updateMessageState([item.guid]).then((res: any) => {
    if (res.code == proxy.$passCode) {
      messageJump(item);
      getMessageList(2);
      getMsgCnt();
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  })
}

const messageJumpHover = (item) => {
  if (messageType.value == 1) {
    messageJump(item);
  } else {
    messageRemark(item);
  }
}

const handleClickMsg = () => {
  drawerVisible.value = true;
  getMessageList(1)
  getMessageList(2);
}

const getMessageList = (type = 1) => {
  let param: any = {
    messageType: type,
    pageIndex: type == 1 ? dealPageInfo.value.curr : pageInfo.value.curr,
    pageSize: 50,
    tenantGuid: userData.tenantGuid,
    staffGuid: userData.staffGuid
  };
  if (type == 1) {
    param.isFinish = 'N';
  }
  getAllMessageList(param).then((res: any) => {
    if (res.code === proxy.$passCode) {
      if (type == 1) {
        dealPageInfo.value.rows = res.data.totalRows || 0;
        //dealTotalRows.value = dealPageInfo.value.rows;
        dealMessageList.value =  res.data.records || [];
      } else {
        pageInfo.value.rows = res.data.totalRows || 0;
        //messageTotalRows.value = pageInfo.value.rows;
        messageAllList.value = res.data.records || [];
      }
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  })
}

const messageAllRead = () => {
  proxy.$openMessageBox('确定全部标记为已读吗？', () => {
    updateAllFinish(userData.staffGuid).then((res: any) => {
      if (res.code == proxy.$passCode) {
        proxy.$ElMessage.success('操作成功');
        getMessageList(2);
        getMsgCnt();
      } else {
        proxy.$ElMessage.error(res.msg);
      }
    });
  }, () => {
    proxy.$ElMessage.info("已取消删除");
  });
}

const createServerConnect = () => {
  const websocketUrl = 'websocket-prod.zgsjzc.com'; //正式环境的
  const ws = new WebSocket(`wss://${websocketUrl}/websocket/${userData.staffGuid}`);
  ws.onopen = function () {
    console.log('Connected to server.');
  };
  ws.onmessage = function (res) {
    if (res.data == '\"连接成功\"') return;
      getMsgCnt();
      getMessageList(1);
      getMessageList(2);
  };
  ws.onclose = function(e) {
    console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean);
  };
}

const getMsgCnt = () => {
  msgCntPromise.value = getMessageCount({
    tenantGuid: userData.tenantGuid,
    staffGuid: userData.staffGuid
  }).then((res: any) => {
    msgCntPromise.value = null;
    if (res.code === proxy.$passCode) {
      let data = res.data || {};
      noFinishCnt.value = (data['1'] || 0) + (data['2'] || 0);
      dealTotalRows.value = data['1'] || 0;
      messageTotalRows.value = data['2'] || 0;
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  })
}

onMounted(() => {
  getMsgCnt();
  createServerConnect();
});

</script>

<template>
  <div class="layout">
    <div id="app-main">
      <Header :noFinishCnt="noFinishCnt" @clickMsgSetting="handleClickMsg" />
      <div class="wrapper">
        <div class="sidebar-container"
          :class="{ show: settingsStore.mode === 'mobile' && !settingsStore.settings.menu.subMenuCollapse, 'is-collapse': settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse }">
          <MainSidebar />
          <SubSidebar />
        </div>
        <div class="sidebar-mask"
          :class="{ show: settingsStore.mode === 'mobile' && !settingsStore.settings.menu.subMenuCollapse }"
          @click="settingsStore.toggleSidebarCollapse()" v-preReClick />
        <div class="main-container"
          :class="{ 'is-full': settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse }"
          :style="{ 'padding-bottom': $route.meta.paddingBottom } as any">
          <Tabbar />
          <div class="main">
            <router-view v-slot="{ Component, route }" v-if="isRouterAlive">
              <transition name="main" mode="out-in" appear>
                <keep-alive :include="keepAliveStore.list">
                  <component :is="wrap(route, Component)" v-show="!isLink" :key="route.fullPath" />
                </keep-alive>
              </transition>
            </router-view>
            <LinkView v-if="isLink" />
          </div>
          <Copyright />
        </div>
      </div>
      <el-backtop :right="20" :bottom="20" title="回到顶部" />
    </div>
     <!-- 消息管理抽屉 -->
     <el-drawer title="通知中心" v-model="drawerVisible" direction="rtl" :with-header="false" :modal="true"
        class="popper-class-home" width="450px">
        <div class="hover-title">
          <span>通知中心</span>
          <el-icon :size="24">
            <Close @click="drawerVisible = false" />
          </el-icon>
        </div>
        <div class="common-tab-box">
          <div class="common-tab-left">
            <div :class="messageType == (index + 1) ? 'common-tab-list common-tab-active' : 'common-tab-list'"
              v-for="(item, index) in tabList" :key="index" @click="tabClick(index)">
              {{ item.tabName }}{{ index == 0 ? dealTotalRows > 99 ? '(99+)' : `${dealTotalRows === 0 ? '' : ('(' + dealTotalRows + ')')}` :
                messageTotalRows > 99 ? '99+' : `${messageTotalRows === 0 ? '' : ('(' + messageTotalRows + ')')}` }}
            </div>
          </div>
          <div class="common-tab-right">
            <span v-show="messageType == 2 && messageAllList.length > 0" @click="messageAllRead"><img src="@/assets/images/all-read.png" alt="" />全部已读</span>
          </div>
        </div>
        <div class="notice-hover-box">
          <div class="notice-list" v-show="messageType == 2" @click="messageJumpHover(item)" v-for="(item, index) in messageAllList" :key="item.guid">
            <div class="notice-list-left">
              <span :style="item.isFinish !== 'Y' ? 'background:#fb2323;' : '#fff'"></span><span>{{ item.title || '-'
                }}</span>
            </div>
            <div class="notice-list-center">{{ item.content || '-' }}</div>
            <div class="notice-list-right">{{ !item.createTime ? '--' : Moment(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
          </div>
          <div class="notice-list" v-show="messageType == 1" @click="messageJumpHover(item)" v-for="(item, index) in dealMessageList" :key="item.guid">
            <div class="notice-list-left">
              <span :style="item.isFinish !== 'Y' ? 'background:#fb2323;' : '#fff'"></span><span>{{ item.title || '-' }}</span>
            </div>
            <div class="notice-list-center">{{ item.content || '-' }}</div>
            <div class="notice-list-right">{{ !item.createTime ? '--' : Moment(item.createTime).format('YYYY-MM-DD HH:mm:ss') }}</div>
          </div>
        </div>
        <div v-show="messageType == 2 && !messageAllList.length" class="card-noData">
          <img src="@/assets/images/no-data.png" :style="{ width: '96px', height: '96px' }" />
          <span>暂无消息</span>
        </div>
        <div v-show="messageType == 1 && !dealMessageList.length" class="card-noData">
          <img src="@/assets/images/no-data.png" :style="{ width: '96px', height: '96px' }" />
          <span>暂无待办</span>
        </div>
        <PageNav v-show="messageType == 2 && messageAllList.length" :class="[pageInfo.type]" :pageInfo="pageInfo" @pageChange="pageChange" />
        <PageNav v-show="messageType == 1 && dealMessageList.length" :class="[dealPageInfo.type]" :pageInfo="dealPageInfo" @pageChange="pageChange" />
      </el-drawer>
  </div>
</template>

<style lang="scss" scoped>
[data-mode="mobile"] {
  .sidebar-container {
    transform: translateX(calc((var(--g-main-sidebar-width) + var(--g-sub-sidebar-width)) * -1));

    &.show {
      transform: translateX(0);
    }
  }

  .main-container {
    margin-left: 0 !important;
  }

  &[data-menu-mode="single"] {
    .sidebar-container {
      transform: translateX(calc(var(--g-sub-sidebar-width) * -1));

      &.show {
        transform: translateX(0);
      }
    }
  }
}

.layout {
  height: 100%;
}

#app-main {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  transition: all 0.3s;
}

.wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  box-shadow: -1px 0 0 0 var(--g-box-shadow-color);
  transition: padding-top 0.3s;

  .sidebar-container {
    position: fixed;
    z-index: 1010;
    top: 0;
    bottom: 0;
    display: flex;
    width: calc(var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width));
    transition: width 0.3s, transform 0.3s, top 0.3s;

    &.is-collapse {
      width: 0;
    }
  }

  .sidebar-mask {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(transparent 1px, rgb(0 0 0 / 30%) 1px);
    background-size: 4px 4px;
    backdrop-filter: saturate(50%) blur(4px);
    transition: all 0.2s;
    opacity: 0;
    visibility: hidden;

    &.show {
      opacity: 1;
      visibility: visible;
    }
  }

  .main-sidebar-container:not(.main-sidebar-leave-active)+.sub-sidebar-container {
    left: var(--g-main-sidebar-width);
  }

  .main-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-left: calc(var(--g-main-sidebar-actual-width) + var(--g-sub-sidebar-actual-width));
    background-color: var(--g-main-bg);
    transition: margin-left 0.3s, background-color 0.3s;

    &.is-full {
      margin-left: 0;
    }

    .topbar-container {
      top: 0;
      z-index: 998;
    }

    .main {
      height: 100%;
      flex: auto;
      position: relative;
      overflow: hidden;
      transition: 0.3s;
    }

    .tabbar-container+.main {
      margin: var(--g-tapbar-height) 0 0;
    }
  }
}

header:not(.header-leave-active)+.wrapper {
  padding-top: var(--g-header-height);

  .sidebar-container {
    top: var(--g-header-height);

    :deep(.sidebar-logo) {
      display: none;
    }

    :deep(.el-menu) {
      padding-top: 0;
    }
  }

  .main-container {
    .topbar-container {
      top: var(--g-header-height);

      :deep(.tools) {
        display: none;
      }
    }
  }
}

.app-setting {
  position: fixed;
  z-index: 10;
  right: 0;
  top: calc(50% + 250px);
  width: 50px;
  height: 50px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  font-size: 24px;
  color: #fff;
  background-color: var(--el-color-primary);
  cursor: pointer;

  svg {
    animation: rotate 5s linear infinite;
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }
}

// 主内容区动画
.main-enter-active {
  transition: 0.2s;
}

.main-leave-active {
  transition: 0.15s;
}

.main-enter-from {
  opacity: 0;
  margin-left: -20px;
}

.main-leave-to {
  opacity: 0;
  margin-left: 20px;
}

.notice-hover-box {
  max-height: calc(100vh - 120px);
  overflow: auto;
}

.notice-hover-box .notice-list {
  display: flex;
  justify-content: space-between;
  padding: 4px 16px;
  line-height: 25px;
  box-sizing: border-box;
}

.notice-hover-box {

  .notice-list-left {
    display: flex;
    flex: 1;
    text-align: left;
    color: #666;
  }

  .notice-list-left span:last-child {
    display: -webkit-box !important;
    font-weight: 600;
  }

  .notice-list-left span:first-child {
    float: left;
    flex-shrink: 0;
    display: block !important;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 8px;
    margin-top: 10px;
  }

  .notice-list {
    display: block;
    text-align: left;
    border-bottom: 1px solid #d9d9d9;

    &:hover {
      background: #fafafa;
      cursor: pointer;
    }
  }

  .notice-list-center {
    font-size: 12px;
    line-height: 18px;
    color: #666;
    padding-left: 13px;
  }

  .notice-list-right {
    color: #999999;
    padding-left: 13px;
    font-size: 12px;
    flex-shrink: 0;
  }
}

.hover-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  margin: 10px 0;
  color: #666;
  font-weight: 600;
}

.hover-title span {
  display: block;
  font-size: 16px;
}

.hover-title i {
  cursor: pointer;

  &.el-icon svg {
    height: 18px;
    width: 18px;
  }
}

/* 页面tab */
.common-tab-box {
  display: flex;
  justify-content: space-between;
  height: 32px;
  line-height: 32px;
  color: #666;
  margin-top: 4px;
  border-bottom: 1px solid #d9d9d9;
  outline: none;
  background: #fff;
}

.common-tab-left {
  display: flex;
  padding-left: 12px;
}

.common-tab-list {
  padding: 0 20px;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
}

.common-tab-active {
  color: #4fa1a4;
  border-bottom: 2px solid #4fa1a4;
}

.common-tab-right {
  font-size: 12px;
  color: #666666;
  cursor: pointer;
  margin-right: 16px;

}

.common-tab-right img {
  width: 1rem;
  height: 1rem;
  vertical-align: text-bottom
}

:deep(.popper-class-home) {
  position: absolute;
  width: 450px !important;
  height: 100vh;

  .el-drawer__body.el-drawer__body {
    padding: 0;
  }
}

.card-noData {
  height: calc(100% - 80px);
  width: 100%;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #909399;
  font-size: 14px;
}

.page_nav_wrap {
  padding: 0px 16px;
}

:deep(.el-overlay.is-message-box) {
  z-index: 99999;
}
</style>