<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"
          :selected-keys="selectedKeys"
          :expanded-keys="expandedKeysss"
          :check-strictly="checkStrictly"
          @check="onCheck"
          @expand="onExpand"
          @select="onTreeNodeSelect"
        >
          <span slot="hasDatarule" slot-scope="{slotTitle,ruleFlag}">
            {{ slotTitle }}<a-icon v-if="ruleFlag" type="align-left" style="margin-left:5px;color: red;" />
          </span>
        </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: {
  },
  data() {
    return {
      jobId: '',
      title: '',
      treeList: '',
      treeKey: '',
      treeData: [],
      defaultCheckedKeys: [],
      checkedKeys: [],
      expandedKeysss: [],
      allTreeKeys: [],
      autoExpandParent: true,
      checkStrictly: true,
      visible: false,
      loading: false,
      selectedKeys: []
    }
  },
  watch: {
    visible() {
      if (this.visible) {
        this.loadData()
      }
    }
  },
  methods: {
    onTreeNodeSelect(id) {
      if (id && id.length > 0) {
        this.selectedKeys = id
      }
      this.$refs.datarule.show(this.selectedKeys[0], this.jobId)
    },
    onCheck(o) {
      if (this.checkStrictly) {
        this.checkedKeys = o.checked
      } else {
        this.checkedKeys = o
      }
    },
    show(jobId) {
      this.jobId = jobId
      this.visible = true
    },
    close() {
      this.reset()
      this.$emit('close')
      this.visible = false
    },
    onExpand(expandedKeys) {
      this.expandedKeysss = expandedKeys
      this.autoExpandParent = false
    },
    reset() {
      this.expandedKeysss = []
      this.checkedKeys = []
      this.defaultCheckedKeys = []
      this.loading = false
    },
    expandAll() {
      this.expandedKeysss = this.allTreeKeys
    },
    closeAll() {
      this.expandedKeysss = []
    },
    checkALL() {
      this.checkedKeys = this.allTreeKeys
    },
    cancelCheckALL() {
      // this.checkedKeys = this.defaultCheckedKeys
      this.checkedKeys = []
    },
    switchCheckStrictly(v) {
      if (v == 1) {
        this.checkStrictly = false
      } else if (v == 2) {
        this.checkStrictly = true
      }
    },
    handleCancel() {
      this.close()
    },
    handleSubmit(exit) {
      const that = this
      const params = {
        jobId: that.jobId,
        permissionIds: that.checkedKeys.join(','),
        lastpermissionIds: that.defaultCheckedKeys.join(',')
      }
      console.log(params)
    },
    loadData() {
      getAction(this.treeList).then((res) => {
        this.treeData = res.result.treeList
        this.allTreeKeys = res.result.ids
        getAction({ jobId: this.jobId }).then((res) => {
          this.checkedKeys = [...res.result]
          this.defaultCheckedKeys = [...res.result]
          this.expandedKeysss = this.allTreeKeys
          console.log(this.defaultCheckedKeys)
        })
      })
    }
  }
}

</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>
