<template>
    <div class="search_result_box">
      <div class="table-item-jf table-item-jf1 empty-table" v-if="total == 0 && !isSkeleton">
        <img class="item-jf-img" src="@/assets/images/kong.png" alt="">
        <div class="item-jf-titel">暂无相关数据</div>
        <div class="item-jf-text">抱歉，暂无数据，试试更换搜索条件吧</div>
      </div>
      <skeleton v-if="isSkeleton"></skeleton>
        <el-table :data="tableData" v-if="total>0" :header-cell-style="{ background:'#f0f3fa',color: 'rgba(35,35,35,0.8)'}" v-horizontal-scroll="'hover'"
                class="table-item1" border highlight-current-row>
                <el-table-column :resizable="false" type="index" label="序号" fixed width="60">
                <template slot-scope="scope">
                    <span>{{(pageNum - 1) *pageSize + scope.$index + 1}}</span>
                </template>
                </el-table-column>
                <el-table-column :resizable="false" label="表格名称" >
                <template slot-scope="scope">
                    {{scope.row.fileName||"--"}}
                </template>

                </el-table-column>
                <el-table-column :resizable="false" label="查询时间" width="189">
                <template slot-scope="scope">
                    {{scope.row.createTime||"--"}}
                </template>
                </el-table-column>


                <el-table-column :resizable="false" label="操作" width="154">
                <template slot-scope="scope">
                    <a class="download_span" :href="scope.row.url" v-if="scope.row.url">下载</a>
                    <span v-else >--</span>
                </template>
                </el-table-column>
            </el-table>
            <el-pagination background v-if="total>0" :current-page="pageNum" @current-change="handleCurrentChange" layout="prev, pager, next"
                :total="total">
            </el-pagination>
    </div>
</template>

<script>
import {list} from '@/api/supplier/assistant.js';
import skeleton from '@/views/project/projectList/component/skeleton';

export default {
  components:{skeleton},
    data(){
        return{
            tableData:[],
            total: 0,
            pageNum: 1,
            pageSize:10,
          isSkeleton:true,
        }
    },
    created(){
        this.getList()
    },
    methods:{
        handleCurrentChange(pageNum) {
            this.pageNum = pageNum;
            this.getList()
        },
        getList(){
          this.isSkeleton = true
            let params = {
                pageNum:this.pageNum,
                pageSize:this.pageSize,
            }
            list(params).then(res=>{
              this.isSkeleton = false
                if(res.code==200){
                    this.tableData = res.rows
                    this.total = res.total
                }
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.search_result_box{
    background: #ffffff;
    padding: 16px;
    .el-pagination{
        display: flex;
        justify-content: end;
        padding: 0;
        margin-right: -5px;
        margin-top: 16px;
    }
    .download_span{
        color: #0081FF;
        cursor: pointer;
    }

  .table-item-jf1 {
    padding: 0px 16px;
  }
  .table-item-jf1{
    .item-jf-img {
      display: block;
      margin: 24px auto;
      width: 108px;

    }
    .item-jf-text {
      font-size: 14px;
      font-weight: 400;
      color: #999999;
      line-height: 18px;
      padding-bottom: 48px;
      text-align: center;
    }
    .item-jf-titel {
      font-size: 16px;
      font-weight: 400;
      color: #333333;
      line-height: 21px;
      margin-bottom: 8px;
      text-align: center;
    }
  }
}

</style>
