<template>
  <div class="card-view card-mode">
    <div
      v-for="(item, index) in cardData"
      :key="index"
      class="card-process card-view__wrap"
    >
      <div class="card-process-title">
        <span class="card-items-title">
          {{ item.title || (item.list[0] && item.list[0].typeName) }}
          <el-button v-if="isShowDetail" type="text" @click="handleBack">
            返回
          </el-button>
        </span>
        <span
          v-if="!matterClassifyId && item.title"
          class="card-items-title items-total"
        >
          ({{ processClassifyCountInfo[item.key] }})
        </span>
      </div>
      <ul class="card-content">
        <li
          v-for="(it, idx) in currentShowCardList(item.list)"
          :key="idx"
          class="card-item__wrap card-item"
          :class="{ 'item-margin': !isNotPagination && idx < 6 }"
        >
          <span class="card-item-subject" @click="handleClickName(it)">
            <span class="item-subject">{{ it.name }}</span>
          </span>
          <ht-icon
            class="collection-icon"
            :name="collectedProcess[it.id] ? 'collection' : 'NotCollected'"
            :class="[collectedProcess[it.id] ? 'collection' : 'not-collected']"
            @click="
              handleCollectOrCancelCollect(
                it.defKey,
                collectedProcess[it.id] || ''
              )
            "
          ></ht-icon>
        </li>
        <li
          v-if="isNotPagination && cardListExceedTen(item.list)"
          class="card-item card-more"
          @click="handleClick(item.key)"
        >
          <span>
            查看全部
            <ht-icon
              name="cardMore"
              class="card-more-icon"
              scale="0.9"
            ></ht-icon>
          </span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import { getProcessCard, getNewProcessClassifyCount } from '@/api/process'
  import collectProcess from '@/mixins/collectProcess'
  export default {
    name: 'CardView',
    mixins: [collectProcess],
    props: {
      cardData: {
        type: Array,
        default: () => {
          return []
        },
      },
      matterClassifyId: {
        type: String,
        default: '',
      },
      isNotPagination: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {
        isShowDetail: false,
        processClassifyCountInfo: {},
      }
    },
    computed: {
      currentShowCardList() {
        return (list) => {
          const lessThanTenCardList = list?.filter((item, index) => index < 10)
          return !this.isNotPagination ? list : lessThanTenCardList
        }
      },
      cardListExceedTen() {
        return (list) => {
          return list?.length > 10
        }
      },
    },
    mounted() {
      this.getProcessClassifyCount()
    },
    methods: {
      handleClick(key) {
        this.isShowDetail = true
        this.$emit('click-card-more', key)
      },

      getProcessClassifyCount(data) {
        getNewProcessClassifyCount({
          querys: (data && data.querys) || [],
        }).then((res) => {
          this.processClassifyCountInfo = res?.reduce((pre, cur) => {
            pre[cur.typeId] = cur.count
            return pre
          }, {})
        })
      },
      handleClickName(row) {
        this.$emit('card-click', row)
      },
      handleBack() {
        this.$emit('back-card', () => {
          this.isShowDetail = false
        })
      },
      handleHideDetail() {
        this.isShowDetail = false
      },
    },
  }
</script>

<style lang="scss" scoped>
  .card-view {
    .card-view__wrap {
      .card-content {
        .card-item {
          .collection-icon {
            cursor: pointer;
          }
          .collection {
            color: var(--themeColor);
          }
          .not-collected {
            color: rgba($base-dark-title-color, 0.4);
          }
        }
        //.item-margin {
        //  margin-top: 15px;
        //}
      }
    }
  }
</style>