<template>
  <a-card class="cardContent" :loading="loading" :body-style="{ padding: '15px 24px 8px' }" :bordered="false">
    <div class="chart-card-header">
      <div class="chart-card-title">{{ title }}</div>
      <div class="chart-card-header-content">
        <div class="meta">
          <div>
            <img v-if="icon == 'green'" src="@/assets/indexChart/green.png">
            <img v-else-if="icon == 'blue'" src="@/assets/indexChart/blue.png">
            <img v-else-if="icon == 'purple'" src="@/assets/indexChart/purple.png">
            <img v-else src="@/assets/indexChart/red.png">
          </div>
          <span class="chart-card-action">
            <slot name="action"></slot>
          </span>
        </div>
        <div class="total">
          <div>{{ number }}</div>
          <div v-if="icon == 'green'" class="content-title">地块数量</div>
          <div v-else-if="icon == 'purple'" class="content-title">地块数量</div>
          <div v-else-if="name=='省属企业'" class="content-title">企业数量</div>
          <div v-else class="content-title">单位数量</div>
        </div>
        <div class="total">
          <div v-if="area != ''">
            <div>{{ area }}<span style="font-size: 16px;margin-left:5px;margin-right: 5px;font-weight:400">亩</span></div>
            <div class="content-title">地块面积</div>
          </div>
        </div>
      </div>
    </div>
    <!--<div class="chart-card-content">
      <div class="content-fix">
        <slot></slot>
      </div>
    </div>-->
    <div class="chart-card-footer">
      <div class="field">
        <slot name="footer"></slot>
      </div>
    </div>
  </a-card>
</template>

<script>
  export default {
    name: "ChartCard",
    props: {
      title: {
        type: String,
        default: ''
      },
      name: {
        type: String,
        default: ''
      },
      number: {
        type: String,
        default: ''
      },
      area: {
        type: String,
        default: ''
      },
      icon: {
        type: String,
        default: ''
      },
      loading: {
        type: Boolean,
        default: false
      }
    }
  }
</script>

<style lang="less" scoped>
  .cardContent /deep/ .chart-card-header-content{
    display: flex;
    justify-content: space-between;
    //height: fit-content;
    width: 95%;
  }

  .chart-card-title {
    color: white;
    font-size: 20px;
    font-weight:bold;
    text-align: left;
  }

  .chart-card-header {
    //position: relative;
    overflow: hidden;
    width: 100%;

    .meta {
      color: white;
      font-size: 20px;
      font-weight:bold;
      //position: relative;
      overflow: hidden;
      //width: 100%;
      //line-height: 50px;
      max-width: 20%;
    }
  }
  // 图标样式
  .chart-card-header .meta > div {
    text-align: left;
    margin-top: 25px;
  }
  .chart-card-action {
    cursor: pointer;
    position: absolute;
    top: 15px;
    right: 15px;
  }

  .chart-card-footer {
    border-top: 1px solid #e8e8e8;
    padding-top: 5px;
    margin-top: 5px;

    > * {
      position: relative;
    }

    .field {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin: 0;
    }
  }

  .chart-card-content {
    margin-bottom: 12px;
    position: relative;
    height: 46px;
    width: 100%;

    .content-fix {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
    }
  }
  // 数量，面积样式
  .total {
    //overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
    color: white;
    font-size: 26px;
    margin-top: 15px;
    margin-bottom: 0;
    //line-height: 38px;
    //height: 38px;
  }
  // 数量，面积标题样式
  .content-title {
    font-size: 20px;
    margin-top: 10px;
  }
  //
  @media (max-width: 1920px) {
    .chart-card-header .meta {
      font-size: 16px;
    }

    .chart-card-header .meta > div {
      margin-top: 15px;
      img {
        width: 100%;
      }
    }

    .content-title,
    .total {
      font-size: 18px;
    }
    // 数量，面积
    .content-title {
      margin-top: 15px;
    }
    // 卡片底片边距

  }
</style>