<template>
  <div class="supplier">
    <div class="search-supplier">
      <div class="title_wrap">
        <div class="enterprise_title">
          供应商评价列表
        </div>
      </div>
      <div class="evalist">
        <div>
          <div class="eva1"><img src="@/assets/images/evaluate_1.png">考核供应商数</div>
          <div class="eva2"><span>330</span>个</div>
        </div>
        <div>
          <div class="eva1"><img src="@/assets/images/evaluate_2.png">物资供应商数</div>
          <div class="eva2"><span>330</span>个</div>
        </div>
        <div>
          <div class="eva1"><img src="@/assets/images/evaluate_3.png">劳务分包供应商</div>
          <div class="eva2"><span>27</span>个</div>
        </div>
        <div>
          <div class="eva1"><img src="@/assets/images/evaluate_4.png">专业分包供应商</div>
          <div class="eva2"><span>102</span>个</div>
        </div>
        <div>
          <div class="eva1"><img src="@/assets/images/evaluate_5.png">设备供应商</div>
          <div class="eva2"><span>5</span>个</div>
        </div>
        <div>
          <div class="eva1"><img src="@/assets/images/evaluate_6.png">履约预警供应商</div>
          <div class="eva2"><span>0</span>个</div>
        </div>
        <div>
          <div class="eva1"><img src="@/assets/images/evaluate_7.png">信用预警供应商</div>
          <div class="eva2"><span>0</span>个</div>
        </div>
      </div>
    </div>
    <div class="table-supplier">
      <head-form-new title="" :form-data="formData" :query-params="queryParams" :total="0" :isExcel="false"
                     @handle-search="handleSearch" ref="searchFormNew" @handle-excel="handleExcel" />
      <el-divider class="supdivider"></el-divider>
      <div class="total-title">
        <div class="totals">共{{total}}条</div>
        <p class="total-dc" @click="customerExport">
          <img src="@/assets/images/EXCEL.png" alt="">
          <span class="excel">导出EXCEL</span>
        </p>
      </div>
      <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>

      <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 : '-15px'}" 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="序号" :fixed="tableColumnFixed" width="60" :resizable="false">
            <template slot-scope="scope">
              <span>{{(queryParams.pageNum - 1) *queryParams.pageSize + scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column label="供应商名称" prop="name1" :fixed="tableColumnFixed" width="250" :resizable="false"></el-table-column>
          <el-table-column label="品类" prop="name2" :fixed="tableColumnFixed" :resizable="false"></el-table-column>
          <el-table-column label="上年度履约得分" prop="name3" :fixed="tableColumnFixed" :resizable="false"></el-table-column>
          <el-table-column label="上年度评级情况" prop="name4" :fixed="tableColumnFixed" :resizable="false"></el-table-column>
          <el-table-column label="履约金额" prop="name5" :fixed="tableColumnFixed" :resizable="false"></el-table-column>
          <el-table-column label="当前信用分" prop="name6" :fixed="tableColumnFixed" :resizable="false"></el-table-column>
          <el-table-column label="算数平均得分" prop="name7" :fixed="tableColumnFixed" :resizable="false"></el-table-column>
          <el-table-column label="履约加权得分" prop="name8" :fixed="tableColumnFixed" :resizable="false"></el-table-column>
          <el-table-column label="综合得分" prop="name9" :fixed="tableColumnFixed" :resizable="false"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>

</template>

<script>
  import '@/assets/styles/public.scss'
  import '@/assets/styles/supplierlist.scss'
  import DialogHeadFormNew from '@/views/detail/party-a/component/HeadFormNew'
  import mixin from '@/views/detail/party-a/mixins/mixin'

  export default {
    name: 'ratinglist',
    mixins: [mixin],
    components:{DialogHeadFormNew},
    data(){
      return{
        formData: [
          {
            type: 1, fieldName: 'businessTypes', value: '', placeholder: '品类', uid: '', options: [
              {name:'品类',value:1},
              {name:'物资',value:2},
              {name:'设备',value:3},
              {name:'劳务分包',value:4},
              {name:'专业分包',value:5},
              {name:'专业服务',value:6},
              {name:'租赁',value:7},
            ],
          },
          { type: 5, fieldName: 'causeAction', value: '', placeholder: '评价周期',timeList: ['近一周', '近半月', '近一月', '自定义'],uid: '' },
          { type: 3, fieldName: 'advisoryBodyName', value: '', placeholder: '项目名称关键字', uid: '',isword:'项目名称关键字',},
          { type: 3, fieldName: 'advisoryBodyName', value: '', placeholder: '分供方名称', uid: '',isword:'分供方名称' },
        ],
        queryParams: {
          // customerId: this.companyId,
          // customerName: this.companyName,

          pageNum: 1,
          pageSize: 50,
        },
        total: 19,
        isSkeleton:false,
        tableData:[
          {name1:'莱晟达(烟台)环保材料科技有限公司',name2:'物资-水泥及水',name3:'--',name4:'--',name5:'4297031.99',name6:'100',name7:'118',name8:'118',name9:'114'},
          {name1:'河南荣川实业有限公司',name2:'泥制品',name3:'100',name4:'--',name5:'363515.35',name6:'100',name7:'118',name8:'118',name9:'107'},
          {name1:'莱晟达(烟台)环保材料科技有限公司',name2:'物资-其他类',name3:'100',name4:'--',name5:'6317465.19',name6:'100',name7:'109',name8:'109',name9:'107'},
          {name1:'北京九主澜商贸有限公司',name2:'物资-砼及外加剂',name3:'100',name4:'--',name5:'1969555.1',name6:'100',name7:'105',name8:'109',name9:'107'},
          {name1:'重庆拉瑞永固混凝土有限公司',name2:'物资-木材及制品',name3:'--',name4:'--',name5:'948239.73',name6:'100',name7:'109',name8:'109',name9:'107'},
          {name1:'山东乾途伟业建材有限公司',name2:'物资-砼及外加剂',name3:'100',name4:'--',name5:'941892.3',name6:'100',name7:'109',name8:'109',name9:'107'},
          {name1:'厦门市集美区鸿铭建材有限公司',name2:'物资-其他类',name3:'--',name4:'--',name5:'358583.61',name6:'100',name7:'109',name8:'109',name9:'107'},
          {name1:'重庆匠伦家居用品有限公司',name2:'物资-砼及外加剂',name3:'106',name4:'--',name5:'217844.57',name6:'100',name7:'109',name8:'109',name9:'107'},
          {name1:'荆门市飞图混凝土有限公司',name2:'物资-木材及制币',name3:'--',name4:'--',name5:'78707.09',name6:'100',name7:'109',name8:'109',name9:'107'},
          {name1:'重庆满煦商贸有限公司',name2:'物资-砼及外加剂',name3:'106',name4:'--',name5:'65403.78',name6:'100',name7:'109',name8:'109',name9:'114'},
          {name1:'莱晟达(烟台)环保材料科技有限公司',name2:'物资-水泥及水',name3:'--',name4:'--',name5:'4297031.99',name6:'100',name7:'118',name8:'118',name9:'114'},
          {name1:'河南荣川实业有限公司',name2:'泥制品',name3:'100',name4:'--',name5:'363515.35',name6:'100',name7:'118',name8:'118',name9:'107'},
          {name1:'莱晟达(烟台)环保材料科技有限公司',name2:'物资-其他类',name3:'100',name4:'--',name5:'6317465.19',name6:'100',name7:'109',name8:'109',name9:'107'},
          {name1:'北京九主澜商贸有限公司',name2:'物资-砼及外加剂',name3:'100',name4:'--',name5:'1969555.1',name6:'100',name7:'105',name8:'109',name9:'107'},
          {name1:'重庆拉瑞永固混凝土有限公司',name2:'物资-木材及制品',name3:'--',name4:'--',name5:'948239.73',name6:'100',name7:'109',name8:'109',name9:'107'},
          {name1:'山东乾途伟业建材有限公司',name2:'物资-砼及外加剂',name3:'100',name4:'--',name5:'941892.3',name6:'100',name7:'109',name8:'109',name9:'107'},
          {name1:'厦门市集美区鸿铭建材有限公司',name2:'物资-其他类',name3:'--',name4:'--',name5:'358583.61',name6:'100',name7:'109',name8:'109',name9:'107'},
          {name1:'重庆匠伦家居用品有限公司',name2:'物资-砼及外加剂',name3:'106',name4:'--',name5:'217844.57',name6:'100',name7:'109',name8:'109',name9:'107'},
          {name1:'荆门市飞图混凝土有限公司',name2:'物资-木材及制币',name3:'--',name4:'--',name5:'78707.09',name6:'100',name7:'109',name8:'109',name9:'107'},
        ],
        tableColumnFixed:false,
      }
    },
    methods:{
      handleSearch(){},
      handleExcel() {

      },
      customerExport(){

      },
      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 lang="scss" scoped>

  .table-supplier {
    background: #ffffff;
    border-radius: 4px;
    padding: 16px;
  .supdivider{
    width: calc(100% + 32px);
    margin-left: -16px;
    margin-top: 8px;
    margin-bottom: 16px;
  }
    ::v-deep .head-form-new {
      .ability-total {
        display: none !important;
      }
      .from-item .normal-search-container{
        white-space: nowrap;
        width: 134px;
      }

    }
    input {
      border: 1px solid #efefef;
    }

    ::v-deep .el-form-item {
      margin-right: 8px !important;
    }

    .query-box {
      margin: 10px 0 20px;
    }

    .cell-span {
      display: inline-block;
      position: relative;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      cursor: pointer;

      > span {
        display: inline-block;
        width: 37px;
        position: absolute;
        right: 0;
        bottom: 0;
        background-color: #fff;
        z-index: 1;
      }
    }

    @import "@/assets/styles/search-common.scss";

  }
</style>
