<template>
  <div class="ele-body ele-body-card">
    <a-row :gutter="16">
      <a-col v-bind="styleResponsive ? { md: 6, sm: 24, xs: 24 } : { span: 8 }">
        <a-card class="analysis-chart-card" :bordered="false">
          <div class="ele-text-secondary ele-cell">
            <div class="ele-cell-content">待处理</div>
          </div>
          <h1 class="ele-text-danger">
            {{ pendingCount }}
          </h1>
        </a-card>
      </a-col>
      <a-col v-bind="styleResponsive ? { md: 6, sm: 24, xs: 24 } : { span: 8 }">
        <a-card class="analysis-chart-card" :bordered="false">
          <div class="ele-text-secondary ele-cell">
            <div class="ele-cell-content">今日处理</div>
            <ele-tag color="red">日</ele-tag>
          </div>
          <h1 class="analysis-chart-card-num">{{ todayCount }}</h1>
        </a-card>
      </a-col>
      <a-col v-bind="styleResponsive ? { md: 6, sm: 24, xs: 24 } : { span: 8 }">
        <a-card class="analysis-chart-card" :bordered="false">
          <div class="ele-text-secondary ele-cell">
            <div class="ele-cell-content">本月处理</div>
            <ele-tag color="blue">月</ele-tag>
          </div>
          <h1 class="analysis-chart-card-num">{{ monthCount }}</h1>
        </a-card>
      </a-col>
      <a-col v-bind="styleResponsive ? { md: 6, sm: 24, xs: 24 } : { span: 8 }">
        <a-card class="analysis-chart-card" :bordered="false">
          <div class="ele-text-secondary ele-cell">
            <div class="ele-cell-content">今年处理</div>
            <ele-tag color="green">年</ele-tag>
          </div>
          <h1 class="analysis-chart-card-num">{{ yearCount }}</h1>
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="16">
      <a-col
        v-bind="
          styleResponsive
            ? { xl: 12, lg: 12, md: 12, sm: 12, xs: 24 }
            : { span: 6 }
        "
      >
        <CountPendingAll />
      </a-col>
      <a-col
        v-bind="
          styleResponsive
            ? { xl: 6, lg: 24, md: 24, sm: 24, xs: 24 }
            : { span: 12 }
        "
      >
        <CountRate />
      </a-col>
      <a-col
        v-bind="
          styleResponsive
            ? { xl: 6, lg: 12, md: 12, sm: 12, xs: 24 }
            : { span: 6 }
        "
      >
        <CountSatisfaction />
      </a-col>
      <a-col
        v-bind="
          styleResponsive
            ? { xl: 6, lg: 12, md: 12, sm: 12, xs: 24 }
            : { span: 6 }
        "
      >
        <Qrcode />
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
  import { useThemeStore } from '@/store/modules/theme';
  import { storeToRefs } from 'pinia';
  import CountSatisfaction from './components/count-satisfaction.vue';
  import CountRate from './components/count-rate.vue';
  import CountPendingAll from './components/count-pending-all.vue';
  import Qrcode from './components/qrcode.vue';
  import { pageTask } from '@/api/oa/task';
  import { ref } from 'vue';
  import { useUserStore } from '@/store/modules/user';

  // 是否开启响应式布局
  const themeStore = useThemeStore();
  const { styleResponsive } = storeToRefs(themeStore);
  // 当前登录用户
  const userStore = useUserStore();
  const { info } = storeToRefs(userStore);
  const pendingCount = ref(0);
  const pendingAllCount = ref(0);
  const todayCount = ref(0);
  const monthCount = ref(0);
  const yearCount = ref(0);

  const queryTaskCount = () => {
    if (info.value?.roles) {

    }
    const userId = info.value?.userId;
    pageTask({ status: 0, userId }).then((res) => {
      if (res) {
        pendingCount.value = res.count;
      }
    });
    pageTask({ status: 0 }).then((res) => {
      if (res) {
        pendingAllCount.value = res.count;
      }
    });
    pageTask({}).then((res) => {
      if (res) {
        todayCount.value = res.count;
      }
    });
    pageTask({}).then((res) => {
      if (res) {
        monthCount.value = res.count;
      }
    });
    pageTask({}).then((res) => {
      if (res) {
        yearCount.value = res.count;
      }
    });
  };
  queryTaskCount();
</script>

<script lang="ts">
  export default {
    name: 'CountIndex'
  };
</script>

<style lang="less" scoped>
  .a-cursor {
    cursor: pointer;
  }
</style>
