<template>
  <div class="layout-row-inpage">
    <!--左边页面选择  -->
    <div class="layout-col-tree grid-content-left">
      <div class="search-bar-toolbar">
        <el-col class="tree-search-box">
          <el-input v-model="search.keywords" placeholder="请输入关键字" @keyup.enter.native="searchTagClickHandler" class="search-input-with-select"></el-input>
          <span class="search-icon"><i class="fa fa-search" slot="append" @click="searchTagClickHandler" title="查询"></i></span>
        </el-col>
      </div>
      <div class="padding-top-bottom mini">
        <el-tree :data="menuTreeData" :render-content="renderContent" :props="defaultProps" default-expand-all node-key="ID" :highlight-current="true" :expand-on-click-node="false" @current-change="handleNodeClick"> </el-tree>
      </div>
    </div>

    <!--右边内容显示  -->
    <div class="layout-col-detail grid-content-right">
      <page-editor :ID="catalogID"></page-editor>
    </div>
  </div>
</template>

<script>
// 数据引入
import pageEditor from './pageEditor.vue'
export default {
  data() {
    return {
      // 左侧
      dataLoading: false,
      menuTreeData: [], // 左边栏目选项数据
      defaultProps: { children: 'children', label: 'name' }, // 左边栏目打开项
      search: { keywords: '' }, // 搜索关键字
      clientHeight: document.documentElement.clientHeight - 130,
      catalogID: 0 // 栏目ID
    }
  },
  methods: {
    // 左边栏目添加icon
    renderContent(createElement, { node, data, store }) {
      let color = ''
      if (node.data.status === 1) {
        color = 'red'
      }
      if (node.data.visibleFlag === 'N') {
        color = '#ACA899'
      }
      let icon = 'fa fa-folder'
      if (parseInt(node.data.ID) === 0) {
        icon = 'fa fa-desktop'
      }
      return createElement('span', [
        createElement('i', { attrs: { class: icon } }),
        createElement('span', { style: { color: color } }, node.label)
      ])
    },

    // 搜索
    searchTagClickHandler() {
      this.loadMenuTree()
    },
    // 点击节点功能
    handleNodeClick(data) {
      this.catalogID = data.ID
    },
    // 加载菜单树
    async loadMenuTree() {
      this.dataLoading = true
      let res = await axios.get(`/ui/workspace/pages`, {params: {searchKeyWord: this.search.keywords}})
      this.dataLoading = false
      this.menuTreeData = res.data.data
    }
  },
  created() {
    this.loadMenuTree()
  },
  components: {
    'page-editor': pageEditor
  }
}
</script>

<style scoped>
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node-content {
  background-color: #d7dade;
}
</style>
