<template>
  <!-- 创业公司登记 -->
    <div class="firm">
      <div class="pAHeader">
        <div class="pAHeader1">创业公司登记</div>
      </div>
      <hr>
      
      <div class="twoSelectInp">
        <div class="selectTwo">
            <div class="selectsBlock">
                <el-input v-model="input" style="width:200px" placeholder="请输入"></el-input>
                <el-button type="primary" class="btn2" >查询</el-button>
            </div>
        </div>
        <el-button type="primary" class="btn" @click="selectFile" size="mini">上传文件</el-button>
      </div>
      
      <div class="projectBlock">
        <el-table
        :data="tableData"
        tooltip-effect="dark"
        stripe
        class="fontSize"
        :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
        >
       
        <el-table-column
          prop="projectName"
          label="文件名称"
          align="center"
          min-width="25%">
        </el-table-column>

        <el-table-column
          prop="date"
          label="上传时间"
          align="center"
          min-width="25%">
        </el-table-column>
        
        <el-table-column
          prop="size"
          label="文件大小"
          align="center"
          min-width="20%">
        </el-table-column>
       
        <el-table-column
          prop="operation"
          label="操作"
          align="center"
          min-width="30%"
          >
          <template #default="scope">
              <div class="operations">
                      <el-button type="primary" class="bt1" size="mini" >查看信息</el-button>
                      <el-button type="primary" class="bt1" size="mini" @click="edit(scope)" >删除</el-button>
              </div>
          </template>
        </el-table-column>
      </el-table>
   
      </div>
    </div>
  </template>
  
  <script>
      export default {
        data() {
          return {
            input:'',
            options:[],
            options1:[],
            options2:[],
            options3:[],
            options4:[],
            tableData:[{
            projectName:'创业孵化基地企业情况信息表',
            date:'2022年11月13日',
            size:'50k'
            },
            {
              projectName:'创业孵化基地企业情况信息表',
              size:'50k',
              date:'2022年11月12日',
            }
            ],
            pavalues:{
              value:'',
              value1:'',
              value2:'',
              value3:'',
              value4:'',
            }
          }
        },
        methods:{
          edit(data){
            this.tableData = this.tableData.filter(item=>item.date!=data.date);
          },
          selectFile(){
            let input = document.createElement('input');
            input.type='file';
            input.accept='.doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,.png, .jpg, .jpeg'
            input.click();
            input.addEventListener("change",()=>{
              const fileLiu = input.files[0];
              console.log(fileLiu);
              const NowDate = new Date(); 
              let data = {
                projectName:fileLiu.name,
                size:Math.floor(fileLiu.size/1024/1024)+"MB",
                date:`${NowDate.getFullYear()}年${NowDate.getMonth()+1}月${NowDate.getDate()}日`,
              }
              this.tableData.push(data);
              input.remove();
            })
          }
          
        }
      }
  </script>
  
  <style lang="less">
  .firm{
    .pAHeader{
      width: 100%;
      display: flex;
      justify-content: space-between;
      .pAHeader1{
        width: 150px;
        font-weight: 600;
        flex-shrink: 0;
        font-size: 22px;
      }
      .pAHeader2{
        height: 35px;
        line-height: 5px;
        background: #477edd;
      }
    }

    
    
      
    .btn{   //上传文件
      width: 100px;
      height: 35px;
      font-size: 16px;
      background: #477edd;
    }
}
  </style>