<template>
  <div class="card-process-more">
    <span class="card-items-title">财务管理</span>
    <ul class="card-items">
      <li v-for="(item, index) in detailList" :key="index" class="card-item">
        <span class="card-item-subject">{{ item.subject }}</span>
        <ht-icon
          class="collection-icon"
          :name="item.isCollection ? 'collection' : 'NotCollected'"
          :class="[item.isCollection ? 'collection' : 'not-collected']"
        ></ht-icon>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'CardProcessMore',
    data() {
      return {
        detailList: [
          {
            subject: '合同',
            isCollection: true,
          },
          {
            subject: '费用报销',
            isCollection: false,
          },
          {
            subject: '合同',
            isCollection: true,
          },
          {
            subject: '合同',
            isCollection: true,
          },
          {
            subject: '费用报销',
            isCollection: false,
          },
          {
            subject: '合同',
            isCollection: true,
          },
          {
            subject: '合同',
            isCollection: true,
          },
          {
            subject: '费用报销',
            isCollection: false,
          },
          {
            subject: '合同',
            isCollection: true,
          },
        ],
      }
    },
  }
</script>

<style lang="scss" scoped>
  .card-process-more {
    background: $base-card-view-bg-color;
    .card-items-title {
      margin: 15px 0 0 15px;
      display: inline-block;
    }
    .card-items {
      display: flex;
      flex-wrap: wrap;
      margin: 0px 15px 16px 13px;
      .card-item {
        border-radius: $base-radius;
        border: 1px solid $base-card-border-color;
        margin: 15px 16px 15px 0;
        padding: 12px 20px 0 29px;
        background: $base-color-white;
        width: calc(20% - 64px);
        height: $base-card-height;
        display: flex;
        justify-content: space-between;
        &:nth-child(5n) {
          margin-right: 0;
        }
        .collection-icon {
          cursor: pointer;
        }
        .collection {
          color: var(--themeColor);
        }
        .not-collected {
          color: rgba($base-dark-title-color, 0.4);
        }
        .card-item-subject {
          position: relative;
          margin-left: 20px;
          &::before {
            position: absolute;
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 50%;
            border: 2px solid var(--themeColor);
            top: 2px;
            left: -20px;
          }
        }
      }
    }
  }
</style>
