<template>

  <div>
    <el-card class="box-card noborder">
      <div class="cardtitles">资料文档</div>
      <div class="searchbtns">
        <div class="searchInput">
          <el-input type="text" placeholder="输入关键词查询"></el-input>
          <div class="btn">搜索</div>
        </div>
        <div class="btn btn_primary h32 b2" @click="isupload=true"><div class="img img2"></div>上传</div>
      </div>
      <div class="uploadbox" v-if="isupload">
        <div>
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList">
            <div class="wj wj1"></div>上传文件
          </el-upload>
        </div>
        <div>
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-remove="fileRemove"
            :on-change="fileChang"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            ref="uploadFile"
            :file-list="fileList">
          <div class="wj wj2"></div>上传文件夹
          </el-upload>
        </div>
      </div>
      <div class="document">
        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <template slot="empty">
            <div class="empty">
              <img src="@/assets/images/project/empty.png">
              <div class="p1">暂无数据展示</div>
              <div class="p2">抱歉，你还未添加相关数据，快去添加吧</div>
              <div class="btn btn_primary h36 w102" @click="opennew">新增联系人</div>
            </div>
          </template>
          <el-table-column
            prop="date"
            label="文件名称"
            >
            <template slot-scope="scope">
              <div>
                <img class="img" src="@/assets/images/folder.png">
                <!--<img class="img" src="@/assets/images/word.png">-->
                <!--<img class="img" src="@/assets/images/pdf.png">-->
                <!--<img class="img" src="@/assets/images/excel_1.png">-->
                <span>集团投标常用资料</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="创建人"
            >
          </el-table-column>
          <el-table-column
            prop="name"
            label="更新时间"
            sortable
            width="">
          </el-table-column>
          <el-table-column
            prop=""
            label=""
            align="right"
            width="">
            <template slot-scope="scope">
              <div class="hoverbtn">
              <div class="xz">下载</div>
              <div class="sc">删除</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="tables">
          <div class="bottems">
            <el-pagination
              background
              :page-size="20"
              :current-page="1"
              @current-change="handleCurrentChange"
              layout="prev, pager, next"
              :total="1000">
            </el-pagination>
          </div>
        </div>
      </div>
      <el-dialog
        class="popups"
        :visible.sync="dialogVisible"
        width="464px">
        <div class="poptitle">
          <img src="@/assets/images/economies/icon.png">
          <span>重庆市轨道交通3号线二期工程4标段施工总承包</span>
        </div>
        <div class="popform">
          <div class="row">
            <span class="left">联系人姓名：</span>
            <el-input type="text" placeholder="请输入"></el-input>
          </div>
          <div class="row">
            <span class="left">联系人角色：</span>
            <el-select  placeholder="请选择">
              <el-option label="cccc" value="11"></el-option>
              <el-option label="cccc" value="121"></el-option>
            </el-select>
          </div>
          <div class="row">
            <span class="left">联系人职位：</span>
            <el-input type="text" placeholder="请输入"></el-input>
          </div>
          <div class="row">
            <span class="left">联系人公司/机关：</span>
            <el-input type="text" placeholder="请输入"></el-input>
          </div>
          <div class="row">
            <span class="left">内部维护人：</span>
            <el-input type="text" placeholder="请输入"></el-input>
          </div>
          <div class="row">
            <span class="left">联系方式：</span>
            <el-input type="text" placeholder="请输入"></el-input>
          </div>
          <div class="popbot">
            <div class="btn btn_cancel h32" @click="cancel">返回</div>
            <div class="btn btn_primary h32">保存</div>
          </div>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
  import "@/assets/styles/project.scss"
  export default {
    name: 'zlwd',
    data(){
      return{
        isupload:false,
        dialogVisible:false,
        textarea:"",
        nowedit:-1,//当前正在编辑的文本
        tipslit:[],//项目标签
        tipsvalue:"",//标签填写内容
        tableData: [
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }
        ],
        fileList:[],//上传的文件
      }
    },
    mounted(){
      this.$refs.uploadFile.$children[0].$refs.input.webkitdirectory = true;
    },
    methods:{
      //上传文件夹
      fileChang(file, fileList, name) {
        this.form.instFilePics = fileList;
      },
      fileRemove(file, fileList, name) {
        this.form.instFilePics = fileList
      },


      //翻页
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      cancel(){
        this.dialogVisible = false
      },
      //打开新建窗口
      opennew(){
        this.dialogVisible = true
      },
    }
  }
</script>

<style lang="scss" scoped>
  .w102{
    width: 102px;
  }

  .img.img2{
    margin-right: 4px;
    transform: rotateX(180deg);
    background: url('../../../../../src/assets/images/import.png')no-repeat center center;
  }
  .box-card{
    position: relative;
  }
  .uploadbox{
    position: absolute;
    width: 124px;
    height: 73px;
    background: #FFFFFF;
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.08);
    border-radius: 2px;
    border: 1px solid #F0F0F0;
    right: 16px;
    top: 53px;
    z-index: 2;
    >div{
      line-height: 35px;
      height: 36px;
      color: rgba(35, 35, 35, 0.80);
      font-size: 14px;
      .wj{
        float: left;
        margin: 10px 4px 10px 16px;
        width: 16px;
        height: 16px;
        &.wj1{
          background: url("../../../../assets/images/project/wj_1.png") top center;
          background-size: 100%;
        }
        &.wj2{
          background: url("../../../../assets/images/project/wj_3.png") top center;
          background-size: 100%;
        }
      }
      &:hover{
        color: #0081FF;
        background: #F4F6F9;
        .wj1{
          background: url("../../../../assets/images/project/wj_2.png") top center;
          background-size: 100%;
        }
        .wj2{
          background: url("../../../../assets/images/project/wj_4.png") top center;
          background-size: 100%;
        }
      }
    }
  }
</style>
