<template>
  <div class="siteManage-main roleInfoPage">
    <div style="text-align: right; margin-bottom: 20px">
      <!-- <el-button type="success" >新增</el-button> -->
      <el-button
        type="primary"
        @click="saveMenu()"
        :disabled="radio1 == 1 ? true : false"
      >
        保存
      </el-button>
    </div>

  

    <!-- 带复选框的树结构 start -->

    <el-tree
      ref="box"
      :data="menuData"
      show-checkbox
      node-key="id"
      :default-checked-keys="checkedKeys"
      :props="defaultProps"
      check-strictly="false"
      @check="currentChecked"
    />

    <!-- 带复选框的树结构 end -->
  </div>
</template>

<script>
import { defineComponent, ref, onMounted, watch } from 'vue'
import * as api from '@/api/systemManage/rolePermission.js'
import { ElMessage } from 'element-plus'

export default defineComponent({
  name: 'RoleInfoCom',
  props: ['menuData', 'objItem', 'radio1', 'checkedKeys'],

  setup(props) {
    let box = ref(null)
    const aa = ref([])
    const saveArr = ref([])
    function currentChecked(nodeObj, SelectedObj) {
      saveArr.value = SelectedObj.checkedKeys
      console.log('saveArr.value')
      console.log(saveArr.value)
      // console.log(SelectedObj.checkedNodes)  // 这是选中的节点数组
    }

    function saveMenu() {
      api
        .saveMenu({
          menuIds: saveArr.value,
          roleId: props.radio1,
          roleKey: props.objItem.roleKey,
          roleName: props.objItem.roleName,
          roleSort: props.objItem.roleSort,
        })
        .then((requset) => {
          if (requset.status === 'SUCCESS') {
            ElMessage.success({
              message: '权限修改成功',
              type: 'success',
            })
          } else {
            ElMessage.error(requset.msg)
          }
        })
    }

  

    // start

    function getTreeData(data) {
      // 第二种 修改涉及级联选择器 最后一个空白的情况
      // 循环遍历json数据
      for (var i = 0; i < data.length; i++) {
        data[i]['disabled'] = true
        if (!data[i].children) {
          // children若为空数组，则不作操作
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          getTreeData(data[i].children)
        }
      }
      return data
    }

 

    // end

    onMounted(() => {
      saveArr.value = props.checkedKeys
      if (props.radio1 == 1) {
        getTreeData(props.menuData)
        console.log('box.value', box.value)
        // box.value.setCheckedNodes(props.menuData)   //全选
      }
    })
    //监听变化
    watch(
      () => props.radio1,
      (newVal) => {
        newVal

        
      }
    )

    return {
      saveMenu,
      aa,
      saveArr,

      currentChecked,
      getTreeData,
      box,
    }
  },
})
</script>

<style  lang="scss">
</style>
