<!-- 系统配置 - 权限配置 -- 前台菜单权限（新増、修改） -->
<template>
  <div class="page">
    <div class="topbox">
      <topBar
        v-if="topList.length > 0"
        :top-list="topList"
        :moren="moren"
      />
    </div>
    <div class="main">
      <div v-for="(item, index) in typeList" :key="index" class="table_a">
        <div class="line-s" />
        <!--        {{// typeList[0]}}-->
        <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 class1">
              <el-checkbox
                v-model="ctem.changed"
                :disabled="disableds"
                @change="checkClickA($event, index, cndex)"
              > <span class="overflow1" :title="ctem.label">{{ ctem.label }}</span></el-checkbox>
            </div>
            <div style="display: flex;flex-wrap: wrap;width: 80%">
              <div v-for="(stem, sndex) in ctem.enumList" :key="sndex">
                <div class="change_i">
                  <el-checkbox
                    v-model="stem.changed"
                    :disabled="disableds"
                    @change="checkClickB($event, index, cndex, sndex)"
                  >{{ stem.label }}</el-checkbox>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <el-button
        size="small"
        class="myBtn"
        @click="$router.push('/system/limits/receptionRole');"
      > {{ '取消' }}</el-button>
      <el-button
        size="small"
        style="margin-left: 40px"
        class="myBtn1"
        :disabled="disableds"
        @click="submit"
      > {{ '确认' }}</el-button>
    </div>
  </div>
</template>

<script>
import topBar from '@/components/topBar'
import * as api from '@/api/notice.js'
import * as apis from '@/api/system.js'
import { registerPowerState } from '@/api/giftGoods.js'
import { updateMenu } from '@/api/system.js'
export default {
  name: 'Bzpz',
  components: {
    topBar
  },
  data() {
    return {
      disableds: false,
      moren: 'receptionRole',
      topList: [
        {
          name: '前台菜单权限',
          path: 'receptionRole'
        },
        {
          name: '后台菜单权限',
          path: 'limitsList'
        }
      ],
      typeList: [],
      gradeList: [],
      rangList: [],
      awardList: [],
      menuList: [],
      jurisdiction: [],
      obj1: {
        gradeIdList: [],
        awardsIdList: [],
        authorityIdList: [],
        menuValueList: []
      }
    }
  },
  created() {

  },
  mounted() {
    // 获取列表
    this.getDataList()

    const geturl = window.location.href
    const getqyinfo = geturl.split('?')[1]
    const getqys = new URLSearchParams('?' + getqyinfo)
    const states = getqys.get('state')
    const id = getqys.get('id')
    if (states == 1) {
      this.disableds = true
    }
    if (id) {
      this.setNewArr(id)
    }
  },
  methods: {
    getNoticeList() {
      const geturl = window.location.href
      const getqyinfo = geturl.split('?')[1]
      const getqys = new URLSearchParams('?' + getqyinfo)
      const id = getqys.get('id')
      apis.menuDetails(id).then((res) => {
        this.typeList.forEach((item) => {
          res.data.gradeIdList.forEach((ctem) => {
            item.enumList[0].enumList.forEach((items) => {
              if (items.pkId === ctem) {
                items.changed = true
                item.enumList[0].changed = true
              }
            })
          })
          res.data.awardsIdList.forEach((ctem) => {
            item.enumList[1].enumList.forEach((items) => {
              if (items.pkId === ctem) {
                items.changed = true
                item.enumList[1].changed = true
              }
            })
          })
          res.data.authorityIdList.forEach((ctem) => {
            item.enumList[2].enumList.forEach((items) => {
              if (items.value === ctem) {
                items.changed = true
                item.enumList[2].changed = true
              }
            })
          })
          // // 创客空间处理（此处判断值为4，是后台枚举返回的内容，等级和菜单都会遍历到这个位置）
          // if (item.enumList[3].value == 4 && res.data.makerSpace == 0) {
          //   item.enumList[3].changed = true;
          // }
        })
        this.typeList[1].enumList.forEach((item) => {
          res.data.menuValueList.forEach((ctem) => {
            if (item.value == ctem) {
              item.changed = true
            }
            if (item.enumList) {
              item.enumList.forEach((ctems) => {
                if (ctem == ctems.value) {
                  ctems.changed = true
                }
              })
            }
          })
        })
        console.error(this.typeList)
        this.$forceUpdate()
      })
    },

    submit() {
      const obj1 = this.obj1
      obj1.gradeIdList = []
      obj1.awardsIdList = []
      obj1.menuValueList = []
      obj1.authorityIdList = []
      obj1.makerSpace = -1

      this.typeList[0].enumList[0].enumList.forEach((items) => {
        if (items.changed) {
          obj1.gradeIdList.push(items.value)
        }
      })
      this.typeList[0].enumList[1].enumList.forEach((items) => {
        if (items.changed) {
          obj1.awardsIdList.push(items.value)
        }
      })
      this.typeList[0].enumList[2].enumList.forEach((items) => {
        if (items.changed) {
          obj1.authorityIdList.push(items.value)
        }
      })
      // // 等级里面的创客空间是否选中传入后台参数
      // if (this.typeList[0].enumList[3].changed) {
      //   obj1.makerSpace = 0
      // } else {
      //   obj1.makerSpace = 1
      // }

      this.typeList[1].enumList.forEach((item, index) => {
        if (item.changed) {
          obj1.menuValueList.push(item.value)
          if(item.enumList.length>0){
            item.enumList.forEach((items) => {
              if (items.changed) {
                obj1.menuValueList.push(items.value)
              }
            })
          }
        }
      })

      if (obj1.gradeIdList.length == 0 && obj1.awardsIdList.length == 0 && obj1.authorityIdList.length == 0 && obj1.makerSpace == -1 || obj1.menuValueList.length == 0) {
        // 请选择
        this.$message({
          message: '请选择'
        })
      } else {
        const geturl = window.location.href
        const getqyinfo = geturl.split('?')[1]
        const getqys = new URLSearchParams('?' + getqyinfo)
        const state = getqys.get('state')
        const id = getqys.get('id')
        if (state == 2) {
          obj1.menuId = id
          apis.updateMenu(obj1).then((res) => {
            if(res.code=='200'){
              this.$message({
                message: res.msg,
                type: 'success'
              })
              this.$router.push('/system/limits/receptionRole')
            }
          })
        } else {
          apis.submitSave(obj1).then((res) => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.$router.push('/system/limits/receptionRole')
          })
        }
      }
    },
    getDataList() {
      // 获取公告类型
      api.noticeType().then((res) => {
        this.typeList = res.data
        // 等级
        api.noticeGrade1().then((res) => {
          this.gradeList = res.data
          // 等级详情
          api.gradeRanglist().then((res) => {
            res.data.forEach((item) => {
              item.value = item.pkId
              item.label = item.gradeName
            })
            this.rangList = res.data
            // 奖衔详情
            api.awardsList().then((res) => {
              res.rows.forEach((item) => {
                item.value = item.pkId
                item.label = item.awardsName
              })
              this.awardList = res.rows
              // 权限列表
              registerPowerState().then((res) => {
                res.data.forEach((item) => {
                  item.value = item.value
                  item.label = item.label
                })
                this.jurisdiction = res.data
                // 菜单
                api.menuList().then((res) => {
                  this.menuList = res.data
                  this.setNewArr()
                })
              })
            })
          })
        })
      })
    },
    setNewArr(id) {
      this.rangList.forEach((item) => {
        item.changed = false
      })
      this.jurisdiction.forEach((item) => {
        item.changed = false
      })
      this.awardList.forEach((item) => {
        item.changed = false
      })
      this.gradeList.forEach((item) => {
        item.enumList = []
        item.changed = false
      })
      this.menuList.forEach((item) => {
        item.changed = false
        item.enumList.forEach((ctem) => {
          ctem.changed = false
        })
      })
      this.gradeList[0].enumList = this.rangList
      this.gradeList[1].enumList = this.awardList
      this.gradeList[2].enumList = this.jurisdiction
      this.typeList.forEach((item) => {
        item.enumList = []
        item.changed = false
      })
      this.typeList[0].enumList = this.gradeList
      this.typeList[1].enumList = this.menuList
      // this.typeList[2].enumList = this.jurisdiction

      const geturl = window.location.href
      const getqyinfo = geturl.split('?')[1]
      const getqys = new URLSearchParams('?' + getqyinfo)
      const state = getqys.get('state')
      const ids = getqys.get('id')
      if (ids) {
        const obj1 = this.obj1
        this.typeList.forEach((item) => {
          item.enumList[0].enumList.forEach((items) => {
            if (items.changed) {
              obj1.gradeIdList.push(items.value)
            }
          })
          item.enumList[1].enumList.forEach((items) => {
            if (items.changed) {
              obj1.awardsIdList.push(items.value)
            }
          })
          item.enumList[2].enumList.forEach((items) => {
            if (items.changed) {
              obj1.authorityIdList.push(items.value)
            }
          })
        })
        this.typeList[1].enumList.forEach((item, index) => {
          if (item.changed) {
            obj1.menuValueList.push(item.value)
            if(item.enumList.length>0){
              item.enumList.forEach((items) => {
                if (items.changed) {
                  obj1.menuValueList.push(items.value)
                }
              })
            }
          }
        })
        this.getNoticeList(id)
        // 获取回显
      }
      this.$forceUpdate()
    },
    checkClickA(e, index, cndex) {
      console.log('🌈', e, index, cndex)
      if (e) {
        this.typeList[index].enumList[cndex].changed = true
        this.typeList[index].changed = true
        this.typeList[index].enumList[cndex].checkArr = []
        this.typeList[index].enumList[cndex].enumList.forEach((item) => {
          if (item.changed) {
            this.typeList[index].enumList[cndex].checkArr.push(item.value)
          }
        })
      } else {
        this.typeList[index].enumList[cndex].changed = false
        this.typeList[index].enumList[cndex].enumList.forEach((item) => {
          item.changed = false
        })

        this.typeList[index].enumList.forEach((item) => {
          this.typeList[index].changed = false
          if (item.changed) {
            this.typeList[index].changed = true
          }
        })
      }
      this.$forceUpdate()
    },
    checkClickB(e, index, cndex, sndex) {
      if (e) {
        this.typeList[index].enumList[cndex].changed = true
        this.typeList[index].enumList[cndex].enumList[sndex].changed = true
        this.typeList[index].enumList[cndex].checkArr = []
        this.typeList[index].enumList[cndex].enumList.forEach((item) => {
          if (item.changed) {
            this.typeList[index].enumList[cndex].checkArr.push(item.value)
          }
        })
        this.typeList[index].changed = true
      } else {
        this.typeList[index].enumList[cndex].enumList[sndex].changed = false
        this.typeList[index].enumList[cndex].checkArr = []
        this.typeList[index].enumList[cndex].enumList.forEach((item) => {
          if (item.changed) {
            this.typeList[index].enumList[cndex].checkArr.push(item.value)
          }
        })
        this.typeList[index].enumList.forEach((item) => {
          this.typeList[index].changed = false
          if (item.changed) {
            this.typeList[index].changed = true
          }
        })
      }
      this.$forceUpdate()
    }
  }
}
</script>
  <style scoped lang="scss">
  ::v-deep .class1 .el-checkbox__input{
    margin-top: -10px;
  }
  ::v-deep .class1 .el-checkbox__label{
    width: 100px!important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .overflow1{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .line-s{
    width: 1px;
    height: 100%;
    position: absolute;
    left: 260px;
    background: #ccc;
  }
  .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;
  }
.change_l:nth-child(2){
  padding: 0 60px;
}
.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;
  position: relative;
}
.table_a {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  position: relative;
  // border-top: 1px solid #ccc;
}
.table_b {
  display: flex;
  flex-direction: column;
  // border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  width: 100%;
}
.table_c {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  flex-wrap: wrap;
}
.table_c:last-child {
  border-bottom: 0;
}
.table_cc {
  //width: 160px;
  width: 130px!important;
  //width: 200px!important;
  //border-right: 1px solid #ccc;
  //border-right: 1px solid #ccc;

}
.change_l {
  padding: 0 44px;
}
.change_i {
  display: flex;
  align-items: center;
  width: 200px;
  //height: 40px;
  padding: 10px 10px;
   //padding: 30px 15px;
}
.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;
  }
}
</style>
