<template>
  <div class="dashboard-container">
    <HeaderNav :userInfo="userInfo" />
    <!-- 主体内容 -->
    <div class="main-content">
      <div class="left-content">
        <div class="left_top_box">
          <UserInfoCard :userInfo="userInfo" />
        </div>
        <div class="gsxw_box">
          <CompanyNews :userInfo="userInfo" />
        </div>
      </div>
      <!-- 右侧内容 -->
      <div class="right-content">
        <!-- 轮播图 -->
        <el-carousel height="260px" class="banner-carousel">
          <el-carousel-item v-for="item in banners" :key="item.id">
            <img src="@/assets/imgs/portal/lbtp.png" alt="轮播图" class="banner-img" />
          </el-carousel-item>
        </el-carousel>

        <!-- 导航模块 -->
        <div class="nav-card" shadow="hover">
          <div class="nav-grid">
            <div
              v-for="(nav, index) in navItems"
              :key="index"
              class="nav-item"
              @click="handleMenuClick(nav)"
            >
              <!-- <img :src="nav.icon" alt="导航图标" class="banner-img" /> -->
              <!-- @/assets/imgs/login/user.png -->
              <img :src="nav.icon" alt="导航图标" />
              <!-- <img :src="`src/assets/imgs/portal/nav_icon${index + 1}.png`" alt="导航图标" /> -->
              <p>{{ nav.name }}</p>
            </div>
          </div>
        </div>

        <div class="db_box">
          <span class="refresh">刷新</span>
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="代办统计" name="1">
              <div class="stats_container">
                <!-- BPM 流程管理系统待办数 -->
                <div class="stat_card">
                  <img src="@/assets/imgs/portal/dbtj_icon1.png" alt="BPM" class="stat_icon" />
                  <div class="stat_content">
                    <div class="stat_number">1</div>
                    <div class="stat_label">BPM流程管理系统待办数</div>
                  </div>
                </div>

                <!-- EPORS 流程协同系统待办数 -->
                <div class="stat_card">
                  <img src="@/assets/imgs/portal/dbtj_icon2.png" alt="EPORS" class="stat_icon" />
                  <div class="stat_content">
                    <div class="stat_number">0</div>
                    <div class="stat_label">EPORS流程协同系统待办数</div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="我的待办" name="2">
              <div class="table_box">
                <el-table :data="tableData" border style="width: 100%">
                  <el-table-column prop="name1" label="缓解" width="76" />
                  <el-table-column prop="name2" label="告警" width="76" />
                  <el-table-column prop="name3" label="来源" show-overflow-tooltip width="90" />
                  <el-table-column prop="name4" label="事项" show-overflow-tooltip width="220" />
                  <el-table-column prop="name5" label="待办分类" width="100" />
                  <el-table-column prop="name6" label="发起人" width="80" />
                  <el-table-column prop="name7" label="发起时间" width="100" />
                  <el-table-column prop="name8" label="滞留时长" width="100" />
                </el-table>
              </div>
            </el-tab-pane>
            <el-tab-pane label="我的已办" name="3" />
            <el-tab-pane label="我的申请" name="4" />
          </el-tabs>
        </div>

        <div class="gg_box">
          <span class="refresh">更多</span>
          <el-tabs v-model="activeGgName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="通知公告" name="1">
              <div class="other-news-list">
                <div
                  class="other-news-item"
                  v-for="(otherNews, index) in otherNewsList"
                  :key="index"
                >
                  <span>
                    <span class="circle"></span>
                    <span class="other-news-title">{{ otherNews.title }}</span>
                  </span>
                  <span>
                    <span class="other_news_type">通知公告</span>
                    <span class="other-news-date">{{ otherNews.date }}</span>
                  </span>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="管理制度" name="2">
              <div class="qr_box"> </div>
            </el-tab-pane>
            <el-tab-pane label="项目管理" name="3" />
            <el-tab-pane label="培训社区" name="4" />
          </el-tabs>
        </div>

        <!-- 待办统计 -->
        <!-- <el-card class="todo-card" shadow="hover">
          <h3>待办统计</h3>
          <div class="todo-item">
            <el-badge value="1" class="todo-badge">
              <el-icon><Document /></el-icon>
            </el-badge>
            <span>BPM流程管理系统待办数</span>
          </div>
          <div class="todo-item">
            <el-badge value="0" class="todo-badge">
              <el-icon><User /></el-icon>
            </el-badge>
            <span>EPORS流程协同系统待办数</span>
          </div>
        </el-card> -->

        <!-- 通知公告 -->
        <!-- <el-card class="notice-card" shadow="hover">
          <h3>通知公告</h3>
          <ul class="notice-list">
            <li v-for="notice in notices" :key="notice.id">
              <span>{{ notice.title }}</span>
              <span class="notice-date">{{ notice.date }}</span>
            </li>
          </ul>
        </el-card> -->
      </div>
    </div>
    <div class="footer_box">
      <RecordNumber />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import * as UserApi from '@/api/system/user'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/modules/user'
import { Bell, Message, Document, User } from '@element-plus/icons-vue'
import HeaderNav from './components/header.vue'
import UserInfoCard from './components/UserInfoCard.vue'
import CompanyNews from './components/CompanyNews.vue'
import RecordNumber from './components/RecordNumber.vue'
import nav_icon1 from '@/assets/imgs/portal/nav_icon1.png'
const router = useRouter()

// 用户信息相关数据
const username = ref('未登录')
const avatar = ref('')
const employeeId = ref('')
const email = ref('未登录')
const phone = ref('未登录')
const loginIp = ref('未登录')
const userInfo = ref({})
const activeName = ref('1')
const activeGgName = ref('1')

// 用户信息 & 待办 Tab
const activeTab = ref('approve')
const calendarValue = ref(new Date())

// 轮播图数据
const banners = ref([
  { id: 1, img: '@/assets/imgs/portal/lbtp.png' },
  { id: 2, img: '@/assets/imgs/portal/lbtp.png' }
])

// 导航模块数据
const navItems = ref([
  {
    id: 1,
    name: '企业运营管理平台',
    icon: 'http://122.152.216.7:9002/common-file-test/20250926/nav_icon1_1758877302065.png'
  },
  {
    id: 2,
    name: 'ERP企业资源系统',
    icon: 'http://122.152.216.7:9002/common-file-test/20250926/nav_icon2_1758877635613.png'
  },
  {
    id: 3,
    name: 'IHR人力资源系统',
    icon: 'http://122.152.216.7:9002/common-file-test/20250926/nav_icon3_1758877674900.png'
  },
  {
    id: 4,
    name: 'MRF财务先生系统',
    icon: 'http://122.152.216.7:9002/common-file-test/20250926/nav_icon4_1758877696151.png'
  },
  {
    id: 5,
    name: 'BPM流程管理系统',
    icon: 'http://122.152.216.7:9002/common-file-test/20250926/nav_icon5_1758877719700.png'
  },
  {
    id: 6,
    name: 'LTC营销管理系统',
    icon: 'http://122.152.216.7:9002/common-file-test/20250926/nav_icon6_1758877739725.png'
  },
  {
    id: 7,
    name: 'BI数据分析平台',
    icon: 'http://122.152.216.7:9002/common-file-test/20250926/nav_icon7_1758877766665.png'
  },
  {
    id: 8,
    name: 'CBC任管系统',
    icon: 'http://122.152.216.7:9002/common-file-test/20250926/nav_icon8_1758877787145.png'
  },
  {
    id: 9,
    name: 'ACP行政协同系统',
    icon: 'http://122.152.216.7:9002/common-file-test/20250926/nav_icon9_1758877808459.png'
  },
  {
    id: 10,
    name: '数字化项目运营系统',
    icon: 'http://122.152.216.7:9002/common-file-test/20250926/nav_icon10_1758877836190.png'
  },
  {
    id: 11,
    name: 'DMS文档管理',
    icon: 'http://122.152.216.7:9002/common-file-test/20250926/nav_icon11_1758877868898.png'
  },
  {
    id: 12,
    name: '产品销售助手',
    icon: 'http://122.152.216.7:9002/common-file-test/20250926/nav_icon12_1758877895235.png'
  },
  {
    id: 12,
    name: 'EPROS流程系统',
    icon: 'http://122.152.216.7:9002/common-file-test/20250926/nav_icon13_1758877911880.png'
  },
  {
    id: 14,
    name: '自定义管理',
    icon: 'http://122.152.216.7:9002/common-file-test/20250926/nav_icon14_1758877927177.png'
  }
  // ...其他导航项
])
const tableData = [
  {
    name1: '一般',
    name2: '',
    name3: 'MKPaaS',
    name4: '【待处理】您提交的流程已被驳回，请重新提…',
    name5: '',
    name6: '刘杰',
    name7: '-',
    name8: '-'
  },
  {
    name1: '一般',
    name2: '',
    name3: 'MKPaaS',
    name4: '【待处理】您提交的流程已被驳回，请重新提…',
    name5: '',
    name6: '刘杰',
    name7: '-',
    name8: '-'
  },
  {
    name1: '一般',
    name2: '',
    name3: 'MKPaaS',
    name4: '【待处理】您提交的流程已被驳回，请重新提…',
    name5: '',
    name6: '刘杰',
    name7: '-',
    name8: '-'
  }
]
const otherNewsList = [
  {
    title: '关于项目经营“三纲领”的启用通知关于项目经营“三纲领”的启用通知', // 较长标题用于测试省略号
    date: '2025-08-29'
  },
  {
    title: '关于项目经营“三纲领”的启用通知',
    date: '2025-08-29'
  },
  {
    title: '关于项目经营“三纲领”的启用通知',
    date: '2025-08-29'
  },
  {
    title: '关于项目经营“三纲领”的启用通知',
    date: '2025-08-29'
  },
  {
    title: '关于项目经营“三纲领”的启用通知',
    date: '2025-08-29'
  }
]
// 通知公告数据
const notices = ref([
  { id: 1, title: '关于项目经营“三纲领”的启用通知', date: '2025-08-29' },
  { id: 2, title: '关于公司新制度的通知', date: '2025-08-28' }
])
const handleMenuClick = (menu) => {
  // 显示加载中提示
  const loading = ElLoading.service({
    lock: true,
    text: '正在进入系统中，请稍后',
    background: 'rgba(0, 0, 0, 0.7)'
  })

  // 使用Vue Router根据菜单项的url参数进行跳转
  try {
    router.push('/index')
    // if (menu.url) {
    //   router.push(menu.url)
    // } else {
    //   // 如果没有url，默认跳转到index页面
    //   router.push('/index')
    // }
  } finally {
    // 延迟一小段时间后关闭加载，以确保用户能看到提示信息
    setTimeout(() => {
      loading.close()
    }, 300)
  }
}
// 获取用户信息
const getUserInfo = async () => {
  try {
    const userStore = useUserStore()
    const userId = userStore.getUser.id || 1 // 默认使用id=1作为备选

    // 使用UserApi获取用户信息
    const result = await UserApi.getUser(userId)

    if (!result) {
      ElMessage.error('获得个人信息失败，返回数据为空')
      return
    }

    userInfo.value = result
    console.log('userInfo.value', userInfo.value)
    // 更新用户名
    if (result.nickname) {
      username.value = result.nickname
    }

    // 更新头像
    if (result.avatar) {
      avatar.value = result.avatar
    }

    // 从返回值中获取email和mobile字段
    if (result.email) {
      email.value = result.email
    }

    if (result.mobile) {
      phone.value = result.mobile
    }

    // 从loginIp字段获取登录IP
    if (result.loginIp) {
      loginIp.value = result.loginIp
    }

    //缓存用户信息
    localStorage.setItem('user', JSON.stringify(result))
  } catch (error) {
    console.error('获取用户信息失败:', error)
    // 可以根据需要添加错误提示
  }
}
// 页面加载时获取用户信息
onMounted(() => {
  getUserInfo()
  // setCurrentDate()
  // setTimeout(() => {
  //   startNewsScroll()
  // }, 1000)
})
</script>

<style scoped lang="less">
.table_box {
  padding: 0px 10px 0px 10px;
}
/* 整个滚动条 */
::-webkit-scrollbar {
  width: 2px; /* 垂直滚动条宽度 */
}
/* 页面整体样式 */
.dashboard-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: auto;
  position: relative;
  background-color: #f0f2f5;
  /* padding: 20px; */
  background: #f5f7fa;
  // min-height: 100vh;
}

/* 顶部导航栏 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 0 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo {
  display: flex;
  align-items: center;
}

.logo-img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

/* 主体内容布局 */
.main-content {
  display: flex;
  margin-top: 75px;
  justify-content: center;
}

.left-content {
  width: 410px;
  margin-right: 20px;
  .left_top_box {
    height: 648px;
  }
  .gsxw_box {
    width: 410px;
    height: 372px;
    // margin-left: 50px;
    margin-top: 6px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0px 1px 3px 1px #0000000d;
  }
}

.right-content {
  /* flex: 1; */
  width: 845px;
  // margin-left: 50px;
}

/* 轮播图 */
.banner-carousel {
  margin-bottom: 10px;
  border-radius: 6px;
}

.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 待办统计 */
.todo-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.todo-badge {
  margin-right: 10px;
}

/* 通知公告 */
.notice-list {
  list-style: none;
  padding: 0;
}

.notice-list li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.notice-date {
  color: #999;
  font-size: 12px;
}
/* 导航模块 */
.nav-card {
  width: 845px;
  height: 225px;
  padding: 30px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0px 1px 3px 1px #0000000d;
  .nav-grid {
    display: flex;
    row-gap: 5px; /* 行间距（垂直方向） */
    column-gap: 30px; /* 列间距（水平方向） */
    flex-wrap: wrap; /* 关键属性：允许换行 */
    justify-content: flex-start; /* 或 space-between/space-around */
  }

  .nav-item {
    width: 85px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    // background: #f9f9f9;
    border-radius: 4px;
    cursor: pointer;
    img {
      width: 50px;
      height: 50px;
    }
    p {
      // display: flex;
      // justify-content: center;
      font-size: 12px;
      color: #666;
      width: 85px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; // 文字过多时显示省略号
    }
  }
}
</style>
<style scoped lang="less">
.db_box,
.gg_box {
  width: 845px;
  height: 250px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0px 1px 3px 1px #0000000d;
  margin-top: 10px;
  position: relative;
  .refresh {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 14px;
    color: #666;
    display: inline-block;
    cursor: pointer;
    z-index: 1;
  }
}
.gg_box {
  height: 262px;
}
</style>
<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #666;
  font-size: 14px;
  /* font-weight: 600; */
}

/* 改变文字颜色和下划线距离 */
:deep(.el-tabs__item) {
  font-weight: 500;
  font-size: 14px;
  color: #666666;
  padding-bottom: 10px;
  margin-top: 10px;
}
/* 改变下划线背景色 */
:deep(.el-tabs__nav-wrap::after) {
  /* background-color: #0c314d; */
}
/* 改变选择后的文字颜色 */
:deep(.el-tabs__item.is-active) {
  color: #0052d9;
  opacity: 1;
  /* font-weight: 700;
  font-style: Bold; */
}
/* 改变选择的下划线颜色  */
/* 下划线颜色 */
:deep(.el-tabs__active-bar) {
  background-color: #0118a3;
  /* border: 2px solid #0118A3 */
}
:deep(.el-tabs__header .el-tabs__item:nth-child(2)) {
  padding-left: 20px;
}
</style>
<style lang="less" scoped>
.stats_container {
  display: flex;
  gap: 16px;
  padding: 16px;
}

.stat_card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0px 16px;
  min-width: 180px;
}

.stat_icon {
  width: 50px;
  height: 50px;
}

.stat_content {
  .stat_number {
    font-size: 30px;
    font-weight: bold;
    color: #333;
  }

  .stat_label {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
  }
}
</style>
<!-- 通知公告 -->
<style lang="less" scoped>
.other-news-list {
  padding: 0px 15px 0px 15px;
  // margin-top: 12px;
}

.other-news-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  cursor: pointer;
  padding-bottom: 10px;
  border-bottom: 1px dashed #e1e1e1;
  .circle {
    width: 7px;
    height: 7px;
    border-radius: 7px;
    background: #999;
    display: inline-block;
  }
  .other-news-title {
    // flex: 1;
    width: 500px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; // 文字过多时显示省略号
    margin-left: 6px;
    font-size: 14px;
    color: #666;
  }
  .other-news-date {
    color: #999;
    font-size: 14px;
    margin-left: auto;
  }
}
.other_news_type {
  color: #999;
  font-size: 14px;
  margin-right: 25px;
}
</style>
<style lang="less" scoped>
.footer_box {
}
</style>
