<template>
<!-- 规则公共组件（后续再改）（误删 ）-->
  <el-dialog
    title="选择规则"
    :visible.sync="ruleDialogTableVisible"
    @close="closeNone"
    append-to-body
    :before-close="handleClose"
  >
    <el-input
      type="text"
      class="search"
      style="margin-left:79%;width:20%"
      placeholder="输入关键字搜索"
      v-model.trim="keyword"
    />
    <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"
            :data="treedata"
            :default-expand-all="defaultExpand"
            :props="defaultProps"
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
          >
            <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" style="height:500px;overflow-y:auto">
        <el-table
          ref="multipleTable"
          :data="tableData_rule"
          tooltip-effect="dark"
          style="width: 100%"
          @select="onTableSelect"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            prop="remark"
            :label="'全选 ' + valuesOrLength.length + '条'"
            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>
</template>
<script>
// let valuesLengths = []
var selecteds = [];
//节流
const delay = (function() {
  let timer = 0;
  return function(callback, ms) {
    clearTimeout(timer);
    timer = setTimeout(callback.ms);
  };
})();
export default {
  props:{
    // ruleDialogTableVisible: {
    //   type: Boolean,
    //   default: false
    // },
  },
  data() {
    return {
      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: ""
    };
  },
  watch: {
    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: {},
  methods: {
    //获取分类规则
    get_rule_trees() {
      let self = this;
      self.$http('get',"/api/integral/rule/trees")
        .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() {
      console.log("不是吧");
      console.log(this.valuesOrLength.length);
      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.multipleSelection= [...new Set(this.valuesOrLength)]//赋值
      // this.backups = [...new Set(this.valuesOrLength)]//赋值
      // this.ruleDialogTableVisible = true;
      this.ifPitchOnChild(this.tableData_rule, selecteds);
    },
    //点击规则分类
    handleNodeClick(data) {
      this.keyword = ""; //切换规则重置搜索框
      let tableData_r = [];
      for (let i in this.itemList) {
        for (let a in this.itemList[i]) {
          if (data.id == 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) {
      if (rows) {
        this.$nextTick(() => {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row, selected);
          });
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    onTableSelect(rows, row) {
      // console.log(rows)
      // console.log(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) {
      console.log(this.valuesOrLength);
      // this.valuesLength = val
      // let values = []
      // for(let i in val){
      //  values.push(val[i].id)
      // }
      // this.values_no = values
      // let valuesOrs = this.multipleSelection
      // for(let i in this.values_no){
      //   valuesOrs.push(this.values_no[i])
      // }
      // this.multipleSelection = [...new Set(valuesOrs)]
    },
    //关闭回调
    closeNone() {
      // this.$refs.multipleTable.clearSelection();
      selecteds = [];
      // selecteds = this.valuesOrLength
      // this.multipleSelection = []
      // this.valuesLength = []
      console.log("关闭");
      console.log(selecteds);
      console.log(this.valuesOrLength);
      // console.log(valuesLengths)
    },
    //规则弹窗确定
    ruleDialogTableVisibleQD() {
      console.log("确定");
      let valuesLengths = [];
      for (let i in selecteds) {
        valuesLengths.push(selecteds[i]);
      }
      // valuesLengths = selecteds
      this.valuesOrLength = valuesLengths;
      this.newGroupForm.rules = this.valuesOrLength;
      if (this.valuesOrLength.length >= 1) {
        this.newGroupFormRules = this.valuesOrLength.length + "条规则";
      } else {
        this.newGroupFormRules = "";
      }
      this.ruleDialogTableVisible = false;
    },
    //关闭
    handleClose(done) {
      done();
    }
  },
  mounted() {
    this.get_rule_trees();
    this.ruleDialogTableVisibles()
  }
};
</script>
<style scoped lang="scss">
// .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;
}
/*滚动条的宽度*/

.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 {
  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;
}
</style>
