<script setup>
const props = defineProps({
  data: [],
})

const statusData = ref([
  {
    img: '/images/dsj/lx1.png',
    color: '#2FF9C3',
    name: '正常',
    type: 1,
  },
  {
    img: '/images/dsj/lx2.png',
    color: '#E92C6B',
    name: '异常',
    type: 2,
  },
])

const bjlxfbData = ref([
  // {
  //   type: 1,
  //   value: 23
  // },
  // {
  //   type: 2,
  //   value: 10
  // },
  // {
  //   type: 1,
  //   value: 23
  // },
  // {
  //   type: 2,
  //   value: 23
  // },
  // {
  //   type: 2,
  //   value: 2
  // }
])

watch(
  () => props.data,
  (newVal, oldVal) => {
    if (newVal) {
      bjlxfbData.value = newVal
      initData()
    }
  },
  { immediate: true },
)

function initData() {
  bjlxfbData.value.map((item) => {
    item.img = '/images/dsj/lx1.png'
    item.color = '#2FF9C3'
    // statusData.value.map(value => {
    //   if (item.type == value.type) {
    //     item = Object.assign(item, value);
    //   }
    // })
  })
}
</script>

<template>
  <div class="bjlxfbDiv py-3">
    <!-- <div class="legendDiv flex space-x-4 px-8">
      <div class="flex items-center space-x-2" v-for="(item, index) in statusData" :key="index">
        <div class="dot" :style="{background: item.color}"></div>
        <div>{{item.name}}</div>
      </div>
    </div> -->

    <!-- <div class="flex justify-center space-x-10 mt-4">
      <template v-for="(item, index) in bjlxfbData" :key="index">
        <div class="lxDiv" v-if="index < 3">
          <img :src="item.img" alt="">
          <div class="value" :style="{color: item.color}">{{item.value}}<span class="unit">次</span></div>
        </div>
      </template>
    </div>
    <div class="flex justify-center space-x-10">
      <template v-for="(item, index) in bjlxfbData" :key="index">
        <div class="lxDiv" v-if="index >= 3">
          <img :src="item.img" alt="">
          <div class="value" :style="{color: item.color}">{{item.value}}<span class="unit">次</span></div>
        </div>
      </template>
    </div> -->

    <el-scrollbar view-class="h-full flex flex-col">
      <div class="grid grid-cols-3 gap-4">
        <div v-for="(item, index) in bjlxfbData" :key="index" class="text-center">
          <div class="lxDiv">
            <img :src="item.img" alt="">
            <div class="value" :style="{ color: item.color }">
              {{ item.value }}<span class="unit">次</span>
            </div>
          </div>
          <div :style="{ color: item.color }">
            {{ item.name }}
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<style lang="scss" scoped>
.bjlxfbDiv {
  // min-width: 454px;
  .legendDiv {
    color: #68d5ea;
    font-size: 0.875rem;
    font-weight: 400;
    justify-content: right;
    .dot {
      width: 0.75rem;
      height: 0.75rem;
      border-radius: 50%;
    }
  }
  .lxDiv {
    position: relative;
    img {
      display: block;
      // width: 7.5rem;
    }
    .value {
      font-size: 1rem;
      font-weight: 700;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      .unit {
        font-size: 0.875rem;
      }
    }
  }
}
</style>
