<template>
  <div class="manage-container">
    <el-button type="primary">裁剪上传</el-button>
    <el-button type="primary">原图上传</el-button>
    <div class="el-list">
      <div class="el-item">
        这是一段内容
        <vab-query-form>
          <vab-query-form-left-panel>
            <el-checkbox v-model="checkedform"></el-checkbox>
          </vab-query-form-left-panel>
          <vab-query-form-right-panel>
            <el-button type="text" icon="el-icon-view"></el-button>
          </vab-query-form-right-panel>
        </vab-query-form>
      </div>
    </div>
    <vab-query-form>
      <vab-query-form-left-panel>
        <el-checkbox v-model="checked"></el-checkbox>
        <el-button>全部显示</el-button>
        <el-button>全部隐藏</el-button>
        <el-button>全部删除</el-button>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel>
        <el-pagination
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </vab-query-form-right-panel>
    </vab-query-form>
  </div>
</template>

<script>
export default {
  name: 'Setting',
  data() {
    return {
      checked: false,
      checkedform: false,
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.manage-container {
  width: 100%;

  .el-list {
    margin: 30px 0;

    .el-item {
      width: 12.5%;
      border: 1px solid #e3e3e3;
    }
  }
}
</style>
