<template>
  <div class="supplier">
    <div class="search-supplier">
      <div class="title_wrap">
        <div class="enterprise_title">
          劳务供应商挂靠风险
        </div>
      </div>
      <div class="content-supplier">
        <el-form :model="formdata" label-width="160px" label-position="right"  :inline="true" >
          <el-row>
            <el-col :span="8">
            <el-form-item label="劳务队长名称" label-width="90px" class="i">
              <el-input v-model="formdata.supplierName" placeholder="请输入劳务队长名称" clearable></el-input>
            </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="挂靠单位" label-width="90px" class="i">
                <el-input v-model="formdata.supplierName" placeholder="请输入挂靠单位名称" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
            <el-form-item label="发生日期" label-width="115px" class="j">
              <el-date-picker
                v-model="formdata.times" clearable
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="年/月/日"
                end-placeholder="年/月/日">
              </el-date-picker>
            </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="  " label-width="90px" >
            <el-button type="primary" size="small" @click="searchList">查询</el-button>
            <el-button size="small" @click="clears">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="table-supplier">
      <div class="total-title">
        <div class="totals">共{{total}}条</div>
        <div class="add" @click="dialogVisible=true">添加数据</div>
      </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">-->
      <div class="table-item-jf table-item">
        <el-table :data="tableData"
                  v-sticky-header.always="{offsetTop : '-16px',offsetBottom : '-15px'}" class="fixed-table" border highlight-current-row>

          <el-table-column type="index" label="序号" :fixed="tableColumnFixed" width="60" :resizable="false">
            <template slot-scope="scope">
              <span>{{(formdata.pageNum - 1) *formdata.pageSize + scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column label="劳务队长名称" :fixed="tableColumnFixed" width="150" :resizable="false">
            <template slot-scope="scope">
              {{scope.row.name||"--"}}
            </template>
          </el-table-column>

          <el-table-column label="身份证号" :fixed="tableColumnFixed" min-width="150" :resizable="false">
            <template slot-scope="scope">
              {{scope.row.IDCard||"--"}}
            </template>
          </el-table-column>

          <el-table-column label="联系电话" min-width="150">
            <template slot-scope="scope">
              {{scope.row.telephone||"--"}}
            </template>
          </el-table-column>
          <el-table-column label="挂靠单位" min-width="280" :resizable="false">
            <template slot-scope="scope">
              <div class="wrap2">{{scope.row.unit||"--"}}</div>
            </template>
          </el-table-column>
          <el-table-column label="不良事由" min-width="120" :resizable="false">
            <template slot-scope="scope">
              {{scope.row.blsy||"--"}}
            </template>
          </el-table-column>
          <el-table-column label="不良行为情形" min-width="280" :resizable="false">
            <template slot-scope="scope">
              {{scope.row.blxw||"--"}}
            </template>
          </el-table-column>
          <el-table-column label="发生日期" min-width="150" :resizable="false">
            <template slot-scope="scope">
              {{scope.row.date||"--"}}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination clearfix" v-show="total>formdata.pageSize">
        <el-pagination background :page-size="formdata.pageSize" :current-page.sync="formdata.pageNum" @current-change="handleCurrentChange" layout="prev, pager, next"
                       :total="total">
        </el-pagination>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="480px" append-to-body class="dialogVisible" title="添加劳务供应商挂靠信息">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="addForm" label-width="127px">
        <el-form-item label="劳务队长名称" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入劳务队长名称"></el-input>
        </el-form-item>
        <el-form-item label="身份证号码" prop="IDCard">
          <el-input v-model="ruleForm.IDCard" placeholder="请输入劳务队长身份证号码"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="telephone">
          <el-input v-model="ruleForm.telephone" placeholder="请输入联系电话"></el-input>
        </el-form-item>
        <el-form-item label="挂靠单位" prop="unit">
          <el-input v-model="ruleForm.unit" placeholder="请输入挂靠单位"></el-input>
        </el-form-item>
        <el-form-item label="不良事由">
          <el-input v-model="ruleForm.blsy" placeholder="请输入不良事由类型"></el-input>
        </el-form-item>
        <el-form-item label="不良行为具体情形">
          <el-input type="textarea" v-model="ruleForm.blxw" placeholder="请输入不良行为具体情形"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="handleAdd">添加</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
  import { encodeStr } from "@/assets/js/common.js";
  import "@/assets/styles/public.scss";
  import "@/assets/styles/supplierlist.scss";
  import skeleton from '@/views/project/projectList/component/skeleton';
  import {getSupplierLimitedList} from '@/api/supplier/supplier';
  export default {
    name: 'affiliationRisk',
    components:{skeleton},
    data(){
      return{
        encodeStr,
        formdata:{
          supplierName:'',
          isGroupCase:'',
          limitedStartTime:'',
          limitedEndTime:'',
          times:[],
          pageSize:50,
          pageNum:1,
        },
        tableData:[
          {
            name:'殷兴华',
            IDCard:'37021119570202053x',
            telephone:'15063996777',
            unit:'山东兴华建设集团有限公司',
            blsy:'工人闹事',
            blxw:'1.未及时发放建筑劳务人员的工资，造成拖欠劳务人员工资，引发农民工集体上',
            date:'2024年02月20日'
          },
          {
            name:'黄凯',
            IDCard:'320621198711120515',
            telephone:'18260575899',
            unit:'江苏鑫畕晟建筑劳务有限公司',
            blsy:'合同违约',
            blxw:'访或聚众闹事的(因业主或总包单位拖欠工程款除外)',
            date:'2024年01月20日'
          },
          {
            name:'舒小松',
            IDCard:'510221197310083636',
            telephone:'13801265539',
            unit:'重庆群林建筑劳务有限公司',
            blsy:'劳动合同纠纷',
            blxw:'1.未及时发放建筑劳务人员的工资，造成拖欠劳务人员工资，引发农民工集体上',
            date:'2024年02月20日'
          },
        ],
        isSkeleton:true,
        total:0,
        // table列是否悬浮
        tableColumnFixed: true,
        fbsvisib:false,
        fbsisSkeleton:false,
        dialogVisible:false,
        ruleForm:{

        },
        rules: {
          name: { required: true, message: '劳务队长名称为空', trigger: 'blur' }, // 限制必填
          IDCard:{ required: true, message: '身份证号码不能为空', trigger: 'blur' }, // 限制必填
          telephone:{ required: true, message: '联系电话不能为空', trigger: 'blur' }, // 限制必填
          unit:{ required: true, message: '挂靠单位不能为空', trigger: 'blur' }, // 限制必填
        },
      }
    },
    created() {
      // this.searchList()
    },
    methods:{
      searchList(){
        // this.isSkeleton = true
        // let formdata = JSON.parse(JSON.stringify(this.formdata))
        // if(formdata.times != [] &&formdata.times.length>1){
        //   formdata.limitedStartTime = formdata.times[0]
        //   formdata.limitedEndTime = formdata.times[1]
        // }else{
        //   formdata.limitedStartTime = ''
        //   formdata.limitedEndTime = ''
        // }
        // delete formdata.times
        // getSupplierLimitedList(formdata).then(res=>{
        //   this.isSkeleton = false
        //   if(res.code == 200) {
        //     this.total = res.total
        //     this.tableData = res.rows
        //     this.formdata.pageNum = res.currentPage
        //   }else{
        //     this.total = 0
        //     this.tableData = []
        //     this.formdata.pageNum = 1
        //   }
        // })
      },
      clears(){
        this.formdata={
          supplierName:'',
            isGroupCase:'',
            limitedStartTime:'',
            limitedEndTime:'',
            times:[],
            pageSize:50,
            pageNum:1,
        }
        // this.searchList()
      },
      handleCurrentChange(val){
        this.formdata.pageNum = val
        this.searchList()
      },
      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";
      },
      handleAdd(){
        this.dialogVisible=false
      }
    }
  }
</script>

<style scoped lang="scss">
  .table-supplier{
    .total-title{
      height: 32px;
      line-height: 32px;
      .add{
        float: right;
        width: 80px;
        height: 32px;
        background: #0081FF;
        border-radius: 4px 4px 4px 4px;
        color: #FFFFFF;
        line-height: 32px;
        font-size: 14px;
        text-align: center;
        cursor: pointer;
      }
    }
  }

 ::v-deep .content-supplier {
   .el-form-item__content {
     width: calc(100% - 170px);
   }
   .i{
     .el-form-item__content{
       width: calc(100% - 105px);
     }
   }
   .j{
     .el-form-item__content{
       width: calc(100% - 120px);
     }
   }
 }
  .dialogVisible{
    ::v-deep .el-dialog {
      position:absolute;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      margin-top:0 !important;
      .el-dialog__body{
        flex:1;
        overflow: auto;
        padding:24px 20px 0 20px;
        border-top: 1px solid #EEEEEE;
        border-bottom: 1px solid #EEEEEE;
        .el-input{
          width: 320px !important;
        }
        .el-textarea{
          width: 320px !important;
        }
        .el-textarea__inner {
          font-family: Arial, Helvetica, sans-serif !important;
        }
        input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
          color: #C0C4CC;
        }
        input::-moz-placeholder { /* Firefox 19+ */
          color: #C0C4CC;
        }
        input:-ms-input-placeholder { /* IE 10+ */
          color: #C0C4CC;
        }
        input:-moz-placeholder { /* Firefox 18- */
          color: #C0C4CC;
        }
      }
      .el-dialog__footer{
        padding: 16px 20px;
      }
    }
  }
</style>
