<!--
 * @Author: Devin
 * @Date: 2023-01-11 17:13:35
 * @LastEditors: Devin
 * @LastEditTime: 2023-02-22 14:51:54
 * @Description: 卡片
-->
<template>
  <div class="__common-card">
    <!-- 卡片图片 -->
    <div v-if="layer === 'row'" class="__card-img-box">
      <el-image fit="fill" class="__card-img" :src="cardInfo?.url" alt="" />
    </div>

    <div class="__card-info" :class="layer === 'row' ? '__card-row' : ''">
      <!--card header-->
      <div class="__card-header">
        <el-image
          fit="fill"
          class="__card-header-img"
          :src="cardInfo?.url"
          alt=""
        />
        <!-- 卡片头部 -->
        <div class="__card-header-info">
          <div class="__card-title-content">
            <h4 class="__card-title text-line-1">{{ cardInfo.title }}</h4>
            <el-tag
              v-for="tag in cardInfo?.tags"
              :key="tag.label"
              class="__card-tag"
              :type="tag.type"
            >
              {{ tag.label || '-' }}
            </el-tag>
          </div>
          <!-- 卡片副标题 -->
          <div class="__card-subtitle">{{ cardInfo.subTitle }}</div>
        </div>
      </div>

      <!-- 卡片详情 -->
      <card-info
        :infos="infos"
        :btns="btns"
        :card-info="cardInfo"
        :card-infos="cardInfos"
        :card-numbers="cardNumbers"
      ></card-info>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';
import CardInfo from './CardInfo.vue';

defineProps({
  infos: {
    type: Array<any>,
    default: () => []
  },
  btns: {
    type: Array<any>,
    default: () => []
  },
  cardInfo: {
    type: Object,
    default: () => {}
  },
  layer: {
    type: String,
    default: () => 'col'
    // row/col/row-col
  },
  cardInfos: {
    type: Array<any>,
    default: () => []
  },
  cardNumbers: {
    type: Array<any>,
    default: () => []
  }
});
</script>

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

<style scoped lang="scss">
.__common-card {
  display: flex;
  width: 100%;
  overflow: hidden;
  background: #fff;
  border-radius: 4px;
  margin-bottom: 16px;

  .__card-img-box {
    width: 150px;
    flex: shrink;
    .__card-img {
      width: 100%;
      height: 100%;
    }
  }
}
.__common-card-row {
  flex-direction: row;
  justify-content: flex-start;
}
.__common-card-col {
  flex-direction: column;
}
.__card-info {
  padding: 18px 16px;
  width: calc(100%);
  box-sizing: border-box;
  .__card-header {
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
    .__card-header-img {
      width: 32px;
      height: 32px;
      border-radius: 4px;
      margin-right: 10px;
    }
    .__card-header-info {
      flex: 1;
      margin-bottom: 10px;
      .__card-title-content {
        display: flex;
        align-items: center;
      }
      .__card-title {
        margin-right: 8px;
        color: #2d3e53;
        font-weight: 500;
        font-size: 14px;
      }
      .__card-tag {
        margin-right: 8px;
      }
      .__card-subtitle {
        color: #7b93a7;
        line-height: 16px;
        font-size: 12px;
        font-weight: 400;
      }
    }
  }
}
.__card-row {
  width: calc(100% - 150px);
}
</style>