<template>
<div>
  <m-page
    :tableHead="tableHead"
    :tableData="tableData"
    :params="params"
    :objFn="objFn"
    :tableConfig="tableConfig"
  >
    <template slot="self-select-btn">
      <div class="self-selects">
        <div class="btns">
          <el-button type="primary">添加文章</el-button>
          <el-button @click="batchRemove" :disabled="this.tableConfig.selection.sels.length===0">删除选中</el-button>
        </div>
        <div class="search-input">
          <m-search @enter="searchList"></m-search>
        </div>
      </div>
    </template>
  </m-page>
</div>
</template>

<script>
import mSearch from '../../components/module/mSearch.vue'
import mPage from '../../components/module/mPage.vue'

export default {
  name: '',
  components: { mSearch, mPage },
  data () {
    return {
      tableConfig: { border: '', size: '', selection: { has: true, sels: [], width: '50px', fix: 'left', align: '' } }, // 增加选择框，has设置为true
      tableHead: [
        { prop: 'title', label: '文章标题', minWidth: '170', fix: 'left', align: 'left' },
        { prop: 'type', label: '分类', minWidth: '70', fix: false },
        { prop: 'publish_time', label: '发布时间', minWidth: '90', fix: false },
        { prop: 'publish_author', label: '发布人', minWidth: '80', fix: false },
        { prop: 'operate', label: '操作', width: '60px', fix: false, commandArr: [ { command: 'newslist-edit', name: '编辑' }, { command: 'newslist-del', name: '删除' } ] }
        // { prop: '', label: '', minWidth: '', fix: false, goObj: { routerName: '', params: {} } }, // 点击跳转页面并传参数
        // { prop: 'img_url', label: '图片', width: '60px', fix: false } // 显示图片缩略小图，浮上去可查看大图
        // { prop: 'operate', label: '操作', width: '60px', fix: false, commandArr: [ { command: 'newslist-edit', name: '编辑' }, { command: 'newslist-del', name: '删除' } ] } // 操作控制列
      ],
      tableData: [],
      params: { keywords: '', curPage: 1, pageSize: 10, total: '' },
      objFn: {
        paramsFn: (_this) => {
          let strType = _this.params.type
          return {
            'org_type': /2-/gi.test(strType) ? '2' : strType,
            'org_sub_type': /2-/gi.test(strType) ? strType.replace(/2-/gi, '') : '',
            'org_class': '0',
            'keywords': _this.params.keywords,
            'page_num': _this.params.curPage,
            'page_size': _this.params.pageSize,
            'quota_type': 'org_bigscience_stat'
          }
        },
        nameAPI: 'getArticleList',
        // nameExcel: 'getStatSummaryExcel',
        nameExcel: 'getExportExcel3_4_14',
        callback: (_this, data) => {
          _this.params.total = 100
          /* 伪造数据 */
          var fakeData = [
            { title: '测试文章，有长有短测试文章，有长有短测试文章，有长有短测试文章，有长有短', type: '校园类', publish_time: '2018-10-10 12:30:25', publish_author: '王帅' },
            { title: '测试文章，有长有短', type: '校园类', publish_time: '2018-10-10 12:30:25', publish_author: '王帅' },
            { title: '测试文章，有长有短', type: '校园类', publish_time: '2018-10-10 12:30:25', publish_author: '王帅' },
            { title: '测试文章，有长有短', type: '科技类', publish_time: '2018-10-10 12:30:25', publish_author: '王帅' },
            { title: '测试文章，有长有短', type: '科技类', publish_time: '2018-10-10 12:30:25', publish_author: '王帅' },
            { title: '测试文章，有长有短', type: '科技类', publish_time: '2018-10-10 12:30:25', publish_author: '王帅' },
            { title: '测试文章，有长有短', type: '科技类', publish_time: '2018-10-10 12:30:25', publish_author: '王帅' },
            { title: '测试文章，有长有短', type: '科技类', publish_time: '2018-10-10 12:30:25', publish_author: '王帅' },
            { title: '测试文章，有长有短', type: '科技类', publish_time: '2018-10-10 12:30:25', publish_author: '王帅' },
            { title: '测试文章，有长有短', type: '科技类', publish_time: '2018-10-10 12:30:25', publish_author: '王帅' }
          ]
          fakeData.forEach((elem, i) => {
            elem.index = i + 1 + (_this.params.curPage - 1) * _this.params.pageSize
            _this.tableData.push(elem)
          })
        }
      }
    }
  },
  mounted () {
    this.VueEvent.$on('command-tablelist', (_obj) => {
      if (_obj.command === 'newslist-edit') {
      }
      if (_obj.command === 'newslist-del') {
      }
    })
  },
  methods: {
    searchList (val) {
      this.params.keywords = val
    },
    /* 删除选中 */
    batchRemove () {
      console.log(this.tableConfig.selection.sels)
    }
  }
}
</script>

<style lang="scss" scoped>
.self-selects {
  margin: 10px auto 30px auto;
  overflow: hidden;
  .btns {
    float: left;
  }
  .search-input {
    float: right;
    width: 40%;
  }
}
</style>
