<template>
  <a-list :bordered="false" :max-height="480" :scrollbar="false">
    <a-list-item
      v-for="item in renderList"
      :key="item.id"
      :style="{
        padding: '8px 15px'
      }"
    >
      <a-list-item-meta>
        <template #avatar>
          <icon-font
            v-if="item.process_type === 1"
            type="my-to-be-done"
            :size="60"
          />
          <icon-font v-else type="my-to-be-read" :size="60" />
        </template>
        <template #title>
          <a-space :size="4">
            <a-typography-text style="font-weight: bold">{{
              item.name
            }}</a-typography-text>
            <a-typography-text type="secondary"> </a-typography-text>
          </a-space>
        </template>
        <template #description>
          <div>
            <a-typography-paragraph
              :ellipsis="{
                rows: 1
              }"
              >{{ item.prj_name }}</a-typography-paragraph
            >
            <a-typography-text class="time-text">
              {{ item.started_at }}
            </a-typography-text>
          </div>
        </template>
      </a-list-item-meta>
      <template #actions>
        <a-button
          type="text"
          :disabled="item.status === 2 && item.process_type === 1"
          @click="processWorkInfo(item)"
        >
          {{ item.process_type === 1 ? '办理' : '阅读' }}
        </a-button>
      </template>
    </a-list-item>
    <div
      v-if="renderList.length && renderList.length < 3"
      :style="{ height: (showMax - renderList.length) * 86 + 'px' }"
    ></div>
  </a-list>
  <!-- <a-list :bordered="false">
    <a-list-item
      v-for="item in renderList"
      :key="item.id"
      action-layout="vertical"
      :style="{
        opacity: item.status ? 0.5 : 1,
        padding: '8px 10px'
      }"
    >
      <template #actions>
        <a-button type="text"> 刷新 </a-button>
      </template>
      <a-list-item-meta>
        <template #avatar>
          <icon-font
            v-if="item.process_type === 1"
            type="my-to-be-done"
            :size="60"
          />
          <icon-font v-else type="my-to-be-read" :size="60" />
        </template>
        <template #title>
          <a-space :size="4">
            <a-typography-text style="font-weight: bold">{{
              item.name
            }}</a-typography-text>
            <a-typography-text type="secondary"> </a-typography-text>
          </a-space>
        </template>
        <template #description>
          <div>
            <a-typography-paragraph
              :ellipsis="{
                rows: 1
              }"
              >{{ item.prj_name }}</a-typography-paragraph
            >
            <a-typography-text class="time-text">
              {{ item.started_at }}
            </a-typography-text>
          </div>
        </template>
      </a-list-item-meta>
    </a-list-item>
    <div
      v-if="renderList.length && renderList.length < 3"
      :style="{ height: (showMax - renderList.length) * 86 + 'px' }"
    ></div>
  </a-list> -->
</template>

<script lang="ts" setup>
import { IconFontUrl, ProjectDetailTabTitleList } from '@/enums/api'
import { useEmitt } from '@/logics/mitt/useEmitt'
import { Work } from '@/types/work'
import { Icon } from '@arco-design/web-vue'
import { PropType } from 'vue'
import { useRouter } from 'vue-router'

defineProps({
  renderList: {
    type: Array as PropType<Work[]>,
    required: true
  }
})

const router = useRouter()
const IconFont = Icon.addFromIconFontCn({
  src: IconFontUrl.URL
})

const { emitter } = useEmitt()

// 跳转到详情页面
const processWorkInfo = (work: Work) => {
  if (!work.target_type) {
    emitter.emit('show_work_modal', work.id)
    return
  }
  router.push({
    name: ProjectDetailTabTitleList.find(item =>
      item.redirectId?.includes(work.target_type)
    )?.routerName,
    params: { prjId: work.prj_id },
    query: { ...work.params }
  })
  // emitter.emit('show_work_modal', work.id)
}
const showMax = 3
</script>

<style scoped lang="less">
:deep(.arco-list) {
  .arco-list-item {
    min-height: 86px;
    border-bottom: 1px solid rgb(var(--gray-3));
  }

  .item-wrap {
    cursor: pointer;
  }
  .time-text {
    font-size: 12px;
    color: rgb(var(--gray-6));
  }
  .arco-empty {
    display: none;
  }

  .arco-typography {
    margin-bottom: 0;
  }
}
</style>
