<template>
  <div ref="drawer">
    <div
      class="flex items-center justify-between px-4 h-50px"
      style="border-bottom: 1px solid #eee"
    >
      <NodeHead :node-name="t('流程模板列表')" />
      <a-button class="w-102px !p-0 !rounded" @click="open">{{ t('已选流程模板') }}</a-button>
    </div>
    <a-drawer
      v-if="data.visible"
      placement="top"
      :visible="data.visible"
      :getContainer="() => $refs.drawer"
      :closable="false"
      :mask="false"
      :zIndex="1000"
      :bodyStyle="{
        padding: 0,
      }"
      height="100%"
    >
      <div
        class="flex items-center justify-between px-4 h-50px"
        style="border-bottom: 1px solid #eee"
      >
        <NodeHead :node-name="t('已选流程模板列表')" />
        <div class="close-icon" @click="close">+</div>
      </div>
      <div class="absolute top-2 right-12 flex items-center"
        ><SearchBox @search="search" /><div
          class="h-6 pr-4"
          style="border-right: 1px solid #ddd"
        ></div
      ></div>

      <div class="list-box" v-if="data.list && data.list.length > 0">
        <TemplateCard
          class="picked"
          v-for="(item, index) in data.list"
          :key="index"
          :item="item"
          width="312px"
          @click="listChecked(item)"
        >
          <template #pick> <a-checkbox size="small" :checked="true" /> </template
        ></TemplateCard>
      </div>
      <EmptyBox v-else />
    </a-drawer>
  </div>
</template>

<script setup lang="ts">
  import { reactive, watch } from 'vue';
  import { NodeHead, EmptyBox, SearchBox } from '/@/components/ModalPanel/index';
  import TemplateCard from '/@bpmn/components/card/TemplateCard.vue';
  import { cloneDeep } from 'lodash-es';
  import { RelationProcessConfig } from '/@/model/workflow/workflowConfig';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  let emits = defineEmits(['change']);
  const props = withDefaults(
    defineProps<{
      list: Array<RelationProcessConfig>;
    }>(),
    {
      list: () => {
        return [];
      },
    },
  );

  let data: {
    visible: Boolean;
    list: Array<RelationProcessConfig>;
    keyword: string;
  } = reactive({
    visible: false,
    list: [],
    keyword: '',
  });

  watch(props, (val) => {
    data.list = cloneDeep(val.list);
  });

  function open() {
    data.list = cloneDeep(props.list);
    data.visible = true;
  }
  function close() {
    data.visible = false;
  }
  function search(keyword = '') {
    data.keyword = keyword;
    data.list = cloneDeep(
      props.list.filter((ele) => {
        return ele.name.includes(data.keyword);
      }),
    );
  }
  function listChecked(item) {
    emits('change', item);
  }
</script>

<style scoped lang="less">
  :deep(.ant-drawer-content-wrapper) {
    width: 100% !important;
    box-shadow: -4px 4px 12px 0 rgb(0 0 0 / 15%);
  }

  :deep(.ant-drawer-open) {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 2;
  }

  .picked {
    border-width: 1px;
    border-style: solid;
    border-color: @primary-color;
  }
</style>
