<template>
  <page-layer>
    <template #header>
      <el-input style="width: 200px" v-model="searchRoleContent" placeholder="请输入角色名称"></el-input>
      <el-divider direction="vertical"></el-divider>
      <el-button type="primary" icon="Upload" @click="beforeSaveMenus">保存更改</el-button>
    </template>
    <template #main>
      <el-row :gutter="5">
        <el-col :span="16">
          <el-table :data="cptRoles" :height="tableHeight" stripe highlight-current-row @row-click="handleClickRole">
            <el-table-column prop="id" label="角色编号"></el-table-column>
            <el-table-column prop="name" label="角色名称"></el-table-column>
            <el-table-column prop="createDatetime" label="创建时间"></el-table-column>
            <el-table-column prop="createStaff" label="创建人"></el-table-column>
          </el-table>
        </el-col>
        <el-col :span="5">
          <el-tree
              ref="tree"
              :data="menus"
              :props="defaultProps"
              :style="{ height: tableHeight + 'px', overflowY: 'scroll' }"
              show-checkbox
              node-key="id"
              default-expand-all
          ></el-tree>
        </el-col>
      </el-row>
    </template>
  </page-layer>
</template>

<script>
import { computed, onMounted, ref } from 'vue'
import store from '@/store'
import { getAllRoles, getAllMenus, getRoleMenus, saveRoleMenus } from '@/api/settings/permission-settings'
import { ElMessage } from 'element-plus'
import PageLayer from "@/layout/PageLayer";
export default {
  components: {PageLayer},
  setup() {
    const windowSize = store.state.app.windowSize
    const tableHeight = windowSize.h - 10

    const searchRoleContent = ref('')
    const roles = ref([])
    const cptRoles = computed(() => {
      return roles.value.filter((item) => {
        return item.name.indexOf(searchRoleContent.value) !== -1
      })
    })
    const currentRole = ref({})
    const handleClickRole = (row) => {
      currentRole.value = row
      getRoleMenus(row.id).then((res) => {
        tree.value.setCheckedKeys(res)
      })
    }

    const tree = ref(null)
    const menus = ref([])
    const defaultProps = {
      id: 'id',
      children: 'children',
      label: 'metaTitle',
    }
    const beforeSaveMenus = () => {
      if (!currentRole.value.id) {
        ElMessage({
          message: '请先选择角色！',
          type: 'warning',
          duration: 2500,
          showClose: true,
        })
      } else {
        const checkedKeys = tree.value.getCheckedKeys()
        const halfCheckKeys = tree.value.getHalfCheckedKeys()
        halfCheckKeys.forEach((item) => checkedKeys.push(item))
        const param = {
          id: currentRole.value.id,
          menus: checkedKeys,
        }
        saveRoleMenus(param).then(() => {
          ElMessage({
            message: '保存成功',
            type: 'success',
            duration: 2500,
            showClose: true,
          })
        })
      }
    }

    onMounted(() => {
      getAllRoles().then((res) => {
        roles.value = res
      })
      getAllMenus().then((res) => {
        menus.value = res
      })
    })

    return {
      tableHeight,
      tree,
      menus,
      searchRoleContent,
      defaultProps,
      roles,
      cptRoles,
      handleClickRole,
      beforeSaveMenus,
    }
  },
}
</script>
