<!-- 飞控中心无人机应slot -->
<template>
  <div class="list">
    <template v-if="wsList && wsList.length">
      <!-- <div class="all">全部</div> -->
      <div class="pl10 pb30 pr8">
        <Item
          v-for="item in wsList"
          :key="item.deptId"
          :data="item"
          :level="1"
          @refresh="$emit('refresh')"
        />
      </div>
    </template>
  </div>
</template>

<script>
import Item from "./components/item";
export default {
  components: { Item },
  props: {
    containerStyle: {
      type: String | Object,
      default: () => ({}),
    },
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      components_start: true, //组件当前的状态
      wsList: [],
      num: 0,
    };
  },
  watch: {
    list: {
      immediate: true,
      deep: true,
      handler(val) {
        if (!val || !Array.isArray(val)) {
          this.wsList = [];
          return;
        }
        
        // 保留原有的状态（collapse 和 isCheck）
        if (this.wsList && this.wsList.length > 0) {
          const preserveStates = (newItems, oldItems) => {
            newItems.forEach(newItem => {
              const oldItem = oldItems.find(old => old.deptId === newItem.deptId);
              if (oldItem) {
                // 保留 collapse 状态
                if (oldItem.hasOwnProperty('collapse')) {
                  this.$set(newItem, 'collapse', oldItem.collapse);
                } else {
                  // 如果旧数据没有 collapse 属性，设置默认值为 false（收起状态）
                  this.$set(newItem, 'collapse', false);
                }
                // 保留 isCheck 状态
                if (oldItem.hasOwnProperty('isCheck')) {
                  this.$set(newItem, 'isCheck', oldItem.isCheck);
                }
              } else {
                // 如果是新项目，设置默认的 collapse 状态
                this.$set(newItem, 'collapse', false);
              }
              // 处理子项
              if (newItem.child && oldItem && oldItem.child) {
                preserveStates(newItem.child, oldItem.child);
              }
            });
          };
          preserveStates(val, this.wsList);
        } else {
          // 初始化时确保每个项目都有 collapse 状态
          const initializeStates = (items) => {
            items.forEach(item => {
              if (!item.hasOwnProperty('collapse')) {
                this.$set(item, 'collapse', false);
              }
              // 处理子项
              if (item.child && Array.isArray(item.child)) {
                initializeStates(item.child);
              }
            });
          };
          initializeStates(val);
        }
        this.wsList = val;
      },
    },
  },
  mounted() {
    // watcher with immediate: true will handle initialization
  },
  methods: {
  },
};
</script>

<style lang="scss">
.list {
  overflow-y: auto;
}
.cpt-observe-uav_list {
  height: 100%;
  box-sizing: border-box;
}
.mountItem {
  background: rgba(25, 42, 61, 0.5);
  box-shadow: inset 0 0 38px 0 rgba(0, 219, 255, 0.71);
  border-radius: 10px;
  padding: 10px;
}
.wrjBtn {
  background: rgba(6, 23, 56, 0.6);
  border: 0 solid #00b6ff;
  box-shadow: 1px 1px 2px 0 rgba(3, 16, 50, 0.5), inset 0 0 12px 0 #00b6ff;
  border-radius: 3px;
}
.all {
  margin-top: 10px;
  text-indent: 1em;
  background-image: linear-gradient(
    270deg,
    rgba(12, 134, 242, 0) 0%,
    rgba(37, 151, 251, 0.62) 99%
  );
  width: 100px;
  color: #a6caeb;
  height: 20px;
  border-radius: 4px;
}
.jz {
  height: 100%;
  display: flex;
  align-items: center;
}
.mar {
  margin: 0 0 0 5px;
  color: #70daf9 !important;
  font-weight: 700 !important;
}
</style>