<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 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-row :gutter="12" style="margin-top: 10px">
          <el-table
            :data="cancelStockDate"
            :class="signAndWeighBoxPatients"
            border
            highlight-current-row
            ref="multipleTable"
            @selection-change="select"
            :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}"
          >
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>

            <el-table-column label="分类名称" align="center">
              <template slot-scope="scope">
                123
              </template>
            </el-table-column>

            <el-table-column label="所属文章数量" align="center">
              <template slot-scope="scope">
                456
              </template>
            </el-table-column>

            <el-table-column label="分类排序" align="center">
              <template slot-scope="scope">
                789
              </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>
                <el-tooltip class="item" effect="dark" content="删除" placement="top">
                  <el-button
                    size="mini"
                    type="danger"
                    icon="el-icon-delete"
                    @click="handleDelete(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>

        </el-row>
      </div>
    </div>
</template>

<script>
  import BreadCrumb from '../components/bread-crumb'
  export default {
    name: 'acticleCategory',
    components:{
      BreadCrumb
    },
    data(){
      return{
        crumbs: [
          { path: false, name: '文章管理' },
          { path: '/articles/acticleCategory', name: '发布文章' }
        ],
      }
    },
  }
</script>

<style scoped>

</style>
