<template>
  <div class="box" v-if="data.show">
    <div class="item-title">
      <span>{{ props.title }}</span>
      <router-link :to="config.path">{{ t('更多') }}</router-link>
    </div>
    <EmptyBox v-if="data.list.length == 0" />
    <div class="list-box" v-else>
      <div class="row" v-for="(item, index) in data.list" :key="index" @click="selectRow(item)"
        ><div class="item"
          >{{ item.startUserName }}-{{ item.taskName
          }}{{ item.summaryInfo ? '--' + item.summaryInfo : '' }}</div
        ><div class="item">{{ item.startTime }}</div></div
      >
    </div>
    <ApprovalProcess
      v-if="data.showApproval"
      :taskId="data.taskId"
      :processId="data.processId"
      :schemaId="data.schemaId"
      @close="modelClose"
      :visible="data.showApproval"
    />
  </div>
</template>

<script setup lang="ts">
  import { todoListProperties } from '../config/properties';
  import { getTasks } from '/@/api/workflow/process';
  import { DesktopComponent } from '/@/enums/desktop';
  import { TaskTypeUrl } from '/@/enums/workflowEnum';
  import { EmptyBox } from '/@/components/ModalPanel/index';
  import { TodoListConfig } from '/@/model/desktop/designer';
  import ApprovalProcess from '/@/views/workflow/task/components/ApprovalProcess.vue';
  import { reactive, onMounted, watch, inject } from 'vue';
  import { TasksModel } from '/@/api/workflow/model';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  const canResizeLayout = inject('canResizeLayout') as any;
  const props = withDefaults(
    defineProps<{
      type: DesktopComponent;
      w: number;
      h: number;
      title: string;
      config: TodoListConfig;
    }>(),
    {
      type: DesktopComponent.DEFAULT,
      w: 0,
      h: 0,
      config: () => {
        return todoListProperties;
      },
    },
  );
  const data: {
    show: boolean;
    showApproval: boolean;
    taskId: string;
    processId: string;
    schemaId: string;
    list: Array<TasksModel>;
  } = reactive({
    show: false,
    showApproval: false,
    taskId: '',
    processId: '',
    schemaId: '',
    list: [],
  });
  watch(
    () => props.config.renderKey,
    (val) => {
      val && resizeLayout();
    },
    {
      deep: true,
    },
  );
  async function resizeLayout() {
    await getList();
  }
  onMounted(async () => {
    await getList();
    data.show = true;
  });
  async function getList() {
    const searchParams = {
      ...{
        limit: 1,
        size: props.config.maxRows,
      },
    };
    const res = await getTasks(TaskTypeUrl.PENDING_TASKS, searchParams);
    data.list = res.list;
  }
  function selectRow(row: TasksModel) {
    data.taskId = row.taskId;
    data.processId = row.processId;
    data.schemaId = row.schemaId;
    data.showApproval = true;
    canResizeLayout(false);
  }
  function modelClose() {
    data.showApproval = false;
    canResizeLayout(true);
  }
</script>

<style lang="less" scoped>
  .box {
    padding-top: 40px;

    .item-title {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 40px;
      line-height: 40px;
      color: #262626;
      font-size: 14px;
      padding: 0 16px;
      display: flex;
      justify-content: space-between;

      .more {
        color: #5e95ff;
      }
    }

    .item-title::after {
      content: '';
      display: block;
      position: absolute;
      height: 1px;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #f0f0f0;
    }

    .list-box {
      overflow-y: scroll;
      height: 100%;

      .row {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #f0f0f0;
        cursor: pointer;
        color: #595959;
        font-size: 14px;

        .item {
          padding: 4px 10px;
        }
      }
    }
  }
</style>
