<template>
  <div class="inputs">
    <h2 class="inputs-title">巡检次数：{{ state.counts }}次</h2>
    <el-row>
      <el-col v-for="item in state.list" :key="item.label" :span="12">
        <div class="inputs-item flex-column">
          <div class="inputs-item-value">{{ item.value }}%</div>
          <div class="inputs-item-label">{{ item.label }}</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { reactive, watch } from 'vue';
import { isEmpty } from '@/utils';

const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});

const state = reactive({
  counts: 0,
  list: [
    {
      label: '检测合格率',
      value: '98.99%',
    },
    {
      label: '检测覆盖率',
      value: '25.46%',
    },
  ],
});

watch(
  () => props.data,
  (val) => {
    if (!isEmpty(val)) {
      state.list[0].value = val[0].JCHGL;
      state.list[1].value = val[0].JCFGL;
      state.counts = val[0].JCYPPC;
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>
<style lang="scss" scoped>
.inputs {
  &-title {
    width: 240px;
    height: 40px;
    line-height: 40px;
    margin: 24px auto 0;
    background-image: url('@/assets/images/inputs/bg_title.png');
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100%;
    font-size: 20px;
    color: #fff;
    text-align: center;
    text-shadow:
      0 0 10px #01eeff,
      0 0 20px #01eeff,
      0 0 30px #01eeff,
      0 0 40px #01eeff;
  }
  &-item {
    &-label {
      width: 120px;
      height: 24px;
      line-height: 24px;
      margin: 0 auto 0;
      background: url('@/assets/images/inputs/bg_label.png') center center no-repeat;
      background-size: 100%;
      font-size: 16px;
      color: #fff;
      text-align: center;
      text-shadow:
        0 0 10px #01eeff,
        0 0 20px #01eeff,
        0 0 30px #01eeff,
        0 0 40px #01eeff;
    }

    &-value {
      width: 160px;
      height: 160px;
      line-height: 180px;
      text-align: center;
      margin: 0 auto;
      background-image: url('@/assets/images/inputs/bg_value.png');
      background-size: 100%;
      background-repeat: no-repeat;
      font-size: 20px;
      font-weight: 700;
      color: #fff;
    }
  }
}
</style>
