<template>
  <div class="link-picker-article" v-loading="catalogTree.length === 0">
    <el-row :gutter="7">
      <el-col :span="6">
        <div class="filter-searchbar">
          <el-input v-model="filterCatalogName" placeholder="输入栏目名称" prefix-icon="el-icon-search"></el-input>
        </div>
        <div class="catalog-tree-wrap">
          <el-tree :render-content="renderContent" ref="catalogTree" :data="copyContentTree" :default-expand-all="true" :highlight-current="true"
            :node-key="treeOptions.key" :filter-node-method="filterNode" :expand-on-click-node="false" :props="treeOptions"
            check-strictly @node-click="treeNodeClick" :show-checkbox="false" class="catalog-tree">
          </el-tree>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="filter-searchbar">
          <el-input v-model="filterTitle" placeholder="输入标题" prefix-icon="el-icon-search"></el-input>
        </div>
        <div class="article-list-wrap">
          <el-table :data="catalogContentData" @selection-change="selectionChange" @row-click="rowClickHandle" :data-read-url="getData" :page-size="10" ref="contentTable" highlight-current-row>
            <el-table-column :type="selectType === 'selection' ? 'selection':'index'" width="60" align="center"></el-table-column>
            <el-table-column prop="title" show-overflow-tooltip label="内容标题"></el-table-column>
            <el-table-column prop="publishDate" show-overflow-tooltip width="185" label="最后修改时间"></el-table-column>
            <el-table-column prop="statusName" show-overflow-tooltip width="95" label="状态"></el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>

export default {
  props: ['catalogTree'],
  computed: {
    copyContentTree() {
      return _.clone(this.catalogTree)
    }
  },
  data() {
    return {
      moduleName: '选择文章',
      filterCatalogName: '',
      filterTitle: '',
      treeOptions: {
        key: 'ID',
        label: 'name',
        children: 'children'
      },
      tmpNode: {},
      catalogContentData: [],
      selectType: 'selection',
      catalogID: null,
      contentType: null,
      currentContentRow: null,
      currentSelection: null,
      orderType: 'default'
    }
  },
  watch: {
    filterCatalogName(val) {
      this.$refs.catalogTree.filter(val)
    },
    filterTitle(val) {
      this.$refs.contentTable.getData()
    }
  },
  methods: {
    renderContent: function (createElement, {
      node,
      data,
      store
    }) {
      if (parseInt(data.ID) === 0 || parseInt(data.branchInnerCode) === 0 || data.ID === 'site') {
        return createElement('span', [
          createElement('i', {
            attrs: {
              class: 'fa fa-desktop'
            }
          }),
          createElement('span', node.label)
        ])
      } else {
        return createElement('span', [
          createElement('span', {
            props: {
              label: data.ID
            }
          }, ''),
          createElement('i', {
            attrs: {
              class: 'fa fa-folder'
            }
          }),
          createElement('span', node.label)
        ])
      }
    },
    treeNodeClick(node) {
      this.tmpNode = node
      this.catalogID = node.ID
      this.$refs.contentTable.getData()
    },
    getData() {
      return [
        '/ui/contentselector',
        {
          params: {
            catalogID: this.catalogID,
            contentType: this.contentType,
            keywords: this.filterTitle,
            orderType: this.orderType
          }
        }
      ]
    },
    filterNode(value, data) {
      if (!value) return true
      value = value.toLowerCase()
      let name = data[this.treeOptions.label].toLowerCase()
      return (
        name.indexOf(value) !== -1 ||
        window.util.getSpell(name, true).indexOf(value) !== -1
      )
    },
    rowClickHandle(row, e, col) {
      this.currentContentRow = row
    },
    selectionChange(selection) {
      // 控制只能选一条记录
      if (selection.length > 1) {
        this.$refs.contentTable.clearSelection()
        this.$refs.contentTable.toggleRowSelection(this.currentContentRow, true)
      } else if (selection.length === 1) {
        this.currentSelection = selection[0]
      } else {
        this.currentSelection = null
      }
    },
    getValue() {
      var linkObj = null
      if (this.currentSelection !== null) {
        linkObj = {
          CLink: this.currentSelection.link,
          CName: this.currentSelection.contentTypeID + ':' + this.currentSelection.title
        }
        this.$refs.contentTable.clearSelection()
      }
      return linkObj
    }
  }
}

</script>
<style>
  .link-picker-article .filter-searchbar {
    background-color: #f5f5f5;
    color: #444;
    padding: 7px 10px;
  }

  .link-picker-article .catalog-tree-wrap {
    height: 360px;
    overflow-y: auto;
  }

  .link-picker-article .catalog-tree-wrap .el-radio-group {
    font-size: 13px;
  }
  .link-picker-article .el-table__header .el-table-column--selection{text-indent:100px;}

</style>
