<template>
  <div class="app-container page-nesting" style="position: relative">
    <!-- 左侧start -->
    <div class="grid-content treeDom roleLeft">
      <div style="" class="mb-20 addBox">
        <b>角色类型</b>
        <el-button type="success" @click="addRole()">新增</el-button>
        <el-button type="primary" @click="editRole()">修改</el-button>
      </div>
      <el-radio-group v-model="radio1">
        <el-radio-button
          @change="listTabsChange(radio1)"
          v-for="(item, index) in roleData"
          :label="item.roleId"
          :key="index"
        >
          <img src="@/assets/images/userIcon.svg" />
          {{ item.roleName }}
          <i class="el-icon-delete" @click="deleteRoleItem(item)"></i>
        </el-radio-button>
      </el-radio-group>
    </div>
    <!-- 左侧end -->

    <!-- 右侧表格start -->
    <div class="grid-content nestingDom" style="width: calc(100% - 300px)">
      <role-info-com
        class="basicInfo"
        style="height: calc(100vh - 130px)"
        :menuData="menuData"
      ></role-info-com>
    </div>
    <!-- 右侧表格end -->

    <!-- 新建角色start -->
    <add-role-com
      :dialog-title="dialogTitle"
      :itemInfo="tableItem"
      @closeDialog="closeDialog"
      :flag="showDialog"
    ></add-role-com>
    <!-- 新建角色end -->
  </div>
</template>

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

import roleInfoCom from './roleInfoCom'
import addRoleCom from './addRoleCom'

export default defineComponent({
  components: { roleInfoCom, addRoleCom },
  setup() {
    const radio1 = ref('1')
    const showDialog = ref(false)
    const roleData = ref([])
    const menuData = ref([])
    const newMenuData = ref([])
    const checkedKeys = ref([])

    const dialogTitle = ref('')

    // 删除左侧角色列表
    function deleteRoleItem(item) {
      // item
      // console.log(radio1.value)
      // console.log(item.roleId)
      // this.roleData.splice(params, 1)

      api.roleDelete({}, item.roleId).then((requset) => {
        if (requset.status === 'SUCCESS') {
          ElMessage.success({
            message: '删除成功',
            type: 'success',
          })
          roleList()
        } else {
          ElMessage.error(requset.msg)
        }
      })
    }

    // 新增角色
    const tableItem = reactive([])

    function addRole() {
      // alert('新增')
      tableItem.value = {
        roleName: '',
        roleKey: '',
        status: '',
        roleSort: 1,
      }
      dialogTitle.value = '角色新增'
      showDialog.value = true
    }

    // 修改角色
    function editRole() {
      // alert('修改')
      // console.log(radio1.value)
      api.roleDetail({}, radio1.value).then((requset) => {
        if (requset.status === 'SUCCESS') {
          console.log(requset.data)

          tableItem.value = {
            roleName: requset.data.roleName,
            roleKey: requset.data.roleKey,
            status: requset.data.status,
            roleSort: Number(requset.data.roleSort),
            roleId: requset.data.roleId,
          }
          console.log(tableItem.value)

          dialogTitle.value = '角色修改'
          showDialog.value = true
        } else {
          ElMessage.error(requset.msg)
        }
      })
    }

    const listTabsChange = (value) => {
      // console.log(value)
      radio1.value = value
      roleMenuTreeselect()

      // console.log(radio1.value)
    }
    function roleMenuTreeselect() {
      api.roleMenuTreeselect({}, radio1.value).then((requset) => {
        if (requset.code == 200) {
          menuData.value = requset.data.menus
          checkedKeys.value = requset.data.checkedKeys
          if (!checkedKeys.value.length) {
            menuData.value.map((item) => {
               item.authority2 = '0'
            })
             console.log(checkedKeys.value)
            console.log(menuData.value)
          } else {
            // alert('有值')
            menuData.value.map(function (item) {
              checkedKeys.value.map(function (num) {
                if (JSON.stringify(item).indexOf(num) != -1) {
                  // alert('被选中')
                  item.authority2 = '1'
                }
              })
            })
            console.log(checkedKeys.value)
            console.log(menuData.value)
          
           
          }
        } else {
          ElMessage.error(requset.msg)
        }
      })
    }

    // 关闭弹框操作
    const closeDialog = () => {
      showDialog.value = false
      roleList()
    }

    //角色列表
    function roleList() {
      api.roleList().then((requset) => {
        if (requset.code === 200) {
          roleData.value = requset.rows
        } else {
          ElMessage.error(requset.msg)
        }
      })
    }
    onMounted(() => {
      roleList()
      roleMenuTreeselect()
    })

    return {
      radio1,
      showDialog,
      roleData,
      dialogTitle,
      tableItem,
      menuData,
      newMenuData,
      checkedKeys,
      listTabsChange,
      roleMenuTreeselect,
      deleteRoleItem,
      addRole,
      editRole,
      closeDialog,
    }
  },
})
</script>

<style scoped lang="scss">
.el-button + .el-button {
  margin-left: 0;
}
.app-container.page-nesting {
  padding: 0;
  background: rgba(0, 0, 0, 0);
}
.grid-content {
  background: #fff;
  height: calc(100vh - 130px);
  overflow-y: auto;
}
.el-input__inner {
  border-radius: 20px !important;
}
.treeDom {
  width: 270px;
  position: absolute;
  left: 0;
  // margin-left: 20px;
  padding: 20px;
  min-height: calc(100vh - 130px);
}
.nestingDom {
  margin-left: 300px;
}
</style>