<template>
  <div :style="{ height: height }" :class="Expanded ? 'controller-box' : 'controller-box-expanded'">
    <box-header type="control" title="控制器" :options="pondOptions" :isExpanded="Expanded" @change="handlePondChange" @expand="handleExpand" />
    <div :class="['controller-box-operate', Expanded ? '' : 'expanded']">
      <div v-if="localData.length > 0" class="controller-box-content">
        <template v-for="item in localData" :key="item.id">
          <device-info
            :title="item.pondName"
            :subhead="item.deviceName"
            :data="item.switches"
            :isHistory="item.oxygenUsed"
            :deviceId="item.id"
            :iotId="item.iotId"
            :online="item.online"
            @change="handleDeviceRefresh"
          ></device-info>
        </template>
      </div>
      <div v-else class="empty">
        <div>暂无数据</div>
      </div>
    </div>
  </div>
</template>

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

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

const handleDeviceRefresh = () => {
  emit("refresh")
}
const handlePondChange = value => {
  emit("pond", value)
}

const Expanded = ref(true)
watch(
  () => props.isExpanded,
  value => {
    Expanded.value = value
  }
)
const localData = ref([])
watch(
  () => props.data,
  value => {
    localData.value = [...value]
  }
)
const handleExpand = flag => {
  emit("expand", flag)
}
</script>

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

  .controller-box-operate {
    // height: 100%;
    height: calc(100% - 55px);
    transition: height 0.3s ease-in-out;

    .controller-box-content {
      padding: 0px 15px 15px 15px;
      width: 100%;
      height: 100%;
      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: 100%;
    font-size: 24px;
    letter-spacing: 5px;
  }
}

// 展开收缩动画
.controller-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>
