<template>
  <ResizePageWrapper>
    <template #resizeLeft>
      <BasicTree
        search
        :title="t('流程模板分类')"
        :clickRowToExpand="true"
        :treeData="data.treeData"
        :selectedKeys="[data.selectDeptId]"
        :fieldNames="{ key: 'id', title: 'name' }"
        @select="handleSelect"
      />
    </template>
    <template #resizeRight>
      <PageLayout
        :layoutClass="
          currentRoute.path == '/workflow/launch'
            ? ''
            : currentRoute.path == '/task/processtasks'
            ? '!p-0  '
            : ''
        "
        :title="t('流程模板列表')"
        :searchConfig="searchConfig"
        @search="search"
        @scroll-height="scrollHeight"
      >
        <template #search> </template>

        <template #right>
          <div v-if="data.list.length > 0" class="list-page-box relative">
            <div
              class="flex flex-wrap my-10px overflow-y-auto"
              style="height: calc(100% - 62px); align-content: baseline"
            >
              <TemplateCard
                v-for="(item, index) in data.list"
                :key="index"
                :item="item"
                :width="
                  currentRoute.path == '/task/processtasks'
                    ? 'calc((100% - 30px) / 3)'
                    : 'calc((100% - 39px) / 4)'
                "
                @click="launchProcess(item.id)"
              />
            </div>
            <div class="page-box">
              <a-pagination
                v-model:current="data.pagination.current"
                :total="data.pagination.total"
                v-model:pageSize="data.pagination.pageSize"
                :showSizeChanger="true"
                :showQuickJumper="true"
                :show-total="(total) => t(`共 {total} 条数据`, { total })"
                @change="getList"
            /></div>
          </div>

          <div v-else>
            <EmptyBox />
          </div>
          <LaunchProcess
            v-if="visibleLaunchProcess"
            :schemaId="data.schemaId"
            @close="visibleLaunchProcess = false"
          />
        </template>
      </PageLayout>
    </template>
  </ResizePageWrapper>
</template>

<script setup lang="ts">
  import { onMounted, reactive, ref, unref, watch } from 'vue';
  import TemplateCard from '/@bpmn/components/card/TemplateCard.vue';
  import { EmptyBox } from '/@/components/ModalPanel/index';
  import { getDesignPage } from '/@/api/workflow/design';
  import { WorkflowPageModel } from '/@/api/workflow/model';
  import { getDicDetailList } from '/@/api/system/dic';
  import { BasicTree, TreeItem } from '/@/components/Tree';
  import { PageLayout } from '/@/components/ModalPanel';
  import LaunchProcess from './components/LaunchProcess.vue';
  import { FlowCategory } from '/@/enums/workflowEnum';
  import userTableScrollHeight from '/@/hooks/setting/userTableScrollHeight';
  import { useRouter } from 'vue-router';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { ResizePageWrapper } from '/@/components/Page';
  const { t } = useI18n();
  const { currentRoute } = useRouter();
  const searchConfig = [
    {
      field: 'code',
      label: t('模板编码'),
      type: 'input',
    },
    {
      field: 'name',
      label: t('模板名称'),
      type: 'input',
    },
  ];
  const { scrollHeight } = userTableScrollHeight();
  let visibleLaunchProcess = ref(false);
  let data: {
    list: Array<WorkflowPageModel>;
    treeData: Array<TreeItem>;
    schemaId: string;
    selectDeptId: string;
    pagination: { current: number; total: number; pageSize: number };
  } = reactive({
    list: [],
    treeData: [],
    schemaId: '',
    selectDeptId: '',
    pagination: {
      current: 1,
      total: 0,
      pageSize: 20,
    },
  });

  watch(
    () => unref(currentRoute),
    (val) => {
      if (val.path == '/workflow/launch') {
        getCategoryTree();
        init();
      }
    },
    { deep: true },
  );
  onMounted(() => {
    getCategoryTree();
    init();
  });
  async function init() {
    data.pagination.current = 1;
    data.pagination.total = 0;
    data.selectDeptId = '';
    await getList();
  }
  async function getCategoryTree() {
    let res = (await getDicDetailList({
      itemId: FlowCategory.ID,
    })) as unknown as TreeItem[];
    data.treeData = res.map((ele) => {
      ele.icon = 'ant-design:tags-outlined';
      return ele;
    });
    data.treeData.unshift({
      key: '',
      id: '',
      name: '全部',
      icon: 'ant-design:tags-outlined',
    });
  }
  async function getList(params?: any) {
    const searchParams = {
      ...{
        limit: data.pagination.current,
        size: data.pagination.pageSize,
      },
      ...{ category: data.selectDeptId },
      ...params,
      ...{ enabledMark: 1 }, // 流程发起list 需要隐藏 禁用的模板[enabledMark=1]
    };

    try {
      let res = await getDesignPage(searchParams);
      data.pagination.total = res.total;
      data.list = res.list;
    } catch (error) {}
  }

  function handleSelect(deptIds) {
    data.selectDeptId = deptIds[0];
    getList();
  }
  async function launchProcess(id: string) {
    data.schemaId = id;
    visibleLaunchProcess.value = true;
  }
  function search(params: any) {
    data.pagination.current = 1;
    getList(params);
  }
</script>
<style lang="less" scoped>
  .list-page-box {
    height: calc(100% - 62px);
  }

  .page-box {
    height: 52px;
    border-top: 1px solid rgb(238 238 238 / 93%);
    text-align: right;
    padding: 10px 16px;
    background: #fff;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 16px;
  }
</style>
