<template>
  <div class="scale_container">
    <div class="scale_home">
      <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="200px" class="banner-carousel">
              <el-carousel-item v-for="item in banners" :key="item.id">
<!--                <img :src="item.imgUrl" alt="轮播图" class="banner-img" />-->
                 <img src="@/assets/imgs/portal/lbtp1.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.logo" alt="导航图标" />
                  <!-- <img :src="`src/assets/imgs/portal/nav_icon${index + 1}.png`" alt="导航图标" /> -->
                  <p>{{ nav.name }}</p>
                </div>
              </div>
              <div class="pages_btn prev" @click="arrow" v-if="currentIndex > 1">&lt;</div>
              <div class="pages_btn arrow" @click="prev" v-if="currentIndex < pages">></div>
              <!-- <div class="pages_box" v-if="navItems.length > 0"
                ><span
                  v-for="(item, index) in Array(pages)"
                  :key="index"
                  :class="[{ pagesactive: currentIndex == index + 1 }]"
                  @click="getMenuPage(index)"
                ></span
              ></div> -->
            </div>

            <div class="db_box">
              <span class="refresh" @click="refreshTabs">刷新</span>
              <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleLcClick">
                <el-tab-pane label="代办统计" name="1">
                  <div class="stats_container">
                    <!-- BPM 流程管理系统待办数 -->
                    <div
                      class="stat_card"
                      v-for="(item, index) in statisticsList"
                      :key="index"
                      @click="toDbStatistics(item)"
                    >
                      <img v-if="item.imgUrl" :src="item.imgUrl" class="stat_icon" />
                      <img v-else src="@/assets/imgs/portal/dbtj_icon1.png" class="stat_icon" />
                      <div class="stat_content">
                        <div class="stat_number">{{ item.total }}</div>
                        <div class="stat_label">{{ item.name }}</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%"
                      :show-overflow-tooltip="true"
                    >
                      <!-- <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-column
                        align="center"
                        label="流程"
                        prop="processInstance.name"
                        width="180"
                      />
                      <el-table-column
                        align="center"
                        label="发起人"
                        prop="processInstance.startUser.nickname"
                        width="100"
                      />
                      <el-table-column
                        :formatter="dateFormatter"
                        align="center"
                        label="发起时间"
                        prop="processInstance.createTime"
                        width="180"
                      />
                      <el-table-column align="center" label="当前任务" prop="name" width="180" />
                      <el-table-column
                        :formatter="dateFormatter"
                        align="center"
                        label="任务时间"
                        prop="createTime"
                        width="180"
                      />
                      <el-table-column align="center" label="操作" fixed="right" width="80">
                        <template #default="scope">
                          <el-button link type="primary" @click="handleAudit(scope.row)"
                            >办理</el-button
                          >
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="我的已办" name="3">
                  <el-table
                    :data="tableData1"
                    border
                    style="width: 100%"
                    :show-overflow-tooltip="true"
                  >
                    <el-table-column
                      align="center"
                      label="流程"
                      prop="processInstance.name"
                      width="180"
                    />
                    <el-table-column
                      align="center"
                      label="发起人"
                      prop="processInstance.startUser.nickname"
                      width="100"
                    />
                    <el-table-column
                      :formatter="dateFormatter"
                      align="center"
                      label="发起时间"
                      prop="createTime"
                      width="180"
                    />
                    <el-table-column align="center" label="当前任务" prop="name" width="180" />
                    <el-table-column
                      :formatter="dateFormatter"
                      align="center"
                      label="任务开始时间"
                      prop="createTime"
                      width="180"
                    />
                    <el-table-column
                      :formatter="dateFormatter"
                      align="center"
                      label="任务结束时间"
                      prop="endTime"
                      width="180"
                    />
                    <el-table-column align="center" label="审批状态" prop="status" width="120">
                      <template #default="scope">
                        <dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="scope.row.status" />
                      </template>
                    </el-table-column>
                    <el-table-column
                      align="center"
                      label="审批建议"
                      prop="reason"
                      min-width="180"
                    />
                    <el-table-column
                      align="center"
                      label="耗时"
                      prop="durationInMillis"
                      width="160"
                    >
                      <template #default="scope">
                        {{ formatPast2(scope.row.durationInMillis) }}
                      </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作" fixed="right" width="80">
                      <template #default="scope">
                        <el-button link type="primary" @click="handleAudit(scope.row)"
                          >历史</el-button
                        >
                      </template>
                    </el-table-column>
                  </el-table>
                </el-tab-pane>
                <el-tab-pane label="我的申请" name="4">
                  <el-table
                    :data="tableData2"
                    border
                    style="width: 100%"
                    :show-overflow-tooltip="true"
                  >
                    <el-table-column
                      label="流程名称"
                      align="center"
                      prop="name"
                      min-width="200px"
                      fixed="left"
                    />
                    <el-table-column
                      label="流程分类"
                      align="center"
                      prop="categoryName"
                      min-width="100"
                      fixed="left"
                    />
                    <el-table-column label="流程状态" prop="status" min-width="200">
                      <template #default="scope">
                        <!-- 审批中状态 -->
                        <template
                          v-if="
                            scope.row.status === BpmProcessInstanceStatus.RUNNING &&
                            scope.row.tasks?.length > 0
                          "
                        >
                          <!-- 单人审批 -->
                          <template v-if="scope.row.tasks.length === 1">
                            <span>
                              <el-button link type="primary" @click="handleDetail(scope.row)">
                                {{ scope.row.tasks[0].assigneeUser?.nickname }}
                              </el-button>
                              ({{ scope.row.tasks[0].name }}) 审批中
                            </span>
                          </template>
                          <!-- 多人审批 -->
                          <template v-else>
                            <span>
                              <el-button link type="primary" @click="handleDetail(scope.row)">
                                {{ scope.row.tasks[0].assigneeUser?.nickname }}
                              </el-button>
                              等 {{ scope.row.tasks.length }} 人 ({{
                                scope.row.tasks[0].name
                              }})审批中
                            </span>
                          </template>
                        </template>
                        <!-- 非审批中状态 -->
                        <template v-else>
                          <dict-tag
                            :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS"
                            :value="scope.row.status"
                          />
                        </template>
                      </template>
                    </el-table-column>
                    <el-table-column
                      label="发起时间"
                      align="center"
                      prop="startTime"
                      width="180"
                      :formatter="dateFormatter"
                    />
                    <el-table-column
                      label="结束时间"
                      align="center"
                      prop="endTime"
                      width="180"
                      :formatter="dateFormatter"
                    />
                    <el-table-column label="操作" align="center" fixed="right" width="80">
                      <template #default="scope">
                        <el-button
                          link
                          type="primary"
                          v-hasPermi="['bpm:process-instance:cancel']"
                          @click="handleDetail(scope.row)"
                        >
                          详情
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-tab-pane>
              </el-tabs>
            </div>

            <div class="gg_box">
              <span class="refresh" @click="toNewsCenter()">更多</span>
              <el-tabs v-model="activeGgName" class="demo-tabs" @tab-click="handleCompNewsClick">
                <el-tab-pane label="通知公告" name="1">
                  <div class="other-news-list">
                    <div
                      class="other-news-item"
                      v-for="(otherNews, index) in otherNewsList"
                      :key="index"
                      @click="toDetail(otherNews.id)"
                    >
                      <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">{{ formatDate(otherNews.createTime) }}</span>
                      </span>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="管理制度" name="2">
                  <div class="other-news-list">
                    <div
                      class="other-news-item"
                      v-for="(otherNews, index) in otherNewsList1"
                      :key="index"
                      @click="toDetail(otherNews.id)"
                    >
                      <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">{{ formatDate(otherNews.createTime) }}</span>
                      </span>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="项目管理" name="3">
                  <div class="other-news-list">
                    <div
                      class="other-news-item"
                      v-for="(otherNews, index) in otherNewsList2"
                      :key="index"
                      @click="toDetail(otherNews.id)"
                    >
                      <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">{{ formatDate(otherNews.createTime) }}</span>
                      </span>
                    </div>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </div>
        <!-- <div class="footer_box">
      <RecordNumber />
    </div> -->
      </div>
    </div>
  </div>
  <el-dialog
    class="self_dialog"
    title=""
    width="35%"
    :close-on-click-modal="false"
    :show-close="false"
    :close-on-press-escape="false"
    v-model="userCheckPwdVisible"
    append-to-body
    @close="close"
  >
    <template #header>
      <div class="my-header" style="font-size: 15px; color: red">
        <div>系统检测到您尚未修改过初始密码，为了您的账号安全请您及时修改密码！</div>
      </div>
    </template>
    <ResetPwd @success="handleBasicInfoSuccess" />
  </el-dialog>
</template>
<script>
export default {
  name: 'PortalHome' // 确保这里是字符串形式
}
</script>
<script setup>
import { ref, nextTick } from 'vue'
import { ResetPwd } from '@/views/Profile/components'
import { getAccessToken } from '@/utils/auth'
import * as ProcessInstanceApi from '@/api/bpm/processInstance'
import * as TaskApi from '@/api/bpm/task'
import * as PortalApi from '@/api/portal'
import * as UserApi from '@/api/system/user'
import * as NoticeSysApi from '@/api/system/notice'
import { NoticeApi } from '@/api/company/companynotice'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/modules/user'
import { Bell, Message, Document, User } from '@element-plus/icons-vue'
import { dateFormatter, formatPast2 } from '@/utils/formatTime'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { BpmProcessInstanceStatus } from '@/utils/constants'
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 message = useMessage()

const router = useRouter()
const { push } = useRouter() // 路由
const queryParams = reactive({
  pageNo: 1,
  pageSize: 5
})

defineOptions({ name: 'PortalHome' })

// 用户信息相关数据
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')
const pages = ref(1)
const currentIndex = ref(1)

let popstateListener = null
const historyPopstate = ref(false)
const userCheckPwdVisible = ref(false)
// 处理基本信息更新成功
const handleBasicInfoSuccess = async () => {
  userCheckPwdVisible.value = false
  window.removeEventListener('popstate', popstateListener)
}

// const close = () => {
//   window.removeEventListener('popstate', popstateListener)
// }

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

const tabLcLabel = ref('代办统计')
const tabCompNewsLabel = ref('通知公告')
// 轮播图数据
const banners = ref([
  { id: 1, img: '@/assets/imgs/portal/lbtp1.png' },
  { id: 2, img: '@/assets/imgs/portal/lbtp2.png' }
])
const statisticsList = ref([])

// 导航模块数据
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 = ref([
  // {
  //   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 tableData1 = ref([])
const tableData2 = ref([])

const otherNewsList = ref([
  // {
  //   title: '关于项目经营“三纲领”的启用通知关于项目经营“三纲领”的启用通知', // 较长标题用于测试省略号
  //   date: '2025-08-29'
  // }
])
const otherNewsList1 = ref([])
const otherNewsList2 = ref([])
// 通知公告数据
const notices = ref([
  { id: 1, title: '关于项目经营“三纲领”的启用通知', date: '2025-08-29' },
  { id: 2, title: '关于公司新制度的通知', date: '2025-08-28' }
])

const permissionPageId = ref('1207') //流程
const portalProcessList = getIntDictOptions('portal_process')
portalProcessList.forEach((item) => {
  if (item.label === 'process_menu_id') {
    permissionPageId.value = item.value
  }
})

const prev = () => {
  currentIndex.value = currentIndex.value + 1

  getMenuPage()
}
const arrow = () => {
  currentIndex.value = currentIndex.value - 1

  getMenuPage()
}
const handleMenuClick = (menu) => {
  if (!menu.redirectUris || !menu.redirectUris[0]) {
    message.warning('此功能暂未开放，尽请期待')
    return
  }
  // 显示加载中提示
  const loading = ElLoading.service({
    lock: true,
    text: '正在进入系统中，请稍后',
    background: 'rgba(0, 0, 0, 0.7)'
  })

  // 使用Vue Router根据菜单项的url参数进行跳转
  const url = menu.redirectUris[0]
  try {
    if (menu.type === 2) {
      //内部系统
      // router.push(url)
      let obj = {}
      if (menu.menuId) {
        obj.pagepath = menu.menuId
      }
      const targetUrl = router.resolve({
        path: url,
        query: obj // 自动编码为 ?id=123&name=test
      }).href
      window.open(targetUrl, '_blank')
    }
    if (menu.type === 1) {
      // 第三方系统
      if (url.indexOf('sk-token=_TOKEN_') > -1) {
        const a = url.replace('_TOKEN_', getAccessToken())
        window.open(a)
        // window.open(a, '_blank')
      } else {
        window.open(url)
      }
    }
  } finally {
    // 延迟一小段时间后关闭加载，以确保用户能看到提示信息
    setTimeout(() => {
      loading.close()
    }, 300)
  }
}
const formatDate = (timestamp) => {
  const date = new Date(timestamp)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0') // 月份从0开始，需要+1
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}
/** 处理审批按钮 */
const handleAudit = (row) => {
  const targetUrl = router.resolve({
    name: 'BpmProcessInstanceDetail',
    query: {
      id: row.processInstance.id,
      taskId: row.id,
      pagepath: permissionPageId.value
    }
  }).href
  window.open(targetUrl, '_blank')

  // push({
  //   name: 'BpmProcessInstanceDetail',
  //   query: {
  //     id: row.processInstance.id,
  //     taskId: row.id
  //   }
  // })
}
/** 查看详情 */
const handleDetail = (row) => {
  const targetUrl = router.resolve({
    name: 'BpmProcessInstanceDetail',
    query: {
      id: row.id,
      pagepath: permissionPageId.value
    }
  }).href
  window.open(targetUrl, '_blank')

  // router.push({
  //   name: 'BpmProcessInstanceDetail',
  //   query: {
  //     id: row.id
  //   }
  // })
}

const refreshTabs = () => {
  if (tabLcLabel.value === '代办统计') {
    getTodoStatistics()
  }
  if (tabLcLabel.value === '我的待办') {
    getTaskTodoPage()
  }
  if (tabLcLabel.value === '我的已办') {
    getTaskDonePage()
  }
  if (tabLcLabel.value === '我的申请') {
    getProcessInstanceMyPage()
  }
  ElMessage.success('刷新成功')
}
const handleLcClick = (tab) => {
  const currentLabel = tab.props.label
  tabLcLabel.value = tab.props.label
  if (currentLabel === '我的待办') {
    getTaskTodoPage()
  }
  if (currentLabel === '我的已办') {
    getTaskDonePage()
  }
  if (currentLabel === '我的申请') {
    getProcessInstanceMyPage()
  }
}

const toDbStatistics = (item) => {
  const targetUrl = router.resolve({
    path: '/bpm/task/todo',
    query: { category: item.code, pagepath: permissionPageId.value }
  }).href
  window.open(targetUrl, '_blank')

  // router.push({
  //   path: '/bpm/task/todo',
  //   query: { category: item.code }
  // })
}
const toNewsCenter = () => {
  let key = 'notice'
  if (tabCompNewsLabel.value === '通知公告') {
    key = 'notice'
  }
  if (tabCompNewsLabel.value === '管理制度') {
    key = 'managerZd'
  }
  if (tabCompNewsLabel.value === '项目管理') {
    key = 'project'
  }
  router.push({
    name: 'NewsCenter',
    query: { key }
  })
}

const handleCompNewsClick = (tab) => {
  tabCompNewsLabel.value = tab.props.label
  // if (tabCompNewsLabel.value === '通知公告') {
  //   getTaskTodoPage()
  // }
  if (tabCompNewsLabel.value === '管理制度') {
    getCompanyZdList()
  }
  if (tabCompNewsLabel.value === '项目管理') {
    getCompanyProjectList()
  }
}
// 获取用户信息
const getUserInfo = async () => {
  try {
    const userStore = useUserStore()
    const userId = userStore.getUser.id || 1 // 默认使用id=1作为备选

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

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

    userInfo.value = result

    //initPassword    0  未改   1 已改
    userCheckPwdVisible.value = result.initPassword == 0
    if (userCheckPwdVisible.value) {
      // historyPopstate.value = true
      //防止页面后退  使用在vue时 挂载到mounted中
      history.pushState(null, null, document.URL)
      popstateListener = function () {
        history.pushState(null, null, document.URL)
      }
      window.addEventListener('popstate', popstateListener)
    }
    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)
    // 可以根据需要添加错误提示
  }
}

/** 查询公告列表 */
const getNoticeList = async () => {
  const obj = {
    pageNo: 1,
    pageSize: 5
  }
  try {
    const data = await NoticeSysApi.getNoticePageList(obj)
    otherNewsList.value = data.list
  } finally {
  }
}

/** 查询banner列表 */
const getBannersList = async () => {
  const obj = {
    platformType: 1,
    typeFlag: 4,
    pageNo: 1,
    pageSize: 10
  }
  try {
    const data = await NoticeApi.getNoticePageList(obj)
    // banners.value = data.list
  } finally {
  }
}

/** 查询代办统计列表 */
const getTodoStatistics = async () => {
  const obj = {
    // typeFlag: 4,
    // pageNo: 1,
    // pageSize: 10
  }
  try {
    const data = await PortalApi.getTodoStatistics(obj)
    statisticsList.value = data
  } finally {
  }
}
/** 查询我的待办任务列表 */
const getTaskTodoPage = async () => {
  const obj = {
    pageNo: 1,
    pageSize: 3
  }
  try {
    const data = await TaskApi.getTaskTodoPage(obj)
    tableData.value = data.list
  } finally {
  }
}

/** 查询我的已办任务列表 */
const getTaskDonePage = async () => {
  const obj = {
    pageNo: 1,
    pageSize: 3
  }
  try {
    const data = await TaskApi.getTaskDonePage(obj)
    tableData1.value = data.list
  } finally {
  }
}

/** 查询我的申请任务列表 */
const getProcessInstanceMyPage = async () => {
  const obj = {
    pageNo: 1,
    pageSize: 3
  }
  try {
    const data = await ProcessInstanceApi.getProcessInstanceMyPage(obj)
    tableData2.value = data.list
  } finally {
  }
}

/** 获得门户菜单列表 */
const getMenuPage = async () => {
  // console.log(index)
  // currentIndex.value = index + 1
  const obj = {
    pageNo: currentIndex.value,
    pageSize: 14
  }
  try {
    const data = await PortalApi.getMenuPage(obj)
    navItems.value = data.list
    const total = data.total
    pages.value = Math.ceil(total / 14)
  } finally {
  }
}
/** 查询管理制度列表 */
const getCompanyZdList = async () => {
  const obj = {
    typeFlag: 2,
    pageNo: 1,
    pageSize: 5
  }
  try {
    const data = await NoticeApi.getNoticePageList(obj)
    otherNewsList1.value = data.list
  } finally {
  }
}
/** 查询项目管理列表 */
const getCompanyProjectList = async () => {
  const obj = {
    typeFlag: 3,
    pageNo: 1,
    pageSize: 5
  }
  try {
    const data = await NoticeApi.getNoticePageList(obj)
    otherNewsList2.value = data.list
  } finally {
  }
}
const toDetail = (id) => {
  if (tabCompNewsLabel.value === '通知公告') {
    router.push({
      name: 'NoticeDetail',
      query: { id }
    })
  }
  if (tabCompNewsLabel.value === '管理制度') {
    router.push({
      name: 'ManagerZdDetail',
      query: { id }
    })
  }
  if (tabCompNewsLabel.value === '项目管理') {
    router.push({
      name: 'ProjectDetail',
      query: { id }
    })
  }
}
// 页面加载时获取用户信息
onMounted(() => {
  getUserInfo()
  getNoticeList()
  getBannersList()
  getTodoStatistics()
  getMenuPage(0)
})
</script>

<style scoped lang="less">
.nav-card:hover .pages_btn {
  display: block;
}
.pages_btn {
  position: absolute;
  top: 90px;
  background-color: rgba(31, 45, 61, 0.11);
  border: none;
  border-radius: 50%;
  color: #ffffff;
  cursor: pointer;
  font-size: 14px;
  height: 36px;
  width: 36px;
  justify-content: center;
  margin: 0;
  outline: none;
  padding: 0;
  text-align: center;
  line-height: 36px;
  display: none;
}
.prev {
  left: 10px;
}
.arrow {
  right: 10px;
}
.scale_container {
  // width: 120%; /* 补偿宽度（因为 scale(0.8) 会缩小宽度） */
  // height: 100vh;
  // overflow: auto; /* 如果内容超出屏幕，允许滚动 */
  // display: flex;
  // justify-content: center;
  // align-items: center;
}

.scale_home {
  transform-origin: top center; /* 缩放基准点（顶部中间） */
  transform: scale(0.86); /* 仅缩放高度为 80% */
  // width: 150%; /* 补偿宽度（因为 scale(0.8) 会缩小宽度） */
  height: auto; /* 高度自适应 */
}

.pages_box {
  display: flex;
  justify-content: center;
  margin-top: -6px;
  span {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background: #666;
    cursor: pointer;
    margin-left: 6px;
  }
  .pagesactive {
    background: #0118a3;
  }
}
.table_box {
  padding: 0px 10px 0px 10px;
}
/* 整个滚动条 */
::-webkit-scrollbar {
  width: 2px; /* 垂直滚动条宽度 */
}
/* 页面整体样式 */
.dashboard-container {
  width: 100%;
  height: 120vh;
  display: flex;
  flex-direction: column;
  overflow: auto;
  position: relative;
  background-color: #f0f2f5;
  /* padding: 20px; */
  background: #f5f7fa;
  // min-height: 100vh;
  padding-bottom: 100px;
  margin-top: 36px;
}

/* 顶部导航栏 */
.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: 20px;
  justify-content: center;
  margin-bottom: 20px;
}

.left-content {
  width: 410px;
  margin-right: 20px;
  .left_top_box {
    height: 586px;
  }
  .gsxw_box {
    width: 410px;
    height: 352px;
    // 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 {
  position: relative;
  width: 845px;
  height: 196px;
  padding: 10px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0px 1px 3px 1px #0000000d;
  .nav-grid {
    margin-left: 20px;
    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; // 文字过多时显示省略号
      text-align: center;
    }
  }
}
</style>
<style scoped lang="less">
.db_box,
.gg_box {
  width: 845px;
  height: 235px;
  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: 282px;
}
</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;
  flex-wrap: wrap;
  gap: 16px;
  padding: 16px;
  height: 160px;
  overflow-y: auto;
}

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

.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>
.self_dialog {
  :deep(.el-dialog__title) {
    font-size: 15px;
    color: red;
  }
}
</style>
