<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">
                <!--<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="判定组织" 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="不良禁用范围" prop="name1" :fixed="tableColumnFixed" :resizable="false"></el-table-column>
                        <el-table-column label="解除状态" prop="name66" :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="name6" :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 class="search-supplier">
                  <div class="title_wrap title_wrap1">
                    <div class="enterprise_title">
                        不良行为状态
                    </div>
                  </div>
                </div>
                <info-table class="info-tab"  :list="defaultList" :obj="detailInfo" :labelWidth="140"></info-table>
                <div class="search-supplier">
                  <div class="title_wrap title_wrap1">
                    <div class="enterprise_title">
                      不良行为判定信息
                    </div>
                  </div>
                </div>
                <info-table class="info-tab"  :list="defaultList1" :obj="detailInfo" :labelWidth="140"></info-table>
            </div>

        </template>
    </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';

    export default {
      name: 'ratinglist',
      components: {InfoTable},
      mixins: [mixin],
      data(){
        return{
          detailInfo:{},
          showDetail:false,
          formData: [
            {
              type: 1, fieldName: 'businessTypes', value: '',width:108, 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: 3, fieldName: 'advisoryBodyName', value: '', placeholder: '分供方名称', uid: '',isword:'分供方名称' },
          ],
          defaultList: [
            { name: '分供方', prop: 'name1' },
            { name: '分供方编号', prop: 'name7' },
            { name: '判定分类', prop: 'name9' },
            { name: '判定组织', prop: 'name1' },
            { name: '不良类型', prop: 'name2' },
            { name: '判定人', prop: 'name4' },
            { name: '判定状态', prop: 'name5' },
            { name: '生效时间', prop: 'name6' },
            { name: '解除状态', prop: 'name66' },
            { name: '申请时间', prop: 'name6' },
          ],
          defaultList1: [
            { name: '判定组织', prop: 'name1' },
            { name: '判定分类', prop: 'name9' },
            { name: '判定人', prop: 'name4' },
            { name: '创建时间', prop: 'name6' },
            { name: '生效时间', prop: 'name6' },
            { name: '不良类型', prop: 'name2' },
            { name: '不良行为有效期', prop: 'name5' ,style: true},
            { name: '不良行为', prop: 'name3',style: true },
            { name: '诉讼说明', prop: 'name81',style: true },
            { name: '依据/原因', prop: 'name81',style: true },
          ],
          queryParams: {
            // customerId: this.companyId,
            // customerName: this.companyName,

            pageNum: 1,
            pageSize: 10,
          },
          total: 19,
          isSkeleton:false,
          tableData:[
            {name1:'莱晟达(烟台)环保材料科技有限公司',name2:'不良行为',name3:'其他不履行合同义务造成发包方严重损失的行为',name4:'郑丽青',name5:'长期99',name6:'2022-05-13',name66:'已解除',name7:'118',name8:'118',name81:'经查该劳务分包单位于2021年1月至2022年3月期间，多达十余次放任大量工人恶意讨薪，围堵市政府、劳动局、业主售楼部，且不妥善处理工人工伤造成仲裁，部分班组在我司已支付工程款情况下仍恶意拖欠工人工资，对我司社会形象造成恶劣影响，且存在政府部门及业主单位处罚风险。',name9:'劳务分包类'},
            {name1:'河南荣川实业有限公司',name2:'恶意行为',name3:'未履行分包合同的责任和义务',name4:'郑青',name5:'长期5',name6:'2022-01-23',name66:'已解除',name7:'118',name8:'118',name81:'经查该劳务分包单位于2021年1月至2022年3月期间，多达十余次放任大量工人恶意讨薪，围堵市政府、劳动局、业主售楼部，且不妥善处理工人工伤造成仲裁，部分班组在我司已支付工程款情况下仍恶意拖欠工人工资，对我司社会形象造成恶劣影响，且存在政府部门及业主单位处罚风险。',name9:'专业分包'},
            {name1:'莱晟达(烟台)环保材料科技有限公司',name2:'不良行为',name3:'未履行分包合同的责任和义务',name4:'郑丽',name5:'长期19',name6:'2022-05-23',name66:'已解除',name7:'109',name8:'109',name81:'经查该劳务分包单位于2021年1月至2022年3月期间，多达十余次放任大量工人恶意讨薪，围堵市政府、劳动局、业主售楼部，且不妥善处理工人工伤造成仲裁，部分班组在我司已支付工程款情况下仍恶意拖欠工人工资，对我司社会形象造成恶劣影响，且存在政府部门及业主单位处罚风险。',name9:'专业分包'},
            {name1:'北京九主澜商贸有限公司',name2:'恶意行为',name3:'未履行分包合同的责任和义务',name4:'郑丽青',name5:'长期1',name6:'2022-01-23',name66:'已解除',name7:'105',name8:'109',name81:'经查该劳务分包单位于2021年1月至2022年3月期间，多达十余次放任大量工人恶意讨薪，围堵市政府、劳动局、业主售楼部，且不妥善处理工人工伤造成仲裁，部分班组在我司已支付工程款情况下仍恶意拖欠工人工资，对我司社会形象造成恶劣影响，且存在政府部门及业主单位处罚风险。',name9:'专业分包'},
            {name1:'重庆拉瑞永固混凝土有限公司',name2:'不良行为',name3:'其他不履行合同义务造成发包方严重损失的行为',name4:'郑丽青',name5:'长期3',name6:'2022-05-21',name66:'已解除',name7:'109',name8:'109',name81:'经查该劳务分包单位于2021年1月至2022年3月期间，多达十余次放任大量工人恶意讨薪，围堵市政府、劳动局、业主售楼部，且不妥善处理工人工伤造成仲裁，部分班组在我司已支付工程款情况下仍恶意拖欠工人工资，对我司社会形象造成恶劣影响，且存在政府部门及业主单位处罚风险。',name9:'专业分包'},
            {name1:'山东乾途伟业建材有限公司',name2:'恶意行为',name3:'未履行分包合同的责任和义务',name4:'郑丽青',name5:'长期',name6:'2022-05-23',name66:'已解除',name7:'109',name8:'109',name81:'经查该劳务分包单位于2021年1月至2022年3月期间，多达十余次放任大量工人恶意讨薪，围堵市政府、劳动局、业主售楼部，且不妥善处理工人工伤造成仲裁，部分班组在我司已支付工程款情况下仍恶意拖欠工人工资，对我司社会形象造成恶劣影响，且存在政府部门及业主单位处罚风险。',name9:'专业分包'},
            {name1:'厦门市集美区鸿铭建材有限公司',name2:'不良行为',name3:'其他不履行合同义务造成发包方严重损失的行为',name4:'郑丽青',name5:'长期1',name6:'2022-05-23',name66:'已解除',name7:'109',name8:'109',name81:'经查该劳务分包单位于2021年1月至2022年3月期间，多达十余次放任大量工人恶意讨薪，围堵市政府、劳动局、业主售楼部，且不妥善处理工人工伤造成仲裁，部分班组在我司已支付工程款情况下仍恶意拖欠工人工资，对我司社会形象造成恶劣影响，且存在政府部门及业主单位处罚风险。',name9:'专业分包'},
            {name1:'重庆匠伦家居用品有限公司',name2:'恶意行为',name3:'未履行分包合同的责任和义务',name4:'郑丽青',name5:'长期7',name6:'2022-05-23',name66:'已解除',name7:'109',name8:'109',name81:'经查该劳务分包单位于2021年1月至2022年3月期间，多达十余次放任大量工人恶意讨薪，围堵市政府、劳动局、业主售楼部，且不妥善处理工人工伤造成仲裁，部分班组在我司已支付工程款情况下仍恶意拖欠工人工资，对我司社会形象造成恶劣影响，且存在政府部门及业主单位处罚风险。',name9:'专业分包'},
            {name1:'荆门市飞图混凝土有限公司',name2:'不良行为',name3:'其他不履行合同义务造成发包方严重损失的行为',name4:'郑丽青',name5:'长期',name6:'2022-05-23',name66:'已解除',name7:'109',name8:'109',name81:'经查该劳务分包单位于2021年1月至2022年3月期间，多达十余次放任大量工人恶意讨薪，围堵市政府、劳动局、业主售楼部，且不妥善处理工人工伤造成仲裁，部分班组在我司已支付工程款情况下仍恶意拖欠工人工资，对我司社会形象造成恶劣影响，且存在政府部门及业主单位处罚风险。',name9:'专业分包'},
            {name1:'重庆满煦商贸有限公司',name2:'恶意行为',name3:'未履行分包合同的责任和义务',name4:'郑丽青',name5:'长期',name6:'2022-05-23',name66:'已解除',name7:'109',name8:'109',name81:'经查该劳务分包单位于2021年1月至2022年3月期间，多达十余次放任大量工人恶意讨薪，围堵市政府、劳动局、业主售楼部，且不妥善处理工人工伤造成仲裁，部分班组在我司已支付工程款情况下仍恶意拖欠工人工资，对我司社会形象造成恶劣影响，且存在政府部门及业主单位处罚风险。',name9:'劳务分包类'},
            {name1:'莱晟达(烟台)环保材料科技有限公司',name2:'不良行为',name3:'其他不履行合同义务造成发包方严重损失的行为',name4:'郑丽青',name5:'长期99',name6:'2022-05-23',name66:'已解除',name7:'118',name8:'118',name81:'经查该劳务分包单位于2021年1月至2022年3月期间，多达十余次放任大量工人恶意讨薪，围堵市政府、劳动局、业主售楼部，且不妥善处理工人工伤造成仲裁，部分班组在我司已支付工程款情况下仍恶意拖欠工人工资，对我司社会形象造成恶劣影响，且存在政府部门及业主单位处罚风险。',name9:'劳务分包类'},
            {name1:'河南荣川实业有限公司',name2:'恶意行为',name3:'未履行分包合同的责任和义务',name4:'郑丽青',name5:'长期5',name6:'2022-05-23',name66:'已解除',name7:'118',name8:'118',name81:'经查该劳务分包单位于2021年1月至2022年3月期间，多达十余次放任大量工人恶意讨薪，围堵市政府、劳动局、业主售楼部，且不妥善处理工人工伤造成仲裁，部分班组在我司已支付工程款情况下仍恶意拖欠工人工资，对我司社会形象造成恶劣影响，且存在政府部门及业主单位处罚风险。',name9:'专业分包'},
            {name1:'莱晟达(烟台)环保材料科技有限公司',name2:'不良行为',name3:'未履行分包合同的责任和义务',name4:'郑丽青',name5:'长期19',name6:'2022-05-23',name66:'已解除',name7:'109',name8:'109',name81:'经查该劳务分包单位于2021年1月至2022年3月期间，多达十余次放任大量工人恶意讨薪，围堵市政府、劳动局、业主售楼部，且不妥善处理工人工伤造成仲裁，部分班组在我司已支付工程款情况下仍恶意拖欠工人工资，对我司社会形象造成恶劣影响，且存在政府部门及业主单位处罚风险。',name9:'专业分包'},
            {name1:'北京九主澜商贸有限公司',name2:'恶意行为',name3:'未履行分包合同的责任和义务',name4:'郑丽青',name5:'长期1',name6:'2022-05-23',name66:'已解除',name7:'105',name8:'109',name81:'经查该劳务分包单位于2021年1月至2022年3月期间，多达十余次放任大量工人恶意讨薪，围堵市政府、劳动局、业主售楼部，且不妥善处理工人工伤造成仲裁，部分班组在我司已支付工程款情况下仍恶意拖欠工人工资，对我司社会形象造成恶劣影响，且存在政府部门及业主单位处罚风险。',name9:'专业分包'},
            {name1:'重庆拉瑞永固混凝土有限公司',name2:'不良行为',name3:'其他不履行合同义务造成发包方严重损失的行为',name4:'郑丽青',name5:'长期3',name6:'2022-05-23',name66:'已解除',name7:'109',name8:'109',name81:'经查该劳务分包单位于2021年1月至2022年3月期间，多达十余次放任大量工人恶意讨薪，围堵市政府、劳动局、业主售楼部，且不妥善处理工人工伤造成仲裁，部分班组在我司已支付工程款情况下仍恶意拖欠工人工资，对我司社会形象造成恶劣影响，且存在政府部门及业主单位处罚风险。',name9:'专业分包'},
            {name1:'山东乾途伟业建材有限公司',name2:'恶意行为',name3:'未履行分包合同的责任和义务',name4:'郑丽青',name5:'长期',name6:'2022-05-23',name66:'已解除',name7:'109',name8:'109',name81:'经查该劳务分包单位于2021年1月至2022年3月期间，多达十余次放任大量工人恶意讨薪，围堵市政府、劳动局、业主售楼部，且不妥善处理工人工伤造成仲裁，部分班组在我司已支付工程款情况下仍恶意拖欠工人工资，对我司社会形象造成恶劣影响，且存在政府部门及业主单位处罚风险。',name9:'专业分包'},
            {name1:'厦门市集美区鸿铭建材有限公司',name2:'不良行为',name3:'其他不履行合同义务造成发包方严重损失的行为',name4:'郑丽青',name5:'长期1',name6:'2022-05-23',name66:'已解除',name7:'109',name8:'109',name81:'经查该劳务分包单位于2021年1月至2022年3月期间，多达十余次放任大量工人恶意讨薪，围堵市政府、劳动局、业主售楼部，且不妥善处理工人工伤造成仲裁，部分班组在我司已支付工程款情况下仍恶意拖欠工人工资，对我司社会形象造成恶劣影响，且存在政府部门及业主单位处罚风险。',name9:'专业分包'},
            {name1:'重庆匠伦家居用品有限公司',name2:'恶意行为',name3:'未履行分包合同的责任和义务',name4:'郑丽青',name5:'长期7',name6:'2022-05-23',name66:'已解除',name7:'109',name8:'109',name81:'经查该劳务分包单位于2021年1月至2022年3月期间，多达十余次放任大量工人恶意讨薪，围堵市政府、劳动局、业主售楼部，且不妥善处理工人工伤造成仲裁，部分班组在我司已支付工程款情况下仍恶意拖欠工人工资，对我司社会形象造成恶劣影响，且存在政府部门及业主单位处罚风险。',name9:'专业分包'},
            {name1:'荆门市飞图混凝土有限公司',name2:'不良行为',name3:'其他不履行合同义务造成发包方严重损失的行为',name4:'郑丽青',name5:'长期',name6:'2022-05-23',name66:'已解除',name7:'109',name8:'109',name81:'经查该劳务分包单位于2021年1月至2022年3月期间，多达十余次放任大量工人恶意讨薪，围堵市政府、劳动局、业主售楼部，且不妥善处理工人工伤造成仲裁，部分班组在我司已支付工程款情况下仍恶意拖欠工人工资，对我司社会形象造成恶劣影响，且存在政府部门及业主单位处罚风险。',name9:'专业分包'},
          ],
          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>
  .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>
