<template>
  <div class="total">
    <div class="count-inner dashboard-bg">
      <div class="item-title">总安检员数量</div>
      <div class="count">
        <vue-count-to :duration="2600" :end-val="totalNum.total_count" :start-val="0" class="card-panel-num" />
      </div>
      <div class="tips">
        <span class="icon"><svg-icon icon-class="top" /> 较上月+12人</span>
      </div>
    </div>
    <div class="count-inner dashboard-bg">
      <div class="item-title">今日出勤人数</div>
      <div class="count">
        <vue-count-to :duration="2600" :end-val="totalNum.pass_count" :start-val="0" class="card-panel-num" />
      </div>
      <div class="tips">
        <span class="icon"><svg-icon icon-class="top" /> 较昨日+8人</span>
      </div>
    </div>
    <div class="count-inner dashboard-bg">
      <div class="item-title">缺勤认数</div>
      <div class="count">
        <vue-count-to :duration="2600" :end-val="totalNum.fail_count" :start-val="0" class="card-panel-num warn" />
      </div>
      <div class="tips">
        <span class="icon danger"><svg-icon icon-class="top" /> 较昨日+5人</span>
      </div>
    </div>
    <div class="count-inner dashboard-bg">
      <div class="item-title">出勤率</div>
      <div class="count">
        <vue-count-to :duration="2600" :end-val="totalNum.pass_percentage" :start-val="0" class="card-panel-num" />
      </div>
      <div class="tips">
        <span class="icon danger down"><svg-icon icon-class="top" /> 较昨日-2.1%</span>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { onMounted, ref } from 'vue';
  import VueCountTo from '@/components/VueCountTo/vue-countTo.vue';
  import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
  import SvgIcon from '@/components/SvgIcon/index.vue';

  let totalNum = ref({
    total: 0,
    total_major: 0,
    total_conceal: 0,
  });

  onMounted(() => {
    // 查获总量+重大违禁品+故意隐匿数量
    executeSqlByKeyAndParam('total_number_and_attendance_of_security_personnel', {}).then(res => {
      totalNum.value = res.data[0];
    });
  });
</script>

<style lang="less" scoped>
  .total {
    display: flex;
    justify-content: space-between;

    .count-inner {
      width: calc(25% - 8px);
      padding: 20px;
      border: 1px solid #363F4C;
      border-radius: 8px;
      color: #6D7F83;

      .item-title {
        margin-bottom: 8px;
      }

      .tips {
        color: #9499A0;
        font-size: 12px;
        margin-top: 16px;

        .icon {
          margin-right: 8px;
          color: #10B981;

          .svg-icon {
            fill: #10B981;
            transform: rotate(-90deg);
          }

          &.danger {
            color: #EF4444;

            .svg-icon {
              fill: #EF4444;
            }
          }

          &.down {
            .svg-icon {
              transform: rotate(90deg);
            }
          }
        }
      }
    }
  }

  :deep(.card-panel-num) {
    margin: 8px 0;
    font-size: 20px;
    color: #fbffff;

    &.warn {
      color: #FE7C01;
    }
  }

  .echarts {
    flex: 1;
    width: 100%;
  }
</style>