<template>
  <div class="home">
    <!-- 用户信息 -->
    <el-row :gutter="15">
      <el-col :md="24" :lg="16" :xl="24" class="mb10">
        <el-card shadow="hover">
          <div class="user-item">
            <div class="user-item-left">
              <el-avatar :size="60" shape="circle" :src="userInfo.avatar" />
            </div>

            <div class="user-item-right">
              <el-row>
                <el-col :xs="24" :md="24" class="right-title mb20 one-text-overflow">
                  <div class="mb10">
                    {{ userInfo.welcomeMessage }} <strong>{{ userInfo.nickName }}</strong>
                    <span>({{ userInfo.welcomeContent }})</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-button icon="edit">
                  <router-link to="/user/profile">{{ $t('layout.modifyInformation') }}</router-link>
                </el-button>
              </el-row>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="15">
      <el-col :md="24" :lg="24" :xl="24" class="mb10">
        <el-card shadow="hover">
          <template #header>
            <span><svg-icon name="tool" /> {{ $t('layout.commonFuncs') }}</span>
            <div class="home-card-more">
              <el-button text @click="handleAdd()">{{ $t('btn.add') }}</el-button>
            </div>
          </template>
          <div>
            <el-scrollbar wrap-class="scrollbar-wrapper"> <CommonMenu v-model="showEdit"></CommonMenu></el-scrollbar>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="index">
import PanelGroup from './dashboard/PanelGroup'
import CommonMenu from './components/CommonMenu'

import dayjs from 'dayjs'
// 时间插件
import duration from 'dayjs/plugin/duration'
dayjs.extend(duration)

import useUserStore from '@/store/modules/user'
import useSocketStore from '@/store/modules/socket'
import { getWeek } from '@/utils/ruoyi'

const showEdit = ref(false)
const { proxy } = getCurrentInstance()
let statistics = ref({
  nowCount: 0,
  shenhe: 0,
  shenhe1: 0,
  shenhe2: 0
})
const userInfo = computed(() => {
  return useUserStore().userInfo
})
const onlineInfo = computed(() => {
  return useSocketStore().onlineInfo
})
const currentTime = computed(() => {
  return proxy.parseTime(new Date(), 'YYYY-MM-DD')
})
const weekName = getWeek()

function handleSetLineChartData(type) {
  // 处理图表数据切换，目前只是占位函数
  console.log('切换图表类型:', type)
}

function handleAdd() {
  proxy.$modal.msg('请通过搜索添加')
}

function workTimeFormatter(val) {
  return dayjs.duration(val * 60, 'second').format('HH时mm分')
}
</script>

<style lang="scss" scoped>
.home {
  .home-card-more {
    float: right;
    padding: 3px 0;
    font-size: 13px;
  }

  .user-item {
    display: flex;
    align-items: center;
    .user-item-left {
      width: 60px;
      height: 60px;
      overflow: hidden;
      margin-right: 10px;
    }
    .user-item-right {
      flex: 1;
      .right-title {
        font-size: 20px;
      }
    }
  }

  .work-wrap {
    display: grid;
    grid-template-columns: repeat(4, 25%);

    .item {
      text-align: center;

      .name {
        color: #606666;
      }
    }
  }
}
</style>
