<template>
  <div class="page">
    <div class="gva-card-box">
      <div class="gva-card gva-top-card">
        <div class="gva-top-card-left">
          <div class="gva-top-card-left-title">
            早安，管理员，请开始一天的工作吧
          </div>
          <div class="gva-top-card-left-dot">{{ weatherInfo }}</div>
        </div>
        <img alt class="gva-top-card-right" src="@/assets/dashboard.png" />
      </div>
    </div>
    <div class="gva-card-box gva-card-box-flex">
      <el-card class="gva-card quick-entrance" style="width: 74%">
        <div class="gva-card-title">快捷入口</div>
        <el-row :gutter="20">
          <el-col
            v-for="(card, key) in toolCards"
            :key="key"
            :span="4"
            :xs="8"
            class="quick-entrance-items"
            @click="toTarget(card.name)"
          >
            <div class="quick-entrance-item">
              <div
                :style="{ backgroundColor: card.bg }"
                class="quick-entrance-item-icon"
              >
                <el-icon>
                  <component :is="card.icon" :style="{ color: card.color }" />
                </el-icon>
              </div>
              <p>{{ card.label }}</p>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <el-card style="width: 25%; box-shadow: none">
        <div class="gva-card-header">
          <div class="gva-card-header-left">
            <span style="font-weight: bold; font-size: medium">公告</span>
          </div>
          <el-button
            v-preReClick
            link
            @click="router.push('/layout/notices/noticeList')"
            >查看更多
          </el-button>
        </div>
        <el-divider />
        <div
          v-for="(item, index) in tableData"
          :key="index"
          class="gva-card-list-item my-3"
        >
          <div class="mb-1">
            <el-tag class="mr-2">最新发布</el-tag>
            <span class="font-bold">{{ item.title }}</span>
          </div>
          <a
            class="text-gray-700 text-base"
            href=""
            @click.prevent="
              () =>
                router.push(`/layout/notices/noticeDetails?noticeId=${item.id}`)
            "
            >{{ getTruncatedContent(item.content) }}
          </a>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue'
import { useRouter } from 'vue-router'
import { useWeatherInfo } from '@/view/dashboard/weather.js'

import { useUserStore } from '@/pinia/modules/user'

defineOptions({
  name: 'Dashboard'
})

const userStore = useUserStore()
const authorityId = ref()

const weatherInfo = useWeatherInfo()

const tableData = ref([])
const getTableData = async () => {
  const param = {
    pageNum: 1,
    pageSize: 4,
    userId: '',
    type: ''
  }
  if (userStore.userInfo.authorityId !== 1) {
    param.userId = userStore.userInfo.ID
    param.type = 2
  } else {
    param.type = 3
  }
  const table = await orgNoticeList(param)
  if (table.code === 100000) {
    tableData.value = table.data.list
  }
}

// 处理公告过长则显示省略号
const getTruncatedContent = content => {
  if (content.length > 20) {
    return content.slice(0, 26) + '...'
  }
  return content
}

const toolCards = ref([
  {
    label: '创建考试',
    icon: 'list',
    name: 'examList',
    color: '#ff9c6e',
    bg: 'rgba(255, 156, 110,.3)'
  },
  {
    label: '新增学员',
    icon: 'user',
    name: 'studentManage',
    color: '#69c0ff',
    bg: 'rgba(105, 192, 255,.3)'
  },
  {
    label: '新增课程',
    icon: 'cellphone',
    name: 'classesList',
    color: '#b37feb',
    bg: 'rgba(179, 127, 235,.3)'
  },
  {
    label: '新增题目',
    icon: 'collection',
    name: 'questionList',
    color: '#5cdbd3',
    bg: 'rgba(92, 219, 211,.3)'
  },
  {
    label: '发布公告',
    icon: 'bell',
    name: 'publishNotice',
    color: '#C3CE2F',
    bg: 'rgba(195,206,47,.3)'
  }
])

const router = useRouter()

const toTarget = name => {
  router.push({ name })
}
onBeforeMount(() => {
  getTableData()
})
</script>

<style lang="scss" scoped>
.page {
  @apply p-0;
  .gva-card-box {
    @apply p-4;
    & + .gva-card-box {
      @apply pt-0;
    }
  }

  .el-divider--horizontal {
    margin: 12px 0 !important;
  }

  .gva-card-box-flex {
    justify-content: space-between;
    display: inline-flex;
    height: 300px;
    width: -webkit-fill-available;
  }

  .gva-card {
    @apply box-border bg-white rounded h-auto px-6 py-8 overflow-hidden shadow-sm;
    .gva-card-title {
      @apply pb-5 border-t-0 border-l-0 border-r-0 border-b border-solid border-gray-100;
    }
  }

  .gva-card-list-item {
    display: grid;
    justify-content: space-between;
  }

  .gva-card-header {
    width: 100%;
    justify-content: space-between;
    display: inline-flex;
    margin-top: -10px;
  }

  .gva-card-header-left {
    display: flex;
    align-items: center;
  }

  .gva-top-card {
    @apply h-72 flex items-center justify-between text-gray-500;
    &-left {
      @apply h-full flex flex-col w-auto;
      &-title {
        @apply text-3xl text-gray-600;
      }

      &-dot {
        @apply mt-4 text-gray-600 text-lg;
      }

      &-item {
        + .gva-top-card-left-item {
          margin-top: 24px;
        }

        margin-top: 14px;
      }
    }

    &-right {
      height: 600px;
      width: 600px;
      margin-top: 28px;
    }
  }

  ::v-deep(.el-card__header) {
    @apply p-0  border-gray-200;
  }

  .card-header {
    @apply pb-5 border-b border-solid border-gray-200 border-t-0 border-l-0 border-r-0;
  }

  .quick-entrance-items {
    @apply flex items-center justify-center text-center text-gray-800;
    .quick-entrance-item {
      @apply px-8 py-6 flex items-center flex-col transition-all duration-100 ease-in-out rounded-lg cursor-pointer;
      &:hover {
        @apply shadow-lg;
      }

      &-icon {
        @apply flex items-center h-16 w-16 rounded-lg justify-center mx-0 my-auto text-2xl;
      }

      p {
        @apply mt-2.5;
      }
    }
  }
}

.dashboard-icon {
  @apply flex items-center text-xl mr-2 text-blue-400;
}
</style>
