<template>
  <view>
    <view v-if="node.level ==1" class="tree-title" @click="toggle">
      <text>{{ expanded ? '▼' : '▶' }} {{ node.title }}</text>
    </view>

    <view v-else class="list-card" @click="goToPlay(node)">
      <view class="item-row">
        <image src="/static/ic_monitor.webp" class="item-img" />
        <view class="item-c">
          <text>设备编号：{{ node.code }}</text>
          <text>设备描述：{{ node.label }}</text>
        </view>
      </view>
    </view>

    <view v-show="expanded" class="children-box">
      <TreeNode v-for="child in node.children" :key="child.code || child.id" :node="child" />
    </view>
  </view>
</template>

<script>
export default {
  name: "TreeNode",
  props: {
    node: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      expanded: false
    };
  },
  methods: {
    toggle() {
      this.expanded = !this.expanded;
    },
    goToPlay(item) {
      const detailItemStr = encodeURIComponent(JSON.stringify(item.data));
      uni.navigateTo({
        url: `/pages/sys/workbench/monitor/monitorplay?detailItem=${detailItemStr}`
      });
    }
  },
  components: {
    TreeNode: () => import("./TreeNode.vue") // 递归组件自己导入自己
  }
};
</script>

<style scoped>
.tree-title {
  padding: 20rpx 30rpx;
  background: #eaeaea;
  border-radius: 8rpx;
  margin: 10rpx 20rpx;
  font-weight: bold;
  user-select: none;
}
.children-box {
  padding-left: 30rpx;
}
.list-card {
  background: #fff;
  border-radius: 12rpx;
  margin: 25rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
  padding: 30rpx;
}
.item-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.item-c {
  display: flex;
  height: 80rpx;
  flex-direction: column;
  justify-content: space-between;
}
.item-img {
  width: 80rpx;
  height: 80rpx;
  margin-right: 20rpx;
}
</style>
