<template>
  <div class="container">
    <toolbar
      @onSearch="filterData"
    />
    <white-board>
      <table-with-page
        :columns="columns"
        :items="items"
        :pagination="pagination"
        :page-change="pageChange"
      />
    </white-board>

  </div>
</template>

<script>
import toolbar from './toolbar'
import mxFilterList from '@/mixins/filterList'
import { getCollectList as getList } from '@/model/article'
import { getTagTypeInArr, setStatus } from '@/utils'

export default {
  name: 'ArticleCollectManagement',

  components: { toolbar },

  mixins: [mxFilterList({
    fetchList: getList // 在下方data再声明一个 fetchList: getList 同等效果
  })],

  props: {
    tagType: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      columns: [
        {
          key: 'title',
          name: '文章名',
          minWidth: '200'
        }, {
          key: 'nickName',
          name: '昵称',
          minWidth: '120'
        }, {
          key: 'createDate',
          name: '时间',
          minWidth: '150'
        }, {
          key: 'statusF',
          name: '状态',
          width: '80',
          type: 'tag',
          fetchTagType: (val) => getTagTypeInArr(setStatus(['有效', '无效'], ['success', 'danger']), val)
        }
      ]
    }
  },

  methods: {
  }
}
</script>

<style scoped>
.header {
  padding: 4px 20px 6px 20px;
}
.toolbar-txt {
  font-size: 13px;
  padding: 5px;
  line-height: 1.7;
}
.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
