<template>
  <div class="work-card-container">
    <div class="title">
      <img src="@/assets/images/fwzj.png" class="title-icon" />
      部分业务统计
    </div>
    <div class="work-card">
      <div class="work-card-item">
        <div class="card-header">
          <img src="@/assets/images/jgxx.png" class="title-icon" />
          <span class="card-title">数电票业务</span>
        </div>
        <div class="card-content">
          <div class="card-subtitle">已开发票数</div>
          <div class="card-value">
            {{ formatNumber(state.issuedInvoiceCount) }}
          </div>
        </div>
      </div>
      <div class="work-card-item">
        <div class="card-header">
          <img src="@/assets/images/glgd.png" class="title-icon" />
          <span class="card-title">道闸系统</span>
        </div>
        <div class="card-content">
          <div class="card-subtitle">设备数量</div>
          <div class="card-value">
            {{ formatNumber(state.gateDeviceCount) }}
          </div>
        </div>
      </div>
      <div class="work-card-item">
        <div class="card-header">
          <img src="@/assets/images/ewm.png" class="title-icon" />
          <span class="card-title">智慧二维码</span>
        </div>
        <div class="card-content">
          <div class="card-subtitle">配置数量</div>
          <div class="card-value">{{ formatNumber(state.qrCount) }}</div>
        </div>
      </div>
      <div class="work-card-item">
        <div class="card-header">
          <img src="@/assets/images/zhxggd.png" class="title-icon" />
          <span class="card-title">短信业务</span>
        </div>
        <div class="card-content">
          <div class="card-subtitle">销售数量</div>
          <div class="card-value">{{ formatNumber(state.smsSalesQty) }}</div>
        </div>
      </div>
      <div class="work-card-item">
        <div class="card-header">
          <img src="@/assets/images/gwxx.png" class="title-icon" />
          <span class="card-title">房屋租售</span>
        </div>
        <div class="card-content">
          <div class="card-subtitle">发布资产数</div>
          <div class="card-value">
            {{ formatNumber(state.rentalPublishCount) }}
          </div>
        </div>
      </div>
      <div class="work-card-item">
        <div class="card-header">
          <img src="@/assets/images/ryzb.png" class="title-icon" />
          <span class="card-title">业委会</span>
        </div>
        <div class="card-content">
          <div class="card-subtitle">开通数量</div>
          <div class="card-value">
            {{ formatNumber(state.ownerCommitteeOpenCount) }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { huiJiaApi } from "@/api"

export default {
  name: "WorkCard",
  props: {},
  data() {
    return {
      state: {
        issuedInvoiceCount: "", // 数电票业务
        gateDeviceCount: "", // 闸道设备数量
        qrCount: "", // 二维码数量
        smsSalesQty: "", // 短信销售数量
        rentalPublishCount: "", // 房屋租赁发布数量
        ownerCommitteeOpenCount: "", // 业委会开通数量
      },
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      huiJiaApi.getBusinessData().then((res) => {
        if (res && res.data) {
          this.state = res.data.data
        }
      })
    },
    // 格式化数字显示
    formatNumber(num) {
      return num.toLocaleString("zh", {
        maximumFractionDigits: 2,
      })
    },
  },
}
</script>

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

.work-card-container {
  background: var(--content-bg);
  border-radius: halfW(4);
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

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

.work-card {
  flex: 1 1 0%;
  padding: 0px halfW(20);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: halfW(10);
}

.work-card-item {
  background: var(--title-bg);
  border-radius: halfW(4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: halfH(10);
  padding: halfH(4) halfW(10);
  background: var(--title-bg);

  .iconfont {
    font-size: halfH(24);
    margin-right: halfW(10);
    // 根据不同图标使用不同颜色
    color: var(--primary-color, #409eff);
  }

  .card-title {
    font-size: halfW(16);
    font-weight: 500;
    color: var(--title-primary);
  }
}

.card-content {
  display: flex;
  align-items: center;
  padding: halfH(20) halfW(20);

  .card-subtitle {
    font-size: halfW(14);
    color: #82d1f6;
  }

  .card-value {
    margin-left: halfW(12);
    font-size: halfW(16);
    font-weight: 500;
    color: #fff;
    letter-spacing: 1px;
  }
}
</style>
