<template>
<!--    <div class="w100" style="height: calc(100vh - 85px);overflow: auto;">-->
<!--      <div class="pt50">-->
<!--        <div class="textAlignCenter" style="font-size: 3rem;color: #BFBF00;font-weight: 600;">彤然科技-智融云管理平台</div>-->
<!--        <div class="textAlignCenter" style="font-size: 1.8rem;">欢迎您{{user.nickName}}：现在是{{newDateTime}}</div>-->
<!--        <div class="w100 m0Auto">-->
<!--          <div style="width: 85%;margin: 10px auto;">-->
<!--            <div v-for="menuItem of menuList" @click="menuRouter(menuItem)" class="disInlineBlock" style="width: 20%;min-width: 200px;height: 70px;padding: 10px;cursor: pointer;">-->
<!--              <div class="w100 h100" style="display: flex; justify-content: center; align-items: center;background: #02a7f099; color: #fff;border-radius: 10px;">{{menuItem.name}}</div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
  <div class="welcome-container">
    <div class="header-section textAlignCenter">
      <div class="main-title" :style="{ backgroundImage: `url(${require('@/assets/images/headerBg.png')})`,backgroundSize: 'cover',backgroundRepeat: 'no-repeat',backgroundPosition: 'center', }">
        <div class="titleMargBtom">智融云管理平台</div>
      </div>
      <div class="welcome-text">
        <div class="animated-text class-method" :class="{ 'slide-in': showContent }" style="--animation-duration: 1200ms">
          欢迎您{{user.nickName}}：现在是{{newDateTime}}
        </div>
      </div>
    </div>

    <div class="w100 contentPad">
      <div class="menu-container">
        <div v-for="menuItem of menuList" @click="menuRouter(menuItem)" class="menu-item" @mouseover="tranformType(menuItem)" :class="activeId === menuItem.id ? 'activeTranFormRotate' : '' "
             :style="{backgroundImage: `url(${require('@/assets/images/itemBgc.png')})`,backgroundSize: '100% 100%',backgroundRepeat: 'no-repeat',backgroundPosition: 'center'}">
          <div class="menu-item-content" :class="activeId === menuItem.id ? 'textTranFormRotate' : ''">{{menuItem.pageName}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {clicMenuCount, getMenuTopEight} from "@/api/menu";
  export default {
    name: "welcome",
    data() {
        return {
          showContent: false,
          newDateTime: '',
          getWeekday: {0: '星期日', 1: '星期一', 2: '星期二', 3: '星期三',4: '星期四', 5: '星期五', 6: '星期六'},
          user: {},
          menuList: [],
          activeId: '',
        }
    },
    created() {
      this.user = this.$store.state.user;
      const year = new Date().getFullYear() + '年';
      const month = String(new Date().getMonth() + 1).padStart(2, '0') + '月'; // 0=1月，11=12月
      const day = String(new Date().getDate()).padStart(2, '0') + '日';     // 当前日（如8）
      const hours = String(new Date().getHours()).padStart(2, '0') + ':';     // 当前日（如8）
      const minutes = String(new Date().getMinutes()).padStart(2, '0') + ':';     // 当前日（如8）
      const seconds = String(new Date().getSeconds()).padStart(2, '0');     // 当前日（如8）
      const week = this.getWeekday[new Date().getDay()];     // 当前日（如8）
      this.newDateTime = year + month + day + ' ' + hours + minutes + seconds + ' ' + week;

      let menu = this.$store.state.permission.sidebarRouters;
      this.menuHandle(menu);
    },
    mounted() {
      // 页面加载后自动触发动画
      setTimeout(() => {
        this.showContent = true;
      }, 300);
    },
    methods: {
      // 处理菜单
      menuHandle(menu) {
        // menu.forEach(item => {
        //   if (!item.hidden) {
        //     item.children.forEach(val => {
        //       if (!val.hidden) {
        //         if (val.children) {
        //           val.path = item.path + '/'  + val.path;
        //           this.menuHandle([val]);
        //         } else {
        //           this.menuList.push({name: val.meta.title, link: item.path && item.path === '/' ? item.path + val.path : item.path + '/' + val.path});
        //         }
        //       }
        //     });
        //   }
        // });
        getMenuTopEight().then(res => {
          if (res && res.data) {
            this.menuList = res.data
          }
        });
      },
      // 菜单跳转
      menuRouter(menuLink) {
        let params = {pageRoute: menuLink.pageRoute, pageName: menuLink.pageName};
        clicMenuCount(params).then(res => {});
        this.$router.push({
          path: menuLink.pageRoute
        });
      },
      tranformType(val) {
        this.activeId = val.id;
      },
    }
  }
</script>

<style scoped>
  /* 主容器 */
  .welcome-container {
    height: 100vh;
    /*overflow: auto;*/
    display: flex;
    flex-direction: column;
    /*padding: 20px;*/
    margin-bottom: 20px;
  }

  /* 标题区域 */
  .header-section {
    margin-bottom: 6%;
  }

  .titleMargBtom {
    margin-bottom: 13px;
  }

  .main-title {
    height: 62px;
    font-size: 1.3rem;
    color: #fff;
    font-weight: 600;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .welcome-text {
    font-size: 1.2rem;
  }
  .contentPad {
    padding: 0 20%;
  }
  /* 菜单区域 */
  .menu-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* 改为左对齐 */
    gap: 40px 20px;
    /*max-width: 1200px;*/
    margin: 0 auto;
  }

  .menu-item {
    /*flex: 1 1 200px;*/
    flex: 0 0 calc(25% - 16px); /* 固定宽度，确保每行显示5个 */
    /*min-width: 150px;*/
    height: 100px;
    cursor: pointer;
    transition: none;
  }

  .menu-item-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /*background: linear-gradient(135deg, #02a7f099 0%, #0280c099 100%);*/
    color: #000;
    border-radius: 10px;
    /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
    padding: 10px;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 500;
    transition: none;
  }

  .menu-item:hover .menu-item-content {
    /*transform: translateY(-5px);*/
    /*box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);*/
    /*background: linear-gradient(135deg, #0280c099 0%, #026aa099 100%);*/
  }

  /* 响应式设计 - 媒体查询 */
  @media (max-width: 1200px) {
    .main-title {
      font-size: 1.2rem;
    }

    .welcome-text {
      font-size: 1.3rem;
    }

    .menu-item {
      flex: 0 0 calc(25% - 15px); /* 中屏每行4个 */
    }
  }

  @media (max-width: 768px) {
    .welcome-container {
      /*padding: 15px;*/
      height: auto;
      min-height: 100vh;
    }

    .main-title {
      font-size: 1.2rem;
    }

    .contentPad {
      padding: 0 10%;
    }

    .welcome-text {
      font-size: 1.1rem;
    }

    .menu-container {
      gap: 35px 15px;
    }

    .menu-item {
      flex: 0 0 calc(25% - 12px); /* 平板每行4个 */
      height: 60px;
    }

    .menu-item-content {
      font-size: 1rem;
    }
  }

  @media (max-width: 480px) {
    .welcome-container {
      padding: 10px;
    }

    .contentPad {
      padding: 0 10%;
    }

    .main-title {
      font-size: 1.2rem;
    }

    .welcome-text {
      font-size: 1rem;
    }
    .animated-text {
      width: 100%!important;
    }

    .menu-container {
      gap: 20px 10px;
      justify-content: center; /* 小屏幕居中对齐 */
    }

    .menu-item {
      flex: 0 0 calc(50% - 10px); /* 手机每行2个 */
      max-width: 100%;
      height: 50px;
    }

    .menu-item-content {
      font-size: 0.9rem;
    }
  }

  @media (max-width: 360px) {
    .menu-item {
      flex: 0 0 100%; /* 超小屏幕每行1个 */
    }
  }

  /* 大屏幕优化 */
  @media (min-width: 1600px) {
    .welcome-container {
      /*max-width: 1400px;*/
      margin: 0 auto;
    }
    .main-title {
      height: 75px;
      font-size: 1.5rem;
    }
    .titleMargBtom {
      margin-bottom: 16px;
    }
  }

  /* 动画*/
  .animated-text {
    width: 550px;
    position: relative;
  }
  /* 方法2: CSS类绑定样式 */
  .class-method {
    transform: translateX(-100%);
    opacity: 0;
    transition: all var(--animation-duration) linear;
  }
  .class-method.slide-in {
    transform: translateX(0);
    opacity: 1;
  }
  .activeTranFormRotate:hover {
    transform: rotateY(180deg);
    transition: transform 2s ease-in-out;
  }
  .textTranFormRotate:hover {
    transform: rotateY(-180deg);
    transition: transform 2s ease-in-out;
  }
</style>
