<template>
  <div>
    <el-card shadow="never">
      <el-skeleton :loading="loading" animated>
        <el-row :gutter="20" justify="space-between">
          <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
            <div class="flex items-center">
              <img :src="avatar" alt="" class="w-40px h-40px rounded-[50%] mr-20px" />
              <div class="text-20px text-700">
                {{ t('workplace.welcome') }} {{ username }} {{ t('workplace.happyDay') }}
              </div>
            </div>
          </el-col>
          <el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
            <div class="flex h-40px items-center justify-end <sm:mt-10px">
              <div
                class="px-8px text-right"
                @click="router.push({ path: '/Okr/okr-wait', query: { type: 1 } })"
              >
                <div class="text-14px text-red-600 mb-20px">今日待办</div>
                <CountTo
                  class="text-20px number-font"
                  :start-val="0"
                  :end-val="waitCount.dayEndAgentWorkNum"
                  :duration="2600"
                />
              </div>
              <el-divider direction="vertical" border-style="dashed" />
              <div
                class="px-8px text-right"
                @click="router.push({ path: '/Okr/okr-wait', query: { type: 2 } })"
              >
                <div class="text-14px text-gray-400 mb-20px">我的待办</div>
                <CountTo
                  class="text-20px number-font"
                  :start-val="0"
                  :end-val="waitCount.myAgentWorkNum"
                  :duration="2600"
                />
              </div>
            </div>
          </el-col>
        </el-row>
      </el-skeleton>
    </el-card>
  </div>
</template>
<script setup lang="ts" name="Home">
import { useUserStore } from '@/store/modules/user'
import avatarImg from '@/assets/imgs/avatar.gif'
import { getWaitCount } from '@/api/okr/wait'

const { t } = useI18n()
const userStore = useUserStore()
const router = useRouter() // 路由对象
const loading = ref(false)
const avatar = userStore.getUser.avatar ? userStore.getUser.avatar : avatarImg
const username = userStore.getUser.nickname

function getWaitTargetCount() {
  getWaitCount({}).then((res) => {
    waitCount.value = res
  })
}

const waitCount = ref({
  dayEndAgentWorkNum: 0,
  myAgentWorkNum: 0,
  urgeAgentWorkNum: 0,
  notifyNum: 0
})

const getAllApi = async () => {
  await getWaitTargetCount()
  loading.value = false
}

onMounted(() => {
  getAllApi()
})
</script>

<style lang="scss" scoped>
@font-face {
  font-family: numberFont;
  src: url('@/assets/fonts/DISPLAY FREE TFB.ttf');
}

.number-font {
  font-family: numberFont !important;
}

:deep(.el-card__header) {
  padding: 10px;
}
</style>
