import { defineComponent, reactive } from "vue";
import CollapseTreeItem from "./collapseTreeItem";
import "./collapseTreeStyle.scss";
const testDeviceTreeData = [
  {
    name: "控制设备组1",
    id: "11",
    level: 0,
    expended: true,
    childList: [
      {
        name: "控制器A",
        id: "1101",
        level: 1,
        childList: [
          {
            name: "控制器A1",
            id: "1101001",
            level: 2,
            childList: [
              {
                name: "控制器A1a1",
                id: "110100101",
                level: 3
              },
              {
                name: "控制器A2a2",
                id: "110100202",
                level: 3
              }
            ]
          },
          {
            name: "控制器A2",
            id: "1101002",
            level: 2
          }
        ]
      },
      {
        name: "控制器B",
        id: "1102",
        level: 1
      },
      {
        name: "控制器C",
        id: "1103",
        level: 1
      },
      {
        name: "控制器D",
        id: "1104",
        level: 1
      }
    ]
  },
  {
    name: "控制设备组2",
    id: "12",
    level: 0,
    childList: [
      {
        name: "控制器B",
        id: "1202",
        level: 1
      },
      {
        name: "控制器C",
        id: "1203",
        level: 1
      },
      {
        name: "控制器D",
        id: "1204",
        level: 1
      }
    ]
  }
];

export default defineComponent({
  name: "CollapseTree",
  props: {
    value: {
      type: undefined,
      default: []
    }
  },

  setup() {
    // const count = ref<number>(1);
    const treeData = reactive({
      list: testDeviceTreeData
    });

    return () => {
      return (
        <div class="collapseTree_wrap">
          <ul
            class="root_cat_box"
            style={{ padding: "16px", overflowY: "scroll", minHeight: "100%" }}
          >
            {treeData.list.map((vFirst, kFirst) => {
              return (
                <li key={kFirst} style={{ marginBottom: "16px" }}>
                  <div
                    class={[
                      "first_level_box",
                      vFirst?.expended ? "selected_active" : ""
                    ]}
                  >
                    <div
                      class="flex items-center collapseIcon_box"
                      onClick={() => {
                        vFirst.expended = !vFirst.expended;
                      }}
                    >
                      <div
                        class={["arrow", vFirst?.expended ? "activeUp" : ""]}
                      ></div>
                      <i class="iconfont icon-fushebeizu root_tree_icon"></i>
                      <p> {vFirst.name}</p>
                    </div>
                  </div>
                  <div class="box" v-show={vFirst?.expended}>
                    {Array.isArray(vFirst.childList) &&
                      vFirst.childList.length && (
                        <ul class="child_info_box">
                          {vFirst.childList.map((item, index) => {
                            return (
                              <li key={index}>
                                <CollapseTreeItem
                                  info={item}
                                ></CollapseTreeItem>
                              </li>
                            );
                          })}
                        </ul>
                      )}
                  </div>
                </li>
              );
            })}
          </ul>
        </div>
      );
    };
  }
});
