<template>
  <a-row :gutter="16">
    <a-col v-bind="styleResponsive ? { md: 6, sm: 12, xs: 12 } : { span: 8 }">
      <a-card
        class="analysis-chart-card"
        style="align-items: flex-start; justify-content: start"
        :bordered="false"
      >
        <div class="ele-text-secondary ele-cell">
          <div class="ele-cell-content"> 待处理 </div>
          <ele-tag
            color="orange"
            v-if="hasRole('superAdmin') || hasRole('admin')"
            >管理员</ele-tag
          >
          <ele-tag color="orange" v-else-if="hasRole('commander')"
            >受理人员</ele-tag
          >
          <ele-tag color="orange" v-else>我</ele-tag>
        </div>
        <h1 class="ele-text-danger">{{ form.pending }}</h1>
      </a-card>
    </a-col>
    <!--    <a-col v-bind="styleResponsive ? { md: 6, sm: 12, xs: 12 } : { 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">-->
    <!--          {{ form.pending }}-->
    <!--        </h1>-->
    <!--      </a-card>-->
    <!--    </a-col>-->
    <a-col v-bind="styleResponsive ? { md: 6, sm: 12, xs: 12 } : { 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">{{ form.today }}</h1>
      </a-card>
    </a-col>
    <a-col v-bind="styleResponsive ? { md: 6, sm: 12, xs: 12 } : { 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">{{ form.month }}</h1>
      </a-card>
    </a-col>
    <a-col v-bind="styleResponsive ? { md: 6, sm: 12, xs: 12 } : { 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">{{ form.year }}</h1>
      </a-card>
    </a-col>
  </a-row>
</template>

<script setup lang="ts">
  // 是否开启响应式布局
  import { useThemeStore } from '@/store/modules/theme';
  import { storeToRefs } from 'pinia';
  import useFormData from '@/utils/use-form-data';
  import { TaskCount } from '@/api/oa/task-count/model';
  import { pageTaskCount } from '@/api/oa/task-count';
  import { useUserStore } from '@/store/modules/user';
  import { hasRole } from '@/utils/permission';
  import useSearch from '@/utils/use-search';

  // 是否开启响应式布局
  const themeStore = useThemeStore();
  const { styleResponsive } = storeToRefs(themeStore);
  // 当前登录用户
  const userStore = useUserStore();
  // 用户信息
  const { form, assignFields } = useFormData<TaskCount>({
    pending: 0,
    unused: 0,
    today: 0,
    month: 0,
    year: 0,
    total: 0,
    userId: undefined
  });

  // 表单数据
  const { where } = useSearch<TaskCount>({
    userId: undefined
  });

  const queryTaskCount = () => {
    // 搜索条件
    where.userId = userStore.info?.userId;
    // 管理人员
    if (hasRole('superAdmin') || hasRole('admin')) {
      where.commander = undefined;
    }
    // 技术人员
    if (hasRole('commander')) {
      where.commander = userStore.info?.userId;
    }
    pageTaskCount(where).then((res) => {
      res?.list.map((d) => {
        assignFields(d);
      });
    });
  };
  queryTaskCount();
</script>

<style scoped lang="less">
  .user-info {
  }
</style>
