<template>
  <a-drawer
    :title="title"
    :mask-closable="true"
    width="500"
    placement="right"
    :closable="true"
    :visible="visible"
    style="overflow: auto;padding-bottom: 53px;"
    @close="close"
  >

    <a-form>
      <a-form-item label="所拥有的权限">
        <a-tree
          checkable
          :checked-keys="checkedKeys"
          :tree-data="treeData"
          :check-strictly="checkStrictly"
          :expanded-keys="iExpandedKeys"
          :auto-expand-parent="autoExpandParent"
          :replace-fields="{children:'children', title:'label', key:'id', value: 'id' }"
          @check="onCheck"
          @expand="onExpand"
        >
        </a-tree>
      </a-form-item>
    </a-form>

    <div class="drawer-bootom-button">
      <a-dropdown style="float: left" :trigger="['click']" placement="topCenter">
        <a-menu slot="overlay">
          <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
          <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
        </a-menu>
        <a-button>
          树操作
          <a-icon type="up" />
        </a-button>
      </a-dropdown>
      <a-popconfirm title="确定放弃编辑？" ok-text="确定" cancel-text="取消" @confirm="close">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button type="primary" :loading="loading" ghost style="margin-right: 0.8rem" @click="handleSubmit(false)">仅保存
      </a-button>
      <a-button type="primary" :loading="loading" @click="handleSubmit(true)">保存并关闭</a-button>
    </div>

  </a-drawer>

</template>
<script>
import { getAction } from '@/api/request'

export default {
  name: 'RoleModal',
  components: {},
  props: ['treeCheckList', 'treeList'],
  data() {
    return {
      title: '',
      treeData: [],
      iExpandedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],
      allTreeKeys: [],
      checkStrictly: true,
      visible: false,
      loading: false,
      roleData: {}
    }
  },
  watch: {
    visible() {
      if (this.visible) {
        this.loadData()
      }
    }
  },
  methods: {
    onCheck(o) {
      if (this.checkStrictly) {
        this.checkedKeys = o.checked
      } else {
        this.checkedKeys = o
      }
    },
    show(data) {
      this.visible = true
      this.roleData = data
    },
    close() {
      this.reset()
      this.$emit('close')
      this.visible = false
    },
    reset() {
      this.checkedKeys = []
      this.loading = false
    },
    expandAll() {
      this.iExpandedKeys = this.allTreeKeys
    },
    closeAll() {
      this.iExpandedKeys = []
    },
    onExpand(expandedKeys) {
      console.log('onExpand', expandedKeys)
      this.iExpandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    handleCancel() {
      this.close()
    },
    handleSubmit(exit) {
      this.$emit('ok', this.checkedKeys, this.roleData)
      if (exit) {
        this.visible = false
      }
    },
    setThisExpandedKeys(node) {
      if (node.children && node.children.length > 0) {
        this.iExpandedKeys.push(node.id)
        for (let a = 0; a < node.children.length; a++) {
          this.setThisExpandedKeys(node.children[a])
        }
      }
    },
    getAllKeys(node) {
      this.allTreeKeys.push(node.id)
      if (node.children && node.children.length > 0) {
        for (let a = 0; a < node.children.length; a++) {
          this.getAllKeys(node.children[a])
        }
      }
    },
    loadData() {
      this.treeData = []
      getAction(this.treeList).then((res) => {
        this.allTreeKeys = []
        for (let i = 0; i < res.data.length; i++) {
          const temp = res.data[i]
          this.treeData.push(temp)
          this.setThisExpandedKeys(temp)
          this.getAllKeys(temp)
        }
        getAction(this.treeCheckList).then((res) => {
          this.checkedKeys = res.checkedKeys
        })
      })
    }
  }
}

</script>
<style lang="less" scoped>
  .drawer-bootom-button {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }

</style>
