<!--应用入口-->
<template>
  <card-widget :is-show-tab="false" :style="style">
    <template #header v-if="showHeaderFlag">
      <div style="display: flex; position: relative">
        <div style="flex: 1; display: flex; align-items: center">
          <span class="text_box">{{ title }}</span>
        </div>
      </div>
    </template>

    <template #body>
      <!--加载状态-->
      <a-spin :spinning="loading" style="position: absolute; left: 50%; top: 50%; z-index: 100"></a-spin>
      <a-row class="work-list">
        <a-col :span="6" class="work-item" v-for="(item, index) in workList" :key="item.key">
          <div class="work-item-box" :class="[{ 'border-r': [0, 1, 2].includes(index) }]">
            <img src="@/assets/api-modular/doc.svg" alt="" class="work-item-img" />
            <div class="work-item-right">
              <div class="work-item-number">{{ userNumberObj[item.key] }}</div>
              <div class="work-item-name">{{ item.name }}</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </template>
  </card-widget>
</template>

<script setup name="MonthWorkWidget">
import { ref, onMounted, onUnmounted } from 'vue';
import CardWidget from '@/views/home/components/card_widget.vue';
import { constant } from '@/views/portal/constant/constant';
import { FlowTaskApi } from '@/views/mid/workflow/task/list/api/FlowTaskApi';

const props = defineProps({
  widget: Object,
  // 组件名称
  widgetName: {
    type: String,
    default: constant.MONTH_WORK
  },
  // 组件id
  widgetId: {
    type: String,
    default: ''
  },
  /**
   * 是否是预览模式 表示不可点击
   */
  preview: {
    type: Boolean,
    default: false
  },
  // 门户设计id
  designId: String
});

// 标题
const title = ref(constant.MONTH_WORK);

// 加载状态
const loading = ref(false);

// 定时器  定时刷新待办列表
let taskListInterval = null;

const userNumberObj = ref({
  toDoTaskNumber: 0,
  toReadTaskNumber: 0,
  alreadyDoneTaskNumber: 0,
  alreadyReadTaskNumber: 0
});

const workList = ref([
  {
    key: 'toDoTaskNumber',
    name: '待办任务'
  },
  {
    key: 'toReadTaskNumber',
    name: '待阅任务'
  },
  {
    key: 'alreadyDoneTaskNumber',
    name: '已办任务'
  },
  {
    key: 'alreadyReadTaskNumber',
    name: '已阅任务'
  }
]);

const style = ref({});

const showHeaderFlag = ref(false);

/**
 * 获取详情
 */
const getDetail = async () => {
  userNumberObj.value = await FlowTaskApi.getUserTotalTaskNum();
};

/**
 * 更新组件
 */
const updateWidget = () => {
  if (props.widgetName) {
    title.value = props.widgetName;
  }
  if (props.widget?.param) {
    title.value = props.widget?.param?.elementName;
    if (props.widget?.param?.config) {
      const { showHeader, borderLeft, borderRight, borderTop, borderBottom } = props.widget?.param?.config;
      showHeaderFlag.value = showHeader;
      style.value = {
        'border-left': borderLeft,
        'border-right': borderRight,
        'border-top': borderTop,
        'border-bottom': borderBottom
      };
    }
  }
  // 获取组件应用分类渲染
  getDetail();
};

onMounted(() => {
  updateWidget();

  if (!props.preview) {
    // 定时器 5秒刷新
    taskListInterval = setInterval(getDetail, 60 * 1000);
  }
});

onUnmounted(() => {
  // 页面卸载 清除定时器
  if (taskListInterval) {
    clearInterval(taskListInterval);
  }
});

defineExpose({
  updateWidget
});
</script>

<style scoped lang="less">
:deep(.card-header) {
  margin-bottom: 12px;
}
.work-list {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  border: 1px solid rgba(197, 207, 209, 0.4);

  .work-item {
    display: flex;
    align-items: center;
    padding-left: 24px;

    .work-item-box {
      width: 100%;
      height: 48px;
      display: flex;
      align-items: center;
    }
    .border-r {
      border-right: 1px solid #eee;
    }

    .work-item-img {
      width: 48px;
      height: 48px;
      margin-right: 16px;
    }

    .work-item-right {
      width: calc(100% - 64px);
      overflow: hidden;

      .work-item-number {
        color: #0f56d7;
        font-size: 20px;
      }
      .work-item-name {
        color: #60666b;
        font-size: 14px;
      }
    }
  }
}
</style>
