<template>
    <!-- 供应商注册、审核通过、注册设备数量 -->
    <div class="container" :style="{'height':height,'width':width}">
      <div
        v-for="(item) of device"
        class="device"
        :key="item.title"
      >
        <div><svg-icon :icon-class="item.icon"></svg-icon></div>
        <div class="content">
          <div>{{ item.title }}</div>
          <div class="count">{{ item.count }}</div>
        </div>
      </div>
    </div>
  </template>
    
    <script>
  import SvgIcon from "@/components/SvgIcon";
  import { getSupplierCount } from "@/api/cockpit/cockpit";
  export default {
    name: "supplierList",
    components: {
      SvgIcon,
    },
    props:{
        width:{
            type:String,
            default:'500px'
        },
        height:{
            type:String,
            default:'300px'
        }
    },
    data() {
      return {
        device: [
          {
            title: "供应商注册设备总数量",
            count: "",
            icon: "cockpit-device-register",
            type: "deviceCount",
          },
          {
            title: "供应商审核通过总数量",
            count: "",
            icon: "cockpit-approved",
            type: "approvedCount",
          },
          {
            title: "供应商注册总数量",
            count: "",
            icon: "cockpit-supplier-register",
            type: "approvedCount",
          },
        ],
      };
    },
    methods: {
      fetchData() {
        // 供应商注册、审核通过、注册设备数量
        getSupplierCount().then((res) => {
          for (var i = 0; i < this.device.length; i++) {
            for (var device in res.data) {
              if(this.device[i].type === device) {
                this.device[i].count = res.data[device]
              }
            }
          }
        });
      },
    },
    created() {
      this.fetchData();
    },
  };
  </script>
    
    <style lang="scss" scoped>
  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    .device {
      width: 60%;
      display: flex;
    //   justify-content: ;
      font-size: 20px;
      ::v-deep .svg-icon {
        width: 40px;
        height: 40px;
        color: rgb(64, 158, 255);
      }
      .content {
        margin-left: 10px;
      }
      .count{
        text-align: center;
      }
    }
  }
  </style>