<template>
  <div class="supplier">
      <template v-if="!showDetail">
          <div class="search-supplier">
              <div class="title_wrap">
              <div class="enterprise_title">
                  信用评价列表
              </div>
              </div>
          </div>
          <div class="table-supplier table-supplier2">
              <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="310" :resizable="false"></el-table-column>
                      <el-table-column label="所诉组织" prop="name1" :fixed="tableColumnFixed" width="310" :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="name5" :fixed="tableColumnFixed" :resizable="false"></el-table-column>
                      <el-table-column label="操作" width="90">
                          <template slot-scope="scope">
                              <span style="color: #0081FF;cursor: pointer;" @click="viewDetail(scope.row)">详情</span>
                          </template>
                      </el-table-column>
                  </el-table>
              </div>
              <div class="pagination clearfix" v-show="total>queryParams.pageSize">
                  <el-pagination background :page-size="queryParams.pageSize" :current-page.sync="queryParams.pageNum" @current-change="handleCurrentChange" layout="prev, pager, next"
                              :total="total">
                  </el-pagination>
              </div>
          </div>
      </template>
      <template v-else>
          <div class="detail-title">
              <div><span style="cursor: pointer;" @click="showDetail = false">信用评价列表</span><i class="el-icon-arrow-right"></i><span class="tip">详情</span></div>
              <div>
                  <img src="@/assets/images/enterprise.png" alt=""><strong>{{ detailInfo.name1 }}</strong>
              </div>
              <div>
                  <span>分供方所属组织：</span><span class="label">{{ detailInfo.name1 }}</span>
                  <span>评价品类：</span><span class="label">{{ detailInfo.name2 }}</span>
                  <span>评价周期：</span><span class="label">{{ detailInfo.name2 }}</span>
              </div>
          </div>
          <div class="table-supplier">
              <head-form-new title="" :form-data="formData2" :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="name2" :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="name1" :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="name6" :fixed="tableColumnFixed" :resizable="false"></el-table-column>
                  </el-table>
              </div>
              <div class="pagination clearfix" v-show="total>queryParams.pageSize">
                  <el-pagination background :page-size="queryParams.pageSize" :current-page.sync="queryParams.pageNum" @current-change="handleCurrentChange" layout="prev, pager, next"
                              :total="total">
                  </el-pagination>
              </div>
          </div>
      </template>
  </div>

</template>

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

  export default {
    name: 'ratinglist',
    mixins: [mixin],
    data(){
      return{
        detailInfo:{},
        showDetail:false,
        formData: [
          {
            type: 1, fieldName: 'businessTypes', value: '',width:80, 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:'分供方名称' },
        ],
        formData2: [
          {
            type: 1, fieldName: 'businessTypes', value: '',width:108, placeholder: '评价维度', uid: '', options: [
              {name:'现场配合',value:1},
              {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:'规则名称' },
        ],
        queryParams: {
          // customerId: this.companyId,
          // customerName: this.companyName,

          pageNum: 1,
          pageSize: 10,
        },
        total: 19,
        isSkeleton:false,
        tableData:[
          {name1:'莱晟达(烟台)环保材料科技有限公司',name2:'物资-水泥及水',name3:'--',name4:'--',name5:'供应商准入（集采）99',name6:'100',name7:'118',name8:'118',name9:'114'},
          {name1:'河南荣川实业有限公司',name2:'泥制品',name3:'100',name4:'--',name5:'供应商准入（集采）5',name6:'100',name7:'118',name8:'118',name9:'107'},
          {name1:'莱晟达(烟台)环保材料科技有限公司',name2:'物资-其他类',name3:'100',name4:'--',name5:'供应商准入（集采）19',name6:'100',name7:'109',name8:'109',name9:'107'},
          {name1:'北京九主澜商贸有限公司',name2:'物资-砼及外加剂',name3:'100',name4:'--',name5:'供应商准入（集采）1',name6:'100',name7:'105',name8:'109',name9:'107'},
          {name1:'重庆拉瑞永固混凝土有限公司',name2:'物资-木材及制品',name3:'--',name4:'--',name5:'供应商准入（集采）3',name6:'100',name7:'109',name8:'109',name9:'107'},
          {name1:'山东乾途伟业建材有限公司',name2:'物资-砼及外加剂',name3:'100',name4:'--',name5:'供应商准入（集采）',name6:'100',name7:'109',name8:'109',name9:'107'},
          {name1:'厦门市集美区鸿铭建材有限公司',name2:'物资-其他类',name3:'--',name4:'--',name5:'供应商准入（集采）1',name6:'100',name7:'109',name8:'109',name9:'107'},
          {name1:'重庆匠伦家居用品有限公司',name2:'物资-砼及外加剂',name3:'106',name4:'--',name5:'供应商准入（集采）7',name6:'100',name7:'109',name8:'109',name9:'107'},
          {name1:'荆门市飞图混凝土有限公司',name2:'物资-木材及制币',name3:'--',name4:'--',name5:'供应商准入（集采）',name6:'100',name7:'109',name8:'109',name9:'107'},
          {name1:'重庆满煦商贸有限公司',name2:'物资-砼及外加剂',name3:'106',name4:'--',name5:'供应商准入（集采）',name6:'100',name7:'109',name8:'109',name9:'114'},
          {name1:'莱晟达(烟台)环保材料科技有限公司',name2:'物资-水泥及水',name3:'--',name4:'--',name5:'供应商准入（集采）99',name6:'100',name7:'118',name8:'118',name9:'114'},
          {name1:'河南荣川实业有限公司',name2:'泥制品',name3:'100',name4:'--',name5:'供应商准入（集采）5',name6:'100',name7:'118',name8:'118',name9:'107'},
          {name1:'莱晟达(烟台)环保材料科技有限公司',name2:'物资-其他类',name3:'100',name4:'--',name5:'供应商准入（集采）19',name6:'100',name7:'109',name8:'109',name9:'107'},
          {name1:'北京九主澜商贸有限公司',name2:'物资-砼及外加剂',name3:'100',name4:'--',name5:'供应商准入（集采）1',name6:'100',name7:'105',name8:'109',name9:'107'},
          {name1:'重庆拉瑞永固混凝土有限公司',name2:'物资-木材及制品',name3:'--',name4:'--',name5:'供应商准入（集采）3',name6:'100',name7:'109',name8:'109',name9:'107'},
          {name1:'山东乾途伟业建材有限公司',name2:'物资-砼及外加剂',name3:'100',name4:'--',name5:'供应商准入（集采）',name6:'100',name7:'109',name8:'109',name9:'107'},
          {name1:'厦门市集美区鸿铭建材有限公司',name2:'物资-其他类',name3:'--',name4:'--',name5:'供应商准入（集采）1',name6:'100',name7:'109',name8:'109',name9:'107'},
          {name1:'重庆匠伦家居用品有限公司',name2:'物资-砼及外加剂',name3:'106',name4:'--',name5:'供应商准入（集采）7',name6:'100',name7:'109',name8:'109',name9:'107'},
          {name1:'荆门市飞图混凝土有限公司',name2:'物资-木材及制币',name3:'--',name4:'--',name5:'供应商准入（集采）',name6:'100',name7:'109',name8:'109',name9:'107'},
        ],
        tableColumnFixed:false,
      }
    },
    methods:{
      viewDetail(obj){
          this.detailInfo = obj
          this.showDetail = true
      },
      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";
      },
      handleCurrentChange(){

      }
    }
  }
</script>

<style lang="scss" scoped>
  .title_wrap{
      border: none;
  }
  .detail-title{
      height: 130px;
      border-radius: 4px 4px 0px 0px;
      opacity: 1;
      /* 自动布局 */
      display: flex;
      flex-direction: column;
      padding: 16px;
      gap: 16px;
      background: #FFFFFF;
      box-sizing: border-box;
      /* 分割线 */
      border: 1px solid #EEEEEE;
      font-size: 14px;
      color: rgba(35, 35, 35, 0.4);
      .el-icon-arrow-right{
          font-size: 12px;
          margin: 4px;
      }
      .tip{
          font-size: 12px;
          color: rgba(35, 35, 35, 1);
      }
      img{
          width: 28px;
          height: 28px;
          border-radius: 6px;
          margin-right: 12px;
      }
      strong{
          font-size: 16px;
          color: rgba(35, 35, 35, 1);
          font-weight: 700;
      }
      .label{
          color: rgba(35, 35, 35, 0.8);
          margin-right: 24px;
      }
    }
  .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";
  }
  .table-supplier2{
      padding-top: 0;
      margin-top: 0;
  }
</style>
