<template>
  <div class="apply-card" :class="{ 'border-bottom': isShowBottomMargin }">
    <div class="apply-card--title" v-if="title">{{ title }}</div>
    <van-grid
      :border="false"
      class="apply-card--content"
      v-if="applyList && applyList.length"
    >
      <van-grid-item
        class="apply-card--item"
        v-for="(item, index) in applyList"
        :key="`${item[props.name]}_${index}`"
        @click="handleClick(item)"
      >
        <div
          class="item-top--icon"
          :style="{ background: item[props.iconColor] || '#409EFF' }"
        >
          <i
            class="apply-icon"
            :class="item[props.icon] || 'icon-aside-app-center'"
          ></i>
        </div>
        <div class="item-bottom--name">{{ item[props.name] }}</div>
      </van-grid-item>
    </van-grid>
    <div v-else-if="noDataText" class="no-data--text">{{ noDataText }}</div>
  </div>
</template>

<script>
  export default {
    name: 'ApplyCard',
    props: {
      applyList: {
        type: Array,
        default: () => [],
      },
      props: {
        type: Object,
        default: () => {
          return {
            name: 'name',
            icon: 'icon',
            iconColor: 'iconColor',
            path: 'path',
          }
        },
      },
      title: {
        type: String,
        default: '',
      },
      isShowBottomMargin: {
        type: Boolean,
        default: true,
      },
      noDataText: {
        type: String,
        default: '',
      },
      isProcessCenter: {
        type: Boolean,
        default: false,
      },
    },
    methods: {
      handleClick(item) {
        if (this.isProcessCenter) {
          if (item[this.props.path]) {
            this.$router.push({
              path: item[this.props.path],
              query: { from: 'worker' },
            })
          }
        } else {
          this.$emit('apply-click', item)
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .apply-card {
    background: #fff;
    &--title {
      padding: 16px 0 8px 16px;
      font-size: 17px;
      color: $base-text-color;
      font-weight: bold;
    }
    &--content {
      .apply-card--item {
        .item-top--icon {
          width: 40px;
          height: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 8px;
          color: #fff;
          .apply-icon {
            font-size: 24px;
          }
        }
        .item-bottom--name {
          height: 34px;
          font-size: 13px;
          color: $base-text-color;
          padding-top: 8px;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        ::v-deep {
          .van-grid-item__content {
            padding-top: 12px;
            padding-bottom: 12px;
          }
        }
      }
    }
    .no-data--text {
      font-size: 14px;
      color: #8c8c8c;
      padding-left: 16px;
      padding-bottom: 16px;
    }
  }
  .border-bottom {
    margin-bottom: 12px;
  }
</style>