<template>
  <div class="layout-no-cols">
    <div class="tool-box">
      <el-toolbar>
        <el-button @click="$router.back()" type="primary" size="medium" round class="shadow-primary">
          <i class="fa fa-chevron-left"></i> 返回上页</el-button>
        <span class="button-separator"></span>
        <el-button @click="addClickHandler" priv="ContentCore.Catalog.Add">
          <i class="fa fa-plus" aria-hidden="true"></i> 新建栏目
        </el-button>
      </el-toolbar>
    </div>
    <div class="padding-top-bottom" v-loading="treeDataLoading">
      <tree-table :data="advanceCatalogTree" :expanded-level="1" row-key="ID" class="dimension-catalog-tree-table">
        <tree-table-column label="名称">
          <template slot-scope="scope">
            <a class="list-card-title" href="javascript:void(0)" @click.stop="gotoDetailPage(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="别名" width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="path" label="路径" width="220" show-overflow-tooltip></el-table-column>
        <el-table-column label="状态" width="60" align="center">
          <template slot-scope="scope" v-if="scope.row.ID">
            <el-button type="text" @click.stop="visible(scope.row)" :title="scope.row.visibleFlag==='Y'?'启用':'禁用'">
              <i class="fa fa-check icon-success f18" v-if="scope.row.visibleFlag==='Y'"></i>
              <i class="fa fa-times icon-danger f18" v-else></i>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" align="right">
          <template slot-scope="scope">
            <el-button @click.stop="similarAddClickHandler(scope.row)" type="text" title="类似新建" class="table-operate-icon">
              <i class="fa fa-plus f16"></i>
            </el-button>
            <el-button @click.stop="delClickHandler(scope.row)" type="text" title="删除" class="table-operate-icon">
              <i class="fa fa-remove f16"></i>
            </el-button>
            <el-dropdown @command="selectMoreMethod">
              <el-button type="text" title="更多" class="table-operate-icon">
                <i class="fa fa-ellipsis-h f16"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{method:moreMenu.method,row:scope.row}" v-for="moreMenu in moreMenus" :key="moreMenu.method">
                    <i :class="moreMenu.iconClass"></i> {{moreMenu.title}}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </tree-table>
    </div>
    <!-- 导出栏目结构 -->
    <export-structure-dialog :dimension-id="dimenId" :catalog-id="exportStructureDlg.catalogId" :show.sync="exportStructureDlg.isShowModal"></export-structure-dialog>
    <!-- 移动栏目 -->
    <move-dialog :dimension-id="dimenId" :catalog-id="moveDlg.catalogId" :show.sync="moveDlg.isShowModal" :inner-code="moveDlg.innerCode" @callback="moveBack"></move-dialog>
    <!-- 排序栏目 -->
    <sort-dialog :dimension-id="dimenId" :catalog-id="sortDlg.catalogId" :show.sync="sortDlg.isShowModal" @callback="sortBack"></sort-dialog>
    <import-dialog :dimension-id="dimenId" :catalog-id="importDlg.catalogId" :show.sync="importDlg.isShowModal" @callback="importBack"></import-dialog>
  </div>
</template>
<script>
import './css/contentadvance.css'
import TreeTable from '@src/components/treeTable/TreeTable.vue'
import TreeTableColumn from '@src/components/treeTable/TreeTableColumn.vue'
import util from '@src/common/util.js'
import CatalogExportStructureDialog from './components/CatalogExportStructureDialog.vue'
import CatalogMoveDialog from './components/CatalogMoveDialog.vue'
import CatalogSortDialog from './components/CatalogSortDialog.vue'
import CatalogImportDialog from './components/CatalogImportDialog.vue'
export default {
  components: {
    'tree-table': TreeTable,
    'tree-table-column': TreeTableColumn,
    'export-structure-dialog': CatalogExportStructureDialog,
    'move-dialog': CatalogMoveDialog,
    'sort-dialog': CatalogSortDialog,
    'import-dialog': CatalogImportDialog
  },
  props: {
    dimensionId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      treeDataLoading: false,
      advanceCatalogTree: [], //  多维栏目树
      moreMenus: [
        {
          iconClass: 'fa fa-refresh f16',
          title: '排序',
          method: 'sortClickHandler'
        },
        {
          iconClass: 'fa fa-share f16',
          title: '转移',
          method: 'moveClickHandler'
        },
        {
          iconClass: 'fa fa-cloud-download f16',
          title: '批量导入',
          method: 'batchImportClickHandler'
        },
        {
          iconClass: 'fa fa-cloud-upload f16',
          title: '导出栏目结构',
          method: 'exportStructureClickHandler'
        }
      ],
      exportStructureDlg: {isShowModal: false, catalogId: 0},
      moveDlg: {isShowModal: false, catalogId: 0, innerCode: '0', catalogName: ''},
      sortDlg: {isShowModal: false, catalogId: 0},
      importDlg: {isShowModal: false, catalogId: 0}
    }
  },
  computed: {
    dimenId: {
      get() {
        return parseInt(this.dimensionId)
      }
    }
  },
  created() {
    this.loadAdvanceCatalogTree()
  },
  methods: {
    selectMoreMethod(command) {
      this[command.method](command.row)
    },
    exportStructureClickHandler(row) {
      if (!row || !row.ID) {
        this.exportStructureDlg.catalogId = 0
      } else {
        this.exportStructureDlg.catalogId = row.ID
      }
      this.exportStructureDlg.isShowModal = true
    },
    addClickHandler() {
      this.$router.push({path: `/settings/contentadvance/${this.dimenId}/add/new`})
    },
    similarAddClickHandler(row) {
      if (!row || !row.ID) {
        return
      }
      this.$router.push({path: `/settings/contentadvance/${this.dimenId}/add/${row.ID}`})
    },
    async delClickHandler(row) {
      if (!row.ID || !row.innerCode) {
        return
      }
      try {
        await this.$confirm('警告：您确认要删除这个栏目吗？', '系统提示', {
          confirmButtonText: '确定',
          showCancelButton: false,
          type: 'warning'
        })
        let res = await axios.delete(`/ui/dimesion/${this.dimenId}/catalog/${row.ID}`)
        if (res.data.status === 2) {
          await util.showProgress(res.data.taskID, `正在删除栏目[${row.name}]`)
          this.loadAdvanceCatalogTree()
        } else {
          util.showMessage(res)
        }
      } catch (e) {

      }
    },
    batchImportClickHandler(row) {
      if (!row || !row.ID) {
        this.importDlg.catalogId = 0
      } else {
        this.importDlg.catalogId = row.ID
      }
      this.importDlg.isShowModal = true
    },
    importBack() {
      this.loadAdvanceCatalogTree()
    },
    sortClickHandler(row) {
      if (!row || !row.ID) {
        return
      }
      this.sortDlg.catalogId = row.ID
      this.sortDlg.isShowModal = true
    },
    sortBack() {
      this.loadAdvanceCatalogTree()
    },
    moveClickHandler(row) {
      if (!row || !row.ID) {
        return
      }
      this.moveDlg.catalogId = row.ID
      this.moveDlg.catalogName = row.name
      this.moveDlg.innerCode = row.innerCode
      this.moveDlg.isShowModal = true
    },
    async moveBack(taskID) {
      await util.showProgress(taskID, `正在转移[${this.moveDlg.catalogName}]栏目`)
      this.loadAdvanceCatalogTree()
    },
    async visible(row) {
      if (!row || !row.ID) {
        return
      }
      let changeVisible = async () => {
        let params = {
          catalogID: row.ID,
          visibleFlag: row.visibleFlag
        }
        let res = await axios.put(
          `/ui/dimesion/${this.dimenId}/catalog/changevisible`,
          params
        )
        if (res.data.status === 1) {
          this.loadAdvanceCatalogTree()
        }
        util.showMessage(res)
      }

      if (!row.isLeaf) {
        try {
          await this.$confirm('修改本栏目的状态，子栏目的状态也会被改变，确认要执行此操作吗？', '系统提示', {
            confirmButtonText: '确定',
            showCancelButton: false,
            type: 'warning'
          })
          await changeVisible()
        } catch (e) {

        }
      } else {
        await changeVisible()
      }
    },
    // 加载栏目树
    async loadAdvanceCatalogTree() {
      this.treeDataLoading = true
      let res = await axios.get(`/ui/dimesion/${this.dimenId}/catalog`)
      this.treeDataLoading = false
      this.advanceCatalogTree = res.data.data
    },
    gotoDetailPage(row) {
      if (!row.ID || !row.innerCode) {
        return
      }
      this.$router.push({path: `/settings/contentadvance/${this.dimenId}/${row.ID}`, query: {innerCode: row.innerCode}})
    }
  }
}
</script>
<style>

.dimension-catalog-tree-table .list-card-title{
  font-size:14px;
}
.dimension-catalog-tree-table .el-button + .el-dropdown {
  margin-left: 0px;
}
.dimension-catalog-tree-table .el-dropdown .el-button {
  color:#aaa;
}
</style>
