<template>
  <div class="app-container">
    <form-search :searchData="searchData" :userData="{name:'张三',id:'1212'}" @handleQuery="handleQuery"></form-search>

     <el-row :gutter="10">
       <el-col v-for="n in 12" :xs="12" :sm="8" :md="8" :lg="6" :xl="6" style="padding-left: 6px; padding-right: 6px;margin-bottom:10px" >
         <div @click="detail() " style="border: 1px solid #eee; height: 80px;padding: 10px; background: rgb(255, 255, 255); color: rgb(48, 49, 51);position:relative;cursor: pointer;">
           <div style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap;padding-right:20px ">2021年八年级上学期期末测试</div>
           <span class="el-icon-right" style="position: absolute;top:10px;right:10px"></span>
           <span  style="position: absolute;bottom:10px;right:10px;font-size:14px;color:#999">1234人已做</span>
           <div style="position: absolute;bottom:10px;left:10px;font-size:14px;">语文</div>
         </div>
       </el-col>
     </el-row>
    <!-- <el-pagination
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :current-page.sync="currentPage1"
           :page-size="100"
           layout="total, prev, pager, next,jumper"
           :total="1000">
         </el-pagination> -->
         <pagination
           v-show="total>0"
           :total="total"
           :page.sync="queryParams.pageNum"
           :limit.sync="queryParams.pageSize"
            :page-size="20"
           @pagination="getList"
         />
   </div>
</template>

<script>
import { listMenu, getMenu, delMenu, addMenu, updateMenu } from "@/api/system/menu";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import IconSelect from "@/components/IconSelect";

export default {
  name: "Menu",
  components: { Treeselect, IconSelect },
  data() {
    return {
      total:1000,
      searchData:[{
        name:'科目：',
        code:'kemu',
        dicData:[{
          name:'所有',
          code:''
        },
        {
          name:'语文',
          code:'1'
        },
        {
          name:'数学',
          code:'2'
        },
        {
          name:'英语',
          code:'3'
        },
        {
          name:'语文',
          code:'4'
        },
        {
          name:'物理',
          code:'5'
        },
        {
          name:'化学',
          code:'6'
        },
        {
          name:'生物',
          code:'7'
        },
        {
          name:'政治',
          code:'8'
        },
        {
          name:'历史',
          code:'9'
        },
        {
          name:'地理',
          code:'yuwen'
        }]
      },{
        name:'年级：',
        code:'nianji',
        dicData:[{
          name:'所有',
          code:''
        },
        {
          name:'七年级',
          code:'1'
        },
        {
          name:'八年级',
          code:'2'
        },
        {
          name:'九年级',
          code:'3'
        }]
      },{
        name:'学期：',
        code:'xueqi',
        dicData:[{
          name:'所有',
          code:''
        },
        {
          name:'上学期',
          code:'1'
        },
        {
          name:'下学期',
          code:'2'
        }]
      },{
        name:'类型：',
        code:'leixing',
        dicData:[{
          name:'所有',
          code:''
        },
        {
          name:'期中',
          code:'1'
        },
        {
          name:'期末',
          code:'2'
        }]
      },],
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 菜单表格树数据
      menuList: [],
      // 菜单树选项
      menuOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 显示状态数据字典
      visibleOptions: [],
      // 菜单状态数据字典
      statusOptions: [],
      // 查询参数
      queryParams: {
        pageNum:1,
        pageSize:20,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        menuName: [
          { required: true, message: "菜单名称不能为空", trigger: "blur" }
        ],
        orderNum: [
          { required: true, message: "菜单顺序不能为空", trigger: "blur" }
        ],
        path: [
          { required: true, message: "路由地址不能为空", trigger: "blur" }
        ]
      },
       currentPage: 5,
    };
  },
  created() {
    this.getList();
//  this.getDicts("sys_show_hide").then(response => {
//    this.visibleOptions = response.data;
//  });
//  this.getDicts("sys_normal_disable").then(response => {
//    this.statusOptions = response.data;
//  });
  },
  methods: {
    detail(item){
      this.$router.push({path: '/idc/EvaluationDatabase/statistics'})
    },
    // 选择图标
    selected(name) {
      this.form.icon = name;
    },
    /** 查询菜单列表 */
    getList() {
      this.loading = true;
      // listMenu(this.queryParams).then(response => {
      //   this.menuList = this.handleTree(response.data, "menuId");
         this.loading = false;
      // });
    },
    // 表单重置
    reset() {
      this.form = {};
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      console.log(this.queryParams)
      this.getList();
    },
    handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
          },
     handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
     },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  }
};
</script>
