<template>
  <div>
    <!-- <el-alert class="diy-tip"  title="审批人设置" @close="tips_close" v-show="tips_show" type="success" description show-icon>
      <p>设置成功后，积分申请提交时，将优先选择此上级审批人；</p>
      <p>默认上级审批人是唯一的，通常为直属上级，合理设置审批人可提高审批流程效率。</p>
    </el-alert> -->
    <div style="padding:0 0 0 10px">
      <span>设置直属上级：</span>
      <p style="font-size:13px">
        设置成功后，积分申请提交时，优先选择此直属管理上级作为审批人；
      </p>
      <p style="font-size:13px">
        默认的直属管理上级是唯一的，从管理上级内选择。合理设置审批人可提高审批流程效率。
      </p>
    </div>

    <el-row class="architecture">
      
      <el-col :span="6" class="RuleLeft">
        <div>
          <div v-loading="dept_show">
            <div @click="handleNodeClick({ value: 0 })" class="company_name">
              <img src="static/images/two.png" />
              <span>组织架构</span>
            </div>
            <div ref="ruletree" class="department_box">
              <el-tree
                node-key="id"
                :expand-on-click-node= "false"
                :data="treedata"
                class="cate-tree"
                :highlight-current="true"
                :props="{ children: 'children', label: 'name' , value: 'id'}"
                @node-click="handleNodeClick"
                :accordion="true"
                empty-text="您暂无部门数据,请同步钉钉通讯录"
                @check="handleCheckChange"
              >
                <div
                  content="tree"
                  v-show="treedata.length != 0"
                  class="custom-tree-node"
                  slot-scope="{ node, data }"
                  style="font-size: 14px;color: #606266; width:100%; text-align: left;"
                >
								  <img src="static/images/one.png" style="width: 20px;margin-right: 5px;" />
                  <!-- <span class="name" style="width:100%;overflow:hidden">{{data.label}}</span> -->
                  <span class="name"
                    ><WWOpenData
                      type="departmentName"
                      :openid="data.name"
                    ></WWOpenData
                  ></span>
                </div>
              </el-tree>
            </div>
          </div>
        </div>
      </el-col>
      <!-- <el-col :span="6" class="RuleLeft">
        <div>
          <div v-loading="dept_show">
            <div @click="handleNodeClick({ value: 0 })" class="company_name">
              <img src="static/images/two.png" />
              <span>{{ firstCompany.name }}</span>
            </div>
            <div ref="ruletree" class="department_box">
              <el-tree
                ref="menum"
                v-show="treedata !== null && treedata.length != 0"
                node-key="id"
                :accordion="true"
                :highlight-current="true"
                @node-expand="treeOpen"
                :data="treedata"
                :default-expand-all="defaultExpand"
                :props="defaultProps"
                :expand-on-click-node="false"
                @node-click="handleNodeClick"
                @check="handleCheckChange"
              >
                <div
                  content="tree"
                  v-show="treedata.length != 0"
                  class="custom-tree-node"
                  slot-scope="{ node, data }"
                  style="font-size: 14px;color: #606266; width:100%; text-align: left;"
                >
                  <img src="static/images/one.png" />
                  <span class="name">{{ data.label }}</span>
                  <span
                    style="position: absolute;right: 20px;display:inline-block;vertical-align: top;margin-top:2px;"
                  >
                    ({{ data.count }}人)
                  </span>
                </div>
              </el-tree>
              <div
                v-show="treedata !== null && treedata.length == 0 && !dept_show"
              >
                <p style="padding: 0 20px;margin-top: 50px;">
                  <img
                    src="static/images/nodata_default.png"
                    width="100%"
                    alt=""
                  />
                </p>
                <p style="text-align: center;margin: 50px 0;">
                  目前没有部门
                </p>
              </div>
            </div>
          </div>
        </div>
      </el-col> -->

      <el-col :span="18" class="RuleRight" v-loading="loading">
        <div class="list_box">
          <div
            style="margin-bottom:20px;margin-top:0px;"
            class="inline-block-btn-list"
          >
            <el-button @click="EmployeeAdd" type="primary"
              >设置直属上级</el-button
            >

            <div
              class="gap-right-8 fr"
              style="display:inline-block; width:180px;"
            >
              <el-input
                placeholder="搜索员工姓名"
                ref="search-bar"
                v-model="filter.keywords"
                class="input-with-select"
                @keyup.enter.native="onFilterChanged"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="onFilterChanged"
                ></el-button>
              </el-input>
            </div>
          </div>
          <el-table
            class="list_box_table"
            @filter-change="filterHandler"
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            @selection-change="handleSelectionChange"
            @row-click="toDetailPage"
          >
            <el-table-column
              type="selection"
              width="50"
              :selectable="isSelectable"
            ></el-table-column>

            <el-table-column prop="name" label="姓名">
              <template slot-scope="scope">
                <userImage
                  class="fl"
                  :id="scope.row.id"
                  :user_name="scope.row.name"
                  fontSize="15"
                  width="50px"
                  height="50px"
                ></userImage>
                <span
                  style="margin-left: 10px; line-height: 50px; display: inline-block;"
                  ><WWOpenData type="userName" :openid="scope.row.name"></WWOpenData></span
                >
                <span
                  class="administration"
                  v-if="scope.row.employee_detail.manage_dept_ids.length != 0"
                  >主管</span
                >
              </template>
            </el-table-column>

            <el-table-column label="部门">
              <template slot-scope="scope">
                <div
                  v-for="(item, index) in scope.row.employee_detail.dept_list"
                  :key="index"
                >
                  <div>
                    <WWOpenData type="departmentName" :openid="item.depart_name"></WWOpenData>
                  </div>
                  <!-- <div v-if="item.dept_name == undefined" style="color: #a4a9ad" >暂无部门</div> -->
                </div>
              </template>
            </el-table-column>

            <el-table-column prop="" label="直属上级" style="text-align:center">
              <template slot="header" slot-scope="scope">
                <!-- <div style="position: relative;width:170px;overflow:hidden"> -->
                <!-- <div style="position: relative;"> -->
                <div id="screen">
                  <span>直属上级</span>
                  <!-- <i class="el-icon-edit"></i> -->
                  <span class="screen"
                    >（<el-checkbox
                      v-model="allSelected"
                      @change="handleAllSelectedChange"
                      >只看未设置</el-checkbox
                    >）</span
                  >
                </div>
                <!-- </div> -->
              </template>
              <template slot-scope="scope">
                <div
                  v-if="scope.row.employee_detail.superior_id == 0"
                  style="color:#3b7de0;cursor:pointer"
                  @click.stop="personnel_name_line(scope.row, false)"
                >
                  未设置
                </div>
                <div
                  v-for="(item, index) in scope.row.employee_detail
                    .superior_list"
                  :key="index"
                  @click.stop="personnel_name_line(scope.row, true)"
                  style="cursor:pointer"
                >
                  <div v-if="scope.row.employee_detail.superior_id == item.id">
                    {{ item.name }}
                  </div>
                </div>
              </template>
            </el-table-column>

            <template slot="empty">
              <div class="nopoint_box">
                <div class="noimg noperson"></div>
                <span class="title">没有对应的数据</span>
              </div>
            </template>
          </el-table>
          <el-pagination
            background
            layout="total,sizes, prev, pager, next"
            @size-change="handleSizeChange"
            :page-size="pageLimit"
            :page-sizes="[10, 20, 50, 100]"
            :total="totalCount"
            :current-page.sync="currentPage"
            @current-change="changePage"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>

    <!-- 设置直属上级弹窗 -->
    <el-dialog title="设置直属上级" :visible.sync="outerVisible" width="25%">
      <span>为</span>
      <!-- <div style="width:50px;height:16px; overflow: hidden;text-overflow:ellipsis;display:block"> -->
      <b v-for="(item, index) in multipleSelection" :key="index">
        <span v-if="index == 0"><WWOpenData type="userName" :openid="item.name"></WWOpenData></span>
        <!-- <span v-if="multipleSelection.length>1">, </span> -->
      </b>
      <!-- </div> -->
      <span v-if="multipleSelection.length > 1"
        >等{{ multipleSelection.length }}人</span
      >
      设置上级
      <div v-if="hint" style="font-size:12px;padding-top:5px">
        (当前直属上级：<b><WWOpenData type="userName" :openid="current_supervisor"></WWOpenData></b
        >)
      </div>
      <el-table
        ref="singleTable"
        :data="ranking_list"
        highlight-current-row
        @current-change="handleCurrentChange"
        style="width: 100%;"
      >
        <el-table-column property="name">
          <template slot-scope="scope">
            <span>
              <WWOpenData type="userName" :openid="scope.row.name"></WWOpenData>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="set_superiors_O_cancel">取 消</el-button>
        <el-button type="primary" @click="set_superiors_O">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import qs from "qs";
let PerformTheNumber = true; //五秒执行一次变量
export default {
  components: {},

  data() {
    return {
      checked: false,
      Total_staff: null,
      superior_ids: "", //筛选，0为未执行
      current_supervisor: "", //点击行的当前人员上级
      hint: false, //提示当前选中的人员有无上级
      ranking_list: "", //共同直属上级列表
      currentRow: "", //直属上级弹窗中选中的直属上级人
      outerVisible: false, //设置直属上级弹窗

      allSelected: false, //筛选 ‘未设置’  按钮

      titleManger: false,
      firstCompany: {}, //当前企业
      supermanger: {}, //创始人
      company: {},
      treedata: [], // 菜单栏数组
      defaultExpand: false,
      defaultProps: {
        children: "children",
        label: "label"
      },
      loading: false,

      settings: this.$store.getters.system_setting,
      profile: this.$store.getters.user_info,

      filter: {
        dept_id: [],
        keywords: ""
      },
      totalCount: 0,
      pageLimit: 10,
      currentPage: 0, // 不缓存页面，因为el-pagination此处有一个bug,规定页面从0开始
      tableData: null,
      multipleSelection: [], //勾选的一行
      deptTree: [],

      // defaultProps: {
      //   children: 'children',
      //   label: 'label'
      // },

      dept_show: false,

      tips_show: false,

      
			// info: [], //公司信息
    };
  },
  watch: {},
  methods: {
    // renderHeader(h) {
    //     return (
    //       <div>
    //         <span>直属上级&nbsp;&nbsp;</span>
    //         <i class="el-icon-edit" id="screen" style="cursor:pointer;"></i>
    //       </div>
    //     )
    // },
    //选择直属上级人
    handleCurrentChange(val) {
      //val为选中的直属上级
      this.currentRow = val;
    },

    //点击设置上级审批人
    EmployeeAdd() {
      if (this.multipleSelection.length == 0) {
        if (PerformTheNumber) {
          this.$message({
            message: "请勾选需要添加的人员",
            duration: 2000,
            type: "warning"
          });
          PerformTheNumber = false;
          setTimeout(() => {
            PerformTheNumber = true;
          }, 5000);
        } else {
          console.log("不执行");
        }
      } else {
        this.Screening_of_the_superior();
      }
    },
    //点击当前行人名修改
    personnel_name_line(item, bool) {
      // this.$refs.multipleTable.clearSelection();//清除多选选中状态
      if (bool) {
        this.hint = true;
        for (let i in item.employee_detail.superior_list) {
          if (
            item.employee_detail.superior_id ==
            item.employee_detail.superior_list[i].id
          ) {
            this.current_supervisor =
              item.employee_detail.superior_list[i].name;
          }
        }
      } else {
        this.hint = false;
      }
      this.multipleSelection = [];
      this.multipleSelection.push(item);
      this.Screening_of_the_superior();
    },
    //筛选上级
    Screening_of_the_superior() {
      this.outerVisible = true;
      let Array_to_heavy = [];
      for (let i in this.multipleSelection) {
        for (let a in this.multipleSelection[i].employee_detail.superior_list) {
          Array_to_heavy.push(
            this.multipleSelection[i].employee_detail.superior_list[a]
          );
        }
      }

      if (this.multipleSelection.length > 1) {
        //判断勾选了几个，勾选一个不用执行判断相同审批人和去重的方法
        this.hint = false;
        // let newarr = Array_to_heavy.filter((item,index)=>{//找出选择的所有人的相同上级审批人
        //   for (let i=0; i<Array_to_heavy.length; i++) {
        //     if(item.id == Array_to_heavy[i].id && index!=i){
        //       return item;
        //     }
        //   }
        // });
        // console.log('newarr')
        // console.log(newarr)
        //数组去重
        // let obj = {};
        // let peon = newarr.reduce((cur,next) => {
        //   obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
        //   console.log(cur)
        //   return cur;
        // },[]) //设置cur默认类型为数组，并且初始值为空的数组
        // 　　var arr1 = [{name:'name1',id:1},{name:'name2',id:2},{name:'name3',id:3}];
        //     var arr1Id = [1,2,3]
        //     var arr2 = [{name:'name1',id:1},{name:'name2',id:2},{name:'name3',id:3},{name:'name4',id:4},{name:'name5',id:5}];
        //     var result = arr2.filter(function(v){
        //           return arr1Id.indexOf(v.id)!==-1 // 利用filter方法来遍历是否有相同的元素
        //       })
        // console.log(result);.employee_detail.superior_list
        //找共同上级
        let arr1 = [];
        if (this.multipleSelection[0].employee_detail.superior_list) {
          arr1 = this.multipleSelection[0].employee_detail.superior_list;
          let arr1Id = [];
          let arr2 = [];
          for (let i in this.multipleSelection) {
            if (i == 0) {
              continue;
            }
            for (let j in arr1) {
              arr1Id.push(arr1[j].id);
            }
            arr2 = this.multipleSelection[i].employee_detail.superior_list;
            arr1 = arr2.filter(function(v) {
              return arr1Id.indexOf(v.id) !== -1; // 利用filter方法来遍历是否有相同的元素
            });
            arr1Id = [];
            arr2 = [];
          }
        } else {
          arr1 = [];
        }

        // console.log(peon)
        //剔除掉上级与选择的相同人员，避免选上级选到自己
        // let result = [];
        // for (var i = 0; i < arr1.length; i++) {
        //   var obj = arr1[i];
        //   var num = obj.id;
        //   var flag = false;
        //   for (var j = 0; j < this.multipleSelection.length; j++) {
        //     var aj = this.multipleSelection[j];
        //     var n = aj.id;
        //     if (n == num) {
        //       flag = true;
        //       break;
        //     }
        //   }
        //   if (!flag) {
        //     result.push(obj);
        //   }
        // }
        let result = this.eliminate(arr1);
        this.ranking_list = this.separatingEmployee(result);
      } else {
        for (let a in this.multipleSelection) {
          if (this.multipleSelection[a].employee_detail.superior_id != 0) {
            this.hint = true;
            for (let i in Array_to_heavy) {
              if (
                this.multipleSelection[a].employee_detail.superior_id ==
                this.multipleSelection[a].employee_detail.superior_list[i].id
              ) {
                this.current_supervisor = this.multipleSelection[
                  a
                ].employee_detail.superior_list[i].name;
              }
            }
          } else {
            this.hint = false;
          }
        }
        let Array_to_heavys = this.eliminate(Array_to_heavy);
        this.ranking_list = this.separatingEmployee(Array_to_heavys);
      }
    },
    eliminate(arr1) {
      let result = [];
      for (var i = 0; i < arr1.length; i++) {
        var obj = arr1[i];
        var num = obj.id;
        var flag = false;
        for (var j = 0; j < this.multipleSelection.length; j++) {
          var aj = this.multipleSelection[j];
          var n = aj.id;
          if (n == num) {
            flag = true;
            break;
          }
        }
        if (!flag) {
          result.push(obj);
        }
      }
      return result;
    },
    //清除离职人员
    separatingEmployee(Array_to_heavy) {
      for (let i in this.Total_staff) {
        if (this.Total_staff[i].status == 2) {
          for (let a in Array_to_heavy) {
            if (this.Total_staff[i].id == Array_to_heavy[a].id) {
              Array_to_heavy.splice(a, 1);
            }
          }
        }
      }
      return Array_to_heavy;
    },

    //关闭弹窗清除数据
    // closeDialog(done){
    //   setTimeout(()=>{
    //     this.$refs.multipleTable.clearSelection();//清除多选选中状态
    //     this.multipleSelection = [];
    //   },100)
    // },
    //点击确认提交
    set_superiors_O() {
      //被设置员工id数组
      if (this.currentRow == "") {
        return;
      } else {
      }
      let employees_array = [];
      for (let i in this.multipleSelection) {
        employees_array.push(this.multipleSelection[i].id);
      }
      let params = {
        superior_id: this.currentRow.id, //直属上级员工ID
        employee_ids: employees_array //被设置员工id数组
      };
      this.$http("post", "/api/employee/superior", params)
        .then(res => {
          if (res.data.code == 1) {
            this.$message({
              message: "提交成功",
              type: "success"
            });
            setTimeout(() => {
              this.loadEmployeeList();
              this.outerVisible = false;
            }, 500);
          }
        })
        .catch(() => {
          this.$message({
            message: "提交失败",
            type: "success"
          });
          this.outerVisible = false;
        })
        .finally(() => {
          this.currentRow = ""; //请求结束后让已选的上级清空
        });
      // this.innerVisible = true
    },
    //点击取消
    set_superiors_O_cancel() {
      this.outerVisible = false;
    },

    handleAllSelectedChange(val) {
      this.currentPage = 0;
      if (val) {
        this.superior_ids = "0";
        this.loadEmployeeList(true);
      } else {
        this.superior_ids = "";
        this.loadEmployeeList(true);
      }
    },
    handleNodeClick(data) {
      if (data.value == 0) {
        this.company = this.firstCompany;
        this.filter.dept_id = 0;
      } else {
        this.company = data;
        // this.nowEmploye = data.count
        this.filter.dept_id = data.id;
      }

      this.onFilterChanged();
      this.showpull = false;
    },
    onFilterChanged: function() {
      this.currentPage = 0;
      this.loadEmployeeList();
    },

    //绿框
    tips_close() {
      localStorage.setItem("employee_table_tips", "true");
      this.tips_show = false;
    },

    // 递归判断列表，把最后的children设为undefined
    getTreeData(data) {
      for (var i = 0; i < data.length; i++) {
        // console.log(data[i])
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          data[i].children = undefined;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },

    // 折叠菜单栏
    setCheckedKeys() {
      this.defaultExpand = false;
      for (var i = 0; i < this.$refs.menum.store._getAllNodes().length; i++) {
        this.$refs.menum.store._getAllNodes()[i].expanded = false;
      }
    },
    // 节点展开
    treeOpen() {
      let that = this;
      setTimeout(function() {
        that.getHeight();
      }, 500);
    },
    // 树型菜单点击筛选
    handleCheckChange(check, param) {
      // console.log(check);
      // console.log(param);
      // this.filter.dept_id = param.checkedKeys
      // this.onFilterChanged()
      // this.showpull = false;
    },
    filterHandler(value) {
      if (typeof value.dept !== "undefined" && value.dept.length == 0) {
        this.filter.dept_id = 0;
      }
      if (typeof value.dept !== "undefined" && value.dept.length > 0) {
        this.filter.dept_id = value.dept;
      }

      this.onFilterChanged();
    },
    handleSizeChange(val) {
      this.pageLimit = val;
      this.onFilterChanged();
    },

    //勾选的
    handleSelectionChange: function(val) {
      this.multipleSelection = val;
    },

    //使符合条件的为不可选
    isSelectable: function(row, index) {
      // return row.status != '2'//离职人员不可选
      return true;
    },
		//获取公司信息
		// getInfo() {
		// 	this.ruleDeprt = true
		// 	// api/test?employee_id=155
		// 	this.$http('get','/api/site/info').then(res => {
		// 		this.info = res.data.data;
		// 		this.loadBaseData();
		// 	});
		// },
    // 获取基本数据
    loadBaseData: function() {
      var self = this;
      this.dept_show = true;
      this.$http("get", "/api/department/tree")
        .then(function(response) {
          if (response.status == 200) {
            var jsonData = response.data;
            try {
              // var list=[{
              //   id:0,
              //   name:this.info.name,
              //   children:response.data.data.list
              // }]
              // console.log(response.data.data.list)
              // console.log(list)
              self.deptTree = self.getTreeData(response.data.data.list);
              self.company = response.data.data.company;
              self.firstCompany = response.data.data.company;
              self.treedata = self.deptTree;
              // for(let i = 0; i< self.treedata.length; i ++) {
              //   self.treedata[i].label = self.treedata[i].name;
              // }
            } catch (err) {
              console.log(err);
            }
          }
        })
        .catch(function(error) {
          console.log(error);
        })
        .finally(() => {
          this.dept_show = false;
        });
    },
    // 获取所有员工列表
    loadEmployeeList_suo: function() {
      var self = this;
      let params = {
        page: 0,
        page_size: 20000
      };
      this.$http("get", "/api/employee/index", params)
        .then(function(res) {
          if (res.data.code == 1) {
            self.Total_staff = res.data.data.list; //人员信息
          } else {
          }
        })
        .catch(function(error) {});
    },
    // 获取员工列表
    loadEmployeeList: function(timeNum) {
      var self = this;
      self.loading = true;
      let params = {};
      if (timeNum) {
        params = {
          page: 0,
          page_size: this.pageLimit,
          dept_id: this.filter.dept_id,
          name: this.filter.keywords //搜索姓名
        };
      } else {
        params = {
          page: this.currentPage,
          page_size: this.pageLimit,
          dept_id: this.filter.dept_id,
          name: this.filter.keywords //搜索姓名
        };
        if (this.currentPage == 0) {
          params.page = this.currentPage;
        } else {
          params.page = this.currentPage - 1;
        }
      }

      if (this.superior_ids == "0") {
        params.superior_id = this.superior_ids; //筛选，0为未执行
      }
      this.$http("get", "/api/employee/index", params)
        .then(function(res) {
          if (res.data.code == 1) {
            self.loading = false;
            self.totalCount = res.data.data.pageInfo.count; //总人员数量
            self.tableData = res.data.data.list; //人员信息
            self.nowEmploye = res.data.data.pageInfo.count;
            self.supermanger = res.data.data.managers; //创始人
            if (
              self.supermanger != undefined &&
              self.supermanger.length > 0 &&
              self.supermanger[0].dept_list == "[]"
            ) {
              self.titleManger = true;
            } else {
              self.titleManger = false;
            }
          } else {
          }
        })
        .catch(function(error) {
          self.loading = false;
          console.log(error);
        });
    },
    changePage: function(current) {
      this.loadEmployeeList();
    },
    // 编辑员工
    toDetailPage: function(item, column, event) {
      // console.log('点击员工')
    },
    getHeight() {}
  },
  mounted() {
    let that = this;
    setTimeout(function() {
      that.getHeight();
    }, 500);

    //顶部绿框温馨提示
    if (localStorage.getItem("employee_table_tips")) {
      that.tips_show = false;
    } else {
      that.tips_show = true;
    }
  },
  created() {
		// this.getInfo();
    if (this.$route.query.is) {
      this.$router.push({ path: "/new_employee" });
    }

    this.loadBaseData();
    this.loadEmployeeList();
    this.loadEmployeeList_suo();

    this.$nextTick(() => {});
  }
};
</script>
<style lang="scss" scoped>
.name {
  text-overflow: ellipsis;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  width: 120px;
}
.administration {
  color: #e6a23c;
  border: 1px solid #e6a23c;
  border-radius: 2px;
  font-size: 12px;
  margin-left: 4px;
  padding: 2px;
}
.el-table th > .cell {
  font-weight: normal;
}
.el-table .has-gutter th > .cell {
  background-color: #fff;
  font-size: 14px;
  color: #909399;
  font-weight: normal;
}
.title {
  color: #303133;
  font-size: 20px;
}
.el-button--text {
  color: #606266;
}
.el-pagination {
  text-align: center;
  margin-top: 15px;
}

.custom-tree-node {
  margin-left: -4px;
}
.custom-tree-node * {
  vertical-align: middle;
}

.architecture {
  display: flex;
  text-align: center;
  // margin-top:20px;
  padding-left: 0px;
  background-color: #fff;
  width: 100%;
  overflow: hidden;
  cursor: default;
  min-height: calc(100vh - 160px);
}
.architecture .RuleLine {
  display: table-cell;
  width: 1px;
  min-height: 600px;
  background: #efefef;
}
.architecture .RuleLeft {
  display: block;
  text-align: center;
  padding: 20px 10px;
  border-right: none;
  overflow: auto;
}
/*滚动条的宽度*/

.architecture .RuleLeft::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

/*外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果*/

.architecture .RuleLeft::-webkit-scrollbar-track {
  width: 6px;
  background-color: #fff0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

/*滚动条的设置*/

.architecture .RuleLeft::-webkit-scrollbar-thumb {
  background-color: #fff0;
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/*滚动条移上去的背景*/

.architecture .RuleLeft:hover::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.3);
}

.architecture .RuleLeft .company_name {
  position: relative;
  display: block;
  font-family: "Microsoft YaHei";
  text-align: left;
  padding: 15px 28px 17px;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-bottom: 1px #f8f8f8 solid;
}
.architecture .RuleLeft .company_name img {
  position: relative;
  display: inline-block;
  top: 2px;
  width: 18px;
  height: 18px;
  margin-right: 4px;
}
.architecture .RuleLeft /deep/ .el-button {
  margin-bottom: 16px !important;
}
.architecture .RuleRight {
  position: relative;
  display: table-cell;
  text-align: left;
  padding: 20px;
}
.architecture .RuleRight .title span .sapn {
  display: inline-block;
  vertical-align: middle;
  max-width: 600px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.architecture .RuleRight:after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 1px;
  background: #ebeef5;
}
.architecture .RuleRight .list_box {
  width: 100%;
  background: #fff;
}
.architecture .RuleRight .list_box /deep/ table {
  font-family: "Microsoft YaHei";
  width: 100% !important;
  /*max-width:1920px; */
}
.architecture .department_box {
}
.architecture .department_box /deep/ .el-tree-node {
  display: block;
  text-align: center;
}
.architecture .department_box /deep/ .el-tree-node__content {
  // padding-left:24px !important;
  height: auto !important;
}

.architecture .department_box /deep/ .el-tree-node .el-icon-caret-right {
  display: inline-block;
  color: #909399;
  font-size: 16px;
  padding: 6px 8px;
}
.architecture
  .department_box
  /deep/
  .el-tree-node
  .el-icon-caret-right.is-leaf {
  color: transparent;
  cursor: default;
}
.architecture .department_box /deep/ .el-tree-node .custom-tree-node img {
  margin-top: 0px;
  width: 20px;
}
.architecture .department_box /deep/ .el-tree-node .custom-tree-node span {
}
.architecture .department_box /deep/ .el-tree-node__content {
  padding: 12px 0;
  border-bottom: 1px #f8f8f8 solid;
}
.architecture .department_box /deep/ .el-tree-node__content:hover {
  background: #ecf5ff;
  border-radius: 4px;
}
.architecture .department_box /deep/ .is-focusable .is-current {
  border-radius: 4px;
}
.architecture .department_box /deep/ .is-focusable .is-current .name {
  color: #409eff;
  font-weight: normal;
  transition: 0.35s ease-in-out;
}
// .diy-tip{
//   margin-bottom:15px;
//   border:1px solid #67c23a;
//   padding:20px 16px;
//   p{
//     color:#67c23a!important;
//     font-size:14px;
//     margin:0 !important;
//     padding:4px 0;
//   }
// }
/deep/ .cell {
  // text-align: center;
  // color: #3b7de0;
}
//需要动画时放开
// #screen{
//   -webkit-transition: all .5s;
//   -moz-transition: all .5s;
//   -ms-transition: all .5s;
//   -o-transition: all .5s;
//   transition: all .5s;
//   width:100px;
// }
// /deep/ #screen:hover {
//   color: #55aaff;
//   cursor:pointer;
// }
// #screen:hover .screen{
//     // display: block;
//     transform: translateX(-80px);
//     transition: transform 0.4s;
// }
// .screen{
//         position: absolute;
//         top:0px;
//         left:170px;
// //     transform: translateX(80px);
//     transition: transform 0.6s;
//     // display: none;
// }
// #screen{
//   width:100px;
// }
.screen {
  // position: absolute;
  // top:0px;
  // left:100px;
}

// /deep/ .el-table_4_column_23  {
//   border: 0px;
// }
</style>
