<template>
  <a-card :bordered="false">

    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item
              label="客户端"
            >
              <a-select v-model="clientId" @change="changeClientId">
                <a-select-option
                  v-for="item in clientIds"
                  :key="item.clientId"
                  :label="item.name"
                  :value="item.clientId">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <a-row :gutter="8">
      <a-col :span="5">
        <div class="menu-button-group">
          <a-button type="primary" @click="handleAdd">添加</a-button>
          <a-popconfirm title="是否要删除所选菜单？" @confirm="handleDelete(false)" v-show="deleteButtonShow">
            <a-button type="primary" style="margin-left: 15px">删除</a-button>
          </a-popconfirm>
          <a-popconfirm title="是否要复制所选菜单？" @confirm="handleCopy(1)" v-show="copyButtonShow">
            <a-button type="primary" style="margin-left: 15px">复制</a-button>
          </a-popconfirm>
          <a-popconfirm title="是否要复制所选菜单？" @confirm="handleCopy(2)" v-show="copyButtonShow">
            <a-button type="primary" style="margin-left: 15px">全部复制</a-button>
          </a-popconfirm>
          <a-popconfirm title="是否要删除该菜单下所选菜单？" @confirm="handleDelete(true)" v-show="copyButtonShow">
            <a-button type="primary" style="margin-left: 15px">批量删除</a-button>
          </a-popconfirm>
        </div>
        <a-tree
          @expand="onExpand"
          :expandedKeys="expandedKeys"
          :autoExpandParent="autoExpandParent"
          draggable
          @dragenter="onDragEnter"
          @drop="onDrop"
          @select="onSelect"
          :selectedKeys="selectedKeys"
          @rightClick="rightClick"
          :treeData="treeData"
        />
      </a-col>
      <a-col :span="19">
        <a-card class="card" :title="title" :bordered="false">
          <base-form
            :menu="menu"
            @ok="ok">
          </base-form>
        </a-card>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import BaseForm from './modules/BaseForm'
import { queryClientDetail } from '@/api/upms/oauth-client-detail'
import { getMenuTree, fetchMenu, deleteMenu, dropMenu, copyMenu } from '@/api/upms/menu'

export default {
  name: 'TreeList',
  components: {
    BaseForm
  },
  data () {
    return {
      openKeys: [''],
      title: '添加菜单',
      selectedKeys: [],
      treeData: [],
      expandedKeys: [],
      autoExpandParent: true,
      deleteButtonShow: false,
      copyButtonShow: false,
      copyNode: [],
      clientIds: [],
      clientId: 'end',
      menu: {
        visible: true,
        hiddenHeaderContent: false,
        type: 1
      }
    }
  },
  created () {
    // 查询客户端
    this.getClientIds()
    this.getMenuTrees()
  },
  methods: {
    getMenuTrees () {
      const parameter = {
        clientId: this.clientId
      }
      getMenuTree(parameter).then(res => {
        const treeData = res.data
        this.setClass(treeData)
        this.treeData = res.data
      })
    },
    setClass (treeData) {
      treeData.forEach(item => {
        if (this.BaseTool.Object.isNotBlank(item.clazz)) {
          item['class'] = item.clazz
        }
        if (this.BaseTool.Object.isNotBlank(item.children) && item.children.length > 0) {
          this.setClass(item.children)
        }
      })
    },
    onSelect: function (selectedKeys, info) {
      this.copyButtonShow = false
      this.title = '编辑菜单'
      this.selectedKeys = selectedKeys
      if (selectedKeys !== 'root' && selectedKeys.length > 0) {
        fetchMenu({ menuId: selectedKeys }).then(res => {
          this.menu = res.data
        })
        this.deleteButtonShow = true
      } else {
        this.menu = {
          visible: true,
          hiddenHeaderContent: false,
          type: 1,
          clientId: this.clientId
        }
      }
    },
    onExpand (expandedKeys) {
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    handleAdd () {
      this.title = '添加菜单'
      if (this.selectedKeys.length > 0 && this.selectedKeys[0] !== 'root') {
        fetchMenu({ menuId: this.selectedKeys[0] }).then(res => {
          this.menu = {
            visible: true,
            hiddenHeaderContent: false,
            type: 1,
            parentId: res.data.menuId,
            parentName: res.data.title,
            clientId: res.data.clientId
          }
        })
      } else {
        this.menu = {
          visible: true,
          hiddenHeaderContent: false,
          type: 1,
          clientId: this.clientId
        }
      }
    },
    getClientIds () {
      queryClientDetail().then(res => {
        this.clientIds = res.data
      })
    },
    changeClientId (val) {
      this.getMenuTrees()
    },
    handleDelete (flag) {
      deleteMenu({ menuId: this.selectedKeys[0], deleteAll: flag }).then(res => {
        this.$message.info(`提示：删除成功 `)
        this.refresh()
      })
    },
    refresh () {
      this.getMenuTrees()
      this.menu = {
        visible: true,
        hiddenHeaderContent: false,
        type: 1,
        clientId: this.clientId
      }
    },
    onDragEnter (info) {
      console.log(111, info)
      // expandedKeys 需要受控时设置
      // this.expandedKeys = info.expandedKeys
    },
    onDrop (info) {
      // 拖拽确认
      dropMenu(info.dragNode.eventKey, {
        menuId: info.node.eventKey,
        sort: info.dropPosition,
        dropToGap: info.dropToGap
      }).then(res => {
        this.$message.info('操作成功')
        this.refresh()
      }).catch(res => {})
    },
    rightClick (info) {
      console.log(info.node)
      this.copyNode = info.node
      this.copyButtonShow = true
    },
    handleCopy (type) {
      if (this.copyNode) {
        copyMenu({ menuId: this.copyNode.eventKey, type: type }).then(res => {
          this.$message.info('操作成功')
          this.refresh()
        }).catch(res => {})
      }
    },
    ok () {
      this.refresh()
    }
  }
}
</script>

<style>
  .tree-title-close-dept-future .ant-tree-title {
    color: #c5baba;
  }
</style>
