<template>
  <div class="boardGenerate">
    <div class="top">
      <div class="componentMenu">
        <el-popover
          trigger="click"
          placement="bottom-start">
          <template #reference>
            <div style="margin-left: 20px;display: inline-block">
              <svg viewBox="0 0 1024 1024" width="20" height="20" style="margin-top: 15px;">
                <path
                  d="M629.333333 160v768h-213.333333v-768h213.333333z m-277.333333 192v576h-213.333333v-576h213.333333z m554.666667 213.333333v362.666667h-213.333334v-362.666667h213.333334z m-341.333334-341.333333h-85.333333v640h85.333333v-640z m-277.333333 192h-85.333333v448h85.333333v-448z m554.666667 213.333333h-85.333334v234.666667h85.333334v-234.666667z"
                  fill="#ddd" p-id="10516"></path>
              </svg>
              <el-icon color="#eee" :size="10" style="margin-top: 20px;margin-left: 8px;;vertical-align: top">
                <ArrowDown />
              </el-icon>
            </div>
          </template>
          <el-table>
            <el-table-column width="150" property="date" label="date" />
            <el-table-column width="100" property="name" label="name" />
            <el-table-column width="300" property="address" label="address" />
          </el-table>
        </el-popover>
        <el-popover
          trigger="click"
          placement="bottom-start">
          <template #reference>
            <div style="margin-left: 30px;display: inline-block">
              <svg viewBox="0 0 1024 1024" width="20" height="20" style="margin-top: 15px;">
                <path
                  d="M108.8 224v576C108.8 902.4 313.6 960 512 960s403.2-57.6 403.2-160v-576C915.2 12.8 108.8 12.8 108.8 224z m742.4 390.4c0 32-121.6 96-339.2 96s-339.2-64-339.2-96V518.4C249.6 563.2 384 588.8 512 588.8s262.4-25.6 339.2-70.4v96z m0-300.8v108.8c0 32-121.6 96-339.2 96s-339.2-64-339.2-96V313.6h6.4c6.4 6.4 12.8 12.8 19.2 12.8h6.4c12.8 6.4 19.2 6.4 32 12.8 19.2 12.8 32 12.8 44.8 19.2 70.4 19.2 147.2 25.6 230.4 25.6s160-6.4 230.4-25.6c12.8-6.4 25.6-6.4 38.4-12.8 12.8-6.4 25.6-6.4 32-12.8h6.4c12.8-6.4 19.2-12.8 32-19.2-6.4 0 0 0 0 0zM512 128c217.6 0 339.2 64 339.2 96S729.6 320 512 320 172.8 256 172.8 224 294.4 128 512 128z m0 768c-217.6 0-339.2-64-339.2-96V704c76.8 44.8 211.2 70.4 339.2 70.4s262.4-25.6 339.2-70.4v89.6c0 38.4-121.6 102.4-339.2 102.4z"
                  fill="#ddd" p-id="22021"></path>
              </svg>
              <el-icon color="#eee" :size="10" style="margin-top: 20px;margin-left: 8px;;vertical-align: top">
                <ArrowDown />
              </el-icon>
            </div>
          </template>
          <el-table>
            <el-table-column width="150" property="date" label="date" />
            <el-table-column width="100" property="name" label="name" />
            <el-table-column width="300" property="address" label="address" />
          </el-table>
        </el-popover>
        <el-popover
          trigger="click"
          placement="bottom-start"
        >
          <template #reference>
            <div style="margin-left: 30px;display: inline-block">
              <svg viewBox="0 0 1024 1024" width="20" height="20" style="margin-top: 15px;">
                <path
                  d="M959.825022 384.002258V191.939717C959.825022 121.2479 902.517291 63.940169 831.825474 63.940169H191.939717C121.2479 63.940169 63.940169 121.2479 63.940169 191.939717v639.885757C63.940169 902.517291 121.2479 959.825022 191.939717 959.825022h639.885757c70.691817 0 127.999548-57.307731 127.999548-127.999548V384.002258zM146.66502 146.66502a63.737872 63.737872 0 0 1 45.336109-18.784682h639.997742A63.961844 63.961844 0 0 1 895.884854 192.001129V320.062089H127.880338V192.001129A63.737872 63.737872 0 0 1 146.66502 146.66502z m269.1267 461.308451v-223.971213h192.181751v223.971213h-192.181751z m192.181751 63.940169v223.971214h-192.181751v-223.971214h192.181751z m-256.12192-63.940169H127.880338v-223.971213h223.971213v223.971213z m-205.186531 269.235073a63.466939 63.466939 0 0 1-18.784682-45.209673V671.91364h223.971213v223.971214H192.001129a63.625887 63.625887 0 0 1-45.336109-18.67631z m749.219834-45.209673A63.763159 63.763159 0 0 1 831.998871 895.884854H671.91364v-223.971214h223.971214v160.085231z m0-224.0254h-223.971214v-223.971213h223.971214v223.971213z"
                  fill="#ddd" p-id="23072"></path>
              </svg>
              <el-icon color="#eee" :size="10" style="margin-top: 20px;margin-left: 8px;;vertical-align: top">
                <ArrowDown />
              </el-icon>
            </div>
          </template>
          <el-table>
            <el-table-column width="150" property="date" label="date" />
            <el-table-column width="100" property="name" label="name" />
            <el-table-column width="300" property="address" label="address" />
          </el-table>
        </el-popover>
      </div>
      <div class="optionsMenu"></div>
    </div>
    <div class="left">
      <div class="title">
        图层
      </div>
      <div class="level" v-for="i in 10">
        <div class="isShow">
          <el-icon style="cursor: pointer" color="#fff" :size="16">
            <View />
          </el-icon>
        </div>
        <div class="icon">
          <svg viewBox="0 0 1024 1024" width="16" height="16"
               style="margin-left: 10px;">
            <path
              d="M629.333333 160v768h-213.333333v-768h213.333333z m-277.333333 192v576h-213.333333v-576h213.333333z m554.666667 213.333333v362.666667h-213.333334v-362.666667h213.333334z m-341.333334-341.333333h-85.333333v640h85.333333v-640z m-277.333333 192h-85.333333v448h85.333333v-448z m554.666667 213.333333h-85.333334v234.666667h85.333334v-234.666667z"
              fill="#ddd" p-id="10516"></path>
          </svg>
        </div>
        <div class="boardName">
          <span style="  display: inline-block;">图表名称</span>
        </div>
      </div>
    </div>
    <div class="center"></div>
    <div class="right"></div>
  </div>
</template>
<script setup>
import { ArrowDown, View } from '@element-plus/icons-vue';
</script>
<style scoped lang="less">
.boardGenerate {
  width: 100%;
  height: 100%;
  overflow: hidden;
  --boardGenerateTopHeight: 50px;

  .top {
    width: 100%;
    height: var(--boardGenerateTopHeight);
    background-color: #1F2224;
    border-bottom: 1px solid #000;
  }

  .left {
    width: 200px;
    display: inline-block;
    height: calc(100vh - var(--boardGenerateTopHeight));
    overflow: auto;
    background-color: #1F2224;
    border-right: 1px solid #000;

    .title {
      width: 100%;
      height: 50px;
      line-height: 50px;
      text-align: center;
      color: #FFF;
      border-bottom: 1px solid #000;
    }

    .level {
      display: flex;
      align-items: center; /* 核心对齐逻辑 */
      height: 50px;
      padding-left: 20px;
      border-bottom: 1px solid #000;

      .isShow, .icon, .boardName {
        display: flex;
        align-items: center;
      }

      .isShow {
        width: 30px;
        height: 50px;
        border-right: 1px solid #000;
      }

      .icon {
        width: 40px;
      }

      .boardName {
        font-size: 14px;
        color: #fff;
      }
    }
  }

  .center {
    width: calc(100% - 400px);
    display: inline-block;
    background-color: #1F2224;
    height: calc(100vh - var(--boardGenerateTopHeight));
    overflow: auto;
  }

  .right {
    width: 200px;
    display: inline-block;
    height: calc(100vh - var(--boardGenerateTopHeight));
    overflow: auto;
    background-color: #1F2224;
    border-left: 1px solid #000;
  }
}

</style>
