<template>
  <PageWrapper :class="prefixCls">
    <div :class="`${prefixCls}__content`" v-for="item in cardList">
      <div :class="`${prefixCls}__list-title`">{{item.category}}【{{item.data.length}}】</div>
      <List>
        <Row :gutter="16">
          <template v-for="itemchild in item.data" :key="item.id">
            <Col :span="6">
            <List.Item>
              <Card :hoverable="true" :class="`${prefixCls}__card`" @click="launch(itemchild.code)">
                <div :class="`${prefixCls}__card-title`">
                  <Icon class="icon" v-if="itemchild.icon" :icon="itemchild.icon" :color="itemchild.color" />
                  {{ itemchild.name }}
                </div>
              </Card>
            </List.Item>
            </Col>
          </template>
        </Row>
      </List>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue'
  import Icon from '@/components/Icon/Icon.vue';
  import { PageWrapper } from '@/components/Page';
  import { Card, Row, Col, List } from 'ant-design-vue';
  import { getInfoList } from '@/api/sys/WFSchemeInfo.ts'
  import { useGo } from '@/hooks/web/usePage';
  const go = useGo();
  const prefixCls = 'list-card';
  let cardList = ref()
  function launch(code){
    go('/dashboard/create_preview/add?code='+code);
  }
  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 = {};
      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;

    &__list-title {
      cursor: default;
      height: 32px;
      line-height: 17px;
      padding-top: 16px;
      color: @text-color-base;
      font-size: 16px;
      font-weight: 500;
    }

    &__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;

        .icon {
          margin-top: -5px;
          margin-right: 10px;
          font-size: 38px !important;
        }
      }

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

    ::v-deep .ant-list-item {
      padding: 12px 2px;
    }
  }
</style>