<template>
  <div class="more">
    <!-- 标题区域 -->
    <div class="title"></div>

    <!-- 监控内容区域 -->
    <div class="content">
      <!-- 选择监控位置区域 -->
      <div class="content_left">
        <el-tree
          :data="dataSource"
          node-key="id"
          highlight-current
          accordion
          @node-click="handleNodeClick"
        >
          <template #default="{ node, data }">
            <div class="left_tree">
              <component
                :is="node.level === 1 ? 'FolderOpened' : ''"
                style="width: 20px; height: 20px; color: #70b7fa"
              />
              <div class="tree_text">{{ node.label }}</div>
            </div>
          </template>
        </el-tree>
      </div>
      <!-- 监控展示区域 -->
      <div class="content_right">
        <img
          src="https://materials.cdn.bcebos.com/images/107505592/68889f5dbf4bd8d8ef0cd11f98b5adea.jpeg"
        />
      </div>
    </div>

    <!-- 关闭按钮区域 -->
    <div class="close" @click="handleClose">×</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

// 树状结构数据
const dataSource = ref([
  {
    id: 1,
    label: "七年级",
    icon: "FolderOpened",
    children: [
      {
        id: 11,
        label: "1班",
      },
      {
        id: "1-2",
        label: "2班",
      },
      {
        id: "1-3",
        label: "3班",
      },
      {
        id: "1-4",
        label: "4班",
      },
    ],
  },
  {
    id: 2,
    label: "八年级",
    icon: "FolderOpened",
    children: [
      {
        id: "2-1",
        label: "1班",
      },
      {
        id: "2-2",
        label: "2班",
      },
      {
        id: "2-3",
        label: "3班",
      },
      {
        id: "2-4",
        label: "4班",
      },
    ],
  },
]);

// 点击树状结构每一个节点触发的回调
const handleNodeClick = (data: any) => {
  console.log(data);
};

// 点击关闭按钮回调
const handleClose = () => {
  router.push("/");
};
</script>

<style lang="scss" scoped>
.more {
  z-index: 2;
  position: relative;
  margin-top: 39px;
  margin-left: 17px;
  padding: 22px 38px 33px 27px;
  width: 1887px;
  height: 942px;
  background-color: rgba(2, 27, 41, 0.9);

  .title {
    width: 1823px;
    height: 32px;
    background-image: url(@/assets/images/more-title-bg.png);
    background-size: 100% 100%;
  }

  .content {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    height: 824px;

    .content_left {
      width: 108px;
      height: 100%;

      .left_tree {
        display: flex;
        align-items: center;
        width: 100%;
        font-size: 14px;
        font-weight: bold;
        font-size: 14px;

        .tree_text {
          margin-left: 6px;
          font-size: 12px;
          font-weight: 400;
        }
      }
    }

    .content_right {
      width: 1689px;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  .close {
    position: absolute;
    top: 18px;
    right: 38px;
    width: 24px;
    height: 24px;
    line-height: 18px;
    text-align: center;
    color: #a6a6a6;
    font-size: 25px;
    border-radius: 2px;
    border: 1px solid #a6a6a6;
    cursor: pointer;
  }
}

// 修改树形组件样式
::v-deep(.el-tree) {
  color: #fff;
  background: transparent;
}

::v-deep(
    .el-tree--highlight-current
      .el-tree-node.is-current
      > .el-tree-node__content
  ),
::v-deep(.el-tree-node__content:hover),
::v-deep(.el-tree-node:focus > .el-tree-node__content) {
  background-color: rgba(112, 183, 250, 0.2);
  color: #70b7fa;
}
</style>
