<template>
  <div class="total-container">
    <div class="total-title">
      <img src="@/assets/images/tj.png" class="title-icon" />
      实施服务（汇总数据
    </div>
    <div class="total-grid">
      <div class="total-item">
        <div class="total-label">城市总数</div>
        <div class="total-value">{{ data.cities | formatNumber }}</div>
      </div>
      <div class="total-item">
        <div class="total-label">企业总数</div>
        <div class="total-value">{{ data.customers }}</div>
      </div>
      <div class="total-item">
        <div class="total-label">合同总数</div>
        <div class="total-value">{{ data.contracts | formatNumber }}</div>
      </div>
      <div class="total-item">
        <div class="total-label">履约次数</div>
        <div class="total-value">{{ data.perform_times | formatNumber }}</div>
      </div>
      <div class="total-item">
        <div class="total-label">服务时长</div>
        <div class="total-value">{{ data.service_time | formatNumber }}</div>
      </div>
      <div class="total-item">
        <div class="total-label">项目总数</div>
        <div class="total-value">{{ data.residences | formatNumber }}</div>
      </div>
      <div class="total-item">
        <div class="total-label">签约户数</div>
        <div class="total-value">{{ data.contracted_households | formatNumber }}</div>
      </div>
      <div class="total-item">
        <div class="total-label">实施户数</div>
        <div class="total-value">{{ data.actual_households | formatNumber }}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapState } from "vuex"

  export default {
    name: "ImplementationTotal",
    props: {
      data: {
        type: Object,
        default: () => ({}),
      },
    },
    data() {
      return {}
    },
    computed: {
      ...mapState(["entCode", "communityId"]),
    },
    methods: {
    },
  }
</script>

<style lang="scss" scoped>
  @import "@/assets/css/theme.scss";

  .total-container {
    background: var(--content-bg);
    border-radius: halfW(4);
    position: relative;
    overflow: hidden;

    .total-title {
      padding: halfH(4) halfW(10);
      display: flex;
      align-items: center;
      font-size: halfW(16);
      color: var(--title-primary);
      background: var(--title-bg);
      margin-bottom: halfH(20);
    }

    .total-grid {
      padding: 0 halfW(10);
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: halfH(16);
      height: calc(100% - halfH(84));
      align-items: center;
    }

    .total-item {
      flex: 1 1 0%;
      background: var(--content-bg);
      text-align: center;

      .total-label {
        font-size: halfW(14);
        color: #a0b3d6;
        margin-bottom: halfH(8);
      }

      .total-value {
        font-size: halfW(20);
        font-weight: bold;
        color: #ffffff;
      }
    }
  }
</style>
