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

const ptyxqkData1 = ref({})
const ptyxqkData2 = ref([])
const ptyxqkData3 = ref([])

watch(
  () => props.data1,
  (newVal, oldVal) => {
    if (newVal)
      ptyxqkData1.value = newVal
  },
  { immediate: true },
)

watch(
  () => props.data2,
  (newVal, oldVal) => {
    if (newVal)
      ptyxqkData2.value = newVal
  },
  { immediate: true },
)

watch(
  () => props.data3,
  (newVal, oldVal) => {
    if (newVal)
      ptyxqkData3.value = newVal
  },
  { immediate: true },
)
</script>

<template>
  <div class="ptyxqkDiv p-5 flex items-center justify-center space-x-6">
    <div class="text-center">
      <el-progress type="circle" :width="90" :stroke-width="16" color="#4BBC88" :percentage="Number(ptyxqkData1.value).toFixed(2)" />
      <div class="hyzb mt-2">
        {{ ptyxqkData1.name }}
      </div>
    </div>
    <div class="grid grid-cols-2 gap-25px">
      <div v-for="(item, index) in ptyxqkData3" :key="index" class="conDiv p-2">
        <div class="value">
          {{ item.value }}
        </div>
        <div class="name">
          {{ item.name }}
        </div>
      </div>
      <div v-for="(item, index) in ptyxqkData2" :key="index" class="conDiv p-2 flex justify-center items-center">
        {{ item.name }}<span class="font14 mx-1">{{ item.value }}</span>
        <img v-if="item.type == 1" src="/images/dsj/up.png" alt="">
        <img v-else src="/images/dsj/down.png" alt="">
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.ptyxqkDiv {
  // height: 400px;
  :deep(.el-progress) {
    .el-progress__text {
      color: #4bbc88;
      font-size: 1.125rem !important;
      font-weight: 700;
    }
  }
  .hyzb {
    color: #fff;
    font-size: 1rem;
  }
  .conDiv {
    background: url(/images/dsj/conBg.png) no-repeat;
    background-size: 100% 100%;
    color: #fff;
    text-align: center;
    // max-width: 160px;
    font-size: 0.75rem;
    font-weight: 400;
    .value {
      color: #66ffff;
      font-size: 1.625rem;
    }
    .name {
      font-size: 1rem;
    }
    .font14 {
      font-size: 0.875rem;
    }
    img {
      height: 0.75rem;
    }
  }
}
</style>
