<!--
 * @Author: Devin
 * @Date: 2023-01-11 17:13:35
 * @LastEditors: Devin
 * @LastEditTime: 2023-02-22 14:51:54
 * @Description: 卡片
-->
<template>
  <div
    class="__common-card"
    :class="layer === 'row' ? '__common-card-row' : '__common-card-col'"
  >
    <!-- 卡片图片 -->
    <div class="__card-img-box">
      <common-icon icon-name="bianyuanwangguan" size="18"></common-icon>
      <img class="__card-img" :src="cardInfo?.url" alt="" />
    </div>

    <div
      class="__card-info"
      :class="layer === 'row' ? '__card-info-row' : '__card-info-col'"
    >
      <!-- 卡片头部 -->
      <div class="__card-header">
        <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>

      <!-- 卡片信息列表 -->
      <ul v-if="cardInfos && cardInfos.length" class="__card-infos">
        <li
          v-for="info in cardInfos"
          :key="info['label']"
          class="__card-info-item"
        >
          <span>{{ info['label'] }}：</span>
          <span class="__card-info-content">
            {{ cardInfo.infos[info['name']] }}
          </span>
        </li>
      </ul>

      <!-- 描述信息 -->
      <div class="__card-desc text-line-3">{{ cardInfo.desc }}</div>

      <!-- 卡片数据列表 -->
      <div v-if="cardNumbers && cardNumbers.length" class="__card-numbers">
        <el-row :gutter="10">
          <el-col
            v-for="(info, index) in cardNumbers"
            :key="index"
            :span="24 / cardNumbers.length"
          >
            <div class="_common-card-btn">
              <common-icon
                class="__card-icon"
                :name="info['icon']"
                :color="info['color']"
              ></common-icon>
              <span>{{ info['label'] }}</span>
            </div>
            <div class="__card-number">
              {{ cardInfo.numbers[info['name']] }}
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 卡片按键列表 -->
      <div v-if="btns && btns.length" class="__card-btns">
        <el-row :gutter="10">
          <el-col
            v-for="(btn, index) in btns"
            :key="index"
            class="__card-btn"
            :span="24 / btns.length"
          >
            <div class="_common-card-btn" @click.stop="btn['onClick']">
              <common-icon
                class="__card-icon"
                :name="btn['icon']"
                :color="btn['color']"
              ></common-icon>
              <span>{{ btn['label'] }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

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

defineProps({
  infos: {
    type: Array,
    default: () => []
  },
  btns: {
    type: Array,
    default: () => []
  },
  cardInfo: {
    type: Object,
    default: () => {}
  },
  layer: {
    type: String,
    default: () => 'col'
    // row/col/row-col
  },
  cardInfos: {
    type: Array,
    default: () => []
  },
  cardNumbers: {
    type: Array,
    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%;
    }
  }
  .__card-img-row {
    // padding: 16px;
  }
  .__card-img-col {
  }
}
.__common-card-row {
  flex-direction: row;
  justify-content: flex-start;
}
.__common-card-col {
  flex-direction: column;
}
.__card-info {
  padding: 18px 16px;
  width: calc(100% - 150px);
  box-sizing: border-box;
  .__card-header {
    display: flex;
    align-items: center;
    width: 100%;
    .__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;
    margin-top: 5px;
  }
  .__card-infos {
    margin-top: 16px;
    color: #455a74;
    font-size: 12px;
    .__card-info-item {
      line-height: 16px;
      margin-bottom: 8px;
    }
    .__card-info-content {
      color: #2d3e53;
    }
  }
  .__card-desc {
    line-height: 16px;
    font-size: 12px;
    color: #455a74;
    margin-bottom: 16px;
  }
  .__card-numbers {
    color: #7b93a7;
    text-align: center;
    margin-top: 16px;
    .__card-number {
      margin-top: 8px;
      color: #2d3e53;
      font-size: 14px;
    }
  }
  .__card-btns {
    color: #7b93a7;
    text-align: center;
    margin-top: 16px;
    .__card-btn {
      position: relative;
      &:not(:last-child):after {
        content: '';
        position: absolute;
        top: 0px;
        right: 1px;
        height: 16px;
        width: 1px;
        background-color: #ebebeb;
      }
      ._common-card-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #7b93a7;
        cursor: pointer;
        .__card-icon {
          margin-right: 17px;
        }
      }
    }
  }
}
.__card-info-col {
  width: 100%;
}
.card-info-row {
}
</style>