<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;">彤然科技-分布式SaaS收益管理平台</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">彤然科技-分布式SaaS收益管理平台</div>
      <div class="welcome-text">欢迎您{{user.nickName}}：现在是{{newDateTime}}</div>
    </div>

    <div class="w100 plr-20">
      <div class="menu-container">
        <div v-for="menuItem of menuList" @click="menuRouter(menuItem)" class="menu-item">
          <div class="menu-item-content">{{menuItem.name}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "welcome",
    data() {
        return {
          newDateTime: '',
          getWeekday: {0: '星期日', 1: '星期一', 2: '星期二', 3: '星期三',4: '星期四', 5: '星期五', 6: '星期六'},
          user: {},
          menuList: []
        }
    },
    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);
    },
    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});
                }
              }
            });
          }
        });
      },
      // 菜单跳转
      menuRouter(menuLink) {
        this.$router.push({
          path: menuLink.link
        });
      }
    }
  }
</script>

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

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

  .main-title {
    font-size: 2.5rem;
    color: #BFBF00;
    font-weight: 600;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  }

  .welcome-text {
    font-size: 1.5rem;
    color: #666;
  }

  /* 菜单区域 */
  .menu-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* 改为左对齐 */
    gap: 20px;
    /*max-width: 1200px;*/
    margin: 0 auto;
  }

  .menu-item {
    /*flex: 1 1 200px;*/
    flex: 0 0 calc(20% - 16px); /* 固定宽度，确保每行显示5个 */
    min-width: 200px;
    height: 70px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

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

  .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: 2.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;
    }

    .pt50 {
      padding-top: 30px;
    }

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

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

    .menu-container {
      gap: 15px;
    }

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

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

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

    .pt50 {
      padding-top: 20px;
    }

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

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

    .menu-container {
      gap: 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;
    }

    .menu-item {
      flex: 0 0 calc(16.666% - 17px); /* 大屏每行6个 */
    }
  }
</style>
