<template>
  <div class="right-list-tabs">
    <div class="view-type-tabs">
      <el-tabs @tab-click="handleClick" v-model="tabName" class="view-tabs">
        <el-tab-pane v-for="view in views" :label="view.name" :name="view.ID" :key="view.ID" :disabled="isDisable(view.ID)" class="content_tab_class">
        </el-tab-pane>
      </el-tabs>
    </div>
    <component :is="viewComponent" :catalog-id="catalogID" :tree-level="treeLevel" :content-type="contentType" :dimensionID="dimensionID" :timestr="timestr"></component>
  </div>
</template>

<script>
import imageSelect from '@src/components/TreeSelect.vue'
import contentView from './contentView.vue'
import widgetView from './pageWidgets.vue'
import lockedContentView from './lockedContentView.vue'
import blockView from '../block/blockList.vue'
import commentView from '../comment/commentView.vue'
import workflowView from '../contentworkflow/workflowView.vue'
import recycleBinView from './recycleBinView.vue'
import VirtualContentView from '../contentadvance/VirtualContentList.vue'

export default {
  components: {
    'tree-select': imageSelect,
    'content-view': contentView,
    'widget-view': widgetView,
    'recycle-bin-view': recycleBinView,
    'locked-content-view': lockedContentView,
    'block-view': blockView,
    'comment-view': commentView,
    'workflow-view': workflowView,
    'virtual-content-view': VirtualContentView
  },
  props: {
    catalogID: [String, Number],
    tab: String,
    dimensionID: [String, Number],
    timestr: String
  },
  data() {
    return {
      viewComponent: '',
      catalogTrees: [], // 内容类型树形数据
      views: [],
      view: {},
      tabName: '',
      treeLevel: 1,
      contentType: null,
      contentTypes: [],
      defaultProps: {
        children: 'children',
        label: 'name',
        key: 'ID'
      },
      hasContentTabPiv: false,
      showTree: true
    }
  },
  watch: {
    catalogID(val, oldVal) {
      let isShowDefault = false
      if (oldVal === 0) {
        isShowDefault = true
      }
      this.dealComponent(isShowDefault)
    },
    dimensionID(val) {
      if (this.dimensionID === -1) {
        this.dealComponent()
      }
    }
  },
  async created() {
    let listViews = await axios.get('/ui/editorworkspace/views')
    let userViews = []
    listViews.data.data.forEach(view => {
      if (view.ID === 'Default') {
        this.hasContentTabPiv = true
        userViews.push({ID: 'Default', name: '内容列表', siteComponent: 'site-default', catalogComponent: 'content-view'})
      } else if (view.ID === 'Widget') {
        userViews.push({ID: 'Widget', name: '页面部件', siteComponent: 'widget-view', catalogComponent: 'widget-view'})
      } else if (view.ID === 'RecycleBin') {
        userViews.push({ID: 'RecycleBin', name: '回收站', siteComponent: 'recycle-bin-view', catalogComponent: 'recycle-bin-view'})
      } else if (view.ID === 'LockedContent') {
        userViews.push({ID: 'LockedContent', name: '已锁定列表', siteComponent: 'locked-content-view', catalogComponent: 'locked-content-view'})
      } else if (view.ID === 'Block') {
        userViews.push({ID: 'Block', name: '区块', siteComponent: 'block-view', catalogComponent: 'block-view'})
      } else if (view.ID === 'Comment') {
        userViews.push({ID: 'Comment', name: '评论', siteComponent: 'comment-view', catalogComponent: 'comment-view'})
      } else if (view.ID === 'Workflow') {
        userViews.push({ID: 'Workflow', name: '我的工作流', siteComponent: 'workflow-view', catalogComponent: 'workflow-view'})
      }
    })
    this.views = userViews
  },
  async mounted() {
    let getContentType = await axios.get('/ui/contentcore/contenttypes')
    this.contentTypes = getContentType.data.data
    let getTrees = await axios.get('/ui/editorworkspace/bindtree')
    this.catalogTrees = getTrees.data.data
    let tabs = this.views.filter(val => val.ID === this.tab)
    if (this.views.length > 0) {
      this.tabName = tabs.length === 0 ? this.views[0].ID : this.tab
      this.$router.replace(`/editorWorkspace/${this.tabName}`)
      this.view = this.views.find(val => val.ID === this.tabName)
      this.$nextTick(() => {
        this.dealComponent()
      })
    }
  },
  methods: {
    isDisable(key) {
      if (this.dimensionID === -1) {
        return !(key === 'Default')
      }
      return false
    },
    handleClick(tab) {
      this.tabName = tab.name
      this.$router.replace(`/editorWorkspace/${this.tabName}`)
      this.view = this.views.find(val => val.ID === tab.name)
      this.$nextTick(() => {
        this.dealComponent()
      })
    },
    dealComponent(isShowDefault) {
      // 根节点Tab隐藏内容列表
      if (!this.catalogID && this.dimensionID !== -1) {
        if (this.views[0].ID === 'Default') {
          this.views.shift()
          if (this.view.ID === 'Default' && this.views.length > 0) {
            this.view = this.views[0]
            this.tabName = this.view.ID
            this.$router.replace(`/editorWorkspace/${this.view.ID}`)
          }
        }
      } else if ((this.views.length === 0 || this.views[0].ID !== 'Default') && this.hasContentTabPiv) {
        this.views.splice(0, 0, {ID: 'Default', name: '内容列表', siteComponent: 'site-default', catalogComponent: 'content-view'})
      }
      if (this.views.length === 0){
        return
      }
      if (this.dimensionID === -1) {
        if (this.tabName !== 'Default') {
          this.tabName = 'Default'
          this.$router.replace(`/editorWorkspace/${this.tabName}`)
          this.view = this.views.find(val => val.ID === this.tabName)
        }
      }
      if (isShowDefault) {
        this.tabName = 'Default'
        this.$router.replace(`/editorWorkspace/${this.tabName}`)
        this.view = this.views.find(val => val.ID === this.tabName)
      }
      this.treeLevel = localStorage['user_' + localStorage.userName + '_sid_' + this.$root.siteID + '_did_' + this.dimensionID + '_treeLevel']
      this.contentType = localStorage['user_' + localStorage.userName + '_sid_' + this.$root.siteID + '_did_' + this.dimensionID + '_contentType']
      if (this.view.ID === 'Default') {
        this.views.forEach(val => {
          if (val.ID === 'Default') {
            val.siteComponent = 'site-default'
            val.catalogComponent = 'content-view'
          }
        })
        this.$router.replace(`/editorWorkspace/Default`)
        let catalogType = ''
        let arr = []
        arr.push(this.catalogTrees)
        while (arr.length > 0) {
          arr.pop().find(val => {
            if (val.ID === this.catalogID) {
              catalogType = val.type
            }
            if (val.children && val.children.length > 0) {
              arr.push(val.children)
            }
          })
        }
        if (catalogType === 'Virtual') {
          this.viewComponent = 'virtual-content-view'
          this.$router.replace(`/editorWorkspace/Virtual`)
        } else {
          this.viewComponent = this.view.catalogComponent
        }
      } else {
        this.viewComponent = this.view.siteComponent
      }
    }
  }
}
</script>

<style>
.view-tabs .el-tabs__item{
  padding:0 20px
}
.el-list-view .el-list-view__row:first-child {margin: auto;}
</style>
