<template>
  <el-row :gutter="20">
    <el-col v-for="item in state.list" :key="item.label" :span="12">
      <div class="inputs-item flex-row">
        <span class="inputs-item-icon">
          <img :src="item.icon" />
        </span>
        <div class="inputs-item-info flex-column">
          <b>{{ item.label }}</b>
          <div class="inputs-item-value flex-row">
            <em>{{ item.value }}</em>
            <span>{{ item.unit }}</span>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>
<script setup>
import { reactive } from 'vue';
import { getAssetsFile } from '@/utils';

const state = reactive({
  list: [
    {
      label: '监管机构',
      value: 88,
      unit: '家',
      icon: getAssetsFile('images/inputs/1.png'),
    },
    {
      label: '监管人员',
      value: 106,
      unit: '人',
      icon: getAssetsFile('images/inputs/2.png'),
    },
    {
      label: '村级监管员',
      value: 38,
      unit: '人',
      icon: getAssetsFile('images/inputs/3.png'),
    },
    {
      label: '农资经营单位',
      value: 27,
      unit: '家',
      icon: getAssetsFile('images/inputs/4.png'),
    },
    {
      label: '生产主体',
      value: 154,
      unit: '家',
      icon: getAssetsFile('images/inputs/5.png'),
    },
    {
      label: '检测机构',
      value: 16,
      unit: '家',
      icon: getAssetsFile('images/inputs/6.png'),
    },
  ],
});
</script>
<style lang="scss" scoped>
.inputs {
  &-item {
    align-items: center;
    color: #fff;
    padding: 10px 0;

    &-icon {
      margin-right: 16px;
    }

    &-info {
      font-size: 16px;
      font-weight: bold;
    }

    &-value {
      margin-top: 10px;
      justify-content: space-between;
      em {
        color: #02fd94;
        font-style: normal;
      }
    }
  }
}
</style>
