<template>
  <div class="app-container">
     <form-search ref="formSearch" :searchData="searchData" :personalUpload="true" @personal="personal" @handleQuery="handleQuery"></form-search>
     <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> 
      <el-dialog
		  title="上传至个人资源库"
		  :visible.sync="dialogVisible"
		  width="30%" > 
		  <div  class="searchRadio"  style="text-align: center;width:100%"> 
            <el-radio v-model="type" style="padding: 11px 16px 10px 8px;height: 36px;margin:0 20px" :label="1" border size="medium">自定义</el-radio>
   			<el-radio v-model="type" style="padding: 11px 16px 10px 8px;height: 36px;margin:0 20px" :label="2" border size="medium">同步</el-radio>
   			<el-radio v-model="type" style="padding: 11px 16px 10px 8px;height: 36px;margin:0 20px"  :label="3" border size="medium">知识点</el-radio>
		  </div>
		   
		  
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="dialogVisible = false; uploading = false">确认上传</el-button>
		  </span>
		</el-dialog>
   </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 {
    	type:1,
    	dialogVisible:false,
    	uploading:false,
    	fileList:[],
      total:1000,
      searchData:[{
        name:'类型：',
        code:'kemu',
        dicData:[{
          name:'所有',
          code:''
        },
        {
          name:'word',
          code:'1'
        },
        {
          name:'照片',
          code:'2'
        },
        {
          name:'截图',
          code:'3'
        },
        {
          name:'PDF',
          code:'4'
        },{
          name:'PPT',
          code:'5'
        }]
      },],
      // 遮罩层
      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;
//  });
  },
  methods: {
  	personal(fal){
  		this.uploading = fal 
  	},
  	handleClose(){
  		
  	},
  	save(){
		 this.dialogVisible = true 
  		this.$refs.formSearch.uploadingFalse()
  	}, 
  	quxiao(){
  		this.uploading = false
  			this.$refs.formSearch.uploadingFalse()
  	},
    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();
    },
  }
};
</script>
<style   scoped>
	/deep/.el-upload-list{
		display:none
	}
	/deep/input[type="checkbox"]{
		width: 16px;
		height:16px
	}
</style>