<template>
  <!--供应商处置-->
  <div class="supplier">
    <div class="search-supplier">
      <div class="title_wrap i">
        <div class="enterprise_title">
          供应商处置
        </div>
      </div>
    </div>
    <div class="table-supplier i">
      <div class="table-item-jf table-item-jf1 empty-table" v-if="!tableData.length && !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>

      <div class="table-item-jf table-item" v-if="!isSkeleton&&tableData.length>0">
        <el-table :data="tableData" :header-cell-style="{ background:'#f0f3fa',color: 'rgba(35,35,35,0.8)'}"
                  v-sticky-header.always="{offsetTop : '-16px',offsetBottom : '10px'}" class="table-item1 fixed-table" border highlight-current-row
                  :header-row-class-name="setHeaderRow" :cell-class-name="setCellClass" :row-class-name="setRowClass" :header-cell-class-name="setCellClass"
                  ref="theOwnerListTable">

          <el-table-column type="index" label="序号" width="60" :fixed="tableColumnFixed" :resizable="false">
            <template slot-scope="scope">
              <span>{{(pageNum - 1) *pageSize + scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column label="使用项目" width="350" :fixed="tableColumnFixed" prop="name1" :resizable="false">
          </el-table-column>
          <el-table-column label="使用单位" :min-width="260" :resizable="false">
            <template slot-scope="scope">
              {{scope.row.name2||"--"}}
            </template>
          </el-table-column>
          <el-table-column label="公司名称" :min-width="300" :resizable="false">
            <template slot-scope="scope">
              {{scope.row.name3||"--"}}
            </template>
          </el-table-column>
          <el-table-column label="处置时间" :min-width="180" :resizable="false">
            <template slot-scope="scope">
              {{scope.row.name4||"--"}}
            </template>
          </el-table-column>
          <el-table-column label="年度" min-width="120" :resizable="false">
            <template slot-scope="scope">
              {{scope.row.name5||"--"}}
            </template>
          </el-table-column>
          <el-table-column label="处置前状态" :min-width="200" :resizable="false">
            <template slot-scope="scope">
              {{scope.row.name6||"--"}}
            </template>
          </el-table-column>
          <el-table-column label="处置后状态" :min-width="200" :resizable="false">
            <template slot-scope="scope">
              {{scope.row.name7||"--"}}
            </template>
          </el-table-column>
          <el-table-column label="处置前等级" :min-width="200" :resizable="false">
            <template slot-scope="scope">
              {{scope.row.name8||"--"}}
            </template>
          </el-table-column>
          <el-table-column label="处置后等级" :min-width="200" :resizable="false">
            <template slot-scope="scope">
              {{scope.row.name9||"--"}}
            </template>
          </el-table-column>
          <el-table-column label="预警原因" :min-width="200" :resizable="false">
            <template slot-scope="scope">
              {{scope.row.name10||"--"}}
            </template>
          </el-table-column>
          <el-table-column label="不合格原因" :min-width="200" :resizable="false">
            <template slot-scope="scope">
              {{scope.row.name11||"--"}}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination clearfix" v-show="total>pageSize">
        <el-pagination background :page-size="pageSize" :current-page.sync="pageNum" @current-change="handleCurrentChange" layout="prev, pager, next"
                       :total="total">
        </el-pagination>
      </div>
    </div>
  </div>

</template>

<script>
  import { encodeStr } from "@/assets/js/common.js";
  import "@/assets/styles/public.scss";
  import "@/assets/styles/supplierlist.scss";
  import skeleton from '@/views/project/projectList/component/skeleton';
  export default {
    name: 'disposal',
    components:{skeleton},
    data(){
      return{
        encodeStr,
        tableData:[
          {name1:'河南水投分布式光伏项目（一期）工程EPC总承包',name2:'中建一局集团第二建筑有限公司',name3:'剧场及配套办公等2项（北京市文化中心）',name4:'2023年11月25日',name5:'2023',name6:'-',name7:'涉诉禁用',name8:'A',name9:'B',name10:'-',name11:'-'},
          {name1:'河南水投分布式光伏项目（一期）工程EPC总承包',name2:'中建一局集团第二建筑有限公司',name3:'剧场及配套办公等2项（北京市文化中心）',name4:'-',name5:'-',name6:'-',name7:'-',name8:'-',name9:'-',name10:'-',name11:'-'}
        ],
        isSkeleton:false,
        total:2,
        pageSize:50,
        pageNum:1,
        // table列是否悬浮
        tableColumnFixed: true,
      }
    },
    methods: {
      handleCurrentChange() {

      },
      setHeaderRow() {
        return "owner-table-list-header";
      },
      setCellClass({ row, column, rowIndex, columnIndex }) {
        if (columnIndex == 1) {
          return "enterprise-name-column";
        }
      },
      setRowClass({ row, rowIndex }) {
        return "enterprise-name-row";
      },
    }
  }
</script>

<style scoped>

</style>
