<template>
    <div class="supplier">
      <div class="search-supplier">
        <div class="title_wrap">
          <div class="enterprise_title">
            供应商劳务挂靠风险
          </div>
        </div>
      </div>
      <div class="table-supplier table-supplier2">
        <!--<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)'}"  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" :row-key="'customerKey'">

            <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="劳务队长名称" :fixed="tableColumnFixed" width="120" :resizable="false">
              <template slot-scope="scope">
                <span v-html="scope.row.leaderName||'--'"></span>
              </template>
            </el-table-column>
            <el-table-column label="身份证号" :fixed="tableColumnFixed" min-width="150" :resizable="false">
              <template slot-scope="scope">
                {{scope.row.laborCaptainIdCard||"--"}}
              </template>
            </el-table-column>

            <el-table-column label="联系电话" min-width="120">
              <template slot-scope="scope">
                {{scope.row.laborCaptainPhone||"--"}}
              </template>
            </el-table-column>
            <el-table-column label="挂靠单位" min-width="280" :resizable="false">
              <template slot-scope="scope">
                <router-link v-if="scope.row.customerCid" :to="`/enterprise/${encodeStr(scope.row.customerCid)}?companyName=${scope.row.customerName}`" tag="a"
                             class="wordprimary" v-html="scope.row.customerName"></router-link>
                <span v-else v-html="scope.row.customerName"></span>
              </template>
            </el-table-column>
            <el-table-column label="不良事由" min-width="120" :resizable="false">
              <template slot-scope="scope">
                {{scope.row.badReason||"--"}}
              </template>
            </el-table-column>
            <el-table-column label="不良行为情形" min-width="280" :resizable="false">
              <template slot-scope="scope">
                {{scope.row.badBehaviorSituation||"--"}}
              </template>
            </el-table-column>
            <el-table-column label="添加人" min-width="120" :resizable="false">
              <template slot-scope="scope">
                {{scope.row.dataSource === 0 ?'自主添加':'系统添加'}}
              </template>
            </el-table-column>
            <el-table-column label="发生日期" min-width="160" :resizable="false">
              <template slot-scope="scope">
                {{scope.row.createTime||"--"}}
              </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>
    </div>

  </template>

  <script>
    import '@/assets/styles/public.scss'
    import '@/assets/styles/supplierlist.scss'
    import mixin from '@/views/detail/party-a/mixins/mixin'
    import InfoTable from '../component/infoTable';
    import {queryRiskList} from '@/api/supplier/supplier';
    export default {
      name: 'ratinglist',
      components: {InfoTable},
      props: ['companyId', 'companyInfo'],
      mixins: [mixin],
      data(){
        return{
          detailInfo:{},
          queryParams: {
            customerCid: this.companyId,
            pageNum: 1,
            pageSize: 10,
          },
          total: 0,
          isSkeleton:false,
          tableData:[],
          tableColumnFixed:false,
        }
      },
      created() {
        this.handleSearch()
      },
      methods:{
        handleSearch(){
          queryRiskList(this.queryParams).then(res=>{
            this.isSkeleton = false
            if(res.code == 200) {
              this.total = res.total
              this.tableData = res.rows
              this.queryParams.pageNum = res.currentPage
            }else{
              this.total = 0
              this.tableData = []
              this.queryParams.pageNum = 1
            }
          })
        },
        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(val){
          this.queryParams.pageNum = val;
          this.handleSearch();
        }
      }
    }
  </script>

  <style lang="scss" scoped>
  .infoTable-container{
    margin-bottom: 16px;
  }
    ::v-deep .el-form-item__label{
      min-height: 40px!important;
    }
    .title_wrap{
        border: none;
    }
    .title_wrap1{
      padding: 0;
    }
    .detail-title{
        border-radius: 4px 4px 0px 0px;
        opacity: 1;
        /* 自动布局 */
        display: flex;
        flex-direction: column;
        padding: 16px;
        gap: 16px;
        background: #FFFFFF;
        box-sizing: border-box;
        /* 分割线 */
        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>
