<template>
  <div class="cases-alerts-warp">
    <div class="cases-alerts" :style="{ 'background-image': 'url(' + getAssetsFile('images/inputs/partbg1.png') + ')' }">
      <div class="cases-alerts-content">
        <div class="cases-alerts-item-pos">
          <template v-for="(n, index) in datalist" :key="index">
            <div class="cases-alerts-item">
              <div class="header" :style="{ 'background-image': 'url(' + getAssetsFile('images/inputs/partbg2.png') + ')' }">
                <div class="title">{{ n.title }}</div>
              </div>
              <div class="content">
                <template v-for="(m, mindex) in n.valStr" :key="mindex">
                  <div class="content-item" :style="{ 'background-image': 'url(' + getAssetsFile('images/inputs/partbg3.png') + ')' }">
                    <div class="num">{{ m }}</div>
                  </div>
                </template>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { isEmpty, getAssetsFile } from '@/utils';
const datalist = reactive([
  { title: '案件次数', val: 100 },
  { title: '预警次数', val: 236 },
]);

onMounted(() => {
  if (datalist.length && datalist.length > 0) {
    datalist.forEach((m) => {
      let valStr = '';

      if (m.val < 1000 && m.val >= 100) {
        valStr = '0' + m.val;
      } else if (m.val < 100 && m.val >= 10) {
        valStr = '00' + m.val;
      } else if (m.val < 10) {
        valStr = '000' + m.val;
      } else {
        valStr = m.val.toFixed(0);
      }
      m.valStr = [...valStr];
      // console.info('valStr', m.valStr);
    });
  }
});
</script>
<style lang="scss" scoped>
div {
  box-sizing: border-box;
}
.cases-alerts-warp {
  height: 100%;
  padding: 8px;
  .cases-alerts {
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    .cases-alerts-content {
      width: 100%;
      height: 100%;
      padding: 0 20px;
      display: inline-flex;
      justify-content: center;
      flex-direction: column;
      .cases-alerts-item-pos {
        width: 100%;
        display: inline-flex;
        justify-content: space-around;
      }
      .cases-alerts-item {
        display: inline-block;
        width: calc((100% - 20px) / 2);
        .header,
        .content {
          display: inline-flex;
          width: 100%;
        }
        .header {
          background-size: 100% 100%;
          background-repeat: no-repeat;
          line-height: 32px;
          height: 32px;
          display: inline-block;
          width: 100%;
          .title {
            text-align: center;
            font-size: 16px;
            font-weight: bold;
            transform: skewX(-8deg);
            background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
            -webkit-background-clip: text;
            color: #fff;
            letter-spacing: 8px;
            text-shadow: -6px 0 0 1px #add8f1;
          }
        }
        .content {
          justify-content: space-around;
          margin-top: 30%;
          .content-item {
            height: 36px;
            display: inline-block;
            width: calc((100% - 20px) / 4);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            line-height: 36px;
            text-align: center;
            .num {
              text-align: center;
              font-size: 20px;
              font-weight: bold;
              transform: skewX(-8deg);
              background: linear-gradient(to bottom, '#ff7e5f', '#548fff');
              -webkit-background-clip: text;
              color: #fff;
              text-shadow: -6px 0 0 1px #add8f1;
            }
          }
        }
      }
    }
  }
}
</style>
