<template>
  <div class="content">
    <el-card shadow="never" id="organization">
      <div class="project-name">
        <!-- <p>{{ $route.matched[1].meta.title }}</p> -->
      </div>
      <div class="item-left">
        <el-tree
          class="elTree"
          :props="props"
          :data="treeData"
          :load="loadNode"
          style="height:calc(100% - 28px);overflow: auto;"
          lazy
          node-key="id"
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
          :filter-node-method="filterNode"
          @node-drag-end="handleDragEnd"
          ref="tree">
          <span class="custom-tree-node" slot-scope="{ node, data}">
            <!-- <i v-if="data.type === 'root'" class="iconfont icon-banben"></i>
            <i v-if="data.type === 'category'" class="iconfont" :class="[data.ico?data.ico:'icon-liebiao1']"></i>
            <i v-if="data.type === 'item'" class="iconfont" :class="data.ico"></i> -->
            <span>{{ node.label }}</span>
            <span>
              <el-button
                @click="userHandle('添加',data)"
                v-if="data.type !== 'item'"
                icon="el-icon-circle-plus"
                title="添加导航"
                type="text"></el-button>
              <el-button @click="del(data)" v-if="node.level > 1" icon="el-icon-delete" title="删除导航" type="text">
              </el-button>
            </span>
          </span>
        </el-tree>
      </div>
      <div class="item-right">
        <el-card shadow="never">
          <div class="tool-common-wrap">
            <div class="btn-wrap">
              <!-- <el-button type="primary" @click="content = {};getDepartment()">
                刷新
              </el-button> -->
              <reload />
            </div>
          </div>
          <el-table :data="[content]" class="margin-t10" v-if="content.pid" stripe>
            <el-table-column label="名称" show-overflow-tooltip prop="name" />
            <el-table-column label="链接" show-overflow-tooltip prop="url" />
            <el-table-column label="操作" width="80">
              <template>
                <el-tooltip class="item" content="编辑">
                  <el-button type="text" icon="el-icon-edit" @click="userHandle('编辑')"></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <manage-dialog v-model="dialogVisible" :title="linkTitle" :item="itemData" @confirm="saveSuccess" />
        </el-card>
      </div>
    </el-card>
  </div>
</template>
<script>
import manageDialog from './manageDialog'
import { deleteFull, getAllGroups2, getNavigations, changepid } from '@/api/system_manage'

export default {
  name: 'NavConfig',
  components: {
    manageDialog
  },
  data() {
    return {
      loading: false,
      isPowerSearch: false,
      dialogVisible: false,
      linkTitle: '',
      itemData: {},
      parentId: '',
      searchForm: {},
      checkId: '',
      content: {},
      props: {
        label: 'name',
        isLeaf: 'isParent'
      },
      treeData: [],
      editType: ''
    }
  },
  computed: {
    userInfo() {
      return this.$store.state.basuser.user
    },
    key() {
      return this.$route.fullPath
    }
  },
  created() {},
  mounted() {
    this.getDepartment()
  },
  methods: {
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      let pid = ''
      if (dropNode.data.pid) {
        if (dropType === 'before') {
          pid = dropNode.data.pid
        } else if (dropType === 'inner') {
          pid = dropNode.data.id
        } else {
          return
        }
        changepid(draggingNode.data.id, pid).then(rt => {
          if (rt.status === '200') {
            this.$message.success('添加成功')
          }
        })
      }
    },
    del(data) {
      let msg = ''
      if (data.type === 'category') {
        msg = '是否确认删除导航以及该导航的子项'
      } else {
        msg = '是否确认删除导航'
      }
      this.$confirm(msg, '提示', {
        type: 'warning'
      })
        .then(() => {
          deleteFull(data.id).then(rt => {
            if (rt.status === '200') {
              this.content = {}
              const node = this.$refs.tree.getNode(data.pid) // 通过节点id找到对应树节点对象
              node.loaded = false
              node.expand()
              this.$message({
                message: '删除成功',
                type: 'success'
              })
            } else {
              this.$message({
                message: '删除失败',
                type: 'error'
              })
            }
          })
        })
        .catch(_ => {
        })
    },
    getDepartment() {
      getAllGroups2()
        .then(rt => {
          this.treeData = rt.data
        })
        .catch(er => {
          // console.log(er)
        })
    },
    loadNode(node, resolve) {
      if (node.level > 0) {
        getNavigations(node.data.id)
          .then(rt => {
            rt.data.forEach(item => {
              if (item.type === 'item') {
                item.isParent = true
              }
            })
            resolve(rt.data)
          })
          .catch(er => {
            // console.log(er)
          })
      }
    },
    handleNodeClick(data) {
      this.checkId = data.id
      this.parentId = data.pid
      this.content = data
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    userHandle(item, data) {
      this.linkTitle = item
      this.editType = item
      if (item === '添加') {
        this.parentId = data.id
        this.itemData = {
          pid: data.id,
          showtype: 'default',
          type: 'category'
        }
      } else if (item === '编辑') {
        this.itemData = Object.assign({}, this.content)
      }
      this.dialogVisible = true
    },
    saveSuccess(val) {
      // this.getDepartment();
      const node = this.$refs.tree.getNode(this.itemData.pid) // 通过节点id找到对应树节点对象
      node.loaded = false
      node.expand()
      this.content = {}
    }
  }
}
</script>
<style lang="scss">
  #organization {
    .item-left {
      .el-input__inner {
        border: none;
        border-bottom: 1px solid $dc1;
      }
    }
  }
</style>

<style lang="scss" scoped>
  .content{
    padding: 10px 10px;
  }
  .item-left {
    float: left;
    width: 20%;
  }

  .item-right {
    float: right;
    width: 78%;

    .table-header {
      position: relative;
      background: $bc2;
      display: flex;
      align-items: center;

      .all-check {
        position: absolute;
        left: 20px;
      }
    }

    .table-header {
      position: relative;
      background: $bc2;
      display: flex;
      align-items: center;

      .all-check {
        position: absolute;
        left: 20px;
      }
    }

    .w100 {
      width: 100%;
    }
  }
</style>
