<template>
  <div class="message-reminder flex flex-col h-full">
    <div class="page-action">
      <div
        v-for="item in tabs"
        :key="item.value"
        :class="[
          'page-tab',
          { 'is-active': params.flowTaskTypeEnum === item.value },
        ]"
        @click="switchTab(item)"
        >{{ item.label }}</div
      >
    </div>
    <SearchForm :fields="fields" :params="params" :search="search">
      <template #service="{ item, params }">
        <select-service-unit
          v-model="params[item.prop]"
          clearable
        ></select-service-unit>
      </template>
    </SearchForm>
    <div v-loading="loading" class="page-wrap flex-1">
      <TaskList
        :tableData="tableData"
        :pagination="pagination"
        @success="taskModified"
      ></TaskList>
    </div>
  </div>
</template>

<script setup name="MyTasks">
import { reactive, ref } from 'vue';
import useFetchTable from '@/hooks/useFetchTable';
import { getMyWaits } from '@/api/my-workbenches';
import { WAIT_HANDLE_TYPE } from '@/config/constants';
import { dictToOptionList } from '@/utils/tool';
import TaskList from './waits-list.vue';
import { useWorkStore } from '@/store';
const workStore = useWorkStore();

const tabs = [
  {
    label: '全部',
    value: 'ALL',
  },
  {
    label: '已超时',
    value: 'OVER_TIME',
  },
  {
    label: '暂存',
    value: 'DRAFT',
  },
];

const params = reactive({
  type: '',
  serviceId: '',
  customName: '',
  flowTaskTypeEnum: 'ALL',
});

const {
  loading: loading,
  pagination: pagination,
  tableData: tableData,
  fetchData,
  search: search,
} = useFetchTable(getMyWaits, {
  params: params,
});

const switchTab = (tab) => {
  params.flowTaskTypeEnum = tab.value;
  search();
};
const fields = ref([
  {
    prop: 'type',
    label: '待办类型',
    type: 'select',
    labelWidth: 70,
    colSpan: 5,
    options: dictToOptionList(WAIT_HANDLE_TYPE),
    attrs: {
      clearable: true,
    },
  },
  {
    prop: 'serviceId',
    label: '服务单元',
    type: 'select',
    labelWidth: 100,
    colSpan: 5,
    cell: 'service',
  },
  {
    prop: 'customName',
    label: '客户名称',
    labelWidth: 100,
    colSpan: 5,
  },
  {
    type: 'buttons',
    colSpan: 3,
    children: [
      {
        type: 'button',
        text: '搜索',
        onClick: () => {
          search();
        },
      },
    ],
  },
]);

const taskModified = () => {
  fetchData();
  workStore.updateWorkCounts();
};
</script>
