<template>
  <div>
    <div class="user-info-card" shadow="hover">
      <!-- 用户信息 -->
      <div class="user-header">
        <el-avatar :src="userInfo.avatar" class="user-avatar">
          <span v-if="!userInfo.avatar">{{
            userInfo.nickname ? userInfo.nickname.charAt(0) : '?'
          }}</span>
        </el-avatar>
        <div class="user-details">
          <p class="greeting">Hi, {{ userInfo.nickname }}，上午好!</p>
          <p class="position"
            ><span class="zw_box">职位: {{ userInfo.postNames }}</span> &nbsp;
            <span class="dept_box">部门: {{ userInfo.deptName }}</span></p
          >
          <p class="work-days"
            >今天是您入职的第 <span class="highlight">{{ userInfo.joinDate }}</span> 天!</p
          >
        </div>
      </div>

      <div class="calendar_sp_box">
        <div class="weather-widget">
          <!-- 顶部状态计数 -->
          <div class="status-counts">
            <div class="status-item" @click="todetail('待我审批')">
              <div class="label">待我审批</div>
              <div class="count red">{{ todoCount }}</div>
            </div>
            <div class="status-item" @click="todetail('我的申请')">
              <div class="label">我的申请</div>
              <div class="count teal">{{ myCount }}</div>
            </div>
            <div class="status-item" @click="todetail('抄送我的')">
              <div class="label">抄送我的</div>
              <div class="count blue">{{ copyMyCount }}</div>
            </div>
          </div>
          <!-- 分割线 -->
          <div class="divider">
            <img class="logo-img" alt="分割线" src="@/assets/imgs/portal/solid.png" />
          </div>
          <!-- 天气信息 -->
          <div class="weather-info">
            <div>
              <h2 class="title">今日天气</h2>
              <div class="weather-details">
                <span class="condition">{{ weatherData.weather }}</span>
                <span class="temperature">{{ weatherData.temperature }}℃</span>
                <span class="wind">风力{{ weatherData.windpower }}</span>
              </div>
            </div>
            <img
              v-if="weatherData.imgUrl"
              class="weather-icon"
              :src="weatherData.imgUrl"
              alt="多云转阴"
            />
            <img v-else class="weather-icon" src="@/assets/imgs/portal/tq.png" alt="多云转阴" />
          </div>

          <!-- 天气和日历 -->
          <div class="weather-calendar">
            <el-calendar v-model="calendarDate" class="custom-calendar mini-calendar">
              <!-- <template #date-cell="{ data }">
                <div class="custom-date-cell">
                  {{ getChineseWeekday(data.date) }}
                </div>
              </template> -->
            </el-calendar>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import * as PortalApi from '@/api/portal'
import { useRouter } from 'vue-router'
const router = useRouter()

const props = defineProps({
  userInfo: {
    type: Object,
    default: () => {}
  }
})

const queryParams = reactive({
  latitude: '', //纬度
  longitude: '' //经度
})

const todoCount = ref(0)
const myCount = ref(0)
const copyMyCount = ref(0)

// 当前激活的 Tab
const activeTab = ref('approve')
// 日历日期
const calendarDate = ref(new Date())
const weekdays = ref(['周日', '周一', '周二', '周三', '周四', '周五', '周六'])
const getChineseWeekday = (date) => {
  const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
  const day = date.getDay() // 获取星期几，0为周日，1为周一，以此类推
  return weekdays[day]
}
const weatherData = ref({})

const todetail = (key) => {
  let path = '/bpm/task/todo'
  if (key === '待我审批') {
    path = '/bpm/task/todo'
  }
  if (key === '我的申请') {
    path = '/bpm/task/my'
  }
  if (key === '抄送我的') {
    path = '/bpm/task/copy'
  }
  const targetUrl = router.resolve(path).href
  window.open(targetUrl, '_blank')
}

/** 查询公告列表 */
const getWeather = async () => {
  try {
    const data = await PortalApi.getWeather(queryParams)
    weatherData.value = data
  } finally {
  }
}

// 获取我的待办数量
const getTodoCount = async () => {
  try {
    const data = await PortalApi.getTodoCount()
    todoCount.value = data.total
  } finally {
  }
}
// 我的申请数量
const getMyCount = async () => {
  try {
    const data = await PortalApi.getMyCount()
    myCount.value = data.total
  } finally {
  }
}
// 我的抄送数量
const getCopyMyCount = async () => {
  try {
    const data = await PortalApi.getCopyMyCount()
    copyMyCount.value = data.total
  } finally {
  }
}
onMounted(() => {
  getWeather()
  getTodoCount()
  getMyCount()
  getCopyMyCount()
})
///system/user/getWeather
</script>

<style scoped>
/* 卡片整体样式 */
.user-info-card {
  position: relative;
  width: 100%;
  /* max-width: 300px; */
  margin: 0 auto;
  /* margin-left: 50px; */
}

/* 用户信息头部 */
.user-header {
  display: flex;
  /* align-items: center;
  margin-bottom: 20px; */
  background: url('@/assets/imgs/portal/usif_bg.png') no-repeat center center;
  background-size: cover;
  width: 378px;
  height: 153px;
  border-radius: 16px;
  padding-top: 20px;
  margin-left: 16px;
  /* left: 16px;
  border-radius: 16px;
  angle: 0 deg;
  opacity: 1; */
}
.user-avatar {
  width: 60px;
  height: 60px;
  margin-left: 20px;
}
.user-details {
  margin-left: 16px;
  line-height: 1.5;
  color: #ffffff;
}

.greeting {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}

.position {
  font-size: 14px;
  margin: 4px 0px 0px 0px;
}
.zw_box {
  display: inline-block;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dept_box {
  display: inline-block;
  max-width: 145px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.work-days {
  font-size: 14px;
  margin: 0;
}

.highlight {
  color: #fea802;
  font-weight: bold;
}

/* 待办事项 Tab */
.todo-tabs :deep(.el-tabs__item) {
  font-size: 14px;
}

.tab-count {
  display: inline-block;
  margin-left: 5px;
  color: #409eff;
  font-weight: bold;
}

/* 天气和日历 */
.section-title {
  font-size: 16px;
  margin: 15px 0 10px;
  color: #333;
}

.weather-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 30px 10px 30px;
  background: #ffffff;
}

.weather-icon {
  width: 80px;
  height: 58px;
  /* margin-right: 8px; */
}

.weather-text {
  font-size: 14px;
  color: #666;
}

.calendar_sp_box {
  width: 410px;
  height: 490px;
  background: url('@/assets/imgs/portal/spmk_bg.png') no-repeat top center;
  background-size: 410px 127px;
  border-radius: 20px;
  box-shadow: 0px 1px 3px 1px #0000000d;
  position: absolute;
  top: 110px;
  left: 0px;
  /* box-shadow: 0px 1px 2px 0px #0000001a; */

  /* width: 410;
height: 127;
top: 120px;
angle: 0 deg;
opacity: 1; */
}
.weather-widget {
  font-family: Arial, sans-serif;
  /* padding: 20px; */
  /* border: 1px solid #e0e0e0; */
  border-radius: 5px;
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
}

.status-counts {
  display: flex;
  justify-content: space-around;
  margin-bottom: 5px;
  margin-top: 30px;
}

.status-item {
  /* text-align: center; */
  cursor: pointer;
}

.count {
  font-weight: bold;
  font-family: Microsoft YaHei UI;
  font-weight: 700;
  font-style: Bold;
  font-size: 30px;
  /* line-height: 24px; */
  margin-top: 6px;
}

.red {
  color: #ff383c;
}

.teal {
  color: #2bc59f;
}

.blue {
  color: #1285ff;
}

.label {
  font-size: 14px;
  color: #333;
}

.divider {
  background: #fff;
  text-align: center;
  margin-top: -10px;
}

.title {
  margin-bottom: 6px;
  font-family: Microsoft YaHei UI;
  font-weight: 700;
  font-style: Bold;
  font-size: 24px;
  color: #333;
}

.weather-details {
  display: flex;
  align-items: center;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  font-style: Regular;
  font-size: 14px;
}

.condition {
  margin-right: 20px;
}

.temperature {
  margin-right: 20px;
  /* font-weight: bold; */
}

.wind {
  margin-right: 20px;
  color: #333;
}

/* 隐藏日历头部（可选） */
/* .mini-calendar :deep(.el-calendar__header) {
  display: none;
} */

.mini-calendar :deep(.el-calendar-day) {
  height: 35px;
  width: 35px;
  padding: 0;
  text-align: center;
  background: #f2f2f2;
  font-size: 12px;
  color: #000000;
  line-height: 35px;
  border-radius: 20px;
}

.mini-calendar :deep(.is-selected .el-calendar-day) {
  height: 35px;
  width: 35px;
  padding: 0;
  text-align: center;
  background: #0118a3;

  font-size: 12px;
  color: #ffffff;
  line-height: 35px;
  border-radius: 20px;
}
.mini-calendar :deep(.is-today .el-calendar-day) {
  height: 35px;
  width: 35px;
  padding: 0;
  text-align: center;
  background: #0118a3;

  font-size: 12px;
  color: #ffffff;
  line-height: 35px;
  border-radius: 20px;
}
/* 当前日期样式 */
.custom-calendar :deep(.el-calendar-table .is-today) {
  color: white;
  /* background-color: #007bff; */
  border-radius: 50%;
  width: 30px;
  height: 30px;
  line-height: 30px;
  margin: 0 auto;
}
.custom-calendar :deep(.el-calendar-table td.is-selected) {
  background: none;
}
.custom-calendar :deep(.el-calendar__body) {
  padding: 6px 6px 6px 6px;
}
.custom-calendar :deep(.el-calendar-table tr:first-child) {
  margin-top: 50px;
}

::v-deep .el-calendar__body .el-calendar-table tr:first-child th::before {
  content: '周';
}
.weather-calendar {
  height: 310px;
  background: #fff;
  border-radius: 20px;
}
</style>

<style scoped>
/* 这里将覆盖 el-calendar 的默认样式 */
.mini-calendar :deep(.el-calendar__button-group) {
  display: none;
}
/* 日历标题（年月）样式 */
.custom-calendar :deep(.el-calendar__title) {
  font-size: 16px;
  /* font-weight: bold; */
  color: #666; /* 根据设计稿调整颜色 */
  margin-left: 2px;
}

/* 一 二 三 四 五 六 日 */
::v-deep .el-calendar-table thead th {
  padding: 0;
  font-size: 12px;
  color: #999999;
}
/* 去除边框 */

/* .custom-calendar :deep(.el-calendar-table tr td:first-child){
border: none;
}
.custom-calendar :deep(.el-calendar-table tr:first-child td){
  border: none;
}
.custom-calendar :deep(.el-calendar-table__row td){
  border: none;
} */
::v-deep .el-calendar-table tr td:first-child {
  border: none;
}
::v-deep .el-calendar-table tr:first-child td {
  border: none;
}
::v-deep .el-calendar-table__row td {
  border: none;
}
/* 当前月样式 */
::v-deep .el-calendar-table:not(.is-range) {
  color: rgba(156, 178, 205, 1);
}

.custom-calendar {
  /* 整体样式调整 */
  width: 100%;
  max-width: 400px; /* 根据设计稿调整宽度 */
  margin: 0 auto;
}

/* 日历头部样式 */
.custom-calendar :deep(.el-calendar__header) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: transparent; /* 透明背景，根据设计稿调整 */
  border-bottom: none; /* 去掉默认底部边框 */
}

/* 日历表格样式 */
.custom-calendar :deep(.el-calendar-table) {
  width: 100%;
  border-collapse: collapse;
}

/* 日历表格行样式 */
.custom-calendar :deep(.el-calendar-table tr) {
  /* border-bottom: 1px solid #e0e0e0;  */
}

/* 日历表格单元格样式 */
.custom-calendar :deep(.el-calendar-table td) {
  padding: 5px;
  text-align: center;
  position: relative;
}

/* 非当前月日期的样式 */
.custom-calendar :deep(.el-calendar-table .is-other-month) {
  color: #ccc; /* 灰色显示非当前月日期 */
}

/* 周末日期样式（根据设计稿，周六周日可能有不同样式） */
.custom-calendar .el-calendar-table .el-calendar-day:nth-child(6) .el-calendar-day__text,
.custom-calendar .el-calendar-table .el-calendar-day:nth-child(7) .el-calendar-day__text {
  /* 这里可以单独设置周六周日的样式，比如颜色等 */
  /* 例如：color: red; */
}

/* 日期文本样式 */
.custom-calendar :deep(.el-calendar-day__text) {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

/* 鼠标悬停在日期上的样式 */
.custom-calendar :deep(.el-calendar-day:hover .el-calendar-day__text) {
  background-color: #f0f0f0; /* 悬停背景色 */
}
</style>
