<template>
  <div>
    <el-dialog title="请选择要被挖掘的文章" :visible.sync="isShow" class="extracted-new-word-dlg" @open="beforeDialogOpen">
      <div class="search-bar" align="left">
        栏目名称:
        <catalog-tree-selector  :items="catalogTree" :value.sync="search.catalog.ID"  placeholder="请选择栏目" :style="{width:'25%','margin-right':'10px','display': 'inline-block'}" @click-change="clickChangeHandler"></catalog-tree-selector>
          文章标题:
          <el-input placeholder="" @keyup.enter.native="searchClickHandler" v-model="search.title"></el-input>
          <el-button type="primary" @click="searchClickHandler">查询</el-button>
      </div>
      <el-table ref="table" :default-sort="{prop: 'publishdDate', order: 'descending'}" :data-read-url="dataReadFunc" :page-size="20" :auto-get-data="false" pagination-layout="sizes, ->, prev,pager ,next, jumper" @selection-change="onSelectionChange">
        <el-table-column type="index" label="序号" width="65" align="center"></el-table-column>
        <el-table-column type="selection" align="center" width="45"></el-table-column>
        <el-table-column label="标题">
          <template slot-scope="scope">
            <span :title="scope.row.title">{{scope.row.title}}</span>
          </template>
        </el-table-column>
        <el-table-column property="author" label="作者" width="80"></el-table-column>
        <el-table-column property="statusName" label="状态" width="100" sortable></el-table-column>
        <el-table-column property="publishDate" label="发布时间" align="center" width="180" sortable></el-table-column>
      </el-table>
      <div slot="footer">
        <el-button @click="isShow = false">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="confirm" priv="Search.DicManager.ExtractedNewWord">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import util from '@src/common/util.js'
import TreeSelect from '@src/components/TreeSelect.vue'
export default {
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  props: { show: Boolean },
  data() {
    return {
      submitLoading: false,
      treeItemsOptions: {
        //  树形菜单选项
        children: 'children',
        label: 'name',
        key: 'ID'
      },
      search: { catalog: { ID: 0 }, title: '' },
      contentList: [], // 选择内容数据
      selectedRows: [],
      catalogTree: [] // 栏目树
    }
  },
  methods: {
    clickChangeHandler(row) {
      this.loadContentList()
    },
    beforeDialogOpen() {
      this.submitLoading = false
      this.resetUserInput()
      this.bindEditorTree()
      this.loadContentList()
    },
    async bindEditorTree() {
      let res = await axios.get('/ui/catalog/bindeditortree')
      this.catalogTree = res.data.data
    },
    // 提交挖掘新词点击事件
    async confirm() {
      this.submitLoading = true
      let ids = util.getSelectedIDs(this.selectedRows)
      try {
        let res = await axios.put(`/ui/articleinputnewword/extractnewword/${ids.join()}`)
        this.submitLoading = false
        util.showMessage(res)
        if (res.data.status === 1) {
          this.selectedRows = []
          this.$refs.table.clearSelection()
          this.$emit('update:show', false)
          this.$emit('callback')
        }
      } catch (e) {
        this.submitLoading = false
        // util.showErrorNotification(e)
      }
    },

    dataReadFunc() {
      let params = {
        catalogID: this.search.catalog.ID,
        title: this.search.title
      }
      return ['/ui/articleinputnewword/contentlist', { params }]
    },

    // 点击栏目树节点后加载文章
    async loadContentList() {
      !!this.$refs.table && this.$refs.table.getData()
    },
    // 查询文章列表
    searchClickHandler() {
      this.loadContentList()
    },

    onSelectionChange(selection) {
      this.selectedRows = selection
    },

    resetUserInput() {
      this.search = { catalog: { ID: 0 }, title: '' }
      this.contentList = []
    }
  },
  components: {
    'catalog-tree-selector': TreeSelect
  }
}
</script>
<style scoped>
.extracted-new-word-dlg .search-bar {
  margin-bottom: 5px;
}
.extracted-new-word-dlg .search-bar span {
  line-height: 36px;
  margin-right: 5px;
}

.extracted-new-word-dlg .el-input {
  width: 25%;
}
</style>
<style>
.extracted-new-word-dlg .el-dialog {
  width: 800px;
}
@media (max-width: 480px) {
  .extracted-new-word-dlg .el-dialog {
    width: 96%;
  }
}
</style>
