<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="name5" :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="name5" :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:'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:{
        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>
