<template>
  <div  class="contain">
    <div class="ls-search-form">
        <el-row  :gutter="20" class="search-style">
          <el-col :span="5">
            <label >资质文件</label>
            <el-input v-model="queryParam.date"  @keyup.enter.native="doQuery"
                 size="mini"     placeholder="请输入" />
          </el-col>
          <el-col :span="5">
            <label >类型</label>
            <el-select v-model="queryParam.date"
                placeholder="请选择" filterable clearable size="mini">
               <el-option
                 v-for="(item, i) in starList"
                 :key="i"
                 :label="item.label"
                 :value="item.value">
               </el-option>
             </el-select>
          </el-col>
          <el-col :span="5">
            <label >状态</label>
            <el-select v-model="queryParam.date"
                placeholder="请选择" filterable clearable size="mini">
               <el-option
                 v-for="(item, i) in starList"
                 :key="i"
                 :label="item.label"
                 :value="item.value">
               </el-option>
             </el-select>
          </el-col>
          <el-col :span="6">
           <label >上传/更新时间</label>
           <el-date-picker
                 v-model="queryParam.date"
                 type="daterange"
                 clearable  size="mini"
                 format="yyyy-MM-dd"
                 value-format="yyyy-MM-dd"
                 style="margin: 0 15px;"
                 range-separator="至"
                 start-placeholder="起始时间"
                 end-placeholder="终止时间">
           </el-date-picker>
          </el-col>

        </el-row>

    </div>
    <div class="table-wrap" >
      <el-table :data="tableData" ref="tableRef"
          highlight-current-row  height="100%"
          size="mini" stripe border >

        <el-table-column type="selection"  width="50"  >
        </el-table-column>
        <el-table-column type="index" label="序号" width="50"  show-overflow-tooltip>
          <template  slot-scope="scope">
            {{ (pager.currPage - 1) * pager.pageSize + scope.$index+1 }}
          </template>
        </el-table-column>

        <el-table-column  v-for="(item, index) in colunms" :key="index"
            :prop="item.prop"
            :label="item.label"
            :fixed="item.fixed"
            :formatter="formatter"
            :min-width="item.width"
            :show-overflow-tooltip="item.tooltip"
            >
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页-->
    <ls-pagination 
      :curr-page.sync="pager.currPage"  
      :page-size.sync="pager.pageSize"
      :total="pager.total"  
      :page-options="pager.pageOptions"
      @query="doQuery">
    </ls-pagination>

  </div>
</template>

<script>

  export default{
    name: 'document-tab',
    created(){
    },
    methods:{
      doQuery(current){
        if ( typeof current != 'undefined') {
           this.pager.currPage = current;
        }
        let param = {
          currPage: this.pager.currPage,
          pageSize: this.pager.pageSize,
        };

        this.$ajax.post({
          domain: '',
          url: '',
          data: JSON.stringify(param),
          requestType: 'body',
          showLoad: true,
          success: function (res) {
            if (res.errorCode === 200) {
                this.tableData = res.data.records || [];
                this.pager.total = res.data.total;
            }
          }.bind(this),
          error: function (res) {
            this.$message({
              type: 'error',
              message: res.body.msg || res.msg
            })
          }.bind(this)
        })

      },


      formatter(row, column, cellValue, index){

         return cellValue;

      },

    },
    data(){
      return{
        tableData: [],
        starList: [],
        queryParam: {

        },
        //分页参数
        pager: {
          currPage: 1,
          pageSize: 10,
          pageOptions: [10, 20, 30],
          total: 0
        },

        colunms: [//表格列
          { prop: '', label: '附件名称', width: 100, fixed: false, tooltip: true},
          { prop: '', label: '附件格式', width: 100, fixed: false, tooltip: true},
          { prop: '', label: '文件大小', width: 100, fixed: false, tooltip: true},
          { prop: '', label: '上传时间', width: 100, fixed: false, tooltip: true},
          { prop: '', label: '上传人员', width: 100, fixed: false, tooltip: true},
          { prop: '', label: '备注', width: 150, fixed: false, tooltip: true},

        ],


      }
    }
  }
</script>

<style scoped lang="scss">
  .contain {
    .ls-search-form {
      border-top: none;
      padding: 0;
      .el-col  .btn{
        flex: 1;
        display: flex;
        justify-content: flex-end;
      }

    }
  }
</style>
