<template>
  <div class="app-container"> 
     <form-search :searchData="searchData" @handleQuery="handleQuery"></form-search>
     
      <el-card class="box-card" style="margin-bottom:30px">
	      <el-row :gutter="24" >
	          <el-col :span="4" >  
	          	<h3 style="padding-left: 11px;border-left: 2px solid #e6a700;color: #e6a700;">章节目录</h3>
	          	<div class="head-container">
			          <el-input
			            v-model="deptName"
			            placeholder="请输入部门名称"
			            clearable
			            size="small"
			            prefix-icon="el-icon-search"
			            style="margin-bottom: 20px"
			          />
			        </div>
			        <div class="head-container">
			          <el-tree
			            :data="deptOptions"
			            :props="defaultProps"
			            :expand-on-click-node="false"
			            :filter-node-method="filterNode"
			            ref="tree"
			            default-expand-all
			            @node-click="handleNodeClick"
			          />
			        </div>  
	          </el-col >
	           <el-col :span="20" > 
	           	<el-row :gutter="10" class="mb8"> 
				          <el-col :span="1.5">
				            <el-button 
				              plain
				              icon="el-icon-upload2"
				              size="small"
				              :disabled="multiple"
				              @click="handleDelete"
				              v-hasPermi="['system:user:remove']"
				            >上传至校本资源库</el-button>
				          </el-col>
				          <el-col :span="1.5">
				            <el-button 
				              plain
				              icon="el-icon-upload2"
				              size="small"
				              :disabled="multiple"
				              @click="handleDelete"
				              v-hasPermi="['system:user:remove']"
				            >上传至云库</el-button>
				          </el-col>
				          <el-col :span="1.5">
				            <el-button 
				              plain
				              icon="el-icon-upload2"
				              size="small"
				              :disabled="multiple"
				              @click="handleDelete"
				              v-hasPermi="['system:user:remove']"
				            >上传至班牌</el-button>
				          </el-col>
				          <el-col :span="1.5">
				            <el-button 
				              plain
				              icon="el-icon-upload2"
				              size="small"
				              :disabled="multiple"
				              @click="handleDelete"
				              v-hasPermi="['system:user:remove']"
				            >上传至学生端</el-button>
				          </el-col>
				          <el-col :span="1.5">
				            <el-button 
				              plain
				              icon="el-icon-upload2"
				              size="small"
				              :disabled="multiple"
				              @click="handleDelete"
				              v-hasPermi="['system:user:remove']"
				            >上传至家长</el-button>
				          </el-col>
			          </el-row > 
	             <el-table v-loading="loading" :data="data" @selection-change="handleSelectionChange">
				          <el-table-column type="selection" width="50" align="center" />
				          <el-table-column label="文件" align="center"  prop="userId"  />
				          <el-table-column label="发布人" align="center"   prop="userId"  />
				          <el-table-column label="时间" align="center"   prop="userId"  />
				           <el-table-column label="操作" align="center"   >
				            <template slot-scope="scope">
				             <el-button
			                size="mini"
			                type="text"
			                icon="el-icon-edit"
			                @click="handleUpdate(scope.row)" 
			              >修改</el-button>
			              <el-button
			                v-if="scope.row.userId !== 1"
			                size="mini"
			                type="text"
			                icon="el-icon-delete"
			                @click="handleDelete(scope.row)" 
			              >删除</el-button>
				            </template>
				          </el-table-column>  
				        </el-table>
	           </el-col >
	      </el-row >
    </el-card  >
     <!--<el-row :gutter="10">
        <el-col v-for="n in 12" :xs="12" :sm="8" :md="6" :lg="4" :xl="4" style="padding-left: 15px; padding-right: 15px;margin-bottom: 30px;position: relative;" >
         <label><input name="Fruit" type="checkbox" value="" v-if="uploading" style="position: absolute;top:-3px;right:12px;z-index:9" />   
                  <el-image  style="width: 100%; "  src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" ></el-image>
                  <div class="mt10" style="position: relative;font-weight:100">
                  	<div style="overflow:hidden; text-overflow:ellipsis;white-space:nowrap;padding-right: 100px;">这是文件标题这是文件标题这是文件标题</div>
                  	<span style="position: absolute;right:5px;top:3px">2021-05-26</span>
                 </div> 
         </label>
       </el-col>
        <el-button type="primary" v-if="uploading" icon="el-icon-check"  @click="save">确认选择</el-button>
        <el-button  v-if="uploading" icon="el-icon-close"  @click="quxiao">取消</el-button> 
     </el-row>  -->
   </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 {
    	deptName:'',
    	radio:'', 
      // 非多个禁用
      multiple: true,
    	uploading:false,
    	fileList:[],
      total:1000,
      deptOptions:[],
      defaultProps: {
        children: "children",
        label: "label"
      },
      data:[{},{},{},{}],
      searchData:[{
        name:'类型：',
        code:'kemu',
        value:'1',
        dicData:[{
          name:'所有',
          code:''
        },
        {
          name:'word',
          code:'1'
        },
        {
          name:'照片',
          code:'2'
        },
        {
          name:'截图',
          code:'3'
        },
        {
          name:'PDF',
          code:'4'
        },{
          name:'PPT',
          code:'5'
        }]
      },{
        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'
        }]
      },],
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 菜单表格树数据
      menuList: [],
      // 菜单树选项
      menuOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 显示状态数据字典
      visibleOptions: [],
      // 菜单状态数据字典
      statusOptions: [],
      // 查询参数
      queryParams: {
        pageNum:1,
        pageSize:20,
      },
      // 表单参数
      form: {},
      // 表单校验 
       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;
//  });
  },
  watch:{
  	radio(val){
  			if(val){
  				this.uploading = true
  			}
  	}
  },
  methods: {
  	save(){
		 this.uploading = false 
		 this.radio = ''
  	}, 
  	quxiao(){
  		this.uploading = false 
		 this.radio = ''
  		
  	},
  	 handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
    detail(item){
//    this.$router.push({path: '/idc/EvaluationDatabase/detailList'})
    },
    // 选择图标
    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();
    },
     // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.deptId = data.id;
      this.getList();
    },
     // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.userId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
      handleUpdate(row) {
      	
      },
      handleDelete(row){
      	
      }
  }
};
</script>
<style   scoped>
	/deep/.el-upload-list{
		display:none
	}
		/deep/input[type="checkbox"]{
		width: 16px;
		height:16px
	}
</style><template>
</template>

<script>
</script>

<style>
</style>