<template>
  <div>
    <BasicTable @register="registerTable" :searchInfo="searchInfo">
      <template #toolbar>
        <PermissionBtn @btnEvent="onBtnClicked"></PermissionBtn>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'reciveUserId'">
          {{ getUserNameById(record.reciveUserId) }}
        </template>
        <template v-if="column.key === 'action'">
          <a-button type="link" @click="handleDetail(record)">查看详情</a-button>
        </template>
      </template>
    </BasicTable>
    <a-modal title="任务详情" v-model:open="openForm" :footer="null" :width="1200">
      <Detail :modalDetail="modalDetail" />
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
  import { onMounted } from 'vue';
  import { reactive, h, ref } from 'vue';
  import { BasicTable, useTable } from '@/components/Table';
  import { PermissionBtn } from '@/components/PermissionBtn/index';
  import { PersonTaskLoad, PersonTaskGetTaskDetail, LoadAllUsers } from '@/api/task/index';
  import Detail from './detail.vue';
  import { columns, searchFormSchema } from './index';
  import { useMessage } from '@/hooks/web/useMessage';
  const { createMessage } = useMessage();

  // 本组任务列表-----------------------------------------------------------------
  const searchInfo = reactive<Recordable>({});
  const [registerTable, { getSelectRows }] = useTable({
    api: PersonTaskLoad,
    title: '本组任务列表',
    columns: columns,
    useSearchForm: true,
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
    rowKey: 'taskGroupId',
    rowSelection: {
      type: 'radio',
    },
    showTableSetting: true,
    bordered: true,
    beforeFetch(info) {
      // 接受人
      if (allUsers.value?.length == 0) {
        LoadAllUsers().then((res) => {
          allUsers.value = res.items;
          // console.log(allUsers.value);
          allUsers.value.push({ id: '-1', name: '超级管理员' });
          return info;
        });
      }
    },
  });

  // 任务详情-----------------------------------------------------------------
  // 任务详情-窗口是否显示
  const openForm = ref(false);
  // 任务详情-窗口打开
  const modalDetail: any = ref();
  async function handleDetail(value) {
    let record: any;
    if (value) {
      record = value;
    } else {
      let rows = getSelectRows();
      if (rows.length == 0) {
        return createMessage.warn('请选择一个任务进行查看');
      }
      record = rows[0];
    }
    PersonTaskGetTaskDetail({ taskGroupId: record.taskGroupId }).then((res) => {
      if (res) {
        modalDetail.value = res;
        modalDetail.value.reciveUser = getUserNameById(record.reciveUserId);
        openForm.value = true;
      }
    });
  }

  // 接受人-----------------------------------------------------------------
  const allUsers: any = ref([]);
  function getUserNameById(id) {
    return allUsers.value.find((user) => {
      return user.id == id;
    })?.name;
  }

  // 按钮-----------------------------------------------------------------
  function onBtnClicked(domId) {
    switch (domId) {
      case 'btnDetail':
        handleDetail(null);
        break;
      default:
        break;
    }
  }
</script>
<style lang="less">
  .modalDetail {
    margin: 10px;
  }
</style>
