<template>
  <t-layout class="h-full app-layout">
    <!-- <t-header class="layout-header">
      <div class="header-wrap flex items-center">页头</div>
    </t-header> -->
    <t-aside
      :width="
        (appStore.menuCollapse ? appStore.collapseWidth : appStore.menuWidth) +
        'px'
      "
    >
      <!-- <div class="logo-box flex items-center justify-center">
        <img src="../assets/logo.svg" />
      </div> -->
      <left-menu></left-menu>
    </t-aside>
    <t-layout class="right-view">
      <t-header class="layout-header">
        <div class="h-full header-wrap flex items-center justify-between">
          <div class="flex-1">
            <t-head-menu
              style="height: 55px"
              :value="userStore.curPageModule"
              theme="light"
              @change="moduleChange"
            >
              <t-menu-item
                :value="item.name"
                v-for="item in userStore.headerMenus"
                :key="item.name"
              >
                {{ item.meta?.title }}
              </t-menu-item>
            </t-head-menu>
          </div>
          <div class="header-right flex items-center">
            <t-dropdown
              class="m-r-20px"
              trigger="hover"
              placement="bottom"
              @click="colorChoose"
            >
              <t-button theme="default" variant="outline" shape="square">
                <t-icon
                  name="palette"
                  size="26"
                  color="#fff"
                  :style="{ background: themeColor, borderRadius: '2px' }"
              /></t-button>
              <t-dropdown-menu>
                <t-dropdown-item
                  v-for="item in colorOptions"
                  :key="item.value"
                  :value="item.value"
                >
                  <div
                    class="color-grid"
                    :class="{ 'active-color-grid': themeColor === item.value }"
                  >
                    <div
                      class="color-grid-center"
                      :style="{
                        backgroundColor: item.value,
                        width: '100%',
                        height: '100%',
                        borderRadius: '2px',
                      }"
                    ></div>
                  </div>
                </t-dropdown-item>
              </t-dropdown-menu>
            </t-dropdown>
            <t-dropdown
              trigger="hover"
              :options="userOptions"
              @click="clickHandler"
            >
              <div class="flex items-center cursor-pointer">
                <div class="head-img-box flex justify-center items-center">
                  <img src="../assets/imgs/user_head.png" />
                </div>
                <span class="real-name">{{ userStore.user?.realName }}</span>
                <ChevronDownIcon size="16px" />
              </div>
            </t-dropdown>
          </div>
        </div>
      </t-header>
      <t-content class="layout-content overflow-auto">
        <router-view v-slot="{ Component }">
          <transition name="fade-slide" mode="out-in" appear>
            <component :is="Component" />
          </transition>
        </router-view>
      </t-content>
    </t-layout>
  </t-layout>
</template>

<script setup name="Layout" lang="jsx">
import { ref, onMounted } from 'vue';
import { useAppStore, useUserStore } from '@/store';
import { useRouter, useRoute } from 'vue-router';
import LeftMenu from './left-menu.vue';
import { Color } from 'tvision-color';
import { generateColorMap, insertThemeStylesheet } from '@/config/color';
import { moduleMap } from '@/router/asyncRoutes';
import { ChevronDownIcon, UserIcon } from 'tdesign-icons-vue-next';
import { clear, cookie } from '@/utils/tool';

const router = useRouter();
const route = useRoute();
const appStore = useAppStore();
const userStore = useUserStore();
const moduleChange = (name) => {
  userStore.setCurPageModule(name);
  router.push({ name });
};
const setModuleByPath = () => {
  let firstPath = route.path.split('/')[1];
  let curModuleName = moduleMap[firstPath];
  userStore.setCurPageModule(curModuleName);
};
const themeColor = ref(cookie.get('themeColor'));
onMounted(() => {
  setModuleByPath();
  setTheme(themeColor.value || '#0052d9');
});
const colorOptions = ref([
  {
    value: '#0052d9',
  },
  {
    value: '#0091ff',
  },
  {
    value: '#35c1db',
  },
  {
    value: '#5dbe8a',
  },
  {
    value: '#f4b84a',
  },
  {
    value: '#f29e55',
  },
  {
    value: '#ac6ef6',
  },
  {
    value: '#7969f3',
  },
  {
    value: '#e65857',
  },
]);
const userOptions = ref([
  { content: '修改密码', value: '1' },
  { content: '退出', value: '2' },
]);
const clickHandler = (data) => {
  if (data.content === '修改密码') {
    router.push({ name: 'PasswordModify' });
  } else if (data.content === '退出') {
    userStore.logout();
  }
};
const setTheme = (hex) => {
  const newPalette = Color.getPaletteByGradation({
    colors: [hex],
    step: 10,
  })[0];
  const colorMap = generateColorMap(hex, newPalette);
  insertThemeStylesheet(hex, colorMap);
  cookie.set('themeColor', hex);
  themeColor.value = hex;
};
const colorChoose = (data) => {
  const hex = data.value;
  setTheme(hex);
};
</script>
<style lang="less">
.color-grid {
  margin-left: auto;
  margin-right: auto;
  width: 54px;
  height: 24px;
  border-radius: 2px;
  padding: 2px;
  border: 1px solid transparent;
  &.active-color-grid {
    border-color: #ccc;
  }
}
</style>
<style lang="less" scoped>
.app-layout {
  .right-view {
    overflow: auto;
  }
  .t-layout__sider {
    //重写过渡时长，让其余menu的折叠动画保持同步
    transition: all 0.28s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  .layout-header {
    border-bottom: 1px solid #eee;
    .header-wrap {
      padding: 0 10px;
      padding-right: 20px;
      .t-head-menu .t-menu__item {
        height: 44px;
      }
      .real-name {
        color: @light-text-color;
      }
      .head-img-box {
        width: 32px;
        height: 32px;
        border-radius: 16px;
        overflow: hidden;
        margin-right: 5px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .layout-content {
    flex: 1;
  }
}
</style>
