<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs='crumbs'></bread-crumb>
      <el-button  style="float:right;" type="primary" size="small" icon="el-icon-circle-plus-outline">添加文章</el-button>
    </div>
    <div class="app-container">
          <div style="margin-bottom: 10px">
            <el-row :gutter="24">
              <el-col :span="8">
                  <el-input style="width: 300px"  placeholder="请输入您需要搜索的内容"></el-input>
                  <el-button type="primary"  icon="el-icon-search">搜索</el-button>
              </el-col>
            </el-row>
          </div>
          <div class="cell clearfix">
            <label class="title"><span class="name">标签</span>:</label>
             <div class="time">
                <ul class="">
                  <li :class="item.value==schedulType?'active':''"  v-for="item in schedulArr" :key="item.value">{{item.label}}</li>
                </ul>
             </div>
          </div>
          <div class="cell clearfix">
            <label class="title"><span class="name">状态:</span></label>
            <div class="time">
              <ul class="">
                <li :class="item.value==systemType?'active':''" v-for="item in systemArr" :key="item.value">{{item.label}}</li>
              </ul>
            </div>
          </div>
          <div class="filter-container" style="margin-top: 10px;margin-left: 5px">
            <el-checkbox style="width: 30px" v-model="checked" @change="changeAllSelected">全选</el-checkbox>
            <el-button size="small" icon="el-icon-delete" @click="batchDelete">删除</el-button>
          </div>
          <el-table ref="multipleTable" :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}" :data="tableData" border fit highlight-current-row  style="width: 100%;margin-top: 10px;">
              <el-table-column
                type="selection"
                width="55">
              </el-table-column> 
             <el-table-column label="文章图片" align="center">
               <template slot-scope="scope">

               </template>
             </el-table-column>
            <el-table-column label="文章标题" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="阅读量" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="评论数" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="点赞数" align="center">
              <template slot-scope="scope">

              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                  <el-button
                    size="mini"
                    type="primary"
                    icon="el-icon-edit-outline"
                    @click="handleEdit(scope.$index, scope.row)">
                  </el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[7]"
            :page-size="7"
            background
            style="margin-top:20px;float: right"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
    </div>
  </div>
</template>

<script>
  import BreadCrumb from '../components/bread-crumb'
  export default {
    name: 'commentList',
    components:{
      BreadCrumb
    },
    data(){
      return{
        crumbs: [
          { path: false, name: '文章管理' },
          { path: '/articles/articleList', name: '文章列表' }
        ],
        time: '',
        active: true,
        schedulType: 0,
        schedulArr:[
          {value: 0, label: '全部'},
          {value: 1, label: '食物库'},
          {value: 2, label: '肾病常识'},
          {value: 3, label: '科普教育'},
        ],
        systemType: 0,
        systemArr: [
          { value: 0, label: '全部' },
          { value: 1, label: '已发布'},
          { value: 2, label: '草稿箱'},
          { value: 3, label: '未通过'},
        ],
      }
    }
  }
</script>

<style scoped>
  /*.app-container .cell.clearfix .time ul li {*/
    /*float: left;*/
    /*list-style: none;*/
    /*cursor: pointer;*/
    /*padding: 6px 20px;*/
    /*color: #606266;*/
    /*border-radius: 4px;*/
    /*margin: 0 8px 0 0;*/
    /*font-size: 14px;*/
    /*text-align: center;*/
  /*}*/
</style>
