<template>
  <div class="layout-no-cols right-list-toolbar assess-catalog">
      <div class="tool-box">
          <el-toolbar align="right">
            维度视图：<el-select placeholder="请选择维度" v-model="dimensionID" @change="changeClickHandler">
              <el-option v-for="dimension in dimensions" :key="dimension.ID" :label="dimension.name" :value="dimension.ID">
              </el-option>
            </el-select>&nbsp;&nbsp;
            <el-input v-model="searchParams.name" placeholder="请输入栏目名称" size="medium" @keyup.enter.native="loadCatalogTreeData" class="search-bar-algin-toolbar">
              <el-select  v-model="searchParams.contentType" placeholder="内容类型" clearable slot="prepend" @change="loadCatalogTreeData">
                <el-option v-for="item in contentTypes" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-input>
            <span class="search-icon" @click="loadCatalogTreeData"><i class="fa fa-search" title="查询"></i></span>
          </el-toolbar>
      </div>
      <div v-loading="treeDataLoading">
        <tree-table :data="catalogTreeData" :expanded-level="2" row-key="ID" class="catalog-tree-table">
          <tree-table-column label="栏目名称">
            <template slot-scope="scope">
              <a class="list-card-title" href="javascript:void(0)" @click.stop="onCellClick(scope.row)">
                <i :class="scope.row.icon" aria-hidden="true"></i> {{scope.row.name}}
              </a>
            </template>
          </tree-table-column>
          <el-table-column prop="alias" label="栏目别名" show-overflow-tooltip width="200"></el-table-column>
          <el-table-column prop="typeName" label="栏目类型" width="130"></el-table-column>
          <el-table-column prop="path" label="路径" width="230" show-overflow-tooltip></el-table-column>
          <el-table-column prop="contentTypeName" label="内容类型" width="130"></el-table-column>
        </tree-table>
      </div>
  </div>
</template>

<script>
import util from '@src/common/util.js'
import TreeTable from '@src/components/treeTable/TreeTable.vue'
import TreeTableColumn from '@src/components/treeTable/TreeTableColumn.vue'
export default {
  data() {
    return {
      searchParams: {
        name: '',
        contentType: ''
      },
      contentTypes: [],
      catalogTreeData: [], // 栏目树数据
      catalogProps: {
        children: 'children',
        label: 'name',
        key: 'innerCode'
      }, // 栏目树属性配置
      treeDataLoading: false, // 左侧栏目树数据加载状态
      dimensions: [{ID: 1, code: 'default', name: '默认分类'}],
      dimensionID: 1
    }
  },
  methods: {
    async getDimensions() {
      let res = await axios.get('/ui/dimensions')
      this.dimensions = res.data.data
      let lsTmp = localStorage['user_' + localStorage.userName + '_sid_' + this.$root.siteID + '_ewdid']
      if (lsTmp && lsTmp !== '-1') {
        this.dimensionID = parseInt(lsTmp)
      } else {
        this.dimensionID = this.dimensions[0].ID
      }
      await this.loadCatalogTreeData()
    },
    async changeClickHandler(value) {
      this.dimensionID = value
      await this.loadCatalogTreeData()
    },
    // 加载内容类型
    async loadContentType() {
      let res = await axios.get('/ui/contentcore/contenttypes')
      this.contentTypes = res.data.data
    },
    onCellClick(row) {
      if (!row.ID || row.ID === 'site') {
        return
      }
      let path = `${this.$route.path}/${row.ID}`.replace(/\/\//g, '/')
      this.$router.push({path: path})
    },
    // 加载左侧栏目树数据
    async loadCatalogTreeData() {
      this.treeDataLoading = true
      let params = {
        siteID: '',
        parentID: '',
        level: '',
        contentType: '',
        type: '',
        name: '',
        dimensionID: this.dimensionID
      }

      Object.assign(params, this.searchParams, { name: encodeURIComponent(this.searchParams.name) })
      try {
        let res = await axios.get(`/ui/contentassess/catalogtree`, { params: params })
        let data = res.data
        if (data.status === 1) {
          let listData = data.data
          this.catalogTreeData = util.toCatalogTreeJson(listData)
        }
      } catch (e) {
      }
      this.treeDataLoading = false
    }
  },
  components: {
    'tree-table': TreeTable,
    'tree-table-column': TreeTableColumn
  },
  created() {
    this.getDimensions()
    this.loadCatalogTreeData()
    this.loadContentType()
  }
}
</script>
<style>
.assess-catalog .search-icon {
  top: 0px;
  right: 0px;
}
.assess-catalog .el-input-group {
  width: auto;
}
</style>
<style scoped>
.catalog-tree-table .list-card-title {
  font-size: 14px;
}
</style>
