<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="轮播图" name="1">
      <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" @click="goAddCarousel">添加轮播图</el-button>
            </div>
          </div>
        </template>
      </m-page>
    </el-tab-pane>
  </el-tabs>
</template>

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

export default {
  components: { mPage },
  data () {
    return {
      activeName: '1',
      tableConfig: { border: '', size: '', selection: { has: false, sels: [], width: '50px', fix: 'left', align: '' } },
      tableHead: [
        { prop: 'index', label: '排序', minWidth: '80', fix: 'left' },
        { prop: 'img_url', label: '图片', width: '60px', fix: false },
        { prop: 'title', label: '轮播图标题', minWidth: '120', fix: false },
        { prop: 'edit_time', label: '编辑时间', minWidth: '120', fix: false },
        { prop: 'editor', label: '编辑人', minWidth: '90', fix: false },
        { prop: 'operate', label: '操作', width: '60px', fix: false, commandArr: [ { command: 'contentlist-edit', name: '编辑' }, { command: 'contentlist-up', name: '上移' }, { command: 'contentlist-down', name: '下移' } ] }
      ],
      tableData: [],
      params: { keywords: '', curPage: 1, pageSize: 10, total: '' },
      objFn: {
        paramsFn: (_this) => {
          return {
            '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 = 1
          /* 伪造数据 */
          var fakeData = [
            { index: '1', img_url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2546678019,1828033960&fm=26&gp=0.jpg', title: '校园类', edit_time: '2018.01.11 12:20:00', editor: '中国平安' },
            { index: '2', img_url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2546678019,1828033960&fm=26&gp=0.jpg', title: '校园类', edit_time: '2018.01.11 12:20:00', editor: '中国平安' },
            { index: '3', img_url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2546678019,1828033960&fm=26&gp=0.jpg', title: '校园类', edit_time: '2018.01.11 12:20:00', editor: '中国平安' },
            { index: '4', img_url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2546678019,1828033960&fm=26&gp=0.jpg', title: '科技类', edit_time: '2018.01.11 12:20:00', editor: '中国平安' },
            { index: '5', img_url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2546678019,1828033960&fm=26&gp=0.jpg', title: '科技类', edit_time: '2018.01.11 12:20:00', editor: '中国平安' }
          ]
          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 === 'contentlist-edit') {
      }
      if (_obj.command === 'contentlist-up') {
      }
      if (_obj.command === 'contentlist-down') {
      }
    })
  },
  methods: {
    handleClick (tab, event) { /* console.log(tab, event) */ },
    goAddCarousel () {
      this.$router.push({ path: '/app/content/add-carousel' })
    }
  }
}
</script>

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