<!--
 * @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-checkbox v-if="showOpen" v-model:checked="checkedOpen" @change="setCheckedOpen(checkedOpen)">展开/折叠
        </a-checkbox>
        <a-checkbox v-if="showAll" v-model:checked="checkedAll" @change="setCheckedAll(checkedAll)">全选/全不选</a-checkbox>
        <a-checkbox v-if="showPar" v-model:checked="checkedParent" @change="changeParent">父子联动
        </a-checkbox>
        <a-tree ref="treeRef" :disabled="disabled" :selectable="selectable" :blockNode="blockNode"
          :checkable="checkable" v-if="treeData.length>0 && loading" :tree-data="treeData"
          v-model:selectedKeys="selectedList" v-model:checkedKeys="checkedKeys" :checkStrictly="!checkedParent"
          :replace-fields="pData" v-model:expandedKeys="expandedKeys"
          style=" border: 1px solid #ccc;border-radius: 3px;">
          <template #title="item">
            <a-button size="small" class="m-r-20 m-l-10" v-if="item.menuType"
              :type="item.menuType==='F'?'danger':'primary'" ghost>
              {{item.menuType==='F'?'按钮':'菜单'}}</a-button>
            <span class="menuName">{{item.label}}</span>
          </template>
        </a-tree>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script>
import { getCurrentInstance, inject, nextTick, onMounted, reactive, toRefs, watch } from 'vue'
import { util } from '../../../entery'
export default {
  props: {
    treeData: {
      type: Array,
      default: []
    },
    selectedKeys: {
      type: Array
    },
    disabled: {
      type: Boolean,
      default: false
    },
    selectable: {
      type: Boolean,
      default: false
    },
    blockNode: {
      type: Boolean,
      default: true
    },
    checkable: {
      type: Boolean,
      default: true
    },
    pData: {
      type: Object
    },
    showOpen: {
      type: Boolean,
      default: true
    },
    showAll: {
      type: Boolean,
      default: true
    },
    showPar: {
      type: Boolean,
      default: true
    }
  },
  setup (props, context) {
    let { proxy } = getCurrentInstance()
    let http = inject('http')
    let _data = reactive({
      checkedKeys: {
        checked: []
      },
      selectedList: [],
      expandedKeys: [],
      treeAllKeys: [],
      treeRef: null,
      //展开、折叠
      checkedOpen: false,
      //全选、全不选
      checkedAll: false,
      //父子联动
      checkedParent: false,
      loading: true,
    })
    let _methods = {
      changeParent () {
        nextTick(() => {
          _data.checkedKeys = _data.treeRef.tree._checkedKeys
        })
      },
      setCheckedOpen (item) {
        _data.expandedKeys = item == true ? _data.treeAllKeys : []
      },
      setCheckedAll (item) {
        _data.checkedKeys = item == true ? _data.treeAllKeys : []
      },
    }
    onMounted(() => {

    })
    watch(() => props.treeData, () => {
      http.getTreeAllKeys(props.treeData).then(res => {
        _data.treeAllKeys = util.util.cloneObj(res)
      })
      nextTick(() => {
        _data.checkedKeys = props.selectedKeys
        _data.selectedList = props.selectedKeys
        _data.expandedKeys = props.selectedKeys
      })
    })
    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 {
      border: 1px solid #ccc;
      border-radius: 3px;
    }
    .ant-tree-node-content-wrapper {
      height: auto;
      .ant-tree-title {
        display: inline-block;
      }
    }
    .menuType {
      height: 35px;
      line-height: 35px;
    }
  }
}
</style>