<!--
 * @Author: 曹捷
 * @Date: 2021-03-25 11:16:46
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-04-28 15:57:52
 * @Description: fileContent
-->
<template>
  <a-layout class="full body">
    <a-layout-content class="pd">
      <div class="role-tree">
        <a-tree :selectable="false" blockNode checkable v-if="treeData.length>0" :tree-data="treeData" checkStrictly
          v-model:selectedKeys="defaultChecks" v-model:checkedKeys="checkedKeys"
          :replace-fields="{children:'childs', title:'menuName', key:'menuId' }" :defaultExpandAll="true">
          <template #title="item">
            <a-button size="small" class="m-r-20 m-l-10" :type="item.permissionType===1?'primary':'danger'" ghost>
              {{item.permissionType ===1?'菜单':'按钮'}}</a-button>
            <span class="menuName">{{item.menuName}}</span>
            <span class="menuCode m-l-20 color-tip">
              {{item.menuCode}}
            </span>
          </template>
        </a-tree>
      </div>
    </a-layout-content>
    <!-- <a-layout-footer v-if="checkRole">
      <obit-button type="org" @click="submitRole" animation="line-left-bottom">保 存</obit-button>
    </a-layout-footer> -->
  </a-layout>
</template>

<script>
import { getCurrentInstance, inject, onMounted, reactive, toRefs, watch } from 'vue'
export default {
  props: {
    checkRole: {
      type: [String, Number]
    }
  },
  setup (props, context) {
    let { proxy } = getCurrentInstance()
    let http = inject('http')
    let _data = reactive({
      // 权限树展示相关
      treeData: [],
      defaultChecks: [], // 树 默认选择
      checkedKeys: {
        checked: []
      },
    })
    let _methods = {
      submitRole () {
        let permissions = _data.checkedKeys.checked
        _data.loading = true
        http.saveAppRolePermission({
          roleId: props.checkRole,
          permissions
        }).then(res => {
          proxy.$message.success('权限保存成功')
          _data.loading = false
          context.emit('save')
        })
      },
      sysnRolePermission () {
        _data.defaultChecks = []
        _data.checkedKeys.checked = []
        if (!props.checkRole) return
        http.getAppRolePermission(props.checkRole).then(res => {
          _data.checkedKeys.checked = res
          _data.defaultChecks = res
        })
      }
    }
    onMounted(() => {
      http.getSystemMenuTree().then(res => {
        _data.treeData = res
        _methods.sysnRolePermission()
      })
    })
    // watch(() => props.checkRole, () => {
    //   _methods.sysnRolePermission()
    // })
    return {
      ...toRefs(_data),
      ..._methods
    }
  }
}
</script>

<style lang="less">
.bindrole {
  .ant-layout-footer {
    text-align: right;
    padding: 10px 20px;
    background: #fff;
    box-shadow: 0 2px 22px 0 rgba(0, 0, 0, 0.12), 0 0 7px 0 rgba(0, 0, 0, 0.04);
  }
  .role-tree {
    margin-top: 20px;
    .ant-tree-node-content-wrapper {
      height: auto;
      .ant-tree-title {
        display: inline-block;
      }
    }
    .menuType {
      height: 35px;
      line-height: 35px;
    }
  }
}
</style>