<template>
  <div class="layout-no-cols right-list-toolbar">
    <el-toolbar align="right">
      <el-col :span="8">
        <el-button @click="setPulibshPlatform" style="padding-left:5px;" ><i class="fa fa-edit"></i>平台设置</el-button>&nbsp;
      </el-col>
      <el-col :span="16" style="text-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-select v-model="platformID" style="width:200px;" @change="platformChange" >
        <el-option v-for="item in platformOptions" :key="item.ID" :value="item.ID" :label="item.name">
          <span><i class="fa fa-desktop"></i>&nbsp;{{item.name}}</span>
        </el-option>
      </el-select>
      </el-col>
    </el-toolbar>
    <div v-loading="catalogtreeLoading">
      <tree-grid :columns="columns" :tree-structure="true" :need-checkbox="false" :is-need-index="false" :data-source="catalogTree" @cell-click="treeGridCellClick">
      </tree-grid>
    </div>
  </div>
</template>

<script>
import TreeGrid from '@src/components/TreeGrid.vue'
export default {
  components: {
    'tree-grid': TreeGrid
  },
  data() {
    return {
      platformOptions: [],
      catalogtreeLoading: true,
      catalogTree: [], // 栏目树数据
      columns: [
        {
          text: '名称',
          dataIndex: 'name',
          classCss: 'title-column__content'
        },
        {
          text: '别名',
          dataIndex: 'alias',
          width: 150
        },
        {
          text: '栏目类型',
          dataIndex: 'typeName',
          isAlignCenter: true,
          width: 120
        },
        {
          text: '内容类型',
          dataIndex: 'contentTypeName',
          isAlignCenter: true,
          width: 120
        }
      ],
      platformName: '',
      platformID: 'pc',
      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.loadCatalogTree()
    },
    async changeClickHandler(value) {
      this.dimensionID = value
      await this.loadCatalogTree()
    },
    setPulibshPlatform() {
      let val = {
        ID: '0',
        type: 'Default',
        contentType: '',
        parentId: 0
      }
      this.treeGridCellClick(val)
    },
    treeGridCellClick(val) {
      this.type = val.type
      this.contentType = val.contentType
      this.parentID = val.parentID
      let params = {
        type: val.type,
        contentType: val.contentType,
        parentId: val.parentID,
        platformName: this.platformName,
        platformId: this.platformID
      }
      this.$router.push({path: `/datachannel/publishPlatform/${val.ID}`, query: params})
    },
    platformChange(val) {
      this.platformName = this.platformOptions.filter(o => o.ID === val)[0].name
    },
    // 获取栏目列表数据
    async loadCatalogTree() {
      this.catalogtreeLoading = true
      let res
      try {
        res = await axios.get('/ui/catalog/admintree', {
          params: {
            dimensionID: this.dimensionID
          }
        })
        this.catalogtreeLoading = false
      } catch (e) {
        this.catalogtreeLoading = false
        return
      }
      this.catalogTree = res.data.data
    }
  },
  async created() {
    this.loadCatalogTree()
    this.getDimensions()
    let res = await axios.get('/ui/publishplatform/usedpublishplatforms')
    this.platformOptions = res.data.data
    this.platformID = this.platformOptions[0].ID || ''
    this.platformName = this.platformOptions[0].name || ''
  }
}
</script>

<style scoped>

</style>
