<template>
  <div>
    <div @click="show"> <slot></slot></div>
    <ModalPanel
      :visible="visible"
      :width="1200"
      :title="t('添加流程')"
      leftWidth="200px"
      @submit="submit"
      @close="close"
    >
      <template #left>
        <CategoryTree @select="handleSelect" :selectIds="[category]" />
      </template>
      <div class="relative h-full">
        <div
          class="flex items-center justify-between px-4 h-50px"
          style="border-bottom: 1px solid #eee"
        >
        </div>
        <div class="absolute top-2 flex items-center"
          ><SearchBox @search="searchList" /><div class="h-6 pr-4"></div
        ></div>
        <div class="list-page-box" v-if="template.list.length > 0">
          <TemplateCard
            :class="selectIds.includes(item.id) ? 'picked' : 'not-picked'"
            v-for="(item, index) in template.list"
            :key="index"
            :item="item"
            width="312px"
            @click="checked(item)"
          >
            <template #pick>
              <a-checkbox size="small" :checked="selectIds.includes(item.id)" />
            </template>
          </TemplateCard>
          <div class="page-box">
            <a-pagination
              v-model:current="page.current"
              v-model:pageSize="page.pageSize"
              :total="page.total"
              show-less-items
              show-size-changer
              show-quick-jumper
              :show-total="(total) => t(`共 ${total} 条数据`)"
              @change="getList"
          /></div>
        </div>
        <EmptyBox v-else />
      </div>
    </ModalPanel>
  </div>
</template>

<script setup lang="ts">
  import { computed, reactive, ref } from 'vue';
  import CategoryTree from '/@bpmn/components/CategoryTree.vue';
  import TemplateCard from '/@bpmn/components/card/TemplateCard.vue';
  import { ModalPanel, EmptyBox, SearchBox } from '/@/components/ModalPanel/index';
  import { RelationProcessConfig } from '/@/model/workflow/workflowConfig';
  import { getDesignPage } from '/@/api/workflow/design';
  import { WorkflowPageModel } from '/@/api/workflow/model';
  import { cloneDeep } from 'lodash-es';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  const emits = defineEmits(['change']);

  const props = withDefaults(
    defineProps<{
      list: Array<RelationProcessConfig>;
    }>(),
    {
      list: () => {
        return [];
      },
    },
  );
  const visible = ref(false);

  let category = ref('');

  let template: {
    list: Array<WorkflowPageModel>;
    selected: Array<RelationProcessConfig>;
    keyword: string;
  } = reactive({ list: [], selected: [], keyword: '' });

  let page: { current: number; total: number; pageSize: number } = reactive({
    current: 1,
    total: 0,
    pageSize: 9,
  });

  async function show() {
    page.current = 1;
    page.total = 0;
    category.value = '';
    template.selected = [];
    if (props.list.length > 0) {
      template.selected = cloneDeep(props.list).filter((ele) => {
        return ele.id;
      });
    }
    await getList();
    visible.value = true;
  }
  let selectIds = computed(() => {
    if (template.selected && template.selected.length > 0) {
      return template.selected.map((ele: RelationProcessConfig) => {
        return ele.id;
      });
    }
    return [];
  });
  async function getList() {
    try {
      let params = {
        limit: page.current,
        size: page.pageSize,
        category: category.value,
        keyword: template.keyword,
        enabledMark: 1,
      };
      let res = await getDesignPage(params);
      page.total = res.total;
      template.list = res.list;
    } catch (error) {}
  }
  function submit() {
    emits('change', template.selected);
    close();
  }
  function close() {
    template.list = [];
    visible.value = false;
  }
  function handleSelect(deptId = '') {
    category.value = deptId;
    getList();
  }
  function checked(item: WorkflowPageModel) {
    if (selectIds.value.includes(item.id)) {
      template.selected = [];
    } else {
      template.selected = [
        {
          name: item.name,
          id: item.id,
          code: item.code,
        },
      ];
    }
  }
  function searchList(searchKeywords: string) {
    template.keyword = searchKeywords;
    getList();
  }
</script>
<style scoped lang="less">
  :deep(.list-item) {
    margin: 16px 0 0 16px;
    border-color: #ddd;

    .item-box .fixed-checked {
      position: absolute;
      right: 16px;
      bottom: 10px;
    }

    &.picked {
      border-color: @primary-color;
    }
  }
</style>
