<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.leaderName" 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.customerName" 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">
              <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="150">
            <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="150" :resizable="false">
            <template slot-scope="scope">
              {{scope.row.dataSource === 0 ?'自主添加':'系统添加'}}
            </template>
          </el-table-column>
          <el-table-column label="发生日期" min-width="150" :resizable="false">
            <template slot-scope="scope">
              {{scope.row.createTime||"--"}}
            </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="leaderName">
          <el-input v-model="ruleForm.leaderName" placeholder="请输入劳务队长名称"></el-input>
        </el-form-item>
        <el-form-item label="身份证号码" prop="laborCaptainIdCard">
          <el-input v-model="ruleForm.laborCaptainIdCard" placeholder="请输入劳务队长身份证号码" onkeyup="this.value=this.value.replace(/[^\w_]/g,'');"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="laborCaptainPhone">
          <el-input v-model="ruleForm.laborCaptainPhone" placeholder="请输入联系电话"oninput="if(value.length>11)value=value.slice(0,11)" onkeyup="value = value.replace(/[^\d]/g,'');"></el-input>
        </el-form-item>
        <el-form-item label="挂靠单位" prop="customerName">
          <el-input v-model="ruleForm.customerName" placeholder="请输入挂靠单位"></el-input>
        </el-form-item>
        <el-form-item label="不良事由">
          <el-input v-model="ruleForm.badReason" placeholder="请输入不良事由类型"></el-input>
        </el-form-item>
        <el-form-item label="不良行为具体情形">
          <el-input type="textarea" v-model="ruleForm.badBehaviorSituation" placeholder="请输入不良行为具体情形"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取消</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 {addRiskRecord,queryRiskList} from '@/api/supplier/supplier';
  export default {
    name: 'affiliationRisk',
    components:{skeleton},
    data(){
      return{
        encodeStr,
        formdata:{
          leaderName:'',
          customerName:'',
          endDate:'',
          startDate:'',
          times:[],
          pageSize:20,
          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: {
          leaderName: { required: true, message: '劳务队长名称为空', trigger: 'blur' }, // 限制必填
          laborCaptainIdCard:{ required: true, message: '身份证号码不能为空', trigger: 'blur' }, // 限制必填
          laborCaptainPhone:{ required: true, message: '联系电话不能为空', trigger: 'blur' }, // 限制必填
          customerName:{ 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 !=null){
          formdata.startDate = formdata.times[0]
          formdata.endDate = formdata.times[1]
        }else{
          formdata.startDate = ''
          formdata.endDate = ''
        }
        delete formdata.times
        queryRiskList(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.ruleForm={
          leaderName:'',
          laborCaptainIdCard:'',
          laborCaptainPhone:'',
          customerName:'',
          badReason:'',
          badBehaviorSituation:'',
        }
        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(){
        let pram = {
          ...this.ruleForm,
          dataSource:0
        }
        addRiskRecord(pram).then(res=>{
          if(res.code == 200){
            this.dialogVisible=false;
            this.ruleForm={
              leaderName:'',
              laborCaptainIdCard:'',
              laborCaptainPhone:'',
              customerName:'',
              badReason:'',
              badBehaviorSituation:'',
            }
            this.$message({
              message: '新增成功',
              type: 'success'
            });
            this.searchList()
          }
        })
      },
      handleCancel(){
        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>
