<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="姓名" prop="Name">
        <el-input v-model="queryParams.Name" placeholder="请输入姓名" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <!--  -->
      <el-form-item label="证书类别" prop="zhengshuType" v-if="type != 2">
        <el-select v-model="queryParams.zhengshuType" placeholder="请选择证书类别">
          <el-option v-for="dict in dict.type.zhengshu_type" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="身份证号" prop="ShenFenZheng">
        <el-input v-model="queryParams.ShenFenZheng" placeholder="请输入身份证号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="证书号" prop="zshme">
        <el-input v-model="queryParams.zshme" placeholder="请输入证书号" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="单位名称" prop="Dept">
        <el-input v-model="queryParams.Dept" placeholder="请输入单位名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="发证日期" prop="Dept">
        <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
          range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="证书状态" prop="zhengshuStatus" v-if="type != 2">
        <el-select v-model="queryParams.zhengshuStatus" placeholder="请选择证书状态">
          <el-option v-for="dict in dict.type.zhengshu_status" :key="dict.value" :label="dict.label"
            :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="不良记录" prop="Dept">
        <el-select v-model="queryParams.BljlFlg" placeholder="请选择是否有不良记录" clearable>
          <el-option v-for="dict in dict.type.jxjy_bljl" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="处罚类别" prop="ChuFa" v-if="type != 2">
        <el-select v-model="queryParams.ChuFa" placeholder="请选择处罚类别" clearable>
          <el-option v-for="dict in dict.type.chufa_type" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="multiple"
          @click="handleBianGeng">人员变更</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
          @click="handleDelete">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-upload" size="mini" @click="handleExport">导入</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table :row-key="getRowKeys" @selection-change="selectionChange" v-loading="loading" :data="RenCaiList">
      <el-table-column :reserve-selection="true" type="selection" width="55" align="center" />
      <el-table-column width="70" label="序号" align="center" type="index">
        <template slot-scope="scope">
          <span>{{ handleTableIndex(scope.$index, queryParams) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center" prop="Name">
        <template slot-scope="scope">
          <el-button type="text" @click="handleInfo(scope.row, false)">{{
            scope.row.Name
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="性别" align="center" prop="Sex" />
      <el-table-column label="身份证号" align="center" min-width="200" prop="ShenFenZheng" />
      <el-table-column label="执业单位" align="center" prop="Dept" min-width="320" />
      <el-table-column label="监理证书" align="left" width="300">
        <template slot-scope="scope">
          <el-popover placement="left" width="280" trigger="hover"
            v-if="scope.row.JLYZhengHaoNum != '' && scope.row.JLYZhengHaoNum != null">
            <div>
              <div>
                证书编号：{{ scope.row.JLYZhengHaoNum }}
              </div>
              <div>
                发证日期：{{ scope.row.JLYfzrq }}
              </div>
            </div>
            <el-button type="text" slot="reference">监理员</el-button>
          </el-popover>
          <el-divider direction="vertical"
            v-if="scope.row.JLYZhengHaoNum != '' && scope.row.JLYZhengHaoNum != null && (scope.row.JLZhengHaoNum != '' && scope.row.JLZhengHaoNum != null || scope.row.ZJZhengHao != '' && scope.row.ZJZhengHao != null)"></el-divider>
          <el-popover placement="left" width="280" trigger="hover"
            v-if="scope.row.JLZhengHaoNum != '' && scope.row.JLZhengHaoNum != null">
            <div> 
			  <div>
				证书号：{{scope.row.JLZhengHao}}
			  </div>
              <div>
                证书编号：{{ scope.row.JLZhengHaoNum }}
              </div> 
			  <div>
				  发证日期：{{scope.row.JLfzrq}}
			  </div>
              <div>
                证书有效期至：{{ scope.row.JLYxqz }}
              </div>
            </div>
            <el-button type="text" slot="reference">
				<div class="flex-ac">
					监理工程师
					<img src="../../../assets/images/cq.png" style="width: 30px;" alt="" v-if="new Date(scope.row.JLYxqz) < new Date()" />
				</div>
			</el-button>
          </el-popover>
          <el-divider direction="vertical"
            v-if="scope.row.JLZhengHaoNum != '' && scope.row.JLZhengHaoNum != null && scope.row.ZJZhengHao != '' && scope.row.ZJZhengHao != null"></el-divider>
          <el-popover placement="left" width="280" trigger="hover"
            v-if="scope.row.ZJZhengHao != '' && scope.row.ZJZhengHao != null">
            <div>
              <div>
                证书编号：{{ scope.row.ZJZhengHao }}
              </div>
              <div>
                发证日期：{{ scope.row.ZJfzrq }}
              </div>
            </div>
            <el-button type="text" slot="reference">总监理工程师</el-button>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="BljlFlg" label="不良记录">
        <template slot-scope="scope">
          <!-- <el-tag type="success" v-if="scope.row.BljlFlg == '0'">无</el-tag> -->
          <el-popover v-if="scope.row.BljlFlg == '1'" placement="left" width="380" trigger="hover">
            <template slot="reference">
              <el-tag type="danger">有</el-tag>
            </template>
            <div>
              不良记录
              <div>编号：{{ scope.row.BljlBianhao }}</div>
              <div>内容：{{ scope.row.BljlContent }}</div>
              <div>定性：{{ scope.row.BljlDingxing }}</div>
              <div>依据：{{ scope.row.BljlClyj }}</div>
              <div>开始：{{ scope.row.BljlGbStart }}</div>
              <div>结束：{{ scope.row.BljlGbEnd }}</div>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" prop="ChuFa" label="处罚">
        <template slot-scope="scope">
          <div v-if="scope.row.ChuFa == '暂无'"></div>
          <el-popover v-else placement="left" width="250" trigger="hover">
            <template slot="reference">
              <el-tag type="danger">有</el-tag>
            </template>
            <div>
              处罚
              <div>内容：{{ scope.row.ChuFa }}</div>
              <div>时间：{{ scope.row.ChuFaTime }}</div>
            </div>
          </el-popover>
        </template>
      </el-table-column> -->

      <!-- <el-table-column align="center" label="审核状态">
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            <el-tag :type="(scope.row.JLYZhengHao != '' && scope.row.JLYzfFlg != 1) ||
              (scope.row.JLZhengHao != '' && scope.row.ShenHe != 0) ||
              (scope.row.ZJZhengHao != '' && scope.row.ZJzfFlg != 1)
              ? 'primary'
              : 'danger'
              ">{{
    (scope.row.JLYZhengHao != "" && scope.row.JLYzfFlg != 1) ||
    (scope.row.JLZhengHao != "" && scope.row.ShenHe != 0) ||
    (scope.row.ZJZhengHao != "" && scope.row.ZJzfFlg != 1)
    ? "已审核"
    : "未审核"
  }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="设置">
          <template slot-scope="scope">
            <el-button @click="handleSettingAuditState(scope.row)" type="text" size="mini">设置</el-button>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="业绩" fixed="right" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">查看</el-button>
        </template>
      </el-table-column> -->
      <el-table-column align="center" label="操作" fixed="right" width="180">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)">
            <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="handleBuliang" icon="el-icon-warning">不良行为</el-dropdown-item>
              <el-dropdown-item command="handleShezhi" icon="el-icon-s-tools">设置</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <el-dialog top="3vh" title="业绩/简历" :visible.sync="viewDia" width="1000px" :before-close="() => {
      viewDia = false;
    }
      ">
      <el-table style="width: 1000px;height: 55vh;overflow: auto;" :data="achievementTableData">
        <el-table-column label="序号" align="center" type="index"></el-table-column>
        <el-table-column label="工作单位" width="300" align="center" prop="QYLoginName"></el-table-column>
        <el-table-column width="100" label="添加时间" align="center">
          <template slot-scope="scope">
            {{ parseTime(scope.row.Nian, "{y}-{m}-{d}") }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="内容" width="500">
          <template slot-scope="scope">
            <span v-html="content(scope.row)"></span>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="viewDia = false">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 添加或修改监理人才管理对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1300px" top="2vh" append-to-body>
      <el-form ref="ruleForm" style="height: 75vh;overflow: auto;overflow-x: hidden;" :model="form" :rules="rules"
        :inline="true" label-position="center" label-width="170px">
        <el-row :gutter="40">
          <el-col :span="24">
            <div style="background-color: #eee;font-weight: bold;text-align: center;font-size: 15px;position: relative;"
              class="pd-10 m-b-10">
              {{ title }}</div>
          </el-col>
          <el-col :span="24">
            <div class="formTitle m-b-20">单位信息</div>
          </el-col>

          <!-- <el-col :span="16"> -->
          <el-form-item label="单位名称" prop="Dept">
            <div class="qiye" style="width: 25vw;">
              <el-select v-model="form.Dept" filterable remote reserve-keyword clearable
                :disabled="type == 0 ? false : true" placeholder="请输入单位名称" :remote-method="remoteMethod"
                :loading="loading" @change="chooseQy">
                <el-option v-for="(item, index) in options" :key="item.id" :label="item.DeptName" :value="index">
                </el-option>
              </el-select>
            </div>
          </el-form-item>
          <!-- </el-col>
          <el-col :span="8"> -->
          <!-- <el-form-item style="margin-left: 52px;" label="网址">
            <el-input style="width: 107%;" v-model="form.wangzhi" placeholder="请输入网址" />
          </el-form-item> -->
          <!-- </el-col>
          <el-col :span="16"> -->

          <el-form-item label="地址">
            <div style="width: 25vw;">
              <el-input readonly v-model="form.Address" placeholder="请输入地址" />
            </div>
          </el-form-item>
          <el-form-item style="margin-left: 52px;" label="邮编">
            <el-input readonly style="width: 107%;" v-model="form.PostCode" placeholder="请输入邮编" />
          </el-form-item>
          <el-form-item label="负责人">
            <el-input readonly style="width: 107%;" v-model="form.LianXiRen" placeholder="请输入负责人" />
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input readonly style="width: 107%;" v-model="form.Phone" placeholder="请输入联系方式" />
          </el-form-item>
          <!-- <el-form-item label="手机号码">
            <el-input readonly style="width: 107%;" v-model="form.Phone" placeholder="请输入手机号码" />
          </el-form-item> -->
          <!-- <el-form-item label="传真">
            <el-input style="width: 107%;" v-model="form.Fax" placeholder="请输入传真" />
          </el-form-item> -->
          <el-form-item label="Email">
            <el-input readonly style="width: 107%;" v-model="form.Email" placeholder="请输入Email" />
          </el-form-item>

          <el-col :span="24">
            <div class="formTitle m-b-20">个人信息</div>
          </el-col>
          <br>
          <!-- <el-col :span="8"> -->
          <el-form-item label="姓名" prop="Name">
            <el-input type="text" auto-complete="off" v-model="form.Name" placeholder="请输入姓名" />
          </el-form-item>
          <!-- </el-col>
          <el-col :span="8"> -->
          <el-form-item label="性别" prop="Sex">
            <el-select :disabled="type == 0 ? false : true" v-model="form.Sex" clearable placeholder="请选择性别">
              <el-option label="男" value="男"> 男 </el-option>
              <el-option label="女" value="女"> 女 </el-option>
            </el-select>
          </el-form-item>
          <!-- </el-col>
          <el-col :span="8"> -->
          <el-form-item label="身份证号" prop="ShenFenZheng">
            <el-input v-model="form.ShenFenZheng" placeholder="请输入身份证号" />
          </el-form-item>
          <!-- </el-col>
          <el-col :span="8"> -->
          <el-form-item label="出生年月" prop="Birthday">
            <el-input v-model="form.Birthday" placeholder="请输入出生年月" />
          </el-form-item>
          <!-- </el-col>
          <el-col :span="8"> -->
          <el-form-item label="学历" prop="XueLi">
            <el-input v-model="form.XueLi" placeholder="请输入学历" />
          </el-form-item>
          <!-- </el-col>
          <el-col :span="8"> -->
          <el-form-item label="专业" prop="ZhuanYe">
            <el-input :readonly="type == 0 ? false : true" v-model="form.ZhuanYe" type="text" auto-complete="off"
              placeholder="请输入专业"></el-input>
          </el-form-item>
          <!-- </el-col>
          <el-col :span="8"> -->
          <el-form-item label="职称" prop="ZhiCheng">
            <el-select v-model="form.ZhiCheng" placeholder="请选择职称" clearable
              :disabled="type == 1 && xiugai == false ? true : false">
              <el-option v-for="dict in dict.type.job_title" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <!-- </el-col>
          <el-col :span="8"> -->
          <el-form-item label="监理工作年限" prop="NianXian">
            <el-input :readonly="type == 0 ? false : true" v-model="form.NianXian" type="number" min="0"
              placeholder="请输入监理工作年限"></el-input>
          </el-form-item>
          <!-- </el-col> -->

          <el-col :span="24">
            <div class="formTitle m-b-20">证书信息</div>
          </el-col>
          <br>
          <!-- <el-col :span="8"> -->
          <el-form-item prop="JLYZhengHao" label="监理员证书号">
            <el-input v-model="form.JLYZhengHao" type="text" auto-complete="off" placeholder="请输入监理员证书号"></el-input>
          </el-form-item>
          <!-- </el-col>
          <el-col :span="8"> -->
          <el-form-item prop="JLYZhengHaoNum" label="监理员证书编号">
            <el-input style="width:110%" v-model="form.JLYZhengHaoNum" type="text" auto-complete="off"
              placeholder="请输入监理员证书编号"></el-input>
          </el-form-item>
          <!-- </el-col>
          <el-col :span="8"> -->
          <el-form-item prop="JLYfzrq" label-width="180px" style="margin-left:8px" label="发证日期">
            <el-date-picker v-model="form.JLYfzrq" value-format="yyyy-MM-dd" type="date" placeholder="请选择发证日期">
            </el-date-picker>
          </el-form-item>
          <br>
          <!-- </el-col>
          <el-col style="width: 50%;" :span="8"> </el-col>
          <el-col :span="8"> -->
          <el-form-item label="监理工程师证书号">
            <el-input v-model="form.JLZhengHao" type="text" auto-complete="off" placeholder=" 请输入监理工程师证书号"></el-input>
          </el-form-item>
          <!-- </el-col>
          <el-col :span="8"> -->
          <el-form-item label="发证日期">
            <el-date-picker v-model="form.JLfzrq" value-format="yyyy-MM-dd" type="date" placeholder=" 请选择发证日期">
            </el-date-picker>
          </el-form-item>
          <!-- </el-col>
          <el-col :span="8"> -->
          <el-form-item label="有效期至">
            <el-date-picker v-model="form.JLYxqz" value-format="yyyy-MM-dd" type="date" placeholder=" 请选择有效期至">
            </el-date-picker>
          </el-form-item>
          <!-- </el-col>
          <el-col :span="8"> -->
          <el-form-item label="监理工程师证书编号">
            <el-input v-model="form.JlZhengHaoNum" type="text" auto-complete="off" placeholder=" 请输入监理工程师证书编号"></el-input>
          </el-form-item>
          <br>
          <!-- </el-col>
          <el-col style="width: 80%;" :span="8"> </el-col>
          <el-col :span="8"> -->
          <el-form-item label="总监理工程师证书号">
            <el-input v-model="form.ZJZhengHao" type="text" auto-complete="off" placeholder=" 请输入总监理工程师证书号"></el-input>
          </el-form-item>
          <!-- </el-col>
          <el-col :span="8"> -->
          <el-form-item label="发证日期">
            <el-date-picker v-model="form.ZJfzrq" value-format="yyyy-MM-dd" type="date" placeholder=" 请选择发证日期">
            </el-date-picker>
          </el-form-item>
          <!-- </el-col>
          <el-col style="width: 80%;" :span="8"> </el-col>
          <el-col :span="8"> -->
          <br>
          <el-form-item label="建设部证书号">
            <el-input v-model="form.JSBZhengHao" type="text" auto-complete="off" placeholder=" 请输入建设部证书号"></el-input>
          </el-form-item>
          <!-- </el-col>
          <el-col :span="8"> -->
          <el-form-item label="发证日期">
            <el-date-picker v-model="form.JSBfzrq" value-format="yyyy-MM-dd" type="date" placeholder=" 请选择发证日期">
            </el-date-picker>
          </el-form-item>
          <!-- </el-col> -->




        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormAdd">保 存</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog title="审核设置" :visible.sync="auditDia" width="500px" :before-close="() => {
      auditDia = false;
    }
      ">
      <el-form ref="auditRef" :model="auditForm" :rules="auditRules" label-width="120px">
        <el-form-item label="监理员：" prop="JLYzfFlg">
          <el-radio-group v-model="auditForm.JLYzfFlg">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">作废</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="监理工程师：" prop="ZJzfFlg">
          <el-radio-group v-model="auditForm.ZJzfFlg">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="总监：" prop="ShenHe">
          <el-radio-group v-model="auditForm.ShenHe">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="作废/禁用原因：">
          <el-input v-model="auditForm.ZfResult" type="textarea" :rows="4" placeholder="请输入原因">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="auditDia = false">取 消</el-button>
        <el-button type="primary" @click="onAuditSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog append-to-body title="业绩/简历详情" :visible.sync="openJianli" width="50%">
      <Editor1 width="10vw" ref="editor" v-model="jianliInfo" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="openJianli = false">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog append-to-body title="监理人员导入" :visible.sync="upload.open" width="520px">
      <div style="display:flex">
        <span style="width: 100px;line-height: 32px;align-items: right;text-align: right;"> 人才类别：</span> <el-select
          style="display: inline-block;" v-model="zhengshuType" placeholder="请选择人才类别">
          <el-option v-for="dict in dict.type.talent_type" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </div>
      <el-row justify="40" style="margin-left: 20px;">
        <el-col :span="12"> <el-link type="primary" :underline="false"
            style="font-size:14px;margin-top: 10px; vertical-align: baseline;"
            @click="importTemplate(1, '监理员导入模板')">监理员导入模板</el-link></el-col>
        <el-col :span="12"> <el-link type="primary" :underline="false"
            style="font-size:14px;margin-top: 10px; vertical-align: baseline;"
            @click="importTemplate(2, '监理工程师导入模板')">监理工程师导入模板</el-link></el-col>
        <el-col :span="12"> <el-link type="primary" :underline="false"
            style="font-size:14px;margin-top: 10px; vertical-align: baseline;"
            @click="importTemplate(3, '总监理工程师导入模板')">总监理工程师导入模板</el-link></el-col>
        <el-col :span="12"><el-link type="primary" :underline="false"
            style="font-size:14px;margin-top: 10px; vertical-align: baseline;"
            @click="importTemplate(4, '单位变更人员导入模板')">单位变更人员模板</el-link></el-col>
      </el-row>



      <el-upload ref="upload" :auto-upload="false" style="margin-top: 20px;" :limit="1" accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport + '&type=' + zhengshuType"
        :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
          </div>
          <span>仅允许导入xls、xlsx格式文件。</span>
        </div>

      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="监理变更" :visible.sync="openBianGeng" width="700px">
      <!-- <div style="display:flex">
        <span style="width: 120px;line-height: 32px;align-items: right;text-align: right;"> 变更类型：</span>
        <el-select style="display: inline-block;" v-model="zhengshuType" placeholder="请选择变更类型">
          <el-option v-for="dict in dict.type.biangeng_type" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </div> -->
      <div class="qiye" style="display:flex;margin-top: 20px;">
        <span style="width: 120px;line-height: 32px;align-items: right;text-align: right;"> 单位名称：</span>
        <el-select style="width: 200px;" v-model="form.Dept" filterable remote reserve-keyword clearable
          :disabled="type == 0 ? false : true" placeholder="请输入单位名称" :remote-method="remoteMethod" :loading="loading"
          @change="chooseJl">
          <el-option v-for="(item, index) in options" :key="item.id" :label="item.DeptName" :value="index">
          </el-option>
        </el-select>
      </div>
      <div v-if="zhengshuType == 2" style="display:flex;margin-top: 20px;">
        <span style="width: 100px;line-height: 32px;align-items: right;text-align: right;"> 单位新名：</span>
        <el-input v-model="form.DeptName" placeholder="请输入单位新名" style="width: 570px;" />
      </div>
      <div v-if="zhengshuType == 1 || zhengshuType == null" style="margin-top: 10px;display:flex;">
        <span style="width: 100px;line-height: 32px;align-items: right;text-align: right;"> 变更人员：</span>
        <div v-if="tags.length != 0" style="width: 500px;">
          <el-tag style="margin-right: 10px;margin-bottom: 5px;" v-for="tag in tags" :key="tag.name" :type="tag.type">
            {{ tag.name }}
          </el-tag>
        </div>
        <!-- <span style="line-height: 32px;color:red" v-else>如需人员变更，请勾选外部列表人员后进行操作</span> -->
      </div>
      <!-- <div style="display:flex;margin-top: 10px;">
        <span style="width: 100px;line-height: 32px;align-items: right;text-align: right;"> 查找人员：</span>
        <el-input v-model="nameInfo" placeholder="请输入姓名" style="width: 200px;"></el-input>
        <el-button style="margin-left:10px" type="primary" plain>查找</el-button>
      </div>
      <div>
        <el-checkbox-group v-model="checkList">
          <el-checkbox label="复选框 A"></el-checkbox>
          <el-checkbox label="复选框 B"></el-checkbox>
          <el-checkbox label="复选框 C"></el-checkbox>
          <el-checkbox label="禁用" disabled></el-checkbox>
          <el-checkbox label="选中且禁用" disabled></el-checkbox>
        </el-checkbox-group>
      </div> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="openBianGeng = false">取 消</el-button>
        <el-button type="primary" @click="peoQuRen">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="不良行为" :visible.sync="dialogVisible" top="2vh" width="1200px">
      <el-form ref="ruleForm" style="height: 70vh;overflow: auto;overflow-x: hidden;" :model="form" :rules="rules"
        :inline="true" label-position="center" label-width="150px">
        <el-row justify="">


          <el-col :span="24">
            <div class="formTitle m-b-20">
              不良信息</div>
          </el-col>
          <!-- <el-col :span="8"> -->
          <el-form-item label="处罚类别" prop="ChuFa">
            <el-select v-model="form.ChuFa" placeholder="请选择处罚类别">
              <el-option v-for="dict in dict.type.chufa_type" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <!-- </el-col> -->
          <!-- <el-col :span="8"> -->
          <el-form-item label="处罚时间">
            <el-date-picker v-model="form.ChuFaTime" value-format="yyyy-MM-dd" type="date" placeholder=" 请选择处罚时间">
            </el-date-picker>
          </el-form-item>
          <!-- </el-col> -->
          <!-- <el-col :span="8"></el-col>
          <el-col :span="8">  -->
          <el-form-item label="不良行为" prop="Dept">
            <el-select v-model="queryParams.BljlFlg" placeholder="请选择是否有不良行为" clearable>
              <el-option v-for="dict in dict.type.jxjy_bljl" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
          <!-- </el-col> -->

          <!-- <el-col :span="8"> -->
          <el-form-item label="不良行为编号" prop="BljlBianhao">
            <el-input v-model="form.BljlBianhao" placeholder="请输入不良行为编号" />
          </el-form-item>
          <!-- </el-col> -->
          <el-col :span="24">
            <el-form-item label="不良行为定性" prop="BljlDingxing">
              <el-input style="width: 30vw;" v-model="form.BljlDingxing" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="不良行为内容">
              <el-input style="width: 30vw;" type="textarea" :rows="4" placeholder="请输入不良行为内容"
                v-model="form.BljlContent" />
            </el-form-item></el-col>

          <el-col :span="24">
            <el-form-item label="处理依据及决定" prop="BljlClyj">
              <el-input style="width: 30vw;" v-model="form.BljlClyj" :rows="4" type="textarea" placeholder="请输入处理依据及决定" />
            </el-form-item></el-col>
          <el-col :span="8">
            <el-form-item label="公布期限开始" prop="BljlGbStart">
              <el-date-picker clearable v-model="form.BljlGbStart" type="date" value-format="yyyy-MM-dd"
                placeholder="请选择公布期限开始">
              </el-date-picker>
            </el-form-item></el-col>
          <el-col :span="8">
            <el-form-item label="公布期限结束" prop="BljlGbEnd">
              <el-date-picker clearable v-model="form.BljlGbEnd" type="date" value-format="yyyy-MM-dd"
                placeholder="请选择公布期限结束">
              </el-date-picker>
            </el-form-item></el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="BeiZhu">
              <el-input style="width: 30vw;" v-model="form.BeiZhu" :rows="4" type="textarea" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormAdd">保 存</el-button>
        <!-- <el-button @click="cancel">取 消</el-button> -->
        <el-button @click="dialogVisible = false">取 消</el-button>
        <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
      </span>
    </el-dialog>
    <el-dialog append-to-body title="监理人员信息" height="75vh" :visible.sync="dialogVisibleInfo" top="3vh" width="1250px">
      <div style="
          height: 74vh;
          overflow-y: auto;
          overflow-x: hidden;
          padding-top: 0;
        " class="pd-10">
        <jianliInfo :IdInfo="IdInfo" :sfz="sfz"></jianliInfo>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleInfo = false">关闭</el-button>
        <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  listRenCai,
  getRenCai,
  delRenCai,
  updateRenCai,
  getYeJi,
  saveAuditState,
  infoChange
} from "@/api/xiehui/tjgl/supervisor";
import { getToken } from "@/utils/auth";
import { addJianLiRenCai } from "@/api/xiehui/jlry/supervisionManage";
import { handleTableIndex } from "@/utils/index";
import Editor1 from "../../../components/Editor1.vue";
import jianliInfo from "./../jianliInfo.vue"
import { zgksQySearch, getPeoInfo, zgksBaoming } from "@/api/userIndex";
function getObj(obj) {
  let result = {};
  for (let key in obj) {
    if (obj[key] != null) {
      result[key] = obj[key];
    }
  }
  console.log("?? ~ getObj ~ result:", result)

  return result;
}
export default {
  name: "RenCai",
  components: { Editor1, jianliInfo },
  dicts: ['job_title', "jxjy_sfkyjxjy", 'talent_type', 'zhengshu_type', 'biangeng_type', 'zhengshu_status', 'chufa_type', "jxjy_jlgcszfbz", "jxjy_bljl", "jxjy_jlyzfbz"],
  data() {
    const cardNum = (rule, value, callback) => {
      if (/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(value)) {
        // proxy.getage(value)
        callback()
      } else {
        callback(new Error('身份证号不正确'))
      }
    }
    return {
      IdInfo: null,
      dialogVisibleInfo: false,
      dialogVisible: false,
      uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", //上传路径
      checkList: [],
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/jlry/RenCai/importRencai"
      },
      tags: [

      ],
      openJianliPeo: false,
      jianli: [],
      yejiInfo: '',
      typeInfo: null,
      jianliInfo: '',
      rules: {
        Dept: [{
          required: true,
          message: "请选择企业",
          trigger: "blur",
        }],
        Name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
        ],

        ShenFenZheng: [{
          type: 'string',
          required: true,
          message: '请输入身份证号',
          trigger: ['blur', 'change']
        },
        {
          validator: cardNum,
          trigger: ['blur', 'change']
        },
        ],
        Mobile: [
          {
            required: true, message: "请输入手机号", trigger: "blur",
          }
        ]
      },
      auditRules: {
        JLYzfFlg: [
          {
            required: true,
            message: "状态不能为空",
            trigger: "blur",
          },
        ],
        ZJzfFlg: [
          {
            required: true,
            message: "状态不能为空",
            trigger: "blur",
          },
        ],
        ShenHe: [
          {
            required: true,
            message: "状态不能为空",
            trigger: "blur",
          },
        ],
        ZfResult: [
          {
            required: true,
            message: "原因不能为空",
            trigger: "blur",
          },
        ],
      },
      activeSetting: {},
      auditDia: false,
      zhengshuType: null,
      type: '',
      auditForm: {
        JLYzfFlg: null,
        ZJzfFlg: null,
        ShenHe: null,
        ZfResult: null,
        ID: null,
      },
      openBianGeng: false,

      achievementTableData: [],
      //企业列表
      options: [],
      viewDia: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      openJianli: false,
      showSearch: true,
      // 总条数
      total: 0,
      deptID: null,
      activeView: {},
      nameInfo: '',
      // 监理人才管理表格数据
      RenCaiList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      sfz: '',
      // 表单参数
      form: {},
      // 日期范围
      dateRange: [],
      // 表单校验
    };
  },
  created() {
    this.getList();
  },
  computed: {
    content() {
      return (row) => {
        return row.zyJianSheYeJi
          .replaceAll("&lt;/p&gt;", "</p>")
          .replaceAll("&lt;br&gt;", "<br>")
          .replaceAll("&lt;/br&gt;", "</br>")
          .replaceAll("&lt;p&gt;", "<p>")
          .replaceAll("&nbsp;", " ")
          .replace(/&lt;/g, "<") // 替换 &lt; 为 <
          .replace(/&gt;/g, ">") // 替换 &gt; 为 >
          .replace(/&amp;nbsp;/g, " ") // 替换 &amp;nbsp; 为普通空格
          .replace(/\s+/g, " ") // 将多个空格替换为一个空格
          .trim(); // 去除首尾空格
      };
    },
  },
  methods: {
    handleInfo(row) {
      console.log("🚀 ~ handleInfo ~ row:", row.ID)
      this.IdInfo = row.ID
      this.sfz = row.ShenFenZheng
      this.dialogVisibleInfo = true
    },
    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case "handleBuliang":
          this.handleBuliang(row);
          break;
        case "handleShezhi":
          this.handleSettingAuditState(row);
          break;
        default:
          break;
      }
    },
    handleBuliang(row) {
      getRenCai(row.ID).then((response) => {
        this.form = response.data.renCai;
      })
      this.dialogVisible = true
    },
    // handleShezhi(row) { },

    peoQuRen() {
      // this.tags
      let cardNo = this.tags.map((item) => {
        if (item.ShenFenZheng == '' || item.ShenFenZheng == null) {
          this.$message.error(item.name + "身份证号为空,请补全后再进行操作")
          return
        } else {
          return item.ShenFenZheng
        }
      }).join(',')
      infoChange({ idStr: cardNo, qyId: this.deptID }).then(res => {
        this.$message.success("人员变更成功")
        this.openBianGeng = false
        this.getList()
      })
      console.log("?? ~ cardNo:", cardNo)

    },
    getRowKeys(row) {
      return row.ID;
    },
    /** 下载模板操作 */
    importTemplate(v, i) {
      this.download('/jlry/RenCai/importTemplate/' + v, {
      }, `${i}.xlsx`)
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      if (this.zhengshuType == null || this.zhengshuType == '') {
        this.$message.error("请选择人才类别")
        return
      }
      this.$refs.upload.submit();
    },
    selectionChange(selection) {
      this.tags = []
      this.ids = []
      for (let i = 0; i < selection.length; i++) {
        this.tags.push({ name: selection[i].Name, id: selection[i].ID, ShenFenZheng: selection[i].ShenFenZheng })
      }
      this.ids = selection.map((item) => item.ID);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    seeJianli(row) {
      this.openJianli = true;
      this.jianliInfo = row.zyJianSheYeJi
    },
    submitFormAdd() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          if (this.form.ID) {
            updateRenCai(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.dialogVisible = false;
              this.getList();
            });
          } else {
            addJianLiRenCai(this.form).then(res => {
              this.$message.success("添加成功");
              this.open = false;
              this.getList();
            })
          }
        }

      })
    },
    handleExport() {
      this.zhengshuType = null
      this.upload.open = true;
    },
    //查询企业0
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        zgksQySearch(query).then((res) => {
          this.options = res.data;
          this.loading = false;
        });
      } else {
        this.options = [];
      }
    },
    chooseJl(v) {
      this.deptID = this.options[v].BMdept
    },
    //选择企业
    chooseQy(v) {
      console.log("?? ~ chooseQy ~ v:", v)
      this.form.DeptID = this.options[v].BMdept;
      this.form = {
        ...this.form,
        ...getObj(this.options[v]),
      }
      // this.classForm.zigeperson = {
      //   ...this.classForm.zigeperson,
      //   ...getObj(this.options[v]),
      // };
    },
    // 提交上传文件
    // submitFileForm() {

    //   // importPxResult({ TrainId: this.peoData.TrainId, importFile: this.importFile }).then(res => {
    //   //   this.$modal.msgSuccess("导入成功");
    //   //   this.upload.open = false;
    //   //   this.upload.isUploading = false;
    //   //   this.$refs.upload.clearFiles();
    //   //   this.getPeoList();
    //   // })

    // },
    handleAdd() {
      this.open = true;
      this.title = "添加人员";
    },
    handleSettingAuditState(row) {
      console.log(row);
      this.auditDia = true;
      this.activeSetting = row;

      this.auditForm.JLYzfFlg = row.JLYzfFlg;
      this.auditForm.ZJzfFlg = row.ZJzfFlg;
      this.auditForm.ShenHe = row.ShenHe;
      this.auditForm.ZfResult = row.ZfResult;
      this.auditForm.ID = row.ID;
    },
    //审核提交
    onAuditSubmit() {
      this.$refs["auditRef"].validate((valid) => {
        if (valid) {
          saveAuditState(this.auditForm)
            .then((res) => {
              this.$message({
                type: "success",
                message: "设置成功",
              });
              this.getList();
            })
            .finally(() => {
              this.auditDia = false;
            });
        }
      });
    },
    // 表单重置
    reset() {
      this.form = {
        ID: null,
        DeptID: null,
        Dept: null,
        Name: null,
        ShenFenZheng: null,
        JLYZhengHao: null,
        JLYZhengHaoNum: null,
        JLYfzrq: null,
        JLZhengHao: null,
        JLZhengHaoNum: null,
        JLfzrq: null,
        JLYxqz: null,
        ZJZhengHao: null,
        ZJfzrq: null,
        JSBZhengHao: null,
        JSBfzrq: null,
        Sex: null,
        Birthday: null,
        XueLi: null,
        ZhuanYe: null,
        ZhiCheng: null,
        NianXian: null,
        LianXiRen: null,
        Tel: null,
        Phone: null,
        Fax: null,
        PostCode: null,
        Address: null,
        Email: null,
        wangzhi: null,
        ChuFa: null,
        ChuFaTime: null,
        BljlFlg: null,
        BljlBianhao: null,
        BljlContent: null,
        BljlDingxing: null,
        BljlClyj: null,
        BljlGbStart: null,
        BljlGbEnd: null,
        BeiZhu: null,
        ShenHe: null,
        SendTime: null,
        DisplayOrder: null,
        DelFlg: null,
        DelTime: null,
        JLYzfFlg: null,
        UpdateTime: null,
        isJxjyShenheFlg: null,
        ZJzfFlg: null,
        ZfResult: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          updateRenCai(this.form).then((response) => {
            this.$modal.msgSuccess("修改成功");
            this.open = false;
            this.getList();
          });
        }
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.$modal.loading('加载中')
      this.reset();
      const ID = row.ID || this.ids;
      getRenCai(ID).then((response) => {
        this.form = response.data.renCai;
        this.open = true;
        this.$modal.closeLoading()
        this.title = "修改监理人才管理";
      }).catch(() => {
        this.$modal.closeLoading()
      })
    },
    handleBianGeng(row) {
      // this.form.Dept = null
      // this.form.DeptID = null
      this.openBianGeng = true
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const IDs = row.ID || this.ids;
      this.$modal
        .confirm("是否确认删除选中的数据项？")
        .then(function () {
          return delRenCai(IDs);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => { });
    },
    handleTableIndex,
    handleView(row) {
      getYeJi({
        XYusercord: row.ShenFenZheng,
      }).then((res) => {
        this.achievementTableData = res.rows;
      });
      this.viewDia = true;
    },
    /** 查询监理人才管理列表 */
    getList() {
      this.loading = true;
      listRenCai(this.addDateRange(this.queryParams, this.dateRange)).then((response) => {
        this.RenCaiList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.dateRange = []
      this.handleQuery();
    },
  },
};
</script>
<style scoped lang="scss">
.supervision {
  color: red;
}

.formTitle {
  color: #409eff;
  border-bottom: 1px solid #409eff;
  padding: 10px;
  font-size: 15px;
  font-weight: bold;
}

::v-deep .qiye .el-select>.el-input {
  display: block;
  width: 533px;
}

::v-deep .el-select>.el-input {
  display: block;
  width: 203px;
}

::v-deep .el-form-item__label {
  // text-align: justify !important;

  // text-align-last: justify !important;
}

::v-deep .el-select {
  width: 100% !important;
}

::v-deep .select-container {
  width: 100%;
  /* 如果需要，可以设置外部容器的宽度 */
}

::v-deep .select-container .el-select {
  width: 100%;
  /* 让 el-select 占满外部容器的宽度 */
}

::v-deep .hide .el-upload--picture-card {
  display: none;
}

::v-deep .el-upload-dragger {
  background-color: #fff;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 480px;
  height: 180px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

::v-deep .el-dialog__body {
  padding: 0px 20px;
  color: #606266;
  font-size: 14px;
  word-break: break-all;
}
</style>
