<template>
  <div class="fullHeight">
    <div class="block fullHeight">
      <div class="system-left">
         <!-- 隐患类别 -->
        <div class="pageTitle">
          {{$t('message.safeMangeCheck.hiddenDanger')+$t('message.safeMangeCheck.level')}}
          <el-button
            type="primary"
            plain
            size="small"
            style="float: right; margin-top: -2px"
            @click="add(1)" v-if="$route.path.indexOf('/project/')==-1"
          >
            <!-- 新增分类 -->
            {{$t('message.safeMangeCheck.add')+$t('message.safeMangeCheck.cate')}}
          </el-button>
        </div>
        <vue-scroll class="treeList">
          <div style="padding-top: 10px">
            <ul v-for="(name, indexs) in dataList" :key="indexs">
              <li :class="{ active: indexs == current && currentTwo == -1 }">
                <div
                  class="clickName"
                  @click="next(indexs, $event, name, 1)"
                  style="display: inline-block"
                  :title="name.hiddenDangerName"
                >
                  <div class="imgbox">
                    <i v-if="current != indexs" class="el-icon-caret-right"></i>
                    <i v-else class="el-icon-caret-bottom"></i>
                  </div>
                  <!-- <el-popover
                    placement="top-start"
                    v-model="name.visible"
                    :content="name.hiddenDangerName"
                  > -->
                    <span
                      slot="reference"
                      @mouseenter="
                        name.visible =
                          name.hiddenDangerName.length > 9 ? true : false
                      "
                      @mouseleave="name.visible = false"
                      >{{
                        name.hiddenDangerName.length > 9
                          ? name.hiddenDangerName.substring(0, 8) + "..."
                          : name.hiddenDangerName
                      }}</span
                    >
                  <!-- </el-popover> -->
                </div>
                <div
                  style="
                    float: right;
                    clear: both;
                    height: 25px;
                    margin-right: 30px;
                  " v-if="$route.path.indexOf('/project/') == -1 "
                >
                  <!-- <img
                    @click="add(2,name.id)"
                    src="../../assets/images/add-blue.png"
                    style="vertical-align: -1.3px;margin-right: 12px;"
                  /> -->
                  <!-- <div style="float:right;clear:both;height: 32px;margin-right:25px"> -->
                  <el-button
                    type="text"
                    size="small"
                    style="font-size: 14px"
                    @click="add(2, name.id)"
                  >
                  <!-- $t('message.safeMangeCheck.add')+$t('message.safeMangeCheck.subordinate') -->
                  {{'新增下级'}}
                    <!-- 新增下级 -->
                    </el-button
                  >
                  <el-button
                    type="text"
                    size="medium"
                    icon="el-icon-edit"
                    @click="edit1(name, 1)"
                    style="font-size: 14px"
                  ></el-button>
                  <el-button
                    type="text"
                    size="medium"
                    style="color: red; font-size: 14px"
                    icon="el-icon-delete"
                    @click="del1(name)"
                  ></el-button>
                </div>
              </li>
              <ul
                v-for="(item, i) in name.children"
                id="child"
                v-if="current == indexs"
                :key="i"
              >
                <!-- <li :class="{actives:index==current&&i==threeIndex}"> -->
                <li
                  :class="{ active: i == currentTwo && current != -1 }"
                  @click="next2(item)"
                >
                  <el-popover
                    placement="top-start"
                    v-model="item.visible"
                    :content="item.hiddenDangerName"
                  >
                    <div
                      slot="reference"
                      @mouseenter="
                        item.visible =
                          item.hiddenDangerName.length > 0 ? true : false
                      "
                      @mouseleave="item.visible = false"
                      style="display: inline-block; width: 60%"
                      @click="showThree(item, i)"
                    >
                      {{
                        item.hiddenDangerName.length > 10
                          ? item.hiddenDangerName.substring(0, 9) + "..."
                          : item.hiddenDangerName
                      }}
                    </div>
                  </el-popover>
                  <div
                    style="
                      float: right;
                      clear: both;
                      height: 25px;
                      margin-right: 30px;
                    " v-if="$route.path.indexOf('/project/')==-1"
                  >
                    <!-- <el-button
                      type="text"
                      size="medium"
                      icon="el-icon-add"
                      style="margin-right:10px;font-size: 14px;"
                      @click="add(2,item.id)"
                    ></el-button> -->
                    <el-button
                      type="text"
                      size="medium"
                      icon="el-icon-edit"
                      style="font-size: 14px"
                      @click="edit1(item, 2)"
                    ></el-button>
                    <el-button
                      type="text"
                      size="medium"
                      style="color: red; font-size: 14px"
                      icon="el-icon-delete"
                      @click="del1(item)"
                    ></el-button>
                  </div>
                </li>
              </ul>
              <!-- <li
                class="add"
                v-if="current==index"
                @click="add(2)"
                style="padding-left: 40px;color: #409EFF;font-size:13px"
              >
                <img
                  src="../../assets/images/add-blue.png"
                  style="vertical-align: -1.3px;margin-right: 5px;"
                />新增大项
              </li>-->
            </ul>
            <li
              class="title"
              style="text-align: center; line-height: 140px"
              v-show="dataList.length == 0"
            >
              {{$t('message.safeMangeCheck.noData')}}
              <!-- 暂无数据 -->
            </li>
          </div>
        </vue-scroll>
      </div>
      <div class="system-right">
        <div class="pageTitle">
          <!-- 隐患具体项 -->
          {{$t('message.safeMangeCheck.hiddenDanger')+$t('message.safeMangeCheck.detailItems')}}
          <!-- current != -1 ||  -->
          <div v-if="$route.path.indexOf('/project/')==-1">
            <el-button
              v-show="currentTwo != -1"
              type="primary"
              plain
              size="small"
              style="float: right; margin: -2px 15px 0 0"
              @click="add(3)"
            >
              <!-- 添加隐患 -->
              {{$t('message.safeMangeCheck.add')+$t('message.safeMangeCheck.hiddenDanger')}}
            </el-button>
            <el-button
              type="primary"
              plain
              size="small"
              style="float: right; margin: -2px 15px 0 0"
              @click="downloadFn"
            >
            {{$t('message.safeMangeCheck.downloadModel')}}
              <!-- 下载隐患库导入模板 -->
            </el-button>
            <el-upload ref="upload" :before-upload="beforeAvatarUpload"
              :action="$http.defaults.baseURL+'xmgl/inspectHiddenDangerLibrary/uploadExcelHiddenDangerLibrary'"
              :limit="1"
              :show-file-list="false"
              :data="{sn:$store.state.userInfo.headquartersSn}"
              name="excelFile"
              style="float: right; margin: -2px 15px 0 0"
              :on-success="handleSuccess">
                  <el-button size="small" type="primary" plain v-loading.fullscreen.lock="fullscreenLoading">
                    <!-- 导入隐患库 -->
                    {{$t('message.safeMangeCheck.toLeadModel')}}
                  </el-button>
            </el-upload>
          </div>
        </div>
        <div class="table_box" style="margin: 13px">
          <el-table height="652px" :data="threeData" class="tables">
           <!-- 序号 -->
            <el-table-column
              type="index"
              :label="$t('message.safeMangeCheck.serialNum')"
              width="50"
              align="center"
            ></el-table-column>
            <!-- 隐患级别 -->
            <el-table-column
              prop="hiddenDangerLevel"
              :label="$t('message.safeMangeCheck.hiddenDanger')+$t('message.safeMangeCheck.level2')"
              align="center" width="120"
            >
            </el-table-column>
            <!-- 排查内容 -->
            <el-table-column
              prop="checkContent"
              :label="$t('message.safeMangeCheck.reject')+$t('message.safeMangeCheck.dialog.content')" width="220"
            ></el-table-column>
            <!-- 整改要求 -->
            <el-table-column
              prop="rectifyRequire"
              :label="$t('message.safeMangeCheck.dialog.change')+$t('message.safeMangeCheck.dialog.ask')"
            ></el-table-column>
            <!-- 整改时限(天) -->
            <el-table-column
              prop="changeLimit"
              :label="$t('message.safeMangeCheck.changeTimeLimit')"
              align="center" width="100"
            ></el-table-column>
            <!-- <el-table-column
              prop="createTime"
              label="创建时间"
              align="center"
            ></el-table-column> -->
            <!-- 操作 -->
            <el-table-column :label="$t('message.safeMangeCheck.operate')" align="center" width="200" v-if="$route.path.indexOf('/project/')==-1">
              <template slot-scope="scope">
                <!-- <el-button
                  @click="edit1(scope.row, 4)"
                  type="text"
                  size="small"
                  icon="el-icon-s-tools"
                >
                  <span style="font-size: 14px">换算单位</span>
                </el-button> -->
                <el-button
                  @click="edit1(scope.row, 3)"
                  type="text"
                  size="small"
                  icon="el-icon-edit"
                >
                <!-- 编辑 -->
                  <span style="font-size: 14px">{{$t('message.safeMangeCheck.edit')}}</span>
                </el-button>
                <el-button
                  @click="del2(scope.row)"
                  type="text"
                  size="small"
                  style="color: red"
                  icon="el-icon-delete"
                >
                <!-- 删除 -->
                  <span style="font-size: 14px">{{$t('message.safeMangeCheck.delete')}}</span>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <el-dialog
      class="dialig"
      :modal-append-to-body="false"
      :title="title"
      :visible.sync="dialogVisible"
      width="667px"
    >
      <div class="dialog_content">
        <el-form
          ref="form"
          :model="dialogdata"
          :rules="rules"
          label-width="120px"
          size="medium"
          class="dialogFormBox"
        >
          <!-- <el-form-item label="编码" prop="code">
            <el-input
              v-model="dialogdata.code"
              placeholder="请输入"
            ></el-input>
          </el-form-item> -->
        <!-- 隐患分类名称 -->
          <el-form-item :label="$t('message.safeMangeCheck.hiddenDangerDialog.hiddenDangerCateName')" prop="hiddenDangerName">
            <el-input
              v-model="dialogdata.hiddenDangerName"
              :placeholder="$t('message.safeManage.placeholder')"
            ></el-input>
          </el-form-item>
          <!-- 排序 -->
          <el-form-item :label="$t('message.safeMangeCheck.sort')">
            <el-input-number v-model="dialogdata.orderSort" ></el-input-number>
          </el-form-item>
          <!-- 备注 -->
          <el-form-item :label="$t('message.safeMangeCheck.remark')">
            <el-input v-model="dialogdata.remark" :placeholder="$t('message.safeManage.placeholder')"></el-input>
          </el-form-item>
          <div class="dialog-footer">
            <el-button
              @click="dialogVisible = false"
              size="medium"
              icon="el-icon-circle-close"
              >{{$t('message.safeMangeCheck.dialog.cancel')}}</el-button
            >
            <el-button
              type="primary"
              @click="editSave('form')"
              size="medium"
              icon="el-icon-circle-check"
              >{{$t('message.safeMangeCheck.dialog.confirm')}}</el-button
            >
          </div>
        </el-form>
      </div>
    </el-dialog>
    <el-dialog
      class="dialig"
      :modal-append-to-body="false"
      :title="title"
      :visible.sync="dialogVisible3"
      width="667px"
    >
      <div class="dialog_content">
        <el-form
          ref="form2"
          :model="dialogdata"
          label-width="120px"
          :rules="rules2"
          size="medium"
          class="dialogFormBox"
        >
          <!-- <el-form-item label="编码" prop="itemCode">
            <el-input
              v-model="dialogdata.itemCode"
              placeholder="请输入"
            ></el-input>
          </el-form-item> -->
          <!-- 排查内容 -->
          <el-form-item :label="$t('message.safeMangeCheck.reject')+$t('message.safeMangeCheck.dialog.content')" prop="checkContent">
            <el-input
              v-model="dialogdata.checkContent"
              :placeholder="$t('message.safeManage.placeholder')" type="textarea" autosize
            ></el-input>
          </el-form-item>
          <!-- 整改要求 -->
          <el-form-item :label="$t('message.safeMangeCheck.dialog.change')+$t('message.safeMangeCheck.dialog.ask')" prop="rectifyRequire">
            <el-input
              v-model="dialogdata.rectifyRequire"
              :placeholder="$t('message.safeManage.placeholder')" type="textarea" autosize
            ></el-input>
          </el-form-item>
          <!-- 整改时限(天) -->
        <el-form-item :label="$t('message.safeMangeCheck.changeTimeLimit')" prop="changeLimit">
            <el-input-number v-model="dialogdata.changeLimit" :min="1" ></el-input-number>
          </el-form-item>
          <!-- 隐患级别 -->
          <el-form-item :label="$t('message.safeMangeCheck.hiddenDanger')+$t('message.safeMangeCheck.level2')" prop="hiddenDangerLevel">
            <el-select
              v-model="dialogdata.hiddenDangerLevel"
              :placeholder="$t('message.alarmValueSet.placeholder_select')"
            >
              <el-option :label="$t('message.safeMangeCheck.first')" :value="$t('message.safeMangeCheck.first')"> </el-option>
              <el-option :label="$t('message.safeMangeCheck.second')" :value="$t('message.safeMangeCheck.second')"> </el-option>
              <el-option :label="$t('message.safeMangeCheck.third')" :value="$t('message.safeMangeCheck.third')"> </el-option>
              <el-option :label="$t('message.safeMangeCheck.forth')" :value="$t('message.safeMangeCheck.forth')"> </el-option>
            </el-select>
          </el-form-item>
         <!-- 备注 -->
          <el-form-item :label="$t('message.safeMangeCheck.remark')">
            <el-input v-model="dialogdata.remark"></el-input>
          </el-form-item>
          <div class="dialog-footer">
            <el-button
              @click="dialogVisible3 = false"
              size="medium"
              icon="el-icon-circle-close"
              >{{$t('message.safeMangeCheck.dialog.cancel')}}</el-button
            >
            <el-button
              type="primary"
              @click="editSave('form2')"
              :loading="isloading"
              size="medium"
              icon="el-icon-circle-check"
              >{{$t('message.safeMangeCheck.dialog.confirm')}}</el-button
            >
          </div>
        </el-form>
      </div>
    </el-dialog>
 
  </div>
</template>

<script>
import {
  addinspectHiddenDangerLibraryApi,
  editinspectHiddenDangerLibraryApi,
  getinspectHiddenDangerLibraryListApi,
  deleteinspectHiddenDangerLibraryApi,
  addinspectHiddenDangerItemRecordApi,
  editinspectHiddenDangerItemRecordApi,
  getinspectHiddenDangerItemRecordListApi,
  deleteinspectHiddenDangerItemRecordApi
} from "@/assets/js/api/safeManage";
export default {
  data() {
    return {
      isloading: false,
      currentTwo: -1,
      dialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,
      current: -1,
      currentIndex: 0,
      dataList: [],
      threeData: [],
      //   editId: "",
      title: "",
      dialogdata: {
        code: "",
        remark: "",
        hiddenDangerName: "",
        parentId: "",
        sn: "",
        type: 1,orderSort:0
      },
      parentid: "",
      parentid1: "",
      type: 0,
      ofThree: false,
      threeIndex: -1,
      rules: {
        hiddenDangerName: [{ required: true, message: this.$t('message.safeMangeCheck.requireFields'), trigger: "blur" }],
        code: [{ required: true, message: this.$t('message.safeMangeCheck.requireFields'), trigger: "blur" }],
      },
      rules2: {
        itemCode: [{ required: true, message: this.$t('message.safeMangeCheck.requireFields'), trigger: "blur" }],
        checkContent: [{ required: true, message: this.$t('message.safeMangeCheck.requireFields'), trigger: "blur" }],
        rectifyRequire: [{ required: true, message: this.$t('message.safeMangeCheck.requireFields'), trigger: "blur" }],
        changeLimit: [{ required: true, message: this.$t('message.safeMangeCheck.requireFields'), trigger: "blur" }],
        hiddenDangerLevel: [{ required: true, message:this.$t('message.safeMangeCheck.requireSelect'), trigger: "change" }],
      },
      secondId: "",
      fullscreenLoading:false
    };
  },
  mounted() {
    this.loadList();
  },
  //列表加载
  methods: {
      beforeAvatarUpload(){
          this.fullscreenLoading=true
      },
      handleSuccess(res,file){
          console.log(res)
          this.$refs.upload.clearFiles()
          this.fullscreenLoading=false
          if(res.code==200||res.code==0){
              this.$message.success(this.$t('message.safeMangeCheck.toLeadSuccess')+'!')
              this.loadList()
          }else{
              this.$message.error(this.$t('message.safeMangeCheck.toLeadFail')+'!')
          }
      },
    downloadFn(){
        window.location.href = this.$http.defaults.baseURL + "xmgl/inspectHiddenDangerLibrary/downloadExcelHiddenDangerLibrary"
    },
    add(type, id) {
      if (id) {
        this.parentid1 = id;
      }
      this.type = type;
      this.dialogdata = {};
      if (this.type == 1) {
        this.dialogVisible = true;
        this.title =this.$t('message.safeMangeCheck.hiddenDangerDialog.addNewCate');
      } else if (this.type == 2) {
        this.dialogVisible = true;
        this.title = this.$t('message.safeMangeCheck.hiddenDangerDialog.addNewSecondCate');
      } else if (this.type == 3) {
        this.dialogVisible3 = true;
        this.title = this.$t('message.safeMangeCheck.hiddenDangerDialog.addNewDetailItems') ;
      }
    },
    editSave(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // this.isloading = true;
          if (this.type == 1) {
            this.dialogdata.sn = this.$store.state.userInfo.headquartersSn;
            this.dialogdata.parentId = 0;
          } else if (this.type == 2) {
            this.dialogdata.sn = this.$store.state.userInfo.headquartersSn;
            this.dialogdata.parentId = this.parentid1;
          } else if (this.type == 3) {
            if (this.currentTwo != -1) {
              this.dialogdata.libraryId = this.secondId;
            } else if (this.current != -1) {
              this.dialogdata.libraryId = this.parentid1;
            }
          }
          //   console.log(this.dialogdata)
          //
          if (this.type == 1 || this.type == 2) {
            if (this.title.indexOf("编辑") != -1) {
              editinspectHiddenDangerLibraryApi(this.dialogdata).then((res) => {
                // this.isloading = false;
                this.dialogVisible = false;
                this.dialogVisible2 = false;
                this.dialogVisible3 = false;
                this.loadList();
                this.$message.success(this.$t('message.safeMangeCheck.hiddenDangerDialog.updateSuccess')+'!');
              });
            } else {
              addinspectHiddenDangerLibraryApi(this.dialogdata).then((res) => {
                this.isloading = false;
                this.dialogVisible = false;
                this.dialogVisible2 = false;
                this.dialogVisible3 = false;
                this.loadList();
                this.$message.success(this.$t('message.safeMangeCheck.hiddenDangerDialog.addSuccess')+'!');
              });
            }
          } else {
            if (this.title.indexOf("编辑") != -1) {
              editinspectHiddenDangerItemRecordApi(this.dialogdata).then((res) => {
                this.isloading = false;
                this.dialogVisible = false;
                this.dialogVisible2 = false;
                this.dialogVisible3 = false;
                this.loadRigthtList();
                this.$message.success(this.$t('message.safeMangeCheck.hiddenDangerDialog.updateSuccess')+'!');
              });
            } else {
              console.log(this.dialogdata)
              addinspectHiddenDangerItemRecordApi(this.dialogdata).then((res) => {
                this.isloading = false;
                this.dialogVisible = false;
                this.dialogVisible2 = false;
                this.dialogVisible3 = false;
                this.loadRigthtList();
                this.$message.success(this.$t('message.safeMangeCheck.hiddenDangerDialog.addSuccess')+'!');
              });
            }
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    edit1(data, type) {
      data = JSON.parse(JSON.stringify(data));
      this.type = type;
      if (data.children) {
        delete data["children"];
      }
      if (data.createTime) {
        delete data["createTime"];
      }
      console.log(data)
      this.dialogdata = data;
      
      if (this.type == 1) {
        this.dialogVisible = true;
        this.title = this.$t('message.safeMangeCheck.hiddenDangerDialog.editNewCate');
        this.$nextTick(() => {
          this.$refs.form.clearValidate();
        });
      } else if (this.type == 2) {
        this.dialogVisible = true;
        this.title = this.$t('message.safeMangeCheck.hiddenDangerDialog.editNewSecondCate');
        this.$nextTick(() => {
          this.$refs.form.clearValidate();
        });
        // "编辑具体项"
      } else if (this.type == 3) {
        this.dialogVisible3 = true;
        this.title = this.$t('message.safeMangeCheck.hiddenDangerDialog.editNewDetailItems');
        this.$nextTick(() => {
          this.$refs.form2.clearValidate();
        });
      } else if (this.type == 4) {
        
      }
    },
    del1(obj) {
      this.$confirm(
        this.$t("message.personnelPosition.beaconManage.table.confirmText") +
          "【" +
          obj.hiddenDangerName +
          "】?",
        this.$t("message.personnelPosition.beaconManage.table.Tips"),
        {
          confirmButtonText: this.$t(
            "message.personnelPosition.confirmButtonText"
          ),
          cancelButtonText: this.$t(
            "message.personnelPosition.cancelButtonText"
          ),
          type: "warning",
        }
      )
        .then(() => {
          deleteinspectHiddenDangerLibraryApi({ id: obj.id }).then((result) => {
            if (result.success) {
              this.$message.success(result.message);
              this.loadList();
            }
          });
        })
        .catch(() => {});
    },
    del2(obj) {
      this.$confirm(
        this.$t("message.personnelPosition.beaconManage.table.confirmText") +
          "【" +
          obj.checkContent +
          "】?",
        this.$t("message.personnelPosition.beaconManage.table.Tips"),
        {
          confirmButtonText: this.$t(
            "message.personnelPosition.confirmButtonText"
          ),
          cancelButtonText: this.$t(
            "message.personnelPosition.cancelButtonText"
          ),
          type: "warning",
        }
      )
        .then(() => {
          deleteinspectHiddenDangerItemRecordApi({ id: obj.id }).then((result) => {
            if (result.success) {
              this.$message.success(result.message);
              this.loadRigthtList();
            }
          });
        })
        .catch(() => {});
    },
    showThree(data, index) {
      this.currentTwo = index;
      this.type = 3;
      this.threeIndex = index;
      this.parentid = data.id;
      this.ofThree = true;
      //   if (data.children.length != 0) {
      this.threeData = data.children;
      //   }
    },
    // handleNodeClick(data) {
    //   console.log(data);
    // },
    next2(item) {
      this.secondId = item.id;
      this.loadRigthtList();
    },
    next(index, $event, data, type) {
      
      if(index == this.current) {
        console.log('收起')
        this.current = -1
      }else {
        console.log('展开')
        this.current = index;
      }
      console.log("data", data);
      console.log("$event", $event);
      console.log("index", index);
      console.log("type", type);
      console.log("this.current", this.current);
      
      


      this.currentTwo = -1;
      // 
      if (this.current != index) {
        this.threeIndex = -1;
      }

      this.threeData = [];
      this.type = type;
      this.parentid1 = data.id;
      //   if (this.current == index) {
      //     this.current = -1;
      //   } else {
      //     this.current = index;
      //   }
      // console.log(this.parentid1)
      this.loadRigthtList();
    },
    loadList() {
      let param = {
        sn: this.$store.state.userInfo.headquartersSn,
      };
      getinspectHiddenDangerLibraryListApi(param).then((res) => {
        console.log('dataList===============',res)
        this.dataList = res.result;
      });
    },
    loadRigthtList() {
      let id = 0;
      if (this.currentTwo != -1) {
        id = this.secondId;
      } else if (this.current != -1) {
        id = this.parentid1;
      }
      let param = {
        libraryId: id,
      };
      getinspectHiddenDangerItemRecordListApi(param).then((res) => {
        this.threeData = res.result;
      });
    },
  },
};
</script>

<style scoped lang="less">
.el-button--small,
.el-button--small.is-round {
  padding: 6px 9px;
}
.block {
  overflow: hidden;
  height: calc(100% + 0px);
  background-color: #f3f5fd;
  .system-left {
    float: left;
    width: 330px;
    padding: 20px 15px;
    height: calc(100% - 40px);
    background-color: white;
    .treeList {
      background-color: rgba(216, 216, 216, 0.2);
      height: calc(100% - 42px) !important;
    }
    li {
      cursor: pointer;
      font-size: 16px;
      line-height: 32px;
      letter-spacing: 1px;
      font-weight: bold;
      .clickName {
        width: calc(100% - 180px);
        overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        .imgbox {
          display: inline-block;
          margin: 0 6px 0 13px;
          font-size: 16px;
        }
      }
    }
    li:hover,
    .active {
      // background: linear-gradient(270deg, white, #b7d8ff 100%);
      background-color: rgba(81, 129, 246, 0.14);
      color: @--color-primary;
    }
    #child {
      li {
        font-size: 15px;
        padding-left: 39px;
        font-weight: normal;
      }
    }
  }
  .system-right {
    float: right;
    // margin-right: 1.5%;
    margin-left: 20px;
    width: calc(100% - 360px - 20px - 30px);
    // min-height: 620px;
    height: calc(100% - 40px);
    // border: 1px solid #e9e9e9;
    background-color: white;
    padding: 20px 15px;
  }
}
.formTwoInput {
  /deep/.el-form-item__content {
    margin-left: 0 !important;
  }
}
.el-icon-question {
  opacity: 0.7;
}

/deep/.input-with-select {
    .el-input-group__append {
        background-color: #fff;
    }
    .el-select{
        width: 130px!important;
        .el-input {
            width: 100%!important;
        }
    }
}
.jyjzPage{
  .block{
    background-color: transparent;
    .system-left{
      background-color: #112446;
    }
    .system-right{
      background-color: transparent;
    }
    .treeList{
      background-color: #0D1A34;
    }
  }
}
</style>
