<template>
  <PageWrapper :class="prefixCls">
    <div :class="`${prefixCls}__content`" v-for="(item, index) in cardList" :key="index">
      <div :class="`${prefixCls}__list-title`">
        <a-divider type="vertical" />{{ item.category }}【{{ item.data.length }}】</div
      >
      <a-list>
        <a-row :gutter="16">
          <template v-for="itemchild in item.data" :key="itemchild.id">
            <a-col :span="6">
              <a-list-item>
                <a-card
                  :hoverable="true"
                  :class="`${prefixCls}__card`"
                  @click="launch(itemchild.code)"
                >
                  <div :class="`${prefixCls}__card-title`" :title="itemchild.name">
                    <Icon
                      class="icon"
                      v-if="itemchild.icon"
                      :icon="itemchild.icon"
                      :color="itemchild.color"
                    />
                    <span>
                      {{ itemchild.name }}
                    </span>
                  </div>
                </a-card>
              </a-list-item>
            </a-col>
          </template>
        </a-row>
      </a-list>
    </div>
    <a-modal
      width="100%"
      wrap-class-name="full-modal"
      v-model:open="previewOpen"
      title="流程发起"
      :destroyOnClose="true"
    >
      <template #footer> </template>
      <Preview ref="posRef" :code="code" @closeModel="closeMolder"></Preview>
    </a-modal>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { Icon } from '@/components/Icon/index';
  import { PageWrapper } from '@/components/Page';
  import { getInfoList } from '@/api/sys/WFSchemeInfo';
  import { Preview } from './index';
  const prefixCls = 'list-card';
  let cardList = ref();
  const previewOpen = ref(false);
  const code = ref('');
  function launch(val) {
    previewOpen.value = true;
    code.value = val;
    // go('/dashboard/create_preview/add?code=' + code);
  }
  function closeMolder() {
    previewOpen.value = false;
  }
  async function getList() {
    let data = await getInfoList({});
    let newArr = {};
    data.map((item) => {
      newArr[item.category] = newArr[item.category] || []; //给category(可自行更换字段如name、sex等，根据自己的数据结构和需求)后加一个[]中括号
      newArr[item.category].push(item); //将所有的item列放入到对应的category中
    });
    let list = [];
    Object.keys(newArr).forEach((v) => {
      let obj: any = {};
      obj.category = v;
      obj.data = newArr[v];
      list.push(obj);
    });
    cardList.value = list;
  }
  onMounted(() => {
    getList();
  });
</script>
<style lang="less" scoped>
  .list-card {
    // background-color: @component-background;
    overflow: scroll;
    &__content {
      background-color: @component-background;
      margin-bottom: 20px;
      padding: 20px 10px;
    }
    .ant-list {
      padding: 10px 20px;
    }
    &__list-title {
      cursor: default;
      height: 32px;
      line-height: 17px;
      padding-top: 16px;
      color: @text-color-base;
      font-size: 16px;
      font-weight: 500;
      .ant-divider-vertical {
        height: 1.4em;
        border-inline-start: 3px solid #1f78ff;
      }
    }

    &__card {
      width: 100%;
      margin-bottom: -8px;

      .ant-card-body {
        padding: 16px;
      }

      &-title {
        margin-bottom: 5px;
        color: @text-color-base;
        font-size: 16px;
        font-weight: 500;
        display: flex;
        align-items: center;

        .icon {
          margin-right: 10px;
          // font-size: 30px !important;
        }
        ::v-deep span {
          font-size: 16px;
        }
      }

      &-detail {
        padding-top: 10px;
        padding-left: 30px;
        color: @text-color-secondary;
        font-size: 14px;
      }
    }

    ::v-deep .ant-list-item {
      padding: 12px 2px;
    }
  }
  ::v-deep .anticon svg {
    width: 2em;
    height: 2em;
  }
</style>
<style lang="less">
  .full-modal {
    .ant-modal {
      max-width: 100%;
      top: 0;
    }

    .ant-modal-content {
      height: calc(100vh);
    }

    .ant-modal-body {
      height: 85%;
    }
  }
</style>
