<template>
  <a-card :title="title" :bordered="false" :body-style="{ padding: '2px' }">
    <template #extra
      ><a @click="openUrl('/oa/app/index')" class="ele-text-placeholder"
        >更多<RightOutlined /></a
    ></template>
    <a-list :size="`small`" :split="false" :data-source="list">
      <template #renderItem="{ item }">
        <a-list-item>
          <div class="app-box">
            <a-image
              :height="45"
              :width="45"
              :preview="false"
              :src="item.appIcon"
              fallback="https://file.wsdns.cn/20230218/550e610d43334dd2a7f66d5b20bd58eb.svg"
            />
            <div class="app-info">
              <a
                class="ele-text-heading"
              >
                {{ item.appName }}
              </a>
              <span class="ele-text-placeholder">
                {{ item.appCode }}
              </span>
            </div>
          </div>
        </a-list-item>
      </template>
    </a-list>
  </a-card>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Article } from '@/api/cms/article/model';
  import { openUrl } from '@/utils/common';
  import { pageApp } from '@/api/oa/app';
  import { RightOutlined } from '@ant-design/icons-vue';

  const props = defineProps<{
    title: string;
  }>();

  const list = ref<Article[]>([]);
  /**
   * 加载数据
   */
  const reload = () => {
    const { title } = props;
    // 加载文章列表
    pageApp({
      limit: 5,
      status: 0,
      appStatus: '开发中'
    }).then((data) => {
      if (data?.list) {
        list.value = data.list;
      }
    });
  };
  reload();
</script>

<script lang="ts">
  export default {
    name: 'DashboardArticleList'
  };
</script>

<style lang="less" scoped>
  .app-box {
    display: flex;
    .app-info {
      display: flex;
      margin-left: 5px;
      flex-direction: column;
    }
  }
</style>
