<template>
  <div class="app-container">
    <div>
        <div :span="24">
          <el-form ref="seachForm" :inline="true" class="demo-form-inline">
            <el-form-item label="目录名称">
              <el-input
                v-model="query.folderName"
                placeholder="请输入"
                maxlength="32"
                clearable
              />
            </el-form-item>
            
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="queryTable"
              >
                查询
              </el-button>
              <el-button
                type="reset"
                icon="el-icon-refresh"
                @click="resetQueryTable"
              >
                重置
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <el-card>
        <div v-if="cates.length === 0" class="foldname">暂无数据</div>
        <el-card v-for="i in cates" :key="i.id" style="margin-top: 10px;">
          <div class="foldname">{{ i.cataName }}</div>
          <BarChart />
        </el-card>
        
      </el-card>
      
  </div>
</template>

<script>
import TableMixin from "@/mixins/table-mixin";
import { listCata } from "@/api/gallery/cata";
import BarChart from "./BarChart.vue";

export default {
  name: "Label",
  components: {
    BarChart
  },
  mixins: [TableMixin],
  pageInfo: {
    title: "",
    //exportUrl: "/task/info/export",
    pageListApi: null,
    // deleteApi: delOther,
    defaultQuery: {
    },
  },
  data() {
    return {
      cates: [],
    };
  },
  created() {
    // listCata().then(res => {
    //   const list = res.data || [];
    //   this.cates = list;
    // })
  },
  methods: {
    getTableList() {
      listCata().then(res => {
      const list = res.data || [];
      this.cates = list;
    })
    }
  },
};
</script>

<style scoped>
.foldname {
  text-align: center;
  font-weight: 500;
  color: #409EFF;
}
</style>
