<template>
  <div class="InputTableDiv">
    <div class="InputTableDiv2">
      <div class="headerDiv">
        <div class="title">{{  title}}</div>
        <div class="closeInputTable" @click="closeInputTable"></div>
      </div>
      <div class="splitLine"></div>
      <div class="tableDiv">
        <div class="tableTool">
          <div class="deleteFile"  @click="deleteFile()"></div>
          <div class="upFile" @click="upFile"></div>

        </div>
        <div class="tableContent">
          <el-table
            :data="tableData"
            @selection-change="handleSelectionChange"
            style="width: 100%">
            <el-table-column
              type="selection"
              width="60">
            </el-table-column>
            <el-table-column
              type="index"
              label="序号"
              width="100">
            </el-table-column>
            <el-table-column
              prop="name"
              label="会议纪要名称"
              >
            </el-table-column>
            <el-table-column width="105"  label="操作">
              <template slot-scope="scope">
                <div class="scopeBotton">
                  <div class="tableAction" @click="deleteInfo(scope.$index, scope.row)">删除</div>
                  <div class="tableAction" @click="download(scope.$index, scope.row)">下载</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>  
      </div>
      <el-button type="primary">开始分析</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      title:"分析评价",
      fileList:[],
      tableData:[{
        name:"会议纪要1"
      },{
        name:"会议纪要2"
      }],
      multipleSelection:[],
    }
  },
  methods:{
    //删除表格
    closeInputTable(){

    },
    //加载文件
    upFile(){

    },
    //删除文件
    deleteFile(data){
      let deleteList=[];
      if(data){
        deleteList=[data];
      }else{
        if(this.multipleSelection.length==0){
          this.$message({
            message: '请选择要删除的文件',
            type: 'warning'
          });
          return;
        }else{
          deleteList=this.multipleSelection;
        }
      }
      //开始删除
    },
    //下载文件
    downloadFile(index,row){
      console.log(row)
    },
    //表格选择的变化
    handleSelectionChange(val) {
        this.multipleSelection = val;
    },
    //删除触发的事件
    deleteInfo(index,row){
      this.tableData.splice(index,1)
    },
    //下载触发的事件
    download(index,row){
      console.log(row)
    }
  }
}
</script>

<style lang="scss" scoped>
.tableContent{
  padding: 0px 20px;
}
.headerDiv{
  position: relative;
  display:flex;
  flex-flow: row;
  align-items: center;
  padding: 17px;
  
}
.title{
  font-family: Source Han Sans;
  font-size: 18px;
  font-weight: 500;
  color:white;
}
.tableDiv{
  padding-bottom: 25px;
  width: 100%;
}
.InputTableDiv{
  position: relative;
  border-radius: 6px;
  height: 100%;
  opacity: 1;
  background: rgba(10, 64, 106, 0.96);
  border: 1px solid rgba(17, 88, 143, 0.77);
}
.InputTableDiv2{
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  flex-flow: column;
  background: linear-gradient(162deg, rgba(28, 133, 231, 0.39) 2%, rgba(18, 101, 165, 0) 61%);
}
.closeInputTable{
  background: url("../../../../../assets/images/coordinatedEvaluation/close.png") no-repeat;
  position: relative;
  cursor: pointer;
  height: 18.75px;
  width: 18.75px;
  background-size: 80% 80%;
  background-position: center;
  margin-left: auto;
}
.el-table{
  color:white
}
.tableTool{
  position: relative;
  width: 100%;
  padding-top: 16px;
  height: 51px;
  padding-bottom: 15px;
}
.deleteFile{
  position: relative;
  float: right;
  cursor: pointer;
  height: 20px;
  width: 20px;
  background: url("../../../../../assets/images/coordinatedEvaluation/delete.png") no-repeat;
  background-size: 85% 80%;
  background-position: center;
  margin-right: 20px;
}
.upFile{
  position: relative;
  float: right;
  height: 20px;
  width:20px;
  background: url("../../../../../assets/images/coordinatedEvaluation/inputFile.png") no-repeat;
  background-size: 100% 100%;
  background-position: center;
  cursor: pointer;
  margin-right: 13px;
}

.headerDiv{
  width: 100%;
  height: 57px;
}
.splitLine{
  width: 100%;
  height: 1px;
  z-index: 999;
  background: linear-gradient(90deg, rgba(57, 157, 228, 0.5) 0%, rgba(22, 104, 168, 0.4) 100%);
}
/deep/.el-table th.el-table__cell{
  background: rgba(0,0,0,0) !important;
}
/deep/.el-table tr{
  background: rgba(0,0,0,0) !important;
}
/deep/.el-table, .el-table__expanded-cell {
    background-color: rgba(0, 0, 0, 0);
}
/deep/ .el-table thead {
    color: white;
}
/deep/ .el-table__empty-text {
    color: white;
}
/deep/.el-checkbox__input.is-disabled .el-checkbox__inner {
    background-color: rgba(0, 0, 0, 0);
    border-color: white;
}
/deep/.el-table td.el-table__cell {
    border-bottom: 1px solid #1668A8 !important;
}
/deep/.el-table th.el-table__cell.is-leaf{
  border-bottom: 1px solid #1668A8 !important;
}
/deep/ .el-table--border::after, .el-table--group::after, .el-table::before {
  content: "";
  position: absolute;
  background-color:#1668A8 !important;
  z-index: 1;
}
/deep/.el-table--group::after{
  content: "";
  position: absolute;
  background-color:#1668A8 !important;
  z-index: 1;
}
/deep/.el-table::before{
  content: "";
  position: absolute;
  background-color:#1668A8 !important;
  z-index: 1;
}
/deep/thead.has-gutter {
    background: rgba(22,104,168,0.6);
}
/deep/.el-button--primary {
  background: linear-gradient(270deg, #068FB5 0%, #0876D0 100%) !important;
  border: none;
  width: 80px;
  height: 30px;
  text-align: center;
  padding: 0px;
  font-size: 16px;
}
.scopeBotton{
  display: flex;
  flex-flow: row;
  color: #21F7F7;
}
/deep/.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
    background-color: rgba(245,247,250,0.12);
}
.tableAction{
  &:first-child{
    padding-right:11px;
  }
}
/feDisplacementMap/.el-checkbox__inner{
  background-color: rgba(0, 0, 0, 0) !important;
}
</style>