<template>
  <div :style="{ height: height }" :class="Expanded ? 'water-box' : 'water-box-expanded'">
    <box-header type="water" title="水质设备" :options="pondOptions" :isExpanded="Expanded" @change="handlePondChange" @expand="handleExpand" />
    <div :class="['water-box-operate', Expanded ? '' : 'expanded']">
      <div v-if="waterData.length > 0" class="water-box-content">
        <template v-for="item in waterData" :key="item.id">
          <water-device-info :title="item.pondName" :subhead="item.deviceName" :data="item.data" :chartData="item.chartData"></water-device-info>
        </template>
      </div>

      <div v-else class="empty"><div>暂无数据</div></div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import BoxHeader from "../components/BoxHeader.vue"
import WaterDeviceInfo from "../components/WaterDeviceInfo.vue"

const props = defineProps({
  height: {
    type: String,
    default: "66%",
  },
  pondOptions: {
    type: Array,
    default: () => [],
  },
  data: {
    type: Array,
    default: () => [],
  },
  isExpanded: {
    type: Boolean,
    default: true,
  },
  controlExpand: {
    type: Boolean,
    default: true,
  },
})
const emit = defineEmits(["pond", "expand"])

const handlePondChange = value => {
  emit("pond", value)
}
const waterData = ref([])
watch(
  () => props.data,
  value => {
    waterData.value = value
  }
)

const Expanded = ref(true)
watch(
  () => props.isExpanded,
  value => {
    Expanded.value = value
  }
)
const restsExpanded = ref(true)
watch(
  () => props.controlExpand,
  value => {
    restsExpanded.value = value
  }
)

const expandedStatus = computed(() => {
  return Expanded.value && restsExpanded.value
})

const handleExpand = flag => {
  emit("expand", flag)
}
</script>

<style lang="scss" scoped>
.water-box {
  width: 100%;
  border-radius: 8px;
  background-color: #0c317acc;
  transition: height 0.3s ease-in-out;

  .water-box-operate {
    height: 100%;
    transition: height 0.3s ease-in-out;

    .water-box-content {
      padding: 0px 15px 15px 15px;
      width: 100%;
      height: calc(100% - 55px);
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: flex-start;
      align-content: flex-start;
      row-gap: 5px; /* 设置行间距 */
      column-gap: 20px; /* 设置列间距 */
      overflow: auto;

      /* 自定义滚动条样式 */
      &::-webkit-scrollbar {
        width: 3px; /* 滚动条宽度 */
      }

      &::-webkit-scrollbar-track {
        background: rgba(7, 22, 52, 0.9); /* 滚动条轨道背景色 */
      }

      &::-webkit-scrollbar-thumb {
        background: #283d88; /* 滚动条滑块背景色 */
        border-radius: 4px; /* 滑块圆角 */
      }

      &::-webkit-scrollbar-thumb:hover {
        background: #4268ce; /* 滑块悬停时的背景色 */
      }
    }
  }

  .empty {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100% - 55px);
    font-size: 24px;
    letter-spacing: 5px;
  }
}

// 展开收缩动画
.water-box-expanded {
  width: 100%;
  border-radius: 8px;
  background-color: #0c317acc;
  transition: height 0.3s ease-in-out;

  .expanded {
    display: none;
    height: 0;
    transition: height 0.3s ease-in-out;
  }
}
</style>
