<template>
  <div class="siteManage-main roleInfoPage">
    <el-table
      :data="menuData2"
      border
      stripe
      :cell-style="cellStyle"
      row-key="id"
      default-expand-all
    >
      <el-table-column prop="menu" label="菜单" width="180"></el-table-column>
      <el-table-column
        prop="authority"
        label="权限"
        align="left"
        class="roleLeft"
      >
        <template #default="scope">
          <el-checkbox
            v-for="item in scope.row.authority"
            :label="item.name"
            :key="item.actionid"
            v-model="item.checked"
            :disabled="radio1 == 1 ? true : false"
            @change="handleCheckedChange"
          ></el-checkbox>
        </template>
      </el-table-column>
    </el-table>

    <div style="text-align: right; margin-top: 20px">
      <el-button
        type="primary"
        @click="saveMenu()"
        :disabled="radio1 == 1 ? true : false"
      >
        保存
      </el-button>
    </div>
  </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', 'menuData2', 'objItem', 'radio1', 'checkedKeys'],

  setup(props) {
    const saveArr = ref([])
    const checkedArr = ref([])

    function cellStyle({ row, column, rowIndex, columnIndex }) {
      row, column, rowIndex
      if (columnIndex) {
        return `text-align:left!important;cursor:pointer;`
      }
    }

    function saveMenu() {
      console.log('checkedArr')
      console.log(checkedArr.value)
      api
        .saveMenu({
          menuIds: checkedArr.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)
          }
        })
    }

    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
    }
    function handleCheckedChange() {
      checkedArr.value = []
      getCheckedArr()
    }

    // 复选框选中的数组集合start
    function getCheckedArr() {
      props.menuData2.forEach(function (item) {
        if (item.children) {
          item.children.forEach(function (a) {
            a.authority.forEach(function (i) {
              if (i.checked) {
                checkedArr.value.push(i.id)
              }
            })
          })
        } else {
          item.authority.forEach(function (i) {
            if (i.checked) {
              checkedArr.value.push(i.id)
            }
          })
        }
      })
      console.log('checkedArr.value')
      console.log(checkedArr.value)
    }

    onMounted(() => {
      console.log('子组件中的menuData2')
      console.log(props.menuData2)
      getCheckedArr()
    })

    //监听变化
    watch(
      () => props.radio1,
      (newVal) => {
        newVal
        // checkedArr.value=[]
      }
    )

    return {
      cellStyle,
      saveMenu,
      saveArr,
      getCheckedArr,
      getTreeData,
      checkedArr,
      handleCheckedChange,
    }
  },
})
</script>


<style  lang="scss" >
.roleInfoPage .el-table .cell {
  text-align: left !important;
}

.el-table [class*='el-table__row--level'] .el-table__expand-icon {
  display: none !important;
}
.el-table__indent {
  padding-left: 10px !important;
}
</style>