<template>
  <div>
    <div class="diy_tip_bg" v-show="tips_show">
      <el-alert class="diy-tip" @close="tips_close" type="success" description>
        <p><b>自定义排名通过自选人员分组、各项积分规则、时间区间作积分对比和评优</b></p>
        <li class="headLi">不选人员分组时，默认全员排名</li>
        <li class="headLi">不选积分规则时，默认全部来源的积分（不包含基础分和工龄分）</li>
      </el-alert>
    </div>
    <el-row :gutter="0">
      <el-col :span="6" v-loading="item_loading">
        <div style="text-align: center; padding: 10px 0;"><el-button type="primary" @click="addGroup" :disabled="table_loading" v-if="deptManagerRouters">新建分组</el-button></div>
        <el-menu v-if="groups_list.length > 0" default-active="0" class="el-menu-vertical-demo elMenuCustomRule_Z">
          <el-menu-item v-for="(item, index) in groups_list" :key="index" :index="index.toString()" @click="getGroupsInfo(item)">
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </el-menu>
        <div v-if="groups_list.length == 0">
          <div class="nopoint_box">
            <div class="noimg noperson"></div>
            <span class="title">没有对应的数据</span>
          </div>
        </div>
      </el-col>
      <el-col :span="18" class="listData" v-loading="table_loading">
        <el-row style="margin-bottom: 10px;" v-if="groups_list.length != 0">
          <el-col :span="24" class="groups_name">
            <span>{{ groups_info.name }}</span>
            <el-button @click="editGroup" v-if="deptManagerRouters">编辑</el-button>
          </el-col>
          <el-col :span="24" style="color: rgb(144, 147, 153)">共{{ total }}人</el-col>
        </el-row>
        <el-form :model="params" :inline="true" ref="params">
          <el-form-item label="月份" label-width="40px" v-if="newGroupForm.date_interval == 1">
            <el-date-picker v-model="time.month" type="month" placeholder="请选择月份" value-format="yyyy-MM"></el-date-picker>
          </el-form-item>

          <el-form-item label="年份" label-width="40px" v-if="newGroupForm.date_interval == 3">
            <el-date-picker v-model="time.year" type="year" placeholder="请选择年份" value-format="yyyy"></el-date-picker>
          </el-form-item>
          <el-form-item label="季度" label-width="40px" v-if="newGroupForm.date_interval == 2">
            <!-- <el-date-picker
              v-model="time.quarter"
              type="month"
              placeholder="请选择季度"
              value-format="Q"
            ></el-date-picker> -->

            <Season :defaultHint="true" :isActive="true" class="date-picker-width" @confirm="export_quarter_confirm"></Season>
          </el-form-item>

          <!-- <el-form-item label="规则分类" label-width="70px" >
						<el-cascader
							class="date-picker-width"
							v-model="params.rule"
							:options="rule_trees"
							:props="props"
							@change="rule_null"
							ref="rule"
							clearable
							filterable
							change-on-select
							placeholder="全部规则分类"
						></el-cascader>
					</el-form-item> -->
          <el-form-item v-if="table_list.length>0">
            <el-checkbox v-model="sort" size="medium" label="由低到高" border></el-checkbox>
            <el-button class="company_intergral_button" @click="export_all" type="primary" plain style="margin-left: 10px;">导出报表</el-button>
          </el-form-item>
          <el-alert
            v-if="lastUpdateTime != undefined || lastUpdateTime"
            :title="
              '温馨提醒：排名会在积分产生后自动更新，最近更新时间：' +
                (lastUpdateTime != undefined ? (lastUpdateTime == '' ? '正在更新，请稍候' : lastUpdateTime) : '正在更新，请稍候')
            "
            type="success"
            :closable="false"
            show-icon
          ></el-alert>
        </el-form>

        <el-table :data="table_list" style="width: 100%">
          <el-table-column label="名次" width="80" align="center">
            <template slot-scope="scope">
              <img v-if="scope.row.rank === 1" src="static/images/statistics_NO1.png" alt="" />
              <img v-if="scope.row.rank === 2" src="static/images/statistics_NO2.png" alt="" />
              <img v-if="scope.row.rank === 3" src="static/images/statistics_NO3.png" alt="" />
              <span v-if="scope.row.rank > 3">{{ scope.row.rank }}</span>
            </template>
          </el-table-column>
          <el-table-column label="姓名" align="left">
            <template slot-scope="scope">
              <userImage class="fl" :id="scope.row.employee_id" :user_name="scope.row.name" :img_url="scope.row.img_url" width="50px" height="50px"></userImage>
              <span style="line-height: 50px; padding-left: 10px;"><WWOpenData type="userName" :openid="scope.row.name"></WWOpenData></span>
            </template>
          </el-table-column>
          <el-table-column label="B分" align="left" prop="point"></el-table-column>
          <template slot="empty">
            <div class="nopoint_box">
              <div class="noimg noperson"></div>
              <span class="title">没有对应的数据</span>
            </div>
          </template>
        </el-table>

        <center style="padding: 20px 0;">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next"
            :page-size="params.page_size"
            :current-page="params.page"
            :total="total"
          ></el-pagination>
        </center>
      </el-col>
    </el-row>

    <!-- 新增分组 -->
    <el-dialog :title="popupType ? '新增分组' : '编辑分组'" width="460px" :visible.sync="groupShow" :close-on-click-modal="false">
      <!-- :close="resetForm('newGroupForm')" -->
      <el-form ref="newGroupForm" v-loading="loading" :model="newGroupForm" :rules="rules" label-width="85px" @submit.native.prevent>
        <el-form-item label="分组名称" prop="group_name"><el-input v-model="newGroupForm.group_name" placeholder="请输入分组名称" auto-complete="off"></el-input></el-form-item>

        <el-form-item label="分组成员" :required="true">
          <el-input v-show="employeeNames.length==0" auto-complete="off" v-model="employees" placeholder="全公司成员"></el-input>
          <div @click="show_employee_selector = true" style=" position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 9;"></div>
          <div v-if="employeeNames.length>0"  @click="show_employee_selector = true" class="zindexName">
            <span v-for="(item,index) in employeeNames" :key="index">
              <WWOpenData type="userName" :openid="item.name"></WWOpenData><span v-if="(employeeNames.length-index)>1">,</span>
            </span>
          </div>
          <EmployeeSelector
            :employee_not_select="employee_not_select"
            :selected="employees_selected"
            :close_clear_data="false"
            :visible.sync="show_employee_selector"
            @confirm="move_employee_confirm"
            :isChecKedAll="true"
          />
        </el-form-item>
        <el-form-item label="积分规则" :required="true">
          <el-input auto-complete="off" v-model="newGroupFormRules" placeholder="全部规则分类"></el-input>
          <div @click="ruleDialogTableVisibles" style="height:36px; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 9;cursor:pointer"></div>
          <div style="margin-bottom:12px;">
            <span style="font-size:13px;color:rgb(138 138 138);position: absolute; top: 30px; left: 0;">{{ruleHint}}</span>
          </div>
          <el-dialog title="选择规则" width="952px" :visible.sync="ruleDialogTableVisible" @close="closeNone" append-to-body :before-close="handleClose">
            <div style="display:flex;position: relative;width:100%;height:40px">
              <span style="position: absolute;line-height:40px;left:20px">已选：{{ valuesOrLength.length }}条</span>
              <el-input type="text" class="search" style="position: absolute;right:20px;width:20%" placeholder="输入关键字搜索" v-model.trim="keyword" />
            </div>
            <el-row class="architecture">
              <el-col :span="8" class="RuleLeft" style="height:500px">
                <div ref="ruletree" class="department_box">
                  <el-tree
                    ref="menum"
                    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-if="!data.dis"
                      v-show="treedata.length != 0"
                      class="custom-tree-node"
                      slot-scope="{ node, data }"
                      style="font-size: 14px;color: #606266; width:100%; text-align: left;"
                    >
                      <span class="name">{{ data.name }}</span>
                    </div>
                  </el-tree>
                </div>
              </el-col>
              <el-col :span="16" class="RuleRight" v-loading="tableLoadingRule" style="height:500px;overflow-y:auto">
                <el-table
                  ref="multipleTable"
                  :data="tableData_rule"
                  tooltip-effect="dark"
                  style="width: 100%;cursor:pointer"
                  @select="onTableSelect"
                  @select-all="selectAll"
                  @cell-click="clicktable"
                  @selection-change="handleSelectionChange"
                >
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column prop="remark" :label="'全选'" show-overflow-tooltip></el-table-column>
                </el-table>
              </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
              <el-button @click="ruleDialogTableVisible = false">取 消</el-button>
              <el-button type="primary" @click="ruleDialogTableVisibleQD">确 定</el-button>
            </span>
          </el-dialog>
        </el-form-item>
        <el-form-item label="统计周期" label-width="85px" :required="true" :show-message="false">
          <el-select v-model="options_time_value" placeholder="月度" @change="options_times">
            <el-option v-for="item in options_time" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="danger" v-if="!popupType" :loading="delLoad" @click="delItem">删除</el-button>
        <el-button @click="resetForm('newGroupForm')">取 消</el-button>
        <el-button type="primary" :loading="saveLoad" @click="subGroupForm('newGroupForm')">确 定</el-button>
      </div>
    </el-dialog>
    </div>
</template>
<script>
import EmployeeSelector from '@/views/common/EmployeeSelector';
import Selectionrules from '@/views/common/selectionrules';
import moment from 'moment';
import Season from '@/components/season';
// let valuesLengths = []
var selecteds = [];
let selectionID = [];
//节流
const delay = (function() {
  let timer = 0;
  return function(callback, ms) {
    clearTimeout(timer);
    timer = setTimeout(callback.ms);
  };
})();
export default {
  data() {
    return {
			tips_show: false,
      ruleHint:'',
      deptManagerRouters: !this.$authoritys('dept_manager') && !this.$authoritys('employee'),
      employeeRout:this.$authoritys('employee'),
      lastUpdateTime: '',
      tableLoadingRule: false, //规则细则加载
      keyword: '',
      values_no: [],
      backups: [], //备份
      valuesLength: [],
      multipleSelection: [],
      valuesOrLength: [],
      itemList: {},
      ruleTrees: [], //所有规则列表
      tableData_rule: [],
      defaultExpand: false,
      defaultProps: {
        children: 'child',
        label: 'name'
      },
      treedata: [],

      ruleDialogTableVisible: false, //编辑-规则-弹出框
      loading: false,
      options_time: [
        {
          value: '1',
          label: '月度'
        },
        {
          value: '2',
          label: '季度'
        },
        {
          value: '3',
          label: '年度'
        }
      ],
      options_time_value: '',

      popupType: false,
      item_loading: false,
      table_loading: false,
      groups_info_loading: false,
      groups_info: {
        name: '',
        employees: []
      },
      groups_list: [], //左边分组
      table_list: [],
      total: null,
      time: {
        year: moment().format('YYYY'), //年
        quarter: moment().format('YYYYQ'), //季度
        month: moment().format('YYYY-MM') //月
      },
      params: {
        page: 1,
        page_size: 10,
        group_id: '',
        sort: 'asc',
        rule: '',
        pt_id: 3
      },
      rule_trees: [],
      clickItem: null,
      groupShow: false,
      rules: {
        group_name: [{ required: true, message: '请输入分组名称', trigger: 'blur' }, { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }]
      },
      newGroupForm: {
        group_name: '',
        employees: [],
        items: [],
        date_interval: '1'
      },
      newGroupFormRules: '',
      saveLoad: false,
      delLoad: false,
      show_employee_selector: false,
      employee_not_select: [],
      employees_selected: { employee: [], dept: [] },
      employees: '',
      employeeNames: [],
      props: { value: 'id', label: 'name', children: 'child', multiple: true, checkStrictly: true }, //
      sort: false
    };
  },
  watch: {
    'time.month'(val, old_val) {
      this.time.month = val;
      this.params.page = 1;
      this.open_right(this.clickItem);
    },
    'time.year'(val, old_val) {
      this.time.year = val;
      this.params.page = 1;
      this.open_right(this.clickItem);
    },
    sort(val) {
      this.params.page = 1;
      val ? (this.params.sort = 'desc') : (this.params.sort = 'asc');
      this.open_right(this.clickItem);
    },
    keyword() {
      //函数节流
      if (this.timer) {
        clearTimeout(this.timer);
      }
      //清空 全部
      if (!this.keyword) {
        this.tableData_rule = this.tableData_rule2;
        this.ifPitchOnChild(this.tableData_rule, selecteds);
        return;
      }
      this.timer = setTimeout(() => {
        const result = [];
        this.tableData_rule2.forEach(val => {
          if (val.remark.indexOf(this.keyword) > -1) {
            result.push(val);
          }
        });
        this.tableData_rule = result;
        this.ifPitchOnChild(this.tableData_rule, selecteds);
      }, 100);
    }
  },
  components: { EmployeeSelector, Selectionrules, Season },
  methods: {
    export_all() {
      let months;
      if (this.newGroupForm.date_interval == '1') {
        months = this.time.month.replace('-', '');
      }
      let data=this.newGroupForm.date_interval == '1' ? months : this.newGroupForm.date_interval == '2' ? this.time.quarter : this.newGroupForm.date_interval == '3' ? this.time.year : '';
      let params = {
       employee_id: this.$userInfo().id,
       group_id:this.clickItem.id,
       sort:this.params.sort,
       date:data,
      }
      this.$downloadFile('api/download/group/rank',params,this.$route.path);
    },
    // 提示信息
    tips_close() {
      localStorage.setItem("dept_rank_tips", "true");
      this.tips_show = false;
    },
    //点击某行
    clicktable(row, column, cell, event) {
      let selectedsif = false;
      for (let i in selecteds) {
        if (row.id == selecteds[i]) {
          selectedsif = true;
          selecteds.splice(i, 1);
          this.toggleSelection([row], false);
        }
      }
      if (selectedsif == false) {
        selecteds.push(row.id);
        this.ifPitchOnChild(this.tableData_rule, selecteds);
      }
    },
    //全选
    selectAll(selection) {
      for (let i in selection) {
        selectionID.push(selection[i].id);
      }
      let tableData_rules = []; //当前分页id
      for (let i in this.tableData_rule) {
        tableData_rules.push(this.tableData_rule[i].id);
      }
      selectionID = [...new Set(selectionID)];
      if (selection.length == 0) {
        //全不选
        //判断差值
        var diff = [];
        var tmp = tableData_rules;
        selectionID.forEach(function(val1, i) {
          if (tableData_rules.indexOf(val1) < 0) {
            diff.push(val1);
          } else {
            tmp.splice(tmp.indexOf(val1), 1);
          }
        });
        selectionID = diff.concat(tmp);
      } else {
        //全选
        console.log('true');
      }
      selecteds = [...new Set(selectionID)];
      this.valuesOrLength = selecteds;
    },
    //获取分类规则
    get_rule_trees() {
      let self = this;
      let params = {
        pt_id: '3'
      };
      self.$http('get','/api/integral/rule/trees',params)
        .then(res => {
          if (res.data.code == 1) {
            self.treedata = res.data.data.rule_tree; //分类
            this.itemList = res.data.data.item_list; //规则
          } else {
            self.$message.error(res.data.data.msg);
          }
        })
        .finally(() => {});
    },
    //点击规则弹出窗口
    ruleDialogTableVisibles() {
      this.tableLoadingRule = true;
      selecteds = this.valuesOrLength;
      //点击弹出窗口并展示所有数据
      let tableData_r = [];
      for (let i in this.itemList) {
        for (let a in this.itemList[i]) {
          tableData_r.push(this.itemList[i][a]);
        }
      }
      this.tableData_rule2 = tableData_r; //赋予筛选数据
      this.tableData_rule = tableData_r;
      this.ruleDialogTableVisible = true;
      this.ifPitchOnChild(this.tableData_rule, selecteds);
    },
    recursion(data, arr) {
      for (let i in data.child) {
        if (data.child.length != 0) {
          arr.push(data.id);
        } else {
          arr.push(data.id);
        }
      }
      return [...new Set(arr)];
    },

    //此方法：拿到当前点击规则分类的所有子节点ID,（为了包含子分类 规则）
    menuIdInit(menus) {
      var _this = this;
      var _menu = menus;
      var menuId = [];
      var len = _menu.length;
      for (var i = 0; i < len; i++) {
        var item = _menu[i];
        if (item.child && item.child.length != 0) {
          var child = item.child;
          for (var j = 0; j < child.length; j++) {
            _menu[len + j] = child[j];
          }
          len = _menu.length;
        }
        menuId.push(item.id);
      }
      return menuId;
    },
    //点击规则分类
    handleNodeClick(data) {
      let dataArr = this.menuIdInit([data]); //调用方法
      this.tableLoadingRule = true;
      this.keyword = ''; //切换规则重置搜索框
      let tableData_r = [];
      for (let i in this.itemList) {
        for (let a in this.itemList[i]) {
          for (let x in dataArr) {
            if (dataArr[x] == this.itemList[i][a].rule_id) {
              tableData_r.push(this.itemList[i][a]);
            }
          }
        }
      }
      this.tableData_rule2 = tableData_r; //赋予筛选数据
      this.tableData_rule = tableData_r;
      this.ifPitchOnChild(this.tableData_rule, selecteds);
    },
    ifPitchOnChild(item, indexID) {
      let pitchOnChild = [];
      for (let i in item) {
        for (let a in indexID) {
          //判断外层的值相不相等
          if (indexID[a] == item[i].id) {
            pitchOnChild.push(item[i]);
          }
        }
      }
      this.toggleSelection(pitchOnChild, true);
    },
    //默认选中
    toggleSelection(rows, selected) {
      // console.log(rows)
      if (rows) {
        this.$nextTick(() => {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row, selected);
          });
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
      setTimeout(() => {
        //给遮到层，让默认选中的有缓冲时间
        this.tableLoadingRule = false;
      }, 300);
    },
    onTableSelect(rows, row) {
      let selected = rows.length && rows.indexOf(row) !== -1;
      // console.log(selected)  // true就是选中，0或者false是取消选中
      if (selected) {
        selecteds.push(row.id);
      } else {
        for (let i in selecteds) {
          if (row.id == selecteds[i]) {
            selecteds.splice(i, 1);
          }
        }
      }
      // console.log(selecteds)
    },
    //规则弹窗选中时
    handleSelectionChange(val) {},
    //关闭回调
    closeNone() {
      selecteds = [];
    },
    //规则弹窗确定
    ruleDialogTableVisibleQD() {
      let valuesLengths = [];
      for (let i in selecteds) {
        valuesLengths.push(selecteds[i]);
      }
      // valuesLengths = selecteds
      this.valuesOrLength = valuesLengths;
      this.newGroupForm.items = this.valuesOrLength;
      if (this.valuesOrLength.length >= 1) {
        this.newGroupFormRules = this.valuesOrLength.length + '条规则';
        this.ruleHint = '统计已选规则的积分(只选分类不指定规则的积分除外)'
      } else {
        this.newGroupFormRules = '';
        this.ruleHint = '统计所有积分(基础分和工龄分除外)'
      }
      this.ruleDialogTableVisible = false;
    },
    //关闭
    handleClose(done) {
      done();
    },
    // 选择时间-季度
    export_quarter_confirm(val) {
      this.time.quarter = val;
      this.params.page = 1;
      this.open_right(this.clickItem);
    },
    // 树型菜单点击筛选
    handleCheckChange(check, param) {
      // console.log("ddd");
    },
    getRuletableData_rule(data) {
      let tableData_ruleP = [];
      for (let i in data) {
      }
      return data;
    },
    getRuleTreeDatas(data) {
      let dates = [];
      for (let i in data) {
        if (data[i].child == undefined) {
          dates.push(data[i]);
        } else {
          this.getRuleTreeData(data[i].child);
        }
      }
      return dates;
    },

    treeOpen() {
      // let that = this;
      // setTimeout(function() {
      //   that.getHeight();
      // }, 500)
    },

    //点击编辑
    editGroup() {
      this.groupShow = true;
      this.popupType = false;
      this.getGroupsInfo(this.clickItem, true);
    },
    // 获取分类信息
    getGroupsInfo(item, ifs) {
      let self = this;
      if (!item) {
        return false;
      }
      if (!ifs) {
        self.table_loading = true;
        this.params.page = 1;
      }
      this.loading = true;
      self.$http('get','/api/integral/statistics/groups/info',{ group_id: item.id }).then(res => {
          if (res.data.code == 1) {
            // 规则ID
            let itemsBjRule_ID = [];
            for (let i in res.data.data.items) {
              itemsBjRule_ID.push(res.data.data.items[i].id);
            }
            this.valuesOrLength = itemsBjRule_ID;
            if (this.valuesOrLength.length >= 1) {
              this.newGroupFormRules = this.valuesOrLength.length + '条规则';
              this.ruleHint = '统计已选规则的积分(只选分类不指定规则的积分除外)'
            } else {
              this.newGroupFormRules = '';
              this.ruleHint = '统计所有积分(基础分和工龄分除外)'
            }
            this.newGroupForm.date_interval = res.data.data.date_interval;
            this.options_time_value = res.data.data.date_interval == 1 ? '月度' : res.data.data.date_interval == 2 ? '季度' : res.data.data.date_interval == 3 ? '年度' : '';
            self.groups_info = res.data.data;
            self.newGroupForm.employees = [];
            self.employees = '';
            this.employeeNames = []
            self.employees_selected.employee = res.data.data.employees;
            this.employeeNames = res.data.data.employees
            res.data.data.employees.forEach(element => {
              self.newGroupForm.employees.push(element.id);
              self.employees += element.name + ',';
            });
            self.newGroupForm.group_name = res.data.data.name;
            this.loading = false;
            if (!ifs) {
              this.open_right(item);
            }
          } else {
            self.$message.error(res.data.data.msg);
            this.loading = false;
          }
        })
        .catch(e => {
          self.$message.error(e.data.data.msg);
          this.loading = false;
          if (!ifs) {
            self.table_loading = false;
          }
        });
    },
    //编辑时间选中
    options_times(val) {
      this.newGroupForm.date_interval = val;
    },
    // 规则分类改变之后请求数据
    rule_null(val) {
      let ruleNullId = [];
      for (let i in val) {
        for (let a in val[i]) {
          ruleNullId.push(val[i][a]);
        }
      }
    },
    // 选人组件提交
    move_employee_confirm(data) {
      this.newGroupForm.employees = [];
      this.employees = '';
      this.employeeNames = []
      this.employees_selected = data;
      if (data.employee !== null && data.employee.length != 0) {
        this.employeeNames =  data.employee
        data.employee.forEach(element => {
          this.newGroupForm.employees.push(element.id);
          this.employees += element.name + ',';
        });
      }
    },
    // 删除分组
    delItem() {
      let self = this;
      this.$confirm('确定要删除当前分组吗？, 是否继续?', '删除分组', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let data = { group_id: self.clickItem.id };
        self.delLoad = true;
        self
          .$http('DELETE','/api/integral/statistics/groups',data)
          .then(res => {
            if (res.data.code == 1) {
              self.$message.success(res.data.msg);
              self.groupShow = false;
              self.getGroupsList();
            } else {
              self.$message.error(res.data.msg);
            }
          })
          .catch(e => {
            self.$message.error(e.data.msg);
          })
          .finally(() => {
            self.delLoad = false;
          });
      });
    },
    // 提交表单
    subGroupForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.saveFun();
        }
      });
    },
    saveFun() {
      let self = this;
      self.saveLoad = true;
      let data = JSON.parse(JSON.stringify(self.newGroupForm));
      if (!self.popupType) {
        data.group_id = self.clickItem.id;
      }
      self
        .$http(self.popupType ? 'PUT' : 'POST','/api/integral/statistics/groups',data)
        .then(res => {
          if (res.data.code == 1) {
            if (self.popupType) {
              self.popupType = false;
              this.getGroupsList();
            }
            self.$message.success(res.data.msg);
            const resData = res.data.data;
            self.groups_list.push({
              id: resData.id,
              employees: resData.employees,
              name: name
            }); //左边分组
            self.groupShow = false;
            // if (!self.popupType) {
            self.getGroupsList(self.clickItem.id); //传入当前ID.为了修改后页面不切换
            // self.open_right(self.clickItem)
            // }
            
            this.employeeNames = []
            this.employees = '';
            this.employee_not_select = [];
            this.employees_selected = { employee: [], dept: [] };
          } else {
            self.$message.error(res.data.msg);
          }
        })
        .finally(() => {
          setTimeout(() => {
            self.saveLoad = false;
          }, 500);
        });
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.newGroupForm.employees = [];
      this.employees = '';
      this.employeeNames = []
      this.employee_not_select = [];
      this.employees_selected = { employee: [], dept: [] };
      this.groupShow = false;
    },
    // 新增分组
    addGroup() {
      //规则
      (this.newGroupFormRules = ''), (this.valuesOrLength = []), (this.options_time_value = '');
      this.groupShow = true;
      this.popupType = true;
      this.employeeNames = []
      this.employees = '';
      this.employee_not_select = [];
      this.employees_selected = { employee: [], dept: [] };
      this.newGroupForm = {
        group_name: '',
        employees: [],
        rules: [],
        items: [],
        date_interval: '1'
      };
      this.ruleHint = '统计所有积分(基础分和工龄分除外)'
    },
    // 页码变更
    handleCurrentChange(val) {
      this.params.page = val;
      this.open_right(this.clickItem);
    },
    handleSizeChange(val) {
      this.params.page_size = val;
      this.open_right(this.clickItem);
    },
    open_right(item) {
      this.valuesOrLength = [];
      let self = this;
      self.table_loading = true;
      self.clickItem = item;
      if (!item) {
        self.table_loading = false;
        return false;
      }
      let data = JSON.parse(JSON.stringify(self.params));
      data.rule ? '' : delete data.rule;
      // data.date ? "" : delete data.month;
      data.group_id = item.id;
      let months;
      if (this.newGroupForm.date_interval == '1') {
        months = this.time.month.replace('-', '');
      }
      data.date =
      this.newGroupForm.date_interval == '1' ? months : this.newGroupForm.date_interval == '2' ? this.time.quarter : this.newGroupForm.date_interval == '3' ? this.time.year : '';
      self.$http('get','/api/integral/statistics/groups/rank',data).then(res => {
          if (res.data.code == 1) {
            self.table_list = res.data.data.list;
            self.total = res.data.data.total;
            self.table_loading = false;
            self.lastUpdateTime = res.data.data.update_time;
          } else {
            self.$message.error(res.data.data.msg);
            self.table_loading = false;
          }
        })
        .catch(e => {
          self.$message.error(e.data.data.msg);
        })
        .finally(() => {
          self.table_loading = false;
        });
    },
    // 获取分类列表
    getGroupsList(atPresent,isload) {
      let self = this;
      self.item_loading = true;
      self.$http('get','/api/integral/statistics/groups').then(res => {
          if (res.data.code == 1) {
            //判断是否是员工，是就只显示包含他自己的排名
            if (!this.employeeRout) {
              self.groups_list = res.data.data.list;//获取所有
            } else {
              let departmentRanking = [];
              for (let i in res.data.data.list) {
                for (let a in res.data.data.list[i].employees) {
                  if (this.$store.getters.user_info.id == res.data.data.list[i].employees[a]) {
                    departmentRanking.push(res.data.data.list[i]);
                  }
                }
              }
              self.groups_list = departmentRanking;
            }
            self.$nextTick(() => {
              if (atPresent) {
                for (let i in self.groups_list) {
                  if (atPresent == self.groups_list[i].id) {
                    self.open_right(self.groups_list[i]);
                    self.getGroupsInfo(self.groups_list[i]);
                  }
                }
              } else {
                if(!isload){
                  self.open_right(self.groups_list[0]);
                }
                self.getGroupsInfo(self.groups_list[0]);
              }
            });
          } else {
            self.$message.error(res.data.data.msg);
          }
        }).catch(e => {
          self.$message.error(e.data.data.msg);
        }).finally(() => {
          self.item_loading = false;
        });
    }
  },
  mounted() {
    this.tips_show = JSON.parse(localStorage.getItem('total_rank_tips')) ? false : true;
    this.get_rule_trees();
    this.getGroupsList(false,true); //避免首次进入调用两次open_right（）方法，加上true判断
  }
};
</script>
<style scoped lang="scss">
/deep/ .itemClass .el-cascader-menu .el-cascader-menu__wrap li.el-cascader-node {
  height: auto;
  max-width: 500px;
  .el-cascader-node__label {
    white-space: initial;
    overflow: initial;
    text-overflow: initial;
  }
}
.listData {
  position: relative;
  display: table-cell;
  margin: 0 !important;
  padding: 20px;
  min-height: 600px;
  &::after {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 1px;
    background: #ebeef5;
  }
  & .groups_name {
    display: block;
    font-size: 20px;
    color: rgb(48, 49, 51);
    vertical-align: middle;
  }
}
/deep/ .el-menu-item {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  &.is-active {
    background-color: #ecf5ff;
  }
}

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

.architecture .RuleLeft::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
.architecture .RuleRight::-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 .RuleRight::-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 .RuleRight::-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 {
  overflow-x: none;
  background-color: rgba(144, 147, 153, 0.3);
}
.architecture .RuleRight:hover::-webkit-scrollbar-thumb {
  background-color: rgba(115, 118, 124, 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;
}

.elMenuCustomRule_Z {
  overflow-y: auto;
  border: none;
  height: 980px;
}
// 滚动条样式
.elMenuCustomRule_Z::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
.elMenuCustomRule_Z::-webkit-scrollbar-track {
  width: 6px;
  background-color: #fff0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/*滚动条的设置*/
.elMenuCustomRule_Z::-webkit-scrollbar-thumb {
  background-color: #fff0;
  background-clip: padding-box;
  min-height: 28px;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/*滚动条移上去的背景*/
.elMenuCustomRule_Z:hover::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.3);
}

/deep/ .el-table .cell {
  //让规则不隐藏
  overflow: inherit;
  white-space: normal;
}
.diy_tip_bg {
  background: #f5f6f9;
  overflow: hidden;
  .diy-tip {
    margin-bottom: 15px;
    border: 1px solid #67c23a;
    padding: 20px 16px;
    p {
      color: #67c23a !important;
      font-size: 15px;
      margin: 0 !important;
      padding-bottom: 4px;
    }
  }
}
.headLi{
  padding: 4px;
  list-style:disc;
  font-size:14px;
}


  .zindexName{
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
     z-index: 9;
     border:1px solid rgb(224, 224, 224);
     width:335px;
     border-radius:3px;
     padding-left:15px;
     overflow: hidden;
  }
</style>
