<template>
  <div class="bim-briefing main-page">
    <div id="bimBriefing">
      <div id="bimBriefingContainer" class="bimBriefingContainer"></div>
    </div>
    <div class="div-left" :class="{ isShow: leftShow, isHide: !leftShow }">
      <transition name="left">
        <div class="data-content" v-show="leftShow">
          <div class="div-row">
            <div class="row-title">
              <svg-icon icon-class="signal"></svg-icon>
              模型结构树
            </div>
            <div class="model-tree scroll">
              <el-tree
                :key="treeKey"
                ref="tree"
                :default-expanded-keys="treeExpendedKeys"
                :props="{
                  children: 'children',
                  label: 'title',
                }"
                node-key="key"
                @check="onCheckTree"
                :load="loadNode"
                lazy
                show-checkbox
              ></el-tree>
            </div>
          </div>
        </div>
      </transition>
      <img
        :src="leftSrc"
        class="toSafety-fixed-left-img"
        @click="arrowRetract"
        id="arrowLeft"
      />
    </div>

    <div class="div-right" :class="{ isShow: leftShow, isHide: !leftShow }">
      <transition name="right">
        <div class="data-content" v-show="leftShow">
          <div class="div-row r100">
            <div class="row-title">
              <svg-icon icon-class="signal"></svg-icon>
              {{ title }}
            </div>
            <div class="model-properties scroll">
              <template v-if="selectMenu == 7">
                <div class="loading" v-if="propertyLoad == 'start'">
                  {{ attributeInformation }}
                </div>
                <div class="model-property-nav" v-if="propertyLoad == 'end'">
                  <el-radio-group
                    v-model="selPropertyType"
                    size="small"
                    fill="#6cf"
                  >
                    <el-radio-button label="att">属性</el-radio-button>
                    <el-radio-button label="type">类型</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="model-property-list" v-if="propertyLoad == 'end'">
                  <div
                    v-for="(item, index) in selPropertyType == 'att'
                      ? propertyAttr
                      : propertyType"
                    :key="index"
                  >
                    <div class="group-info">
                      <svg-icon icon-class="info" />
                      <span>{{ item.name }}</span>
                    </div>
                    <table class="model-property-table my-table">
                      <tr v-for="(item2, index) in item.data" :key="index">
                        <th width="50%">{{ item2.propertyName }}</th>
                        <td width="50%">{{ item2.value }}</td>
                      </tr>
                    </table>
                  </div>
                </div>
              </template>
              <template v-if="selectMenu == 1 || selectMenu == 4">
                <div class="info-list">
                  <div v-for="(item, index) in info" :key="index">
                    <div class="group-info">
                      <svg-icon icon-class="info" />
                      <span>{{ item.name }}</span>
                    </div>
                    <table class="model-property-table my-table">
                      <tr
                        v-for="(item2, index2) in item.data"
                        :key="index2 + '-' + index"
                      >
                        <th
                          width="50%"
                          :class="'txt' + selectMenu + item2.name"
                        >
                          {{ item2.name }}
                        </th>
                        <td
                          width="50%"
                          :class="'txt' + selectMenu + item2.name"
                        >
                          {{ item2.value }}
                          <span v-if="index == 0">米</span>
                          <span v-if="index == 1">米<sup>2</sup></span>
                          <span v-if="index == 2">米<sup>3</sup></span>
                        </td>
                      </tr>
                    </table>
                  </div>
                </div>
              </template>

              <div class="clipping-tip" v-if="showClipping">
                <div class="info-list">
                  <div>
                    <div class="group-info">
                      <svg-icon icon-class="info" />
                      <span>操作指南</span>
                    </div>
                    <table class="clipping-tip-table my-table">
                      <tr>
                        <th>鼠标左键按住剖面框中心箭头线</th>
                      </tr>
                      <tr>
                        <td>拖动可平移剖面框，移出剖面框的部分将被剖切掉</td>
                      </tr>
                      <tr>
                        <th>鼠标左键按住剖面框中心箭头线之间的弧线</th>
                      </tr>
                      <tr>
                        <td>拖动可旋转剖面框，移出剖面框的部分将被剖切掉</td>
                      </tr>
                    </table>
                  </div>
                </div>
              </div>
              <template v-if="selectMenu == 6">
                <el-button
                  type="primary"
                  @click="clearAllHide"
                  class="clear-all-btn"
                  >清除所有</el-button
                >
                <div class="hide-list scroll">
                  <div
                    v-for="(item, index) in hideFeatureIds"
                    :key="index"
                    class="hide-item"
                  >
                    <div class="hide-item-state">
                      {{ item.show ? "隐藏" : "显示" }}
                    </div>
                    <el-switch
                      v-model="item.show"
                      @change="changeSwitch(item)"
                    ></el-switch>
                    <div class="hide-item-id">{{ item.id }}</div>
                    <div class="hide-item-delete">
                      <i
                        class="el-icon-delete command"
                        @click="deleteFeature(item)"
                      />
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>

          <div class="div-row r33" v-if="1 == 2">
            <div class="row-title">
              <svg-icon icon-class="signal"></svg-icon>
              进度信息
            </div>
            <div class="model-progress scroll">
              <table class="model-progress-table my-table">
                <tr>
                  <th>计划开始时间</th>
                  <td>2025-01-02</td>
                </tr>
                <tr>
                  <th>计划结束时间</th>
                  <td>2025-12-31</td>
                </tr>
              </table>
              <div class="group-info">
                <svg-icon icon-class="info" />
                <span>当前进度</span>
              </div>
              <el-progress
                :text-inside="true"
                :stroke-width="26"
                color="#37A685"
                :percentage="70"
              />
            </div>
          </div>
        </div>
      </transition>
      <img
        :src="rightSrc"
        class="toSafety-fixed-right-img"
        @click="arrowRetract"
        id="arrowRight"
      />
    </div>

    <div class="div-tools">
      <div
        class="tool-item"
        :class="{ 'is-selected': selectMenu == 0 }"
        @click="doSelectMenu(0)"
      >
        <el-tooltip content="默认视点" placement="top">
          <div class="icon">
            <svg-icon icon-class="home" />
          </div>
        </el-tooltip>
      </div>

      <div
        class="tool-item"
        :class="{ 'is-selected': selectMenu == 1 }"
        @click="doSelectMenu(1)"
      >
        <el-tooltip content="构建测量" placement="top">
          <div class="icon">
            <svg-icon icon-class="size2" />
          </div>
        </el-tooltip>
      </div>

      <div
        class="tool-item"
        :class="{ 'is-selected': selectMenu == 2 }"
        @click="doSelectMenu(2)"
        v-if="1 == 2"
      >
        <el-tooltip content="构建面积" placement="top">
          <div class="icon">
            <svg-icon icon-class="area2" />
          </div>
        </el-tooltip>
      </div>

      <div
        class="tool-item"
        :class="{ 'is-selected': selectMenu == 3 }"
        @click="doSelectMenu(3)"
        v-if="1 == 2"
      >
        <el-tooltip content="构建体积" placement="top">
          <div class="icon">
            <svg-icon icon-class="volume" />
          </div>
        </el-tooltip>
      </div>

      <div
        class="tool-item"
        :class="{ 'is-selected': selectMenu == 4 }"
        @click="doSelectMenu(4)"
      >
        <el-tooltip content="距离测量" placement="top">
          <div class="icon">
            <svg-icon icon-class="distance" />
          </div>
        </el-tooltip>
      </div>

      <div
        class="tool-item"
        :class="{ 'is-selected': selectMenu == 5 }"
        @click="doSelectMenu(5)"
      >
        <el-tooltip content="剖切" placement="top">
          <div class="icon">
            <svg-icon icon-class="sectioning" />
          </div>
        </el-tooltip>
      </div>

      <div
        class="tool-item"
        :class="{ 'is-selected': selectMenu == 6 }"
        @click="doSelectMenu(6)"
      >
        <el-tooltip content="构建隐藏" placement="top">
          <div class="icon">
            <svg-icon icon-class="hide" />
          </div>
        </el-tooltip>
      </div>

      <div
        class="tool-item"
        :class="{ 'is-selected': selectMenu == 7 }"
        @click="doSelectMenu(7)"
      >
        <el-tooltip content="构建属性" placement="top">
          <div class="icon">
            <svg-icon icon-class="attribute" />
          </div>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script>
import debounce from "lodash.debounce";
import briefingTools from "./bim/briefingTools";
import SvgIcon from "@/components/SvgIcon.vue";
import apiTools from "./bim/apiTools.js";
import sapiTools from "./bim/sapiTools.js";
import bimTools from "./bim/bimTools";
export default {
  components: { SvgIcon },
  name: "BimBriefing",
  data() {
    return {
      dpi: "",
      selProject: null,
      leftSrc: "./bimImages/arrow_left_retract.png",
      rightSrc: "./bimImages/arrow_right_retract.png",
      leftShow: true,
      models: [],
      treeKey: 0,
      modelTrees: [],
      treeExpendedKeys: [],
      selectMenu: 0,
      attributeInformation: "",
      propertyAttr: [],
      propertyType: [],
      hideFeatureIds: [],
      propertyAttrValue: [],
      selPropertyType: "att",
      propertyLoad: "",
      viewPoint: [],
      info: [],
      title: "属性",
      showClipping: false,
      isClient: false,
      clip: null,
      clipState: false,
    };
  },
  mounted() {
    this.$store.dispatch("ChangeNav", 702);
    this.dpi = this.$dpi();
    window.addEventListener("resize", () => {
      if (this.dpi != this.$dpi()) {
        this.dpi = this.$dpi();
      }
    });
    this.$bus.$on(
      "projectChange",
      debounce((prj) => {
        this.selProject = prj;
        this.elId++;
        this.initEngine();
      })
    );
    window.bbApp = this;
    this.selProject = this.$store.getters.selProject;
    this.initEngine();
  },
  methods: {
    clientShow() {
      return this.bimCfg?.clientApi || false;
    },
    clearAllHide() {
      this.$confirm("确定要显示所有构件吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let api = bimBriefingApi;
          this.hideFeatureIds.forEach((it) => {
            api.Feature.setVisible(it.featureId, true);
          });
          this.hideFeatureIds = [];
        })
        .catch(() => {});
    },
    changeSwitch(item) {
      let api = bimBriefingApi;
      api.Feature.setVisible(item.featureId, item.show);
    },
    deleteFeature(item) {
      let api = bimBriefingApi;
      api.Feature.setVisible(item.featureId, true);
      let idx = this.hideFeatureIds.indexOf(item);
      this.hideFeatureIds.splice(idx, 1);
    },
    loadNode(node, resolve) {
      let that = this;
      if (node.level == 0) {
        let nd = [
          {
            title: "项目模型",
            level: 0,
            type: "root",
            key: "root",
            children: [],
            hadLoad: true,
          },
        ];

        resolve(nd);
        setTimeout(() => {
          let els = document.querySelectorAll(
            ".bim-briefing .model-tree .el-tree-node"
          );
          if (els.length > 0) {
            els[0].click();
          }
        }, 1000);
      } else if (node.level == 1) {
        let nd = [];
        that.models.forEach((d) => {
          let mnd = {
            title: d.modelName,
            level: 1,
            type: "model",
            hasLoad: false,
            modelId: d.lightweightName,
            key: d.lightweightName,
            externalId: "0",
            glid: "",
            children: [],
            data: d,
          };
          nd.push(mnd);
        });
        resolve(nd);
      } else {
        this.getTreeChildren(node, resolve);
      }
    },
    getTreeChildren(node, resolve) {
      let that = this;
      let data = node.data;
      this.$api.bim.getModelTree(data.modelId, data.glid).then((d) => {
        let tmps = (d.data || []).map((it) => {
          let title = it.externalId == 0 ? it.name : it.externalId;
          title = title
            .replaceAll('"', "")
            .replaceAll("'", "")
            .replaceAll("\\", "");
          it.title = title;
          it.key = it.glid;
          it.modelId = data.modelId;
          it.type = "data";
          it.leaf = +it.externalId != 0;
          let o = this.convertFeatureInfo(it, data.modelId);
          return o;
        });
        resolve(tmps);
      });
    },
    convertFeatureInfo(o, modelId) {
      o.modelId = modelId;
      o.featureId = o.modelId + "^" + o.externalId;
      o.name = o.name || "";
      o.name = o.name
        .replaceAll('"', "")
        .replaceAll("'", "")
        .replaceAll("\\", "");
      o.info = `[${o.externalId}]${o.groupname}-${o.name}`;
      return o;
    },
    doSelectMenu(index) {
      if (index != this.selectMenu) {
        briefingTools.clearEvent(this);
        this.selectMenu = index;
        this.showClipping = false;
        briefingTools.clearSelectFeature(this);
        briefingTools.closeClientClipping(this);
      } else {
        return;
      }
      briefingTools.clearSelectFeature(this);
      switch (index) {
        case 0:
          this.resetScene();
          this.title = "主界面";
          break;
        case 1:
          briefingTools.subFeatureSize(this);
          this.title = "构建测量";
          break;
        case 2:
          briefingTools.measurementArea(this);
          this.title = "面积测量";
          break;
        case 3:
          briefingTools.measurementVolume(this);
          break;
        case 4:
          briefingTools.distance(this);
          this.title = "距离测量";
          break;
        case 5:
          briefingTools.initClipping(this);
          this.title = "剖切";
          this.showClipping = true;
          break;
        case 6:
          briefingTools.actorVisible(this);
          this.title = "隐藏";
          break;
        case 7:
          briefingTools.getProperty(this);
          this.title = "属性";
          break;
      }
    },
    async onCheckTree(node, event) {
      let api = bimBriefingApi;
      let that = this;
      if (!this.modelLoaded) {
        this.$message.error("模型未加载完成，请稍后重试");
        return;
      }
      let checked = event.checkedNodes.includes(node);
      if (node.type == "root") {
        if (checked) {
          that.models.forEach((it) => {
            it.visible = true;
            api.Model.setVisible(it.modelId, true);
            api.Model.original(it.modelId);
            bimTools.hideParts(window.bimBriefingApi, this.hideParts);
          });
        } else {
          that.models.forEach((it) => {
            it.visible = false;
            api.Model.setVisible(it.modelId, false);
          });
        }
      } else if (node.type == "model") {
        if (checked) {
          api.Model.setVisible(node.modelId, true);
          api.Model.original(node.modelId);
          bimTools.hideParts(window.bimBriefingApi, this.hideParts);
          this.models.find((mm) => mm.modelId == node.modelId).visible = true;
        } else {
          api.Model.setVisible(node.modelId, false);
          this.models.find((mm) => mm.modelId == node.modelId).visible = false;
        }
      } else {
        let isPartLoad = false;
        if (
          !this.models.find((mm) => mm.modelId == node.modelId).visible &&
          checked
        ) {
          isPartLoad = true;
        }
        let selFeatureIds = [];
        if (node.leaf) {
          selFeatureIds = [node.featureId];
        } else {
          if (!node.leafs) {
            let leafs = await this.getNodeLeafs(node);
            node.leafs = leafs;
          }
          selFeatureIds = node.leafs.map((f) => f.featureId);
        }
        let tmps = selFeatureIds;
        if (!checked) {
          this.setFeatueVisible(tmps, false);
        } else {
          if (isPartLoad) {
            api.Model.setVisible(node.modelId, true);
            this.models.find((mm) => mm.modelId == node.modelId).visible = true;
            api.Model.original(node.modelId);
            bimTools.hideParts(window.bimBriefingApi, this.hideParts);
            if (tmps.length > 0) {
              let tmpsIds2 = tmps.splice(0, 1000);
              api.Feature.showFeatures(tmpsIds2.join("#"));
              this.setFeatueVisible(tmps, true);
            }
          } else {
            this.setFeatueVisible(tmps, true);
          }
        }
      }
    },
    setFeatueVisible(featureIds, show) {
      let len = 1000;
      let api = bimBriefingApi;
      let cnt = featureIds.length;
      for (let i = 0; i < cnt; i += len) {
        api.Feature.setVisible(featureIds.slice(i, i + len).join("#"), show);
      }
    },
    async getNodeLeafs(node) {
      const res = await this.$api.bim.getTreeAllLeafChild(
        node.modelId,
        node.glid
      );
      return (res.data || []).map((f) => {
        return this.convertFeatureInfo(f, node.modelId);
      });
    },
    arrowRetract() {
      if (this.leftShow == true) {
        this.rightSrc = "/cdn/bsimages/arrow_right_open.png";
        this.leftSrc = "/cdn/bsimages/arrow_left_open.png";
        $("#arrowLeft").animate({ left: 10 + "px" }, 300);
        $("#arrowRight").animate({ right: 10 + "px" }, 300);
      } else {
        this.rightSrc = "/cdn/bsimages/arrow_right_retract.png";
        this.leftSrc = "/cdn/bsimages/arrow_left_retract.png";

        $("#arrowLeft").animate({ left: 490 + "px" }, 300);
        $("#arrowRight").animate({ right: 490 + "px" }, 300);
      }
      this.leftShow = !this.leftShow;
    },
    initEngine() {
      if (!this.selProject) {
        return;
      }
      this.elId++;
      this.modelTrees = [];
      this.models = [];
      this.propertyAttr = [];
      this.propertyType = [];
      this.viewPoint = [];
      this.info = [];
      this.attributeInformation = "";
      bimTools.initBimCfg(this);
      setTimeout(() => {
        bimTools.initEngine(
          "bimBriefingApi",
          "bimBriefingContainer",
          this.bimCfg,
          this.initLoadModel
        );
      }, 10);
    },
    initLoadModel() {
      this.$api.bim.getDefaultViewPoint(this.selProject.id, 1).then((d) => {
        let pt = "";
        if (d.data && d.data.length > 0) {
          pt = d.data[0].viewPosition;
          pt = this.$tryToJson(pt, null);
        }
        if (pt) {
          this.viewPoint = pt;
        }
      });
      this.$api.bim
        .listBimModel({
          pageNum: 1,
          pageSize: 100,
          comId: this.selProject.comId,
          projectId: this.selProject.id,
        })
        .then((d) => {
          this.models = (d.rows || []).map((it) => {
            //it.lightweightName="4864687928672606640";
            it.modelId = it.lightweightName;
            it.bimCfg = this.$tryToJson(it.bimConfig || "{}", {});
            it.visible = false;
            it.checked = true;
            it.gis = this.$tryToJson(it.gisJson || "{}", {});
            return it;
          });
          if (this.models.length == 0) {
            this.$message.error("暂无模型，请先关联模型");
          } else {
            bimTools.addModelList(
              window.bimBriefingApi,
              this.bimCfg,
              this.models,
              (hideParts) => {
                setTimeout(() => {
                  bimTools.setDefaultViewPoint(
                    window.bimBriefingApi,
                    this.bimCfg,
                    this.viewPoint
                  );
                  this.hideParts = hideParts;
                  bimTools.hideParts(window.bimBriefingApi, hideParts);
                  this.modelLoaded = true;
                  bimTools.initLoadModel(this, bimBriefingApi);
                  this.resetScene();
                  setTimeout(() => {
                    this.doSelectMenu(7);
                  }, 4000);
                }, 1000);
              }
            );

            this.models.forEach((item) => {
              item.modelId = item.lightweightName;
              item.gis = JSON.parse(item.gisJson);
              setTimeout(() => {
                this.$refs.tree.setChecked(item.lightweightName, true, true);
              }, 3000);
            });
            this.treeKey++;
          }
        });
    },
    loadModelTree() {
      this.modelTrees = [
        {
          title: "项目模型",
          level: 0,
          type: "root",
          key: "root",
          children: [],
          hadLoad: true,
        },
      ];
      this.treeExpendedKeys.push("root");
      this.models
        .map((d) => {
          d.gis = JSON.parse(d.gisJson);
          d.modelId = d.lightweightName;
          return d;
        })
        .forEach((d) => {
          let node = {
            title: d.modelName,
            level: 1,
            type: "model",
            hasLoad: false,
            modelId: d.lightweightName,
            key: d.lightweightName,
            externalId: "0",
            glid: "",
            children: [],
            data: d,
          };
          this.treeExpendedKeys.push(node.key);
          this.modelTrees[0].children.push(node);
          this.getTreeData(node);
        });
      this.showTree = true;
    },
    getTreeData(node) {
      this.$api.bim.modelTreeAllChild(node.modelId, "").then((d) => {
        let objs = d.data || [];
        let makeTree = (tmps) => {
          tmps.forEach((item) => {
            item.children = objs.filter((it) => it.pglid == item.glid);
            if (item.children.length > 0) {
              makeTree(item.children);
            }
            item.hasLoad = true;
            item.title = item.name;
            item.key = item.glid;
            item.modelId = node.modelId;
          });
          return tmps;
        };
        node.children = makeTree(objs.filter((item) => item.level == 0));

        this.treeKey++;
      });
    },
    resetScene() {
      bimBriefingApi.Measurement.clearAllTrace();
      bimBriefingApi.Public.clearHandler();
      bimTools.resetScene(this, bimBriefingApi);
      bimTools.hideParts(window.bimBriefingApi, this.hideParts);
    },
    myClip(z) {
      let api = bimBriefingApi;
      let zClip = z||0.5; // 尝试正值
      //TODO 模型按Z轴剖切
      
      try {
        
        
        // 等待一小段时间确保剖切系统初始化完成
        setTimeout(() => {
          // 遍历所有加载的模型并应用剖切
          this.models.forEach(model => {
            const modelId = model.modelId;
            console.log("尝试对模型应用剖切:", modelId);
            
            if (api.m_model && api.m_model.get(modelId)) {
              // 创建沿Z轴的剖切平面
              const clippingPlanes = new Cesium.ClippingPlaneCollection({
                planes: [
                  new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 0.0, 1.0), zClip), // 1.0表示沿Z轴正方向剖切
                ],
                edgeWidth: 1.0,
                edgeColor: Cesium.Color.RED,
                enabled: true
              });
              
              // 将剖切平面应用到模型
              api.m_model.get(modelId).clippingPlanes = clippingPlanes;
              console.log("剖切平面已应用到模型:", modelId);
            } else {
              console.log("模型未找到或未加载:", modelId);
            }
          });
          
          console.log("Z轴剖切已应用，剖切位置:", zClip);
          this.$message.success("剖切操作已完成，剖切位置: " + zClip);
        }, 100);
      } catch (error) {
        console.error("剖切操作失败:", error);
        this.$message.error("剖切操作失败: " + error.message);
      }
    },
  },
};
</script>

<style lang="less">
.bim-briefing {
  height: 100%;
  position: relative;

  #bimBriefing {
    height: 100%;

    #bimBriefingContainer {
      height: 100%;
    }
  }

  .div-left {
    top: 10vh;
    left: 5%;
    position: absolute;
    height: 70vh;
    width: 14%;

    &.isHide {
      left: 0%;
      wdith: 0%;

      #arrowLeft {
        left: 0px !important;
      }
    }

    #arrowLeft {
      top: calc(50% - 50px);
      right: -21px;
      left: unset !important;
    }

    .div-row {
      height: 100%;
    }
  }

  .div-right {
    top: 10vh;
    right: 5%;
    position: absolute;
    height: 70vh;
    width: 14%;

    &.isHide {
      right: 0%;
      width: 0%;
    }

    #arrowRight {
      top: calc(50% - 50px);
      left: -21px;
    }

    .div-row {
      &.r33 {
        height: 180px;
      }

      &.r66 {
        height: calc(100% - 180px);
      }

      &.r100 {
        height: 100%;
      }
    }

    .clear-all-btn {
      margin: 10px;
    }

    .model-property-table {
      .txt4X {
        color: #f92e2e;
      }
      .txt4Y {
        color: #8fed12;
      }
      .txt4Z {
        color: orange;
      }
    }
    .hide-list {
      height: calc(100% - 60px);
      overflow-y: auto;
      padding: 0px 10px;

      .hide-item {
        font-size: 12px;
        display: flex;
        margin-bottom: 8px;
        align-items: center;

        .hide-item-state {
          color: #e4e7edcc;
        }

        .hide-item-id {
          flex-grow: 1;
          margin: 0px 10px;
          color: #22d3f4;
        }

        .hide-item-delete {
          font-size: 20px;
          color: #48f800;
        }
      }
    }
  }

  .data-content {
    height: 100%;

    .div-row {
      border: solid 1px #75fbfdaa;
      background-color: #06445b81;

      .row-title {
        background: linear-gradient(0deg, #105696, #c0dafb00, #1765ae);
        padding-left: 10px;
        height: 36px;
        line-height: 36px;

        .svg-icon {
          fill: #75fbfd;
        }
      }
    }
  }

  .div-tools {
    position: absolute;
    top: calc(80vh - 50px);
    left: 50%;
    margin-left: -150px;
    display: flex;
    background: #00000080;
    border-radius: 10px;

    .tool-item {
      display: flex;
      flex-flow: column;
      padding: 10px;
      align-items: center;
      cursor: pointer;

      &.is-selected {
        .icon {
          background: #097fca94;

          .svg-icon {
            fill: #75fbfd;
          }
        }

        .sp-text {
          color: #75fbfd;
        }
      }

      .icon {
        width: 30px;
        height: 30px;
        background: #c0c4cca1;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 15px;

        .svg-icon {
          width: 20px;
          height: 20px;
        }
      }

      .sp-text {
        margin-top: 4px;
        font-size: 12px;
      }
    }
  }

  .model-tree {
    height: calc(100% - 36px);
    overflow-y: auto;

    .el-tree {
      background: transparent;
      color: #eee;

      .el-checkbox {
        color: #45fdfe;
      }

      .el-tree-node {
        &:focus {
          & > .el-tree-node__content {
            background: #3489d966;

            &:hover {
              background: #3489d966;
            }
          }
        }

        .el-tree-node__content:hover {
          background: #3489d966;
        }
      }
    }
  }

  .model-properties {
    height: calc(100% - 46px);
    overflow-y: auto;
    padding-bottom: 10px;

    .model-property-nav {
      text-align: left;
      margin: 8px;
    }

    .model-property-list {
      padding: 0px 10px;
    }

    .info-list {
      padding: 10px;
    }
  }

  .model-progress {
    padding: 10px;

    .el-progress-bar {
      .el-progress-bar__innerText {
        color: #fff !important;
      }
    }
  }

  .loading {
    height: 50px;
    margin: 10px;
    line-height: 50px;
    text-align: center;
    color: #edffff85;
  }

  .group-info {
    padding: 4px 0px;

    .svg-icon {
      fill: #45fdfe;
    }

    span {
      font-size: 14px;
    }
  }

  .my-table {
    border-collapse: collapse;

    td,
    th {
      border: solid 1px #0e0f0f88;
      background: #10569688;
      padding: 6px 4px;
      font-size: 12px;
      text-align: left;
    }

    th {
      color: #22d3f4;
    }
  }

  @media (min-width: 2561px) {
    .data-content {
      .div-row {
        &.r33 {
          height: 210px;
        }

        &.r66 {
          height: calc(100% - 210px);
        }

        .row-title {
          height: 48px;
          line-height: 48px;
          font-size: 28px;
        }
      }
    }

    .div-right {
      .clear-all-btn {
        font-size: 20px;
        margin: 12px;
      }

      .hide-list {
        height: calc(100% - 80px);

        .hide-item {
          font-size: 20px;
          margin-bottom: 12px;

          .hide-item-delete {
            font-size: 24px;
          }
        }
      }
    }

    .div-tools {
      margin-left: -300px;
      border-radius: 10px;

      .tool-item {
        padding: 10px 20px;

        .icon {
          width: 60px;
          height: 60px;
          border-radius: 30px;

          .svg-icon {
            width: 40px;
            height: 40px;
          }
        }

        .sp-text {
          margin-top: 10px;
          font-size: 24px;
        }
      }
    }

    .model-tree {
      .el-tree {
        font-size: 24px;

        .el-tree-node__content {
          height: 36px;
        }

        .el-tree-node__expand-icon {
          font-size: 24px;
        }

        .el-checkbox {
          font-size: 24px;
        }

        .el-tree-node__label {
          font-size: 24px;
        }

        .el-tree__empty-text {
          font-size: 24px;
        }
      }
    }

    .group-info {
      .svg-icon {
        width: 30px;
        height: 30px;
      }

      span {
        font-size: 20px;
        position: relative;
        top: -6px;
      }
    }

    .my-table {
      td,
      th {
        font-size: 20px;
      }
    }
  }
}
</style>