<template>
  <div>
    <el-card style="margin-bottom:8px">
      <el-row>
        <el-col :span="8">
          <span>角色：</span>
          <el-input style="width:70%" size="small" v-model="search.name" clearable placeholder="请输入角色">
          </el-input>
        </el-col>
        <el-col :span="8">
          <el-button size="mini" type="primary" icon="el-icon-search" @click="searchClick(1)">搜索</el-button>
          <el-button size="mini" type="info" icon="el-icon-refresh" @click="searchClick(2)">重置</el-button>
        </el-col>
        <el-col :span="8" style="text-align:right;padding:0 10px">
          <!-- <div style="margin-top:5px;text-align:right;padding:0 40px"> -->
          <el-button :loading="btnloading" size="mini" type="success" icon="el-icon-check" @click="searchClick(3)">保
            存</el-button>
          <!-- v-if="showButtons.bc" -->
          <!-- </div> -->
        </el-col>
      </el-row>
    </el-card>
    <el-card :body-style="{ padding: '10px' }">
      <div class="page">
        <div class="left">
          <el-table size='small' border min-height="550" :data="tableDataOne" tooltip-effect="dark"
            highlight-current-row @cell-click='oneClick'
            :header-cell-style="{'letter-spacing':'3px','font-size':'14px' }">
            <el-table-column prop="roleName" align="center" label="角色"></el-table-column>
            <el-table-column prop="roleCode" align="center" label="角色编码"></el-table-column>
          </el-table>
        </div>
        <div class="right">
          <el-card class="EBAY-publication">
            <div v-for="(item,key) in tableDataTwo" :key="key">
              <el-checkbox v-model="item.isChecked" :label="item.name" class="mianmune"
                @change="checked=>handleCheckAllChange(checked, item.name)">
              </el-checkbox>
              <el-divider></el-divider>
              <div v-if="item.childs&&item.childs.length">
                <div class="table-body" v-for="(ele,index) in item.childs" :key="index">
                  <div class="selection" style="margin-left:30px">
                    <el-checkbox v-model="ele.isChecked" :label="ele.name" class="Twomune"
                      @change="checked=>handleCheckAllChangecd(checked, item.name,ele.name)">
                    </el-checkbox>
                  </div>
                  <el-divider></el-divider>
                  <div v-if="ele.childs&& ele.childs.length ">
                    <div class="table-body" v-for="(ara) in  ele.childs" :key="ara.id">
                      <div class="selection" style="margin-left:50px">
                        <el-checkbox v-model="ara.isChecked" :label="ara.name" class="threemune"
                          @change="checked=>handleCheckAllChangecdtwo(checked, item.name,ele.name,ara.name)">
                        </el-checkbox>
                      </div>
                      <el-divider></el-divider>
                      <div v-if="ara.buttons && ara.buttons.length">
                        <div class=" margin-L40 flx">
                          <div class="flx-box" v-for="(btn,index) in ara.buttons" :key="index">
                            <el-checkbox v-model="btn.isChecked" :label="btn.name" size="mini"
                              @change="checked=>handleCheckAllChangebtntwo(checked, item.name,ele.name,ara.name,btn.name)">
                            </el-checkbox>
                          </div>
                        </div>
                        <el-divider></el-divider>
                      </div>
                    </div>
                  </div>
                  <div v-if="ele.buttons && ele.buttons.length">
                    <div class=" margin-L40 flx">
                      <div class="flx-box" v-for="(btn,index) in ele.buttons" :key="index">
                        <el-checkbox v-model="btn.isChecked" :label="btn.name" size="mini"
                          @change="checked=>handleCheckAllChangebtn(checked, item.name,ele.name,btn.name)">
                        </el-checkbox>
                      </div>
                    </div>
                    <el-divider></el-divider>
                  </div>
                </div>
              </div>
              <div v-else class="panel">
                <div v-if="item.buttons&&item.buttons.length">
                  <div class="margin-L40 flx">
                    <div class="flx-box" v-for="(btn,index) in item.buttons" :key="index">
                      <el-checkbox v-model="btn.isChecked" :label="btn.name"
                        @change="checked=>handleCheckAllChangebtnNo(checked, item.name,btn.name)">
                      </el-checkbox>
                    </div>
                  </div>
                </div>
                <el-divider></el-divider>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </el-card>
    <loading-tem :loadingStatus='loadingStatus' />
  </div>
</template>
<script>
  import {
    mapState,
    mapGetters,
    mapActions
  } from "vuex";
  import {
    clearObjValue,
    message,
  } from "@/utils/common";
  export default {
    data() {
      return {
        btnloading: false,
        search: {
          name: "",
        },
        getRowKeys(row) {
          return row.id;
        },
        loadingStatus: false,
        rowOne: {},
        paramsOne: {},
        paramsTwo: {},
        multipleSelection: [],
        isAllSelect: false
      }
    },
    computed: {
      ...mapState({
        tableDataOne: (state) => state.roleMenu.tableDataOne,
        EchoList: (state) => state.roleMenu.EchoList,
        showButtons: (state) => state.roleMenu.showButtons,
      }),
      tableDataTwo: {
        get() {
          return this.$store.state.roleMenu.tableDataTwo;
        },
        set(val) {
          this.$store.state.roleMenu.tableDataTwo = val;
        },
      },
    },
    methods: {
      searchClick(val) {
        switch (val) {
          case 1:
            this.getDataOne()
            break;
          case 2:
            clearObjValue(this.search)
            break;
          case 3:
            if (JSON.stringify(this.rowOne) === "{}") {
              message('warning', '请先选择角色', 3000)
              return
            }
            let mIds = []
            let btnIds = []
            this.tableDataTwo.forEach(item => {
              if (item.isChecked) {
                mIds.push(item.id)
                if (item.buttons && item.buttons.filter(btn => btn.isChecked).length) {
                  item.buttons.forEach(btn => {
                    if (btn.isChecked) {
                      btnIds.push(btn.id)
                    }
                  })
                }
                if (item.childs.filter(ele => ele.isChecked).length) {
                  item.childs.forEach(ch => {
                    if (ch.isChecked) {
                      mIds.push(ch.id)
                    }
                    if (ch.buttons && ch.buttons.length && ch.buttons.filter(btn => btn.isChecked).length) {
                      ch.buttons.forEach(btn => {
                        if (btn.isChecked) {
                          btnIds.push(btn.id)
                        }
                      })
                    }
                    if (ch.childs && ch.childs.length) {
                      if (ch.childs.filter(fi => fi.isChecked).length) {
                        ch.childs.forEach(ara => {
                          if (ara.isChecked) {
                            mIds.push(ara.id)
                          }
                          if (ara.buttons && ara.buttons.length && ara.buttons.filter(btn => btn.isChecked)
                            .length) {
                            ara.buttons.forEach(btn => {
                              if (btn.isChecked) {
                                btnIds.push(btn.id)
                              }
                            })
                          }
                        })
                      }
                    }
                  })
                }
              }
            })
            let sumData = {
              menuids: mIds.join(','),
              roleId: this.rowOne.id,
              buttonids: btnIds.join(','),
            }
            this.btnloading = true;
            this.$store.dispatch('roleMenu/UserBymenu', sumData).then(() => {
              this.btnloading = false;
            }).catch(() => {
              this.btnloading = false;
            })
            break;
        }
      },
      getDataOne() {
        this.paramsOne = {
          roleName: this.search.name,
          limit: 5000
        };
        this.$store.dispatch("roleMenu/getRoles", this.paramsOne);
      },
      getDataTwo() {
        this.loadingStatus = true
        this.paramsTwo = {
          pId: "-1",
          limit: 5000
        };
        this.$store.dispatch("roleMenu/selectListTree", this.paramsTwo).then(res => {
          this.clearArr(this.tableDataTwo)
          this.loadingStatus = false
        }).catch(err => {
          this.loadingStatus = false
        });
      },
      oneClick(val) {
        this.clearArr(this.tableDataTwo)
        this.rowOne = val
        this.$store.dispatch('roleMenu/getMenuByRoleId', {
          pid: val.pid,
          roleId: val.id,
        }).then(res => {
          this.Ecoh()
        })
      },
      clearArr(data) {
        data.forEach(item => {
          this.$set(item, 'isChecked', false);
          if (item.childs && item.childs.length) {
            item.childs.forEach(ele => {
              this.$set(ele, 'isChecked', false);
              this.$set(ele, 'AllChecked', false);
              if (ele.buttons && ele.buttons.length) {
                ele.buttons.forEach(btn => {
                  this.$set(btn, 'isChecked', false);
                })
              }
              if (ele.childs && ele.childs.length) {
                ele.childs.forEach(ara => {
                  this.$set(ara, 'isChecked', false);
                  this.$set(ara, 'AllChecked', false);
                  if (ara.buttons && ara.buttons.length) {
                    ara.buttons.forEach(btn => {
                      this.$set(btn, 'isChecked', false);
                    })
                  }
                })
              }
            })

          } else if (item.childs && !item.childs.length) {
            item.buttons.forEach(ele => {
              this.$set(ele, 'isChecked', false);
              // this.$refs.multipleTable.toggleRowSelection(ele, false);
            })
          }
        })
      },
      Ecoh() {
        let plantFormList = [...this.EchoList];
        this.tableDataTwo.forEach(val => {
          plantFormList.forEach(item => {
            if (item.id === val.id) {
              val.isChecked = true
              if (item.childs && item.childs.length) {
                item.childs.forEach(ch_1 => {
                  val.childs.forEach(ch_2 => {
                    if (ch_1.id === ch_2.id) {
                      ch_2.isChecked = true
                      if (ch_1.buttons) {
                        if (ch_1.buttons.length === ch_2.buttons.length) {
                          ch_2.AllChecked = true
                          ch_2.buttons.forEach(btn => {
                            btn.isChecked = true
                          })
                        } else {
                          ch_1.buttons.forEach(btn_1 => {
                            ch_2.buttons.forEach(btn_2 => {
                              if (btn_1.id === btn_2.id) {
                                btn_2.isChecked = true
                              }
                            })
                          })
                        }
                      }
                      if (ch_1.childs && ch_1.childs.length) {
                        ch_1.childs.forEach(ara_1 => {
                          ch_2.childs.forEach(ara_2 => {
                            if (ara_1.id === ara_2.id) {
                              ara_2.isChecked = true
                              if (ara_1.buttons && ara_1.buttons.length) {
                                if (ara_1.buttons.length === ara_2.buttons
                                  .length) {
                                  ara_2.AllChecked = true
                                  ara_2.buttons.forEach(btn => {
                                    btn.isChecked = true
                                  })
                                } else {
                                  ara_1.buttons.forEach(btn_1 => {
                                    ara_2.buttons.forEach(btn_2 => {
                                      if (btn_1.id === btn_2.id) {
                                        btn_2.isChecked = true
                                      }
                                    })
                                  })
                                }
                              }
                            }
                          })
                        })
                      }
                    }
                  })
                })
              } else {
                if (item.buttons.length) {
                  item.buttons.forEach(btn_1 => {
                    val.buttons.forEach(btn_2 => {
                      if (btn_1.id === btn_2.id) {
                        btn_2.isChecked = true
                      }
                    })
                  })
                }
              }
            }
          })
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      //全局全选与全取消按钮
      handleCheckAllChange(val, name) {
        this.tableDataTwo.forEach(item => {
          //没有childs的情况
          if (item.name === name && item.childs && !item.childs.length && item.buttons.length && item.buttons
            .length != item.buttons.filter(btn => btn.isChecked)) {
            item.buttons.forEach(btn => {
              btn.isChecked = val
            })
          }
          //有childs的情况
          if (item.name === name && item.childs && item.childs.length) {
            item.childs.forEach(ele => {
              ele.isChecked = val
              ele.AllChecked = val
              if (ele.buttons && ele.buttons.length) {
                ele.buttons.forEach(btn => {
                  btn.isChecked = val
                })
              }
              if (ele.childs && ele.childs.length) {
                ele.childs.forEach(ara => {
                  ara.isChecked = val
                  ara.AllChecked = val
                  if (ara.buttons && ara.buttons.length) {
                    ara.buttons.forEach(btn => {
                      btn.isChecked = val
                    })
                  }
                })
              }
            })
          }
        })
      },
      //局部全选button
      handleCheckAllChangeAll(val, name, btnName) {
        this.tableDataTwo.forEach(item => {
          if (item.name === name && item.childs.length && val) {
            item.isChecked = val
            item.childs.forEach(ele => {
              if (ele.name === btnName && ele.buttons.length != ele.buttons.filter(btn => btn.isChecked)
                .length) {
                ele.isChecked = val
                ele.buttons.forEach(btn => {
                  btn.isChecked = val
                })
              }
            })
          }
          if (item.name === name && item.childs.length && !val) {
            // item.isChecked = val
            item.childs.forEach(ele => {
              if (ele.name === btnName) {
                ele.isChecked = val
                ele.buttons.forEach(btn => {
                  btn.isChecked = val
                })
              }
            })
            if (!item.childs.filter(ele => ele.isChecked).length) {
              item.isChecked = false
            }
          }
        })
      },
      //局部一级菜单选择
      handleCheckAllChangecd(val, name, cdname) {
        this.tableDataTwo.forEach(item => {


          if (item.name === name && val) {
            item.isChecked = val
            item.childs.forEach(ele => {
              if (ele.name === cdname) {
                if (ele.buttons && ele.buttons.length) {
                  ele.buttons.forEach(btn => {
                    btn.isChecked = val
                  })
                }

                if (ele.childs && ele.childs.length) {
                  ele.childs.forEach(ara => {
                    ara.isChecked = val
                    if (ara.buttons && ara.buttons.length) {
                      ara.buttons.forEach(btn => {
                        btn.isChecked = val
                      })
                    }
                  })
                }
              }
            })
          }
          if (item.name === name && !val) {
            item.childs.forEach(ele => {
              if (ele.name === cdname) {
                if (ele.buttons && ele.buttons.length) {
                  ele.buttons.forEach(btn => {
                    btn.isChecked = val
                  })
                }
                if (ele.childs && ele.childs.length) {
                  ele.childs.forEach(ara => {
                    ara.isChecked = val
                    if (ara.buttons && ara.buttons.length) {
                      ara.buttons.forEach(btn => {
                        btn.isChecked = val
                      })
                    }
                  })
                }
              }
            })
            if (!item.childs.filter(ele => ele.isChecked).length) {
              item.isChecked = false
            }
          }

        })
      },
      //局部二级菜单选择
      handleCheckAllChangecdtwo(val, name, cdname, threeName) {
        this.tableDataTwo.forEach(item => {
          if (item.name === name && val) {
            item.isChecked = val
            item.childs.forEach(ele => {
              if (ele.name === cdname) {
                ele.isChecked = val
                ele.childs.forEach(ara => {
                  if (ara.name === threeName && ara.buttons && ara.buttons.length) {
                    ara.buttons.forEach(btn => {
                      btn.isChecked = val
                    })
                  }
                })
              }
            })
          }
          if (item.name === name && !val) {
            // item.isChecked = val
            item.childs.forEach(ele => {
              if (ele.name === cdname) {
                // ele.isChecked = val
                ele.childs.forEach(ara => {
                  if (ara.name === threeName && ara.buttons && ara.buttons.length) {
                    ara.buttons.forEach(btn => {
                      btn.isChecked = val
                    })
                  }
                })
              }
              if (!ele.childs.filter(ele => ele.isChecked).length) {
                ele.isChecked = false
              }
            })
          }
        })
      },
      //button 的选择
      handleCheckAllChangebtn(val, name, cdname, btnName) {
        this.tableDataTwo.forEach(item => {

          if (item.name === name && val) {
            item.isChecked = val
            item.childs.forEach(ele => {
              if (ele.name === cdname) {
                ele.isChecked = val
              }
            })
          }
          if (item.name === name && !val) {
            item.childs.forEach(ele => {
              if (ele.name === cdname) {
                ele.AllChecked = val
                if (!ele.buttons.filter(btn => btn.isChecked).length) {
                  // ele.isChecked = val
                }
              }
            })
          }
        })
      },
      //button 的选择
      handleCheckAllChangebtntwo(val, name, cdname, threeName, btnName) {
        this.tableDataTwo.forEach(item => {

          if (item.name === name && val) {
            item.isChecked = val
            item.childs.forEach(ele => {
              if (ele.name === cdname) {
                ele.isChecked = val
                ele.childs.forEach(ara => {
                  if (ara.name === threeName) {
                    ara.isChecked = val
                  }
                })
              }
            })
          }
          if (item.name === name && !val) {
            item.childs.forEach(ele => {
              if (ele.name === cdname) {
                ele.childs.forEach(ara => {
                  if (ara.name === threeName) {
                    ara.AllChecked = val
                    if (!ara.buttons.filter(btn => btn.isChecked).length) {
                      // ara.isChecked = val
                    }
                  }
                })
              }
            })
          }
        })
      },
      //button 没有二级菜单 的选择
      handleCheckAllChangebtnNo(val, name, btnName) {
        this.tableDataTwo.forEach(item => {
          if (item.name === name && val) {
            item.isChecked = val
          }
          if (item.name === name && !val && !item.buttons.filter(btn => btn.isChecked).length) {
            // item.isChecked = val
          }
        })
      }
    },
    beforeDestroy() {
      this.tableDataTwo = []
    },
    created() {
      clearObjValue(this.showButtons)
      let btnData = {
        menuid: this.$getMenuId(sessionStorage.getItem("funcTypeCodeList"), this.$route.path),
        roleid: sessionStorage.getItem("roleId"),
        code: sessionStorage.getItem("code")
      }
      this.$store.dispatch("roleMenu/getButtonList", btnData);
      this.getDataOne()
      this.getDataTwo()
    }
  }

</script>
<style lang='scss' scoped>
  .page {
    display: flex;
    justify-content: space-between;

    .left {
      width: 35%;
    }

    .right {
      width: 63%;
    }
  }

  ::v-deep .el-table__row--level-1 {
    .el-table-column--selection {
      .cell {
        text-align: right;
      }
    }

  }

  ::v-deep.row-expand-unhas {
    .el-table__expand-column {
      pointer-events: none;
    }
  }

  ::v-deep .row-expand-unhas {
    .el-table__expand-column {
      .el-table__expand-icon {
        visibility: hidden;
      }
    }
  }

  ::v-deep.el-table__expand-icon {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  // /*2.展开按钮未点击的样式是加号带边框*/
  // ::v-deep .row-expand-has {
  //   .el-icon-arrow-right:before {
  //     content: "\e6e9";
  //     border: 1px solid #ccc;
  //     // padding: 1px;
  //   }
  // }
  // /*2.按钮已点击展开之后的样式是减号带边框*/
  // ::v-deep .row-expand-has {
  //   .el-icon-arrow-right:before {
  //     content: "\e6e9";
  //   }
  // }

  .EBAY-publication {
    // background:red;
    // width: 80%;
    letter-spacing: 1px;
    max-height: 750px;
    overflow-y: scroll;

    ::v-deep.el-checkbox__label {
      font-size: 12px;
      // color: red;
    }

    ::v-deep .mianmune {
      .el-checkbox__label {
        font-weight: bolder;
        font-size: 15px;
        letter-spacing: 2px;
        // color: #000;
      }


    }

    ::v-deep .Twomune {
      .el-checkbox__label {
        font-weight: bolder;
        font-size: 13px;
        letter-spacing: 2px;
      }
    }

    ::v-deep .threemune {
      .el-checkbox__label {
        font-weight: bolder;
        font-weight: 600;
        font-size: 12px;
      }
    }

    .el-divider--horizontal {
      margin: 10px 0;
    }

    .margin-L40 {
      padding-left: 70px;

    }

    .flx {
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-around;
      align-items: center;

      .flx-box {
        min-width: 20%;
        //line-height: 2rem;
        line-height:1em;
        margin-right:10px;
      }
    }
  }

  ::v-deep {
    .el-table__body tr.current-row>td {
      background-color: #95aaee;
      color: #ffffff;
      font-weight: 600;
    }
  }

</style>
