<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2022-10-24 15:45:01
-->
<template>
  <div class="page">
    <div class="topbox">
      <topBar
        v-if="topList.length > 0"
        :top-list="topList"
        :moren="moren"
      />
    </div>
    <div class="main">
      <div class="table_a">
        <div class="change_l">{{ '角色' }}</div>
        <!--        {{roleAllList}}-->
        <div class="table_b">
          <div class="change_i">
            <el-checkbox
              v-for="(item, index) in roleAllList"
              :key="item.roleId"
              v-model="item.changed"
              :disabled="disabled"
              :value="item.roleId"
              :label="item.roleName"
              @change="checkClickC($event,index)"
            />
          </div>
        </div>
      </div>
      <div class="table_a">
        <div class="change_l">{{ '管理名称' }}</div>
        <div class="table_b">
          <div class="change_i">
            <el-checkbox
              v-for="(item, index) in userList"
              :key="item.value"
              v-model="item.changed"
              :disabled="disabled"
              :value="item.userId"
              :label="item.nickName"
              @change="checkClickD($event,index)"
            />
          </div>
        </div>
      </div>

      <div class="table_a fx_s">
        <div class="change_l" style="width: 400px;height: 100%">{{ '菜单' }}</div>
        <div class="table_b">
          <div class="change_i" style="display: block;padding: 0;border-bottom: none;width: 1520px;overflow-x: auto">
            <div v-for="(item, index) in menuAllList" class="flex-s" style="display: block">
              <div class="table_cc " :style="!item.children?'height:50px;border-bottom:1px solid #ccc':''">
                <div class="flex-1">
                  <el-checkbox
                    :key="item.value"
                    v-model="item.changed"
                    :disabled="disabled"
                    :value="item.userId"
                    :label="item.menuName"
                    @change="checkClickA($event,index)"
                  />
                </div>
                <div>
                  <div v-for="(items,indexs) in item.children">
                    <div style="display: flex">
                      <div class="class3">
                        <el-checkbox
                          :key="items.value"
                          v-model="items.changed"
                          class="checks"
                          :disabled="disabled"
                          :value="items.userId"
                          :label="items.menuName"
                          @change="checkClickB($event,index,indexs)"
                        />
                      </div>
                      <div class="class2">
                        <div v-for="(item_s,index_s) in items.children" class="width-s">
                          <div class="width100">
                            <el-checkbox
                              :key="item_s.value"
                              v-model="item_s.changed"
                              class="bd-s"
                              :disabled="disabled"
                              :value="item_s.userId"
                              :label="item_s.menuName"
                              @change="checkClickF($event,index,indexs,index_s)"
                            />
                          </div>
                          <div v-if="item_s.children" class="class1">
                            <div v-for="(item1,indexs1) in item_s.children" class="borders">
                              <el-checkbox
                                :key="item1.value"
                                v-model="item1.changed"
                                class="box-s flex1"
                                :disabled="disabled"
                                :value="item1.userId"
                                :label="item1.menuName"
                                @change="checkClickG($event,index,indexs,index_s,indexs1)"
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                  </div>
                </div>
              </div>

            </div>
            <!--            <div class="change_i" style="border-left: 1px solid #ccc;align-items: inherit">-->
            <!--              <el-checkbox-->
            <!--                v-for="(items,indexs) in item.children"-->
            <!--                :key="items.value"-->
            <!--                v-model="items.changed"-->
            <!--                :disabled="disabled"-->
            <!--                :value="items.userId"-->
            <!--                :label="items.menuName"-->
            <!--                @change="checkClickB($event,index,indexs)"-->
            <!--              />-->
            <!--            </div>-->
          </div>
        </div>
      </div>
      <!--      <div-->
      <!--        v-for="(item,index) in typeList"-->
      <!--        :key="index"-->
      <!--        class="table_a"-->
      <!--      >-->
      <!--        <div class="change_l">{{ item.label }}</div>-->
      <!--        <div class="table_b">-->
      <!--          <div-->
      <!--            v-for="(ctem,cndex) in item.enumList"-->
      <!--            :key="cndex"-->
      <!--            class="table_c"-->
      <!--          >-->
      <!--            <div class="change_i table_cc">-->
      <!--              <el-checkbox-->
      <!--                v-model="ctem.changed"-->
      <!--                @change="checkClickA($event,index,cndex)"-->
      <!--              >{{ ctem.label }}</el-checkbox>-->
      <!--            </div>-->
      <!--            <div-->
      <!--              v-for="(stem,sndex) in ctem.enumList"-->
      <!--              :key="sndex"-->
      <!--            >-->
      <!--              <div class="change_i">-->
      <!--                <el-checkbox-->
      <!--                  v-model="stem.changed"-->
      <!--                  @change="checkClickB($event,index,cndex,sndex)"-->
      <!--                >{{ stem.label }}</el-checkbox>-->
      <!--              </div>-->
      <!--            </div>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
    </div>
    <div class="footer">
      <el-button
        size="small"
        class="myBtn"
        @click="$router.push('/system/limits/limitsList');"
      > {{ '取消' }}</el-button>
      <el-button
        style="margin-left: 40px"
        size="small"
        class="myBtn1"
        :disabled="disabled"
        @click="submit"
      > {{ '确认' }}</el-button>
    </div>
  </div>
</template>

<script>
import topBar from '@/components/topBar'
import * as api from '@/api/notice.js'
export default {
  name: 'Bzpz',
  components: {
    topBar
  },
  data() {
    return {
      userIds: '',
      tabActive: 0,
      disabled: false,
      roleAllList: [],
      roleAllList1: [],
      arr: [],
      userList: [],
      roleList: [],
      menuAllList: [],
      typeList: [],
      gradeList: [],
      rangList: [],
      awardList: [],
      menuList: [],
      query: {
        userList: [],
        roleAllList: [],
        menuAllList: []
      },
      moren: 'addMenuRole',
      topList: [
        {
          name: '后台菜单权限',
          path: 'addMenuRole'
        }
      ]
    }
  },
  mounted() {
    // 获取列表
    this.getDataList()
  },
  methods: {
    handleLink(item) {
      this.tabActive = item.id
    },
    submit() {
      const obj = {
        userIdList: [], // 管理员列表
        menuIdList: [], // 菜单列表
        adminList: [] // 角色列表
      }
      const objs = []
      // 角色
      this.roleAllList.forEach((item) => {
        if (item.changed) {
          objs.push(item.roleId)
        }
      })
      // 管理员
      this.userList.forEach((item) => {
        if (item.changed) {
          obj.userIdList.push(item.userId)
        }
      })
      // 菜单
      this.menuAllList.forEach((item, index) => {
        console.error(item)
        if (item.changed) {
          obj.menuIdList.push(item.menuId)
        }
        if (item.children) {
          item.children.forEach((ctem) => {
            if (ctem.changed) {
              obj.menuIdList.push(ctem.menuId)
              if (ctem.children) {
                ctem.children.forEach((ctems) => {
                  if (ctems.changed) {
                    obj.menuIdList.push(ctems.menuId)
                  }
                  if (ctems.children) {
                    ctems.children.forEach((item) => {
                      if (item.changed) {
                        obj.menuIdList.push(item.menuId)
                      }
                    })
                  }
                })
              }
            }
          })
        }
      })
      console.error(obj.menuIdList)
      if (obj.userIdList.length == 0) {
        this.$message({
          message: '请选择管理名称'
        })
        return
      }
      if (objs.length == 0) {
        this.$message({
          message: '请选择角色'
        })
        return
      }
      if (obj.menuIdList.length == 0) {
        this.$message({
          message: '请选择菜单'
        })
        return
      }
      api.userMenu(obj).then((res) => {
        this.$message({
          message: res.msg,
          type: 'success'
        })
        this.$router.push('/system/limits/limitsList')
      })
    },
    async getDataList() {
      // 获取管理员全部
      await api.getUserAdmin().then((res) => {
        res.data.forEach((item) => {
          item.changed = false
        })
        this.userList = res.data
      })
      // 获取全部角色
      await api.roleAllList().then((res) => {
        res.data.forEach((item) => {
          item.changed = false
        })
        this.roleAllList = res.data
        this.roleAllList1 = res.data
      })
      // 获取全部菜单
      await api.menuAllList().then((res) => {
        this.menuAllList = res.data
        this.setNewArr()
      })
      // 获取回显
      const geturl = window.location.href
      const getqyinfo = geturl.split('?')[1]
      const getqys = new URLSearchParams('?' + getqyinfo)
      const getId = getqys.get('id')
      const check = getqys.get('check')
      if (getId) {
        this.getEcho(getId)
      }
      if (check) {
        this.disabled = true
      }
    },
    async setNewArr() {
      this.userList.forEach((item) => {
        item.changed = false
      })
      this.roleAllList.forEach((item) => {
        item.changed = false
      })
      this.gradeList.forEach((item) => {
        item.changed = false
      })
      this.menuAllList.forEach((item) => {
        item.changed = false
        if (item.children) {
          item.children.forEach((ctem) => {
            ctem.changed = false
            if (ctem.children) {
              ctem.children.forEach((ctems) => {
                ctems.changed = false
              })
            }
          })
        }
      })
      this.$forceUpdate()
    },
    // 获取回显的值
    getEcho(url) {
      api.menuDetails(url).then((res) => {
        console.error(res.data)
        this.userList.forEach((item, index) => {
          if (item.userId == res.data.userId) {
            item.changed = true
          }
        })
        this.roleAllList.forEach((item, index) => {
          res.data.roleIdList.forEach((items) => {
            if (item.roleId == items) {
              item.changed = true
            }
          })
        })
        this.menuAllList.forEach((item, index) => {
          res.data.menuIdList.forEach((items) => {
            if (item.menuId == items) {
              item.changed = true
            }
          })
          if (item.children) {
            item.children.forEach((items) => {
              res.data.menuIdList.forEach((item_s) => {
                if (items.menuId == item_s) {
                  items.changed = true
                }
              })
              if (items.children) {
                items.children.forEach((itemss) => {
                  res.data.menuIdList.forEach((item_s) => {
                    if (itemss.menuId == item_s) {
                      itemss.changed = true
                    }
                  })
                })
              }
              if (items.children) {
                items.children.forEach((itemss) => {
                  if (itemss.children) {
                    itemss.children.forEach((item_s) => {
                      res.data.menuIdList.forEach((item) => {
                        if (item_s.menuId == item) {
                          item_s.changed = true
                        }
                      })
                    })
                  }
                })
              }
            })
          }
        })
        this.$forceUpdate()
      })
    },
    checkManage() {
      // 获取所有选中的角色
      const _roleIds = []
      this.roleAllList.forEach(function(item) {
        if (item.changed) {
          _roleIds.push(item.roleId)
        }
      })
      // 获取所有管理，和选中的角色对比，满足情况后置为选中状态
      const _userList = this.userList
      _userList.forEach(function(item) {
        let _count = 0
        const _roleLength = _roleIds.length
        item.roleIdList.forEach(function(roleItem) {
          _roleIds.forEach(function(selRoleItem) {
            if (roleItem == selRoleItem) {
              _count++
            }
          })
        })
        if (_count != 0 && _count == _roleLength) {
          item.changed = true
        } else {
          item.changed = false
        }
      })
      this.userList = _userList
    },
    checkClickC(e, index) {
      if (e) {
        this.roleAllList[index].changed = true
        this.roleAllList[index].checkArr = []
        if (this.roleAllList[index].changed) {
          this.roleAllList[index].checkArr.push(this.roleAllList[index].roleId)
        }
        this.checkManage()
      } else {
        this.roleAllList[index].changed = false
        this.roleAllList[index].checkArr = []
        this.checkManage()
      }
      this.$forceUpdate()
    },
    deppClone(obj) {
      const _obj = JSON.stringify(obj)
      const _obj1 = JSON.parse(_obj)
      return _obj1
    },
    checkClickD(e, index) {
      if (e) {
        this.userList[index].changed = true
        this.userList[index].checkArr = []
        if (this.userList[index].changed) {
          this.userList[index].checkArr.push(this.userList[index].userId)
        }
      } else {
        this.userList[index].changed = false
        this.userList[index].checkArr = []
      }
      this.$forceUpdate()
    },
    checkClickG(e, index, cndex, Dndex, FDnex) {
      if (e) {
        this.menuAllList[index].children[cndex].changed = true
        this.menuAllList[index].children[cndex].children[Dndex].changed = true
        this.menuAllList[index].children[cndex].children[Dndex].checkArr = []
        this.menuAllList[index].children[cndex].checkArr = []
        this.menuAllList[index].checkArr = []
        this.menuAllList[index].changed = true
        this.menuAllList[index].children[cndex].children.forEach((item) => {
          if (item.changed) {
            this.menuAllList[index].children[cndex].children[Dndex].checkArr.push(item.menuId)
          }
        })

        this.menuAllList[index].children[cndex].children[Dndex].children[FDnex].changed = true
        this.menuAllList[index].children[cndex].children[Dndex].children[FDnex].checkArr = []
        // this.menuAllList[index].checkArr.push(this.menuAllList[index].menuId)
      } else {
        // this.menuAllList[index].children[cndex].changed = false
        this.menuAllList[index].children[cndex].children[Dndex].children[FDnex].checkArr = []
        this.menuAllList[index].children[cndex].children[Dndex].children[FDnex].changed = false
        // this.menuAllList[index].children.forEach((item) => {
        //   if (item.changed) {
        //     this.menuAllList[index].children[cndex].children[Dndex].checkArr.push(item.menuId)
        //   }
        // })
      }
      console.error(this.menuAllList)
      this.$forceUpdate()
    },
    checkClickF(e, index, cndex, Dndex) {
      if (e) {
        this.menuAllList[index].children[cndex].changed = true
        this.menuAllList[index].children[cndex].children[Dndex].changed = true
        this.menuAllList[index].children[cndex].children[Dndex].checkArr = []
        this.menuAllList[index].children[cndex].checkArr = []
        this.menuAllList[index].checkArr = []
        this.menuAllList[index].changed = true
        this.menuAllList[index].children[cndex].children.forEach((item) => {
          if (item.changed) {
            this.menuAllList[index].children[cndex].children[Dndex].checkArr.push(item.menuId)
          }
        })
        // this.menuAllList[index].checkArr.push(this.menuAllList[index].menuId)
      } else {
        // this.menuAllList[index].children[cndex].changed = false
        this.menuAllList[index].children[cndex].children[Dndex].checkArr = []
        this.menuAllList[index].children[cndex].children[Dndex].changed = false
        if (this.menuAllList[index].children[cndex].children[Dndex].children) {
          this.menuAllList[index].children[cndex].children[Dndex].children.forEach((item) => {
            item.changed = false
          })
        }
        // this.menuAllList[index].children.forEach((item) => {
        //   if (item.changed) {
        //     this.menuAllList[index].children[cndex].children[Dndex].checkArr.push(item.menuId)
        //   }
        // })
      }
      this.$forceUpdate()
    },
    checkClickA(e, index) {
      if (e) {
        this.menuAllList[index].changed = true
        this.menuAllList[index].checkArr = []
        this.menuAllList[index].checkArr.push(this.menuAllList[index].menuId)
      } else {
        this.menuAllList[index].changed = false
        this.menuAllList[index].checkArr = []
        this.menuAllList[index].children && this.menuAllList[index].children.forEach((item) => {
          item.changed = false
          item.checkArr = []
          if (item.children) {
            item.children.forEach((items) => {
              items.changed = false
              items.checkArr = []
              if (items.children) {
                items.children.forEach((item_s) => {
                  item_s.changed = false
                  item_s.checkArr = []
                })
              }
            })
          }
        })
      }
      this.$forceUpdate()
    },
    checkClickB(e, index, cndex) {
      if (e) {
        this.menuAllList[index].children[cndex].changed = true
        this.menuAllList[index].children[cndex].checkArr = []
        this.menuAllList[index].checkArr = []
        this.menuAllList[index].changed = true
        this.menuAllList[index].children.forEach((item) => {
          if (item.changed) {
            this.menuAllList[index].children[cndex].checkArr.push(item.menuId)
          }
        })
      } else {
        this.menuAllList[index].children[cndex].changed = false
        this.menuAllList[index].children[cndex].checkArr = []
        this.menuAllList[index].checkArr = []
        if (this.menuAllList[index].children[cndex].children) {
          this.menuAllList[index].children[cndex].children.forEach((item) => {
            item.changed = false
            item.checkArr = []
            if (item.children) {
              item.children.forEach((item_s) => {
                item_s.changed = false
                item_s.checkArr = []
              })
            }
          })
        }
        this.menuAllList[index].children.forEach((item) => {
          if (item.changed) {
            this.menuAllList[index].children[cndex].checkArr.push(item.menuId)
          }
        })
      }
      this.$forceUpdate()
    }
  }
}
</script>
<style scoped lang="scss">
.myBtn{
  width: 120px;
  height: 38px;
  border-radius: 5px;
  color: #fff;
  background-color: #CCCCCC;
  border-color: #ccc;
}
.myBtn1{
  width: 120px;
  height: 38px;
  border-radius: 5px;
  color: #fff;
  background-color: #C8161D;
  border-color: #C8161D;
}
.width100{
  //min-width: 128px;
  //border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-top:1px solid #ccc
}
.class1{
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  //overflow-x: auto;
  display: flex;
  flex-wrap: wrap;
}
.class3{
  border-right: 1px solid #ccc;
}
.flex-1{
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 200px;
  border-right: 1px solid #ccc;
  padding: 0 20px;
}
.borders{
  display: flex;
  border-left:none;
}
.line_s{
  border-bottom: 1px solid #ccc;
}
.width-s{
  //width: 1300px;
  //height: 65px;
  display: flex;
  //border-bottom: 1px solid #ccc;
  //border-right: 1px solid #ccc;
  //border: 1px solid #ccc;
  border-left:none;
  //flex-wrap: wrap;
  //overflow-x: auto;
}
.flex1{
  padding: 20px 10px;
  //border-top: 1px solid #ccc;
}
.bd-s{
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 140px;
  border-right: 1px solid #ccc;
  padding:15px 10px;
  //min-width: inherit!important;
  height: 100%;
}
.box-s{
  //display: block;
  padding: 20px 10px;
  //border-top: 1px solid #ccc;
  //border-right: 1px solid #ccc;
  margin-right: 0;
  display: flex;
  //border: 1px solid #ccc;
  border-left: none;
  min-width: 110px;
  justify-content: center;
}
.checks{
  //display: block;
  padding: 10px 0;
  //border-bottom: 1px solid #ccc;

  margin-right: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  //border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;
  min-width: 200px;
  //display: block;
  text-align: center;
}
.flex-s{
  display: flex;
  //width: 1140px;
  //overflow-x: auto;
}
.page {
  background: #f9f9f9;
  padding: 20px;
}
.topbox {
  align-items: center;
  padding: 0px 0 15px 0;
  display: flex;
  //   background: skyblue;
  .levelList_i {
    margin-left: 20px;
    position: relative;
    cursor: pointer;
    padding: 0 5px;
    min-width: 88px;
    height: 34px;
    border-radius: 17px;
    border: 1px solid #cccccc;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    text-align: center;
    line-height: 34px;
  }
}
.act {
  color: #ffffff;
  background: #08143f;
}
.act1 {
  border-bottom: 3px solid #1890ff !important;
}
.cha {
  font-size: 16px;
  color: #606266;
  position: absolute;
  top: 10px;
}
.li {
  width: 40px;
  margin: 0 auto;
  border-bottom: 3px solid transparent;
}
.main {
  background: #fff;
  border-top: 1px solid #ccc;
}
.fx_s{
  overflow-x: auto;
  //width: 1400px;
}
.table_a {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  //border-right: 1px solid #ccc;
  // border-top: 1px solid #ccc;
}
.table_b {
  display: flex;
  flex-direction: column;
  // border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  width: 100%;
  height: 100%;
  //overflow-x: auto;
}
.table_c {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;

}
.table_c:last-child{
  border-bottom: 0;
}
.table_cc {
  border-right: 1px solid #ccc;
  //margin: 15px 0;
  display: flex;
  //border-bottom: 1px solid #ccc;
}
.change_l {
  //padding: 0 44px;
  width: 150px;
  text-align: center;
  font-size: 14px;
  color: #333;
  font-weight: 600;
}
.change_i {
  display: flex;
  //align-items: center;
  padding: 15px 0 15px 15px;
  flex-wrap: wrap;
  //border-bottom: 1px solid #ccc;
  //display:table ;
  //display:table-cell ;
  //vertical-align:middle;
}
.footer {
  height: 68px;
  background: #ffffff;
  box-shadow: 0px -3px 20px 0px rgba(204, 204, 204, 0.5);
  // margin: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  .thebtn1 {
    background: #3181e5;
    color: #ffffff;
    padding: 9px 45px;
  }
  .thebtn2 {
    background: #cccccc;
    color: #ffffff;
    padding: 9px 45px;
  }
}
::v-deep .el-checkbox{
  margin-bottom: 10px;
}
</style>
