<template>
  <div class="temporary whiteBlock">
    <div class="content">
      <div class="title_wrap flex">
        <el-form :inline="true" class="demo-form-inline" size="medium">
          <el-form-item :label="$t('message.laborMange.personnelType')">
            <el-select size="medium" v-model="tableParameter.personType" :placeholder="$t('message.laborMange.pleaseChoose') +
              $t('message.laborMange.personnelType')
              ">
              <el-option :label="$t('message.laborMange.all')" :value="''"></el-option>
              <el-option :label="$t('message.laborMange.modules')" value="1"></el-option>
              <el-option :label="$t('message.laborMange.modules1')" value="2"></el-option>
              <el-option :label="$t('message.laborMange.modules2')" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('message.laborMange.healthCodeStatus')" v-if="company == 'nanchang'">
            <el-select v-model="tableParameter.codeState" style="width: 120px">
              <el-option :label="$t('message.laborMange.all')" value></el-option>
              <el-option :label="$t('message.laborMange.codeless')" value="0"></el-option>
              <el-option :label="$t('message.laborMange.redCode')" value="1"></el-option>
              <el-option :label="$t('message.laborMange.yellowCode')" value="2"></el-option>
              <el-option :label="$t('message.laborMange.greenCode')" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('message.laborMange.companies')">
            <el-select v-model="tableParameter.enterpriseId" :placeholder="$t('message.laborMange.pleaseChoose') +
              $t('message.laborMange.companies')
              " filterable>
              <el-option :label="$t('message.laborMange.allTheCompany')" :value="''"></el-option>
              <el-option v-for="(item, index) in enterpriseListData" :key="index" :label="item.enterpriseName"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('message.laborMange.workingState')">
            <el-select size="medium" v-model="tableParameter.inserviceType" :placeholder="$t('message.laborMange.pleaseChoose') +
              $t('message.laborMange.workingState')
              ">
              <el-option :label="$t('message.laborMange.onJob')" value="1"></el-option>
              <el-option :label="$t('message.laborMange.dimission')" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('message.laborMange.compellation')">
            <el-input :placeholder="$t('message.laborMange.placeholder2')"
              v-model="tableParameter.workerName"></el-input>
          </el-form-item>
          <el-form-item :label="$t('message.laborMange.IdNumber')">
            <el-input :placeholder="$t('message.laborMange.placeholder2')" v-model="tableParameter.idCard"></el-input>
          </el-form-item>
          <el-form-item label="人员下发状态" v-if="isIscDevice || isDangong">
            <el-select size="medium" v-model="tableParameter.sendSuccessStatus" placeholder="请选择">
              <el-option v-for="(item, index) in sendStatusArr" :key="index" :label="item.name"
                :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="下发状态" v-if="isDangong">
              <el-select
                v-model="tableParameter.dangongStatus"
                clearable
              >
                <el-option
                v-for="(item, index) in dangongStatusList" :key="item.id"
                  :label="item.dangongStatusName"
                  :value="index"
                ></el-option>
              </el-select>
            </el-form-item>
          <el-form-item> -->
          <el-button v-permission="{
            key: 'hmc_query',
            menuPath: '/project/labor/roster',
          }" type="primary" @click="
            page = 1;
          getInfoList();
          " plain>{{ $t("message.laborMange.inquire") }}</el-button>
          <el-button v-permission="{
            key: 'hmc_refresh',
            menuPath: '/project/labor/roster',
          }" type="warning" @click="
            page = 1;
          tableParameter.workerName = '';
          tableParameter.enterpriseId = '';
          tableParameter.inserviceType = '';
          tableParameter.personType = '';
          tableParameter.idCard = '';
          tableParameter.sendSuccessStatus = null;
          tableParameter.dangongStatus = '';
          getInfoList();
          " plain>{{ $t("message.laborMange.refresh") }}</el-button>
          <!-- <el-button type="primary" @click="handleExport" plain
              >{{$t('message.laborMange.haiqing') + $t('message.laborMange.export')}}</el-button
            > -->
          <el-button v-permission="{
            key: 'hmc_exportPerson',
            menuPath: '/project/labor/roster',
          }" type="primary" @click="crewExport" plain>{{
            $t("message.laborMange.crew") + $t("message.laborMange.export")
          }}</el-button>
          <el-button v-permission="{
            key: 'hmc_inputPerson',
            menuPath: '/project/labor/roster',
          }" type="primary" @click="memberRegister">人员录入</el-button>
          <el-button type="primary" @click="checkAllFn" v-permission="{
            key: 'hmc_check_all',
            menuPath: '/project/labor/roster',
          }">全选</el-button>
          <el-button type="primary" @click="onBatchSynchronization" v-permission="{
            key: 'hmc_batch_authorization',
            menuPath: '/project/labor/roster',
          }">批量授权门禁权限</el-button>
          <el-button v-permission="{
            key: 'hmc_batch_binddevice',
            menuPath: '/project/labor/roster',
          }" type="primary" @click="onBatchBinddevice">批量人员绑定设备</el-button>

          <!-- <el-button
              type="primary"
              @click="onBatchDeletion"
              v-permission="{
                key: 'hmc_batch_deletion',
                menuPath: '/project/labor/roster',
              }"
              >批量删除</el-button
            > -->
          </el-form-item>
        </el-form>
      </div>
      <vue-scroll style="height: 86%">
        <el-table ref="multipleTable" :data="tableData" style="width: 100%" row-key="id"
          :header-cell-style="{ background: '#E2EBFF' }" :show-header="false" :row-class-name="tableRowClassName"
          @selection-change="handleSelectionChange">
          <!-- :reserve-selection="true" -->
          <el-table-column align="center" type="selection" width="55">
          </el-table-column>
          <el-table-column prop="attendanceNumber">
            <template slot-scope="scope">
              <div class="flex3" style="padding-left: 20px">
                <!-- {{scope.row}} -->
                <!-- :src="$store.state.FILEURL + scope.row.fieldAcquisitionUrl" -->
                <img :src="$store.state.FILEURL + scope.row.fieldAcquisitionUrl" style="
                    width: 52px;
                    height: 72px;
                    margin: 0px 15px;
                    cursor: pointer;
                  " @click="handlePreview(scope.row.fieldAcquisitionUrl)" />
                <div>
                  <div class="workerName" @click="showDetail(scope.row)">
                    {{ scope.row.workerName }}
                  </div>
                  <el-tag v-if="company == 'nanchang'" :type="parseCode(scope.row.codeState)[0]" size="small"
                    style="margin-left: 10px">{{ parseCode(scope.row.codeState)[1] }}</el-tag>
                  <!-- 疫苗接种状态 -->
                  <span v-if="company == 'nanchang'" style="margin: 0 10px">{{
                    scope.row.vaccineStatus === 0
                      ? "未接种"
                      : scope.row.vaccineStatus === 1
                        ? "已接种"
                        : "未知"
                  }}</span>
                  <!-- 疫苗接种针次 -->
                  <span v-if="company == 'nanchang' && scope.row.vaccineStatus">{{
                    scope.row.vaccineTimes === 1
                      ? "第一针"
                      : scope.row.vaccineTimes === 2
                        ? "第二针"
                        : scope.row.vaccineTimes === 3
                          ? "第三针"
                          : ""
                  }}</span>
                  <div style="text-align: left; color: #7d839d; font-size: 14px" v-if="company == 'nanchang'">
                    <span style="margin-right: 10px">{{
                      scope.row.nadCode == 0
                        ? "未查询到核酸结果"
                        : scope.row.nadCode == 1
                          ? "核酸阴性"
                          : scope.row.nadCode == 2
                            ? "核酸阳性-确诊"
                            : scope.row.nadCode == 3
                              ? "核酸检测有效期已过"
                              : ""
                    }}</span>
                    <span>{{ scope.row.nadTime }}</span>
                  </div>

                  <div style="text-align: left; color: #7d839d; font-size: 14px" v-if="company != 'nanchang'">
                    <span style="margin-right: 10px">{{
                      scope.row.sex == 1
                        ? $t("message.laborMange.man")
                        : $t("message.laborMange.female")
                    }}</span>
                    <span style="margin-right: 10px">{{ computedAge(scope.row.idCard)
                    }}{{ $t("message.laborMange.age") }}</span>
                    <span>{{ scope.row.nation
                    }}{{ $t("message.laborMange.clan") }}</span>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="attendanceNumber" align="left">
            <template slot-scope="scope">
              <div>
                {{ $t("message.laborMange.contactNumber") }}：{{
                  scope.row.phoneNumber
                }}
              </div>
              <div v-if="scope.row.personType == 1">
                {{ $t("message.laborMange.belongsToTeam") }}：{{
                  scope.row.teamName
                }}
              </div>
              <div v-if="scope.row.personType == 2">
                {{ $t("message.laborMange.department") }}：{{
                  scope.row.departmentName
                }}
              </div>
              <div style="text-align: left; color: #7d839d; font-size: 14px" v-if="company == 'nanchang'">
                <span style="margin-right: 10px">{{
                  scope.row.sex == 1
                    ? $t("message.laborMange.man")
                    : $t("message.laborMange.female")
                }}</span>
                <span style="margin-right: 10px">{{ computedAge(scope.row.idCard)
                }}{{ $t("message.laborMange.age") }}</span>
                <span>{{ scope.row.nation
                }}{{ $t("message.laborMange.clan") }}</span>
              </div>
              <!--                            <div v-if="scope.row.personType==3">所属部门：{{scope.row.departmentName}}</div>-->
            </template>
          </el-table-column>
          <el-table-column align="lfet">
            <template slot-scope="scope">
              <div>
                <div v-if="scope.row.inserviceType == 1">
                  {{ $t("message.laborMange.dateOfEntry") }}：{{
                    scope.row.enterDate
                  }}
                </div>
                <div v-if="scope.row.inserviceType == 2">
                  {{ $t("message.laborMange.anExitDate") }}：{{
                    scope.row.exitDate
                  }}
                </div>
                <div>
                  {{ $t("message.laborMange.workingState") }}：{{
                    scope.row.inserviceType == 1
                      ? $t("message.laborMange.onJob")
                      : $t("message.laborMange.dimission")
                  }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="idCard" align="lfet">
            <template slot-scope="scope">
              <div>
                <div>
                  {{ $t("message.laborMange.IdNumber") }}：{{
                    scope.row.idCard
                  }}
                </div>
                <div>
                  {{ $t("message.laborMange.personnelType") }}：{{
                    scope.row.personType == 1
                      ? $t("message.laborMange.modules")
                      : scope.row.personType == 2
                        ? $t("message.laborMange.modules1")
                        : $t("message.laborMange.modules2")
                  }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="lfet">
            <template v-slot="{ row }">
              <div>
                <div v-if="isIscDevice || isDangong">
                  下发状态：
                  <span :class="[
                    'valuesColor',
                    row.sendSuccessStatus === 1
                      ? 'green'
                      : row.sendSuccessStatus === 2
                        ? 'red'
                        : row.sendSuccessStatus === 3
                          ? 'yellow'
                          : row.sendSuccessStatus === 4
                            ? 'red'
                            : '',
                  ]">
                    {{
                      row.sendSuccessStatus === 1
                        ? "成功"
                        : row.sendSuccessStatus === 2
                          ? "失败"
                          : row.sendSuccessStatus === 3
                            ? "部分成功"
                            : row.sendSuccessStatus === 4
                              ? "未下发"
                              : ""
                    }}</span>
                </div>
                <!-- <div v-else-if="isDangong">
                  下发状态：
                  <span
                    :class="{valuesColor: row.dangongStatus || row.dangongStatus == 0, green: row.dangongStatus == 0, red: row.dangongStatus == 2 || row.dangongStatus == 4, yellow: row.dangongStatus == 1 || row.dangongStatus == 3 || row.dangongStatus == 5 || row.dangongStatus == 6}"
                  >{{ row.dangongStatus || row.dangongStatus == 0 ? dangongStatusList[row.dangongStatus].dangongStatusName: "" }}</span>
                </div> -->
                <!--                                <div>企业类型：{{scope.row.idCard}}</div>-->
                <div>
                  {{ $t("message.laborMange.companies") }}：{{
                    row.enterpriseName
                  }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" width="200px">
            <template slot-scope="scope">
              <div class="tableBtns">
                <el-button v-if="isIscDevice" v-permission="{
                  key: 'hmc_ckxfxq',
                  menuPath: '/project/labor/roster',
                }" size="medium" type="text" class="operationText"
                  @click="issueTeamEvent(scope.row.id)">查看下发详情</el-button>
              </div>
            </template>
          </el-table-column>
          <!--                    <el-table-column prop="sex" label="操作" align="center">-->
          <!--                        <template slot-scope="scope">-->
          <!--                            <div class="flex" style="width:40%;  margin: auto;">-->
          <!--                                &lt;!&ndash; <div class="flex" style="cursor: pointer;" @click="editStaffInfo(scope.row)">-->
          <!--                                  <img src="@/assets/images/icon-edit.png" style="margin-right:8px" />-->
          <!--                                  <span>{{$t('message.laborMange.edit')}}</span>-->
          <!--                                </div> &ndash;&gt;-->
          <!--                                <div class="flex" style="cursor: pointer;" @click="auditFn(scope.row.id,1)">-->
          <!--                                    <el-button type="danger" size="medium">驳回</el-button>-->
          <!--                                </div>-->
          <!--                                <div class="flex" style="cursor: pointer;" @click="auditFn(scope.row.id,2)">-->
          <!--                                    <el-button type="primary" size="medium">通过</el-button>-->
          <!--                                </div>-->
          <!--                                &lt;!&ndash; <div class="flex" style="cursor: pointer;" @click="deteleStaffInfo(scope.row)">-->
          <!--                                  <img-->
          <!--                                    src="@/assets/images/icon-delete.png"-->
          <!--                                    style="margin-right:8px;margin-top:-2px"-->
          <!--                                  />-->
          <!--                                  <span>{{$t('message.laborMange.delete')}}</span>-->
          <!--                                </div> &ndash;&gt;-->
          <!--                            </div>-->
          <!--                        </template>-->
          <!--                    </el-table-column>-->
        </el-table>
      </vue-scroll>
      <!-- <el-pagination
              class="pagerBox"
              style="margin:10px 20px 0; text-align: right; "
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next"
              :total="total"
              background
            ></el-pagination> -->
      <el-pagination style="margin: 10px 20px 0" class="pagerBox" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :current-page="page" :page-sizes="pageSizeList" :page-size="pageSize"
        layout="total, sizes, prev, pager, next" :total="Number(total)" background></el-pagination>
    </div>

    <!-- 新增 || 编辑 弹框 -->
    <el-dialog :modal-append-to-body="false" class="temporaryDialog" :title="temporaryTitle"
      :visible.sync="temporaryDialog" width="1100px" :close-on-click-modal="false">
      <div class="dialog_content">
        <el-form ref="addForm" :rules="rules" :model="addForm" size="small" label-width="100px">
          <el-row :gutter="24">
            <div class="titleStyle flex">
              <span>{{ $t("message.laborMange.essential") }}</span>
            </div>
            <el-col :span="16">
              <el-row :gutter="24">
                <el-col :span="11">
                  <el-form-item :label="$t('message.laborMange.compellation')" prop="workerName">
                    <el-input v-model="addForm.workerName" style="width: 210px" :disabled="operationType == 'detail'"
                      :placeholder="$t('message.laborMange.placeholder2')"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item :label="$t('message.laborMange.sex')" prop="sex">
                    <el-radio-group v-model="addForm.sex" :disabled="operationType == 'detail'">
                      <el-radio :label="1">{{
                        $t("message.laborMange.man")
                      }}</el-radio>
                      <el-radio :label="2">{{
                        $t("message.laborMange.female")
                      }}</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="11">
                  <el-form-item :label="$t('message.laborMange.dateOfBirth')" prop="birthday">
                    <el-date-picker :disabled="operationType == 'detail'" v-model="addForm.birthday"
                      style="width: 210px" type="date" value-format="yyyy-MM-dd"
                      :placeholder="$t('message.laborMange.pleaseSelectADate')"></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item :label="$t('message.laborMange.IdNumber2')" prop="idCard">
                    <el-input :disabled="operationType == 'detail'" v-model="addForm.idCard" style="width: 210px"
                      :placeholder="$t('message.laborMange.placeholder2')" maxlength="18"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="11">
                  <el-form-item :label="$t('message.laborMange.nation')" prop="nation">
                    <el-select style="width: 210px" v-model="addForm.nation"
                      :placeholder="$t('message.laborMange.pleaseChoose')" :disabled="operationType == 'detail'">
                      <el-option v-for="item in $t('message.laborMange.nationList')" :key="item.name" :label="item.name"
                        :value="item.name"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item :label="$t('message.laborMange.nativePlace')" prop="nativePlace">
                    <el-input v-model="addForm.nativePlace" :placeholder="$t('message.laborMange.placeholder2')"
                      style="width: 210px" :disabled="operationType == 'detail'"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="11">
                  <el-form-item :label="$t('message.laborMange.issuingAuthority')" prop="issuingAuthorityForIdcard">
                    <el-input v-model="addForm.issuingAuthorityForIdcard"
                      :placeholder="$t('message.laborMange.placeholder2')" style="width: 210px"
                      :disabled="operationType == 'detail'"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <el-form-item :label="$t('message.laborMange.effectiveDate')" prop="idCardEndDate">
                    <el-input v-if="addForm.longTerm == 1" :value="$t('message.laborMange.longTime')"
                      :placeholder="$t('message.laborMange.placeholder2')" style="width: 210px"
                      :disabled="operationType == 'detail'"></el-input>
                    <el-date-picker v-else v-model="addForm.idCardEndDate" style="width: 210px" type="date"
                      value-format="yyyy-MM-dd" :placeholder="$t('message.laborMange.pleaseSelectADate')"
                      :disabled="operationType == 'detail'"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="24">
                <el-col :span="11">
                  <el-form-item :label="$t('message.laborMange.contactNumber')" prop="phoneNumber">
                    <el-input v-model="addForm.phoneNumber" style="width: 210px"
                      :placeholder="$t('message.laborMange.placeholder2')" type="number"
                      oninput="if(value.length>11)value=value.slice(0,11)"
                      :disabled="operationType == 'detail'"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="11">
                  <!-- <el-form-item label="进场日期" prop="enterDate">
                                      <el-date-picker
                                        v-model="addForm.enterDate"
                                        style="width:210px"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        placeholder="请选择日期"
                                      ></el-date-picker>
                                    </el-form-item>-->
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="8" style="margin: 15px 0 30px">
              <div style="text-align: center; margin: -20px 0 8px 0px" class="flex" v-if="operationType != 'detail'">
                <el-button type="primary" size="medium" @click="getIdCardInfo">{{
                  $t("message.laborMange.idCardInformation")
                }}</el-button>
                <el-button type="primary" size="medium" @click="downloadPlugIn"
                  style="background: #09c2aa; border-color: #09c2aa">{{ $t("message.laborMange.highBeatDownload")
                  }}</el-button>
              </div>
              <div class="flex5 uploadImage_wrap" style="justify-content: space-around">
                <div class="position">
                  <img :src="$store.state.FILEURL + addForm.idCardBigPhotoUrl" v-if="addForm.idCardBigPhotoUrl != ''"
                    style="width: 100px; height: 119px; cursor: pointer"
                    @click="handlePreview(addForm.idCardBigPhotoUrl)" />
                  <img v-else :src="defaultImg" style="width: 100%; height: auto; cursor: pointer" />
                  <img src="@/assets/images/shut_icon.png" style="width: 16px; height: auto" class="shut_icon" v-if="
                    addForm.idCardBigPhotoUrl != '' &&
                    operationType != 'detail'
                  " @click.stop="addForm.idCardBigPhotoUrl = ''" />
                </div>
                <div class="position">
                  <img :src="$store.state.FILEURL + addForm.fieldAcquisitionUrl"
                    v-if="addForm.fieldAcquisitionUrl != ''" style="width: 100px; height: 119px; cursor: pointer"
                    @click="handlePreview(addForm.fieldAcquisitionUrl)" />
                  <img v-else :src="defaultImg" style="width: 100%; height: auto; cursor: pointer" />
                  <!-- <img
                    src="@/assets/images/shut_icon.png"
                    style="width:15px; height:auto"
                    class="shut_icon"
                    v-if="addForm.fieldAcquisitionUrl != ''"
                    @click="addForm.fieldAcquisitionUrl = ''"
                  /> -->
                </div>
              </div>
              <div class="flex5" style="justify-content: space-around">
                <span>
                  <span class="required">*</span>{{ $t("message.laborMange.IdCardHead") }}
                </span>
                <span> <span class="required">*</span>现场采集人脸 </span>
              </div>
              <div class="flex5" v-if="operationType != 'detail'">
                <el-upload class="upload-demo" ref="upload" :action="$store.state.UPLOADURL"
                  :before-upload="beforeUpload" name="files" :on-success="(file) => uploadSuccess(file, 1)"
                  :show-file-list="false" :disabled="operationType == 'detail'">
                  <el-button slot="trigger" size="medium" type="primary">{{
                    $t("message.laborMange.clickOnTheUpload")
                  }}</el-button>
                </el-upload>
                <!-- <el-upload
                                  class="upload-demo"
                                  ref="upload"
                                  :action="$store.state.UPLOADURL"
                                  name="files"
                                  :before-upload="beforeUpload"
                                  :on-success="(file)=>uploadSuccess(file,2)"
                                  :show-file-list="false"
                                >
                                  <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
                                </el-upload>-->
              </div>
            </el-col>
            <div class="titleStyle flex">
              <span>{{ $t("message.laborMange.attendanceInfo") }}</span>
            </div>
            <el-row :gutter="24">
              <el-col :span="11">
                <el-form-item :label="$t('message.laborMange.attendanceNumber')" prop="attendanceNumber">
                  <el-input v-model="addForm.attendanceNumber" :placeholder="$t('message.laborMange.placeholder2')"
                    style="width: 210px" :disabled="operationType == 'detail'"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-row>
        </el-form>
        <!-- style="margin-left:120px" -->
        <div class="dialog-footer" v-if="operationType != 'detail'">
          <el-button size="medium" icon="el-icon-circle-close" @click="temporaryDialog = false">{{
            $t("message.laborMange.cancel") }}</el-button>
          <el-button icon="el-icon-circle-check" type="primary" size="medium" @click="submitForm('addForm')">{{
            $t("message.laborMange.confirm") }}</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 查看大图 -->
    <div v-if="bigImageDialog" class="bigImageDialog" @click="bigImageDialog = false">
      <div class="bigImageContent">
        <img width="auto" height="auto" :src="bigImageUrl" alt />
      </div>
    </div>
    <!-- 项目配置弹框 -->
    <el-dialog :modal-append-to-body="false" :title="$t('message.laborMange.configurationEntryOptions')"
      :visible.sync="editProjectSettingDialog" width="667px">
      <div class="dialog_content">
        <div class="dialogFormBox">
          <div style="padding-bottom: 20px">
            {{ $t("message.laborMange.qrCodeInputPersonnelNeedToReview") }}
            <el-radio @change="editProjectSetting" style="margin-left: 20px" v-model="needAudit" :label="1">{{
              $t("message.laborMange.yes") }}</el-radio>
            <el-radio @change="editProjectSetting" v-model="needAudit" :label="0">{{ $t("message.laborMange.no")
            }}</el-radio>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog :modal-append-to-body="false" :title="$t('message.laborMange.selectThePersonnelToIssueTheBrake')"
      :visible.sync="configDevDialog" width="667px">
      <div class="dialog_content">
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">{{
          $t("message.laborMange.checkAll") }}</el-checkbox>
        <div style="margin: 15px 0"></div>

        <div>
          <el-checkbox-group v-model="selectCompanyData" @change="handleCheckedCompanyChange">
            <!-- v-if="$store.state.userInfo.accountType==5||disabledArr.indexOf(city.id+'')!=-1" -->
            <el-checkbox v-for="city in allUfaceDev" :label="city.id + ''" :key="city.id">{{ city.devName
            }}</el-checkbox>
          </el-checkbox-group>
        </div>

        <div class="dialog-footer">
          <el-button class="cancleBtn" @click="configDevDialog = false" icon="el-icon-circle-close" size="medium">{{
            $t("message.alarmValueSet.cancel") }}
          </el-button>
          <el-button type="primary" icon="el-icon-circle-check" @click="saveDevConfigDataFn" size="medium">{{
            $t("message.alarmValueSet.save") }}
          </el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 人员录入表单 -->
    <comboForm :comboFormVisible="comboFormVisible" @closeDialog="comboFormClose"></comboForm>
    <!-- 下发详情 -->
    <el-dialog :modal-append-to-body="false" title="下发详情" :close-on-click-modal="false" :visible.sync="issueTeamDialog"
      width="740px">
      <div class="dialog_content">
        <div class="table_wrap whiteBlock">
          <el-table class="tables" :data="issuePointList">
            <el-table-column type="index" width="50" align="center"
              :label="$t('message.personnelPosition.beaconManage.table.index')"></el-table-column>
            <el-table-column prop="detail" label="任务名称" align="center"></el-table-column>
            <el-table-column prop="isSuccess" label="执行结果" align="center">
              <template v-slot="{ row }">{{
                row.isSuccess === 1 ? "成功" : row.isSuccess === 0 ? "失败" : ""
              }}</template>
            </el-table-column>

            <el-table-column :label="$t('message.personnelPosition.beaconManage.table.operation')
              " align="center" width="150">
              <template v-slot="{ row }">
                <div class="operationText" @click="retryEvent(row.id)" v-if="row.isSuccess === 0">
                  <span style="color: #5381f6">重试</span>
                </div>
              </template>
            </el-table-column>
            <!-- <div slot="empty">{{$t('message.personnelPosition.empty')}}</div> -->
          </el-table>
          <!-- <el-pagination
            class="pagerBox"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="issuePage.pageNo"
            :page-sizes="$store.state.PAGESIZRS"
            :page-size="issuePage.pageSize"
            layout="total, sizes, prev, pager, next"
            :total="Number(total)"
            background
          ></el-pagination> -->
          <!-- <div class="dialog-footer">
            <el-button
              class="cancleBtn"
              @click="issueTeamDialog = false"
              icon="el-icon-circle-close"
              size="medium"
              >{{ $t("message.laborMange.cancel") }}</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-circle-check"
              @click="issueTeamDialog = false"
              size="medium"
              >{{ $t("message.laborMange.confirm") }}</el-button
            >
          </div> -->
        </div>
      </div>
    </el-dialog>
    <el-dialog :modal-append-to-body="false" title="批量人员绑定设备" :visible.sync="batchBindDialog" width="668px">
      <div class="dialog_content">
        <el-form ref="batchBindForm" :model="batchBindForm" :rules="batchBindRules" label-width="130px" size="medium">
          <el-form-item label="人脸设备" prop="typeId">
            <el-select style="width: 320px" v-model="batchBindForm.ufaceDevId" multiple collapse-tags filterable placeholder="请选择">
              <el-option v-for="item in allUfaceDev" :key="item.id" :label="item.devName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="dialog-footer">
        <el-button class="cancleBtn" @click="batchBindDialog = false" icon="el-icon-circle-close" size="medium">{{
          $t("message.alarmValueSet.cancel") }}
        </el-button>
        <el-button type="primary" icon="el-icon-circle-check" @click="onBatchBindSubmit" size="medium">确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  adoptWorkerInfoApi,
  rejectWorkerInfoApi,
  deleteWorkerInfoAuditApi,
  selectWorkerInfoAuditListApi,
  ufaceDevList,
  getEnterpriseInfoList,
  getWorkerInfoList,
  xmglXzHikvisionSyncGetNewestList,
  xmglXzHikvisionSyncRetryAPI,
  getProjectUfaceConfigInfo,
  sendBatchWokerApi,
  batchBindDevForWorkersApi,
} from "@/assets/js/api/laborPerson";
import {
  getProjectConfigListApi,
  editProjectConfigListApi,
} from "@/assets/js/api/project.js";
import { selectUserDevAuthorityByUserIdApi } from "@/assets/js/api/configManage";
import comboForm from "./components/comboForm/comboForm.vue";
import mqtt from "mqtt";
var client = null;
const options = {
  connectTimeout: 40000,
  clientId: "mqttjs_" + Math.random().toString(16).substr(2, 8),
  username: "root",
  password: "123456",
  clean: true,
};
export default {
  name: "temporary",
  components: {
    comboForm,
  },
  data() {
    return {
      pageSizeList: [],
      multipleSelection: [],
      isAllChecked: false,
      loading: false,
      sendStatusArr: [
        { name: "未下发", value: 4 },
        { name: "成功", value: 1 },
        { name: "失败", value: 2 },
        { name: "部分成功", value: 3 },
      ],
      issuePointList: [],
      comboFormVisible: false,
      tableData: [],
      page: 1,
      pageSize: 10,
      total: 0,
      workerName: "",
      enterDate: "",
      temporaryDialog: false,
      temporaryTitle: this.$t("message.laborMange.personnelEntry"),
      operationType: "add",
      addForm: {
        personType: 3,
        workerName: "",
        sex: 0,
        phoneNumber: "",
        attendanceNumber: "",
        nation: "",
        issuingAuthorityForIdcard: "",
        idCardBigPhotoUrl: "",
        // fieldAcquisitionUrl: "",
        idCardEndDate: "",
        nativePlace: "",
        birthday: "",
        idCard: "",
        // enterDate: "",
        vaccineStatus: "", //疫苗接种状态 0未接种 1已接种 null未知
        vaccineTimes: "", // 疫苗接种次数
      },
      bigImageDialog: false,
      bigImageUrl: "",
      projectSn: "",
      defaultImg: require("@/assets/images/profile_photo.png"),
      rules: {
        workerName: [
          {
            required: true,
            message: this.$t("message.laborMange.pleaseInputYourName"),
            trigger: "blur",
          },
        ],
        idCard: [
          {
            required: true,
            message: this.$t("message.laborMange.pleaseInputYourIdNumber"),
            trigger: "blur",
          },
        ],
        attendanceNumber: [
          {
            required: true,
            message: this.$t(
              "message.laborMange.pleaseInputYourAttendanceNumber"
            ),
            trigger: "blur",
          },
        ],
        // phoneNumber: [
        //   { required: true, message: "请输入联系电话", trigger: "blur" },
        // ],
        // enterDate: [
        //   { required: true, message: "请选择进场日期", trigger: "blur" },
        // ],
      },
      enterpriseListData: [],
      tableParameter: {
        sendSuccessStatus: null,
        idCard: "",
        personType: "",
        workerName: "",
        enterpriseId: "",
        inserviceType: "",
        codeState: "",
        dangongStatus: "",
      },
      editProjectSettingDialog: false,
      needAudit: 0,
      allUfaceDev: [],
      configDevDialog: false,
      checkAll: false,
      isIndeterminate: false,
      selectCompanyData: [],
      itemSelectId: "",
      disabledArr: [],
      company: "",
      issueTeamDialog: false,
      issuePage: {
        pageNo: 1,
        pageSize: 10,
      },
      whoId: "",
      isIscDevice: false,
      isDangong: false, // 是否是弹弓设备
      dangongStatusList: [
        {
          id: 1,
          dangongStatusName: "成功",
        },
        {
          id: 2,
          dangongStatusName: "没有照片",
        },
        {
          id: 3,
          dangongStatusName: "入库失败",
        },
        {
          id: 4,
          dangongStatusName: "与 XXX 相似度高",
        },
        {
          id: 5,
          dangongStatusName: "下载失败",
        },
        {
          id: 6,
          dangongStatusName: "照片太大",
        },
        {
          id: 7,
          dangongStatusName: "其他",
        },
      ], //弹弓设备状态列表
      topicName: "topic",
      userId: "",
      batchBindDialog: false,
      batchBindForm: {
        ufaceDevId: [],
      },
      batchBindRules: {
        ufaceDevId: [
          {
            type: "array",
            required: true,
            message: "请选择设备",
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {
    computedAge() {
      return function (userCard) {
        //获取年龄

        var yearBirth = userCard.substring(6, 10);
        var monthBirth = userCard.substring(10, 12);
        var dayBirth = userCard.substring(12, 14);
        //获取当前年月日并计算年龄
        var myDate = new Date();
        var monthNow = myDate.getMonth() + 1;
        var dayNow = myDate.getDay();
        var age = myDate.getFullYear() - yearBirth;
        if (
          monthNow < monthBirth ||
          (monthNow == monthBirth && dayNow < dayBirth)
        ) {
          age--;
        }
        //得到年龄
        // sexAndAge.age = age;
        //返回性别和年龄
        return age;
      };
    },
  },
  created() {
    this.projectSn = this.$store.state.projectSn;
    this.company = COMPANY;
    this.pageSizeList = JSON.parse(JSON.stringify(this.$store.state.PAGESIZRS));
    this.getMachineList();
    this.getInfoList();
    this.getProjectList();
    this.getProjectSetting();
    this.getConfig();
  },
  mounted() {
    this.userId = this.$store.state.userInfo.userId;
    this.topicName = this.$store.state.userInfo.scope;
    client = mqtt.connect(mqttUrl, options);
    this.mqttMSG();
  },
  methods: {
    // 监听mqtt下发信息然后刷新列表
    mqttMSG() {
      // mqtt连接   +"/#"  +workerId
      client.on("connect", (e) => {
        // console.log('连接成功:', this.topicName + this.userId)
        client.subscribe(this.topicName + this.userId, { qos: 0 }, (error) => {
          if (!error) {
            // console.log('订阅成功12345')
          } else {
            console.log("订阅失败");
          }
        });
      });
      // 接收消息处理
      client.on("message", (topic, message) => {
        console.log(message);
        this.getInfoList();
      });
      // 断开发起重连
      // client.on("reconnect", (error) => {
      //   console.log("正在重连:", error);
      // });
      // 链接异常处理
      client.on("error", (error) => {
        console.log("连接失败:", error);
      });
    },
    // 批量删除
    // onBatchDeletion(){
    //   if (this.multipleSelection.length == 0) {
    //     this.$message.warning("请选择需要删除的数据!");
    //     return;
    //   }
    //   console.log("999999999999999999999999999")
    //   console.log(this.multipleSelection)
    //   console.log("999999999999999999999999999")
    //   const deleteIds = this.multipleSelection.map((item) => item.id).join(",");
    //   console.log(deleteIds)
    // },

    // 批量授权
    onBatchSynchronization() {
      if (this.multipleSelection.length == 0) {
        this.$message.warning("请选择需要授权的数据!");
        return;
      }
      console.log(this.multipleSelection);
      const ids = this.multipleSelection.map((item) => item.id).join(",");
      this.onBatchSynchronizationDeal(ids);
    },
    onBatchBinddevice() {
      if (this.multipleSelection.length == 0) {
        this.$message.warning("请选择需要批量绑定的数据!");
        return;
      }
      this.batchBindForm.ufaceDevId = [];
      this.batchBindDialog = true;
      // const ids = this.multipleSelection.map((item) => item.id).join(",");
    },
    onBatchBindSubmit() {
      this.$refs["batchBindForm"].validate((valid) => {
        if (valid) {
          const ids = this.multipleSelection.map((item) => item.id);
          batchBindDevForWorkersApi({
            projectSn: this.projectSn,
            ufaceDevId: this.batchBindForm.ufaceDevId.join(","),
            workerIdList: ids,
          }).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: res.message,
                type: "success",
              });
              this.batchBindDialog = false;
            }
          });
        }
      });
    },
    onBatchSynchronizationDeal(ids) {
      sendBatchWokerApi({
        projectSn: this.projectSn,
        userId: this.$store.state.userInfo.userId,
        workerIds: ids,
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "操作成功，已授权，请稍后查看！",
            type: "success",
          });
        }
      });
    },
    // 选中状态
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    checkAllFn() {
      // 全选按钮值切换
      this.isAllChecked = !this.isAllChecked;
      this.$refs.multipleTable.toggleAllSelection();
      // this.checkedDataFn();
    },
    checkedDataFn() {
      if (this.isAllChecked) {
        this.tableData.map((item) => {
          this.$refs.multipleTable.toggleRowSelection(item, true);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    getConfig() {
      getProjectUfaceConfigInfo({
        projectSn: this.$store.state.projectSn,
      }).then((result) => {
        if (result.success) {
          if (result.result) {
            this.isIscDevice = [9, 11].includes(result.result.supplierType) ? true : false;
            this.isDangong = result.result.supplierType == 8 ? true : false;
          }
        }
      });
    },
    // 人员录入关闭
    comboFormClose() {
      this.comboFormVisible = false;
      this.getInfoList();
    },
    // 人员录入
    memberRegister() {
      this.comboFormVisible = true;
    },
    handleExport() {
      window.location.href =
        this.$http.defaults.baseURL +
        "xmgl/download/exporZipWorkerInfo?idCard=" +
        this.tableParameter.idCard +
        "&projectSn=" +
        this.projectSn +
        "&enterpriseId=" +
        this.tableParameter.enterpriseId +
        "&inserviceType=" +
        this.tableParameter.inserviceType +
        "&workerName=" +
        this.tableParameter.workerName +
        "&personType=" +
        this.tableParameter.personType +
        "&codeState=" +
        this.tableParameter.codeState +
        "&dangongStatus=" +
        this.tableParameter.dangongStatus +
        "&userEnterpriseId=" +
        this.$store.state.userInfo.userEnterpriseId;
    },
    //人员导出
    crewExport() {
      window.location.href =
        this.$http.defaults.baseURL +
        "xmgl/download/exportExcelWorkerInfo?idCard=" +
        this.tableParameter.idCard +
        "&projectSn=" +
        this.projectSn +
        "&enterpriseId=" +
        this.tableParameter.enterpriseId +
        "&inserviceType=" +
        this.tableParameter.inserviceType +
        "&workerName=" +
        this.tableParameter.workerName +
        "&personType=" +
        this.tableParameter.personType +
        "&codeState=" +
        this.tableParameter.codeState +
        "&dangongStatus=" +
        this.tableParameter.dangongStatus +
        "&userEnterpriseId=" +
        this.$store.state.userInfo.userEnterpriseId +
        "&userId=" +
        this.$store.state.userInfo.userId;
    },

    parseCode(code) {
      if (code == 0) {
        return ["info", this.$t("message.laborMange.codeless")];
      } else if (code == 1) {
        return ["danger", this.$t("message.laborMange.redCode")];
      } else if (code == 2) {
        return ["warning", this.$t("message.laborMange.yellowCode")];
      } else if (code == 3) {
        return ["success", this.$t("message.laborMange.greenCode")];
      }
    },
    handleCheckAllChange(val) {
      let arr = this.allUfaceDev.map((item) => String(item.id));
      this.selectCompanyData = val ? arr : [];
      this.isIndeterminate = false;
    },
    handleCheckedCompanyChange(value) {
      // console.log('handleCheckedCompanyChange')
      var arr = this.allUfaceDev;
      let checkedCount = this.selectCompanyData.length;
      this.checkAll = checkedCount === arr.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < arr.length;
    },
    saveDevConfigDataFn() {
      let accountType = 1;
      if (this.$store.state.userInfo.accountType == 6) {
        accountType = 2;
      }
      let ids = "";
      if (this.selectCompanyData.length > 0) {
        ids = this.selectCompanyData.join(",");
      }
      adoptWorkerInfoApi({
        id: this.itemSelectId,
        registerType: 2,
        accountType: accountType,
        ufaceDevId: ids,
      }).then((res) => {
        this.$message.success(
          this.$t("message.laborMange.operateSuccessfully")
        );
        this.configDevDialog = false;
        this.getInfoList();
      });
    },
    //获取项目配置信息
    getProjectSetting() {
      getProjectConfigListApi({
        projectSn: this.projectSn,
      }).then((res) => {
        if (!res.result || res.result.length == 0) {
          this.needAudit = 0;
        } else {
          let workerAuditType = res.result[0].workerAuditType;
          this.needAudit = workerAuditType;
        }
      });
    },
    //编辑项目配置信息
    editProjectSetting() {
      editProjectConfigListApi({
        projectSn: this.projectSn,
        workerAuditType: this.needAudit,
      }).then((res) => {
        this.$message.success(this.$t("message.laborMange.saveSuccess"));
        this.editProjectSettingDialog = false;
        this.getProjectSetting();
      });
    },
    // exportFn(){
    //   window.location.href=this.$http.defaults.baseURL+'xmgl/download/exporZipWorkerInfo?'+'projectSn='+this.projectSn+
    //   '&workerName='+this.workerName+'&personType=3'+'&enterDate='+this.enterDate;
    // },
    //获取列表信息
    getInfoList() {
      let data = {
        personType: this.tableParameter.personType, //人员类型
        enterpriseId: this.tableParameter.enterpriseId + "", //所属企业
        inserviceType: this.tableParameter.inserviceType, //在职状态
        idCard: this.tableParameter.idCard, //身份证号
        sendSuccessStatus: this.tableParameter.sendSuccessStatus, // 下发状态
        workerName: this.tableParameter.workerName, //姓名
        codeState: this.tableParameter.codeState,
        dangongStatus: this.tableParameter.dangongStatus, // 弹弓状态
        projectSn: this.projectSn,
        pageNo: this.page,
        pageSize: this.pageSize,
        // enterDate:this.enterDate,
        userEnterpriseId: this.$store.state.userInfo.userEnterpriseId,
      };
      getWorkerInfoList(data).then((res) => {
        if (res.code == 200) {
          console.log(res.result);
          this.total = res.result.total;
          this.tableData = JSON.parse(JSON.stringify(res.result.records));
          if (
            +res.result.total > this.pageSizeList[this.pageSizeList.length - 1]
          ) {
            this.pageSizeList.push(+res.result.total);
          }
        }
      });
    },
    //获取企业 || 劳务公司 列表
    getProjectList() {
      let data = {
        projectSn: this.projectSn,
        enterpriseName: "",
        userEnterpriseId: this.$store.state.userInfo.userEnterpriseId,
      };
      getEnterpriseInfoList(data).then((res) => {
        if (res.code == 200) {
          this.enterpriseListData = res.result;
        } else {
          this.$message.error(this.$t("message.laborMange.queryFails"));
        }
      });
    },
    //获取所有的闸机设备
    getMachineList() {
      ufaceDevList({ projectSn: this.$store.state.projectSn }).then((list) => {
        this.allUfaceDev = list.result;
        if (this.$store.state.userInfo.accountType != 6) {
          return;
        }
        selectUserDevAuthorityByUserIdApi({
          userId: this.$store.state.userInfo.userId,
          devType: 1,
        }).then((res) => {
          if (res.result) {
            let id = res.result.devId;
            if (id.indexOf(",") != -1) {
              this.disabledArr = id.split(",");
            } else {
              this.disabledArr = [id];
            }
          } else {
            this.disabledArr = [];
          }
          var arr2 = [];
          this.allUfaceDev.forEach((element) => {
            if (this.disabledArr.indexOf(element.id + "") != -1) {
              arr2.push(element);
            }
          });
          this.allUfaceDev = arr2;
        });
      });
    },
    //人员审核
    auditFn(id, type) {
      let txt =
        type == 1
          ? this.$t("message.laborMange.reject")
          : this.$t("message.laborMange.pass");
      this.itemSelectId = id;
      if (type == 2) {
        this.configDevDialog = true;
        return;
      }
      this.$confirm(
        this.$t("message.laborMange.confirm") + txt + "?",
        this.$t("message.laborMange.hint"),
        {
          confirmButtonText: this.$t("message.laborMange.confirm"),
          cancelButtonText: this.$t("message.laborMange.cancel"),
          type: "warning",
        }
      ).then(() => {
        // if (type == 1) {
        rejectWorkerInfoApi({ id: id }).then((res) => {
          this.$message.success(
            this.$t("message.laborMange.operateSuccessfully")
          );
          this.getInfoList();
        });
        // } else {
        //   adoptWorkerInfoApi({id:id}).then((res) => {
        //     this.$message.success('操作成功！')
        //     this.getInfoList();
        //   });
        // }
      });
    },

    //编辑人员信息
    // editStaffInfo(value) {
    //     this.temporaryDialog = true;
    //     this.temporaryTitle = this.$t('message.laborMange.editCrewInfo');
    //     this.operationType = "edit";
    //     this.addForm = JSON.parse(JSON.stringify(value));
    //     console.log(this.addForm.idCardBigPhotoUrl);
    // },

    // 删除人员信息
    // deteleStaffInfo(value) {
    //     this.$confirm(
    //         this.$t("message.laborMange.deleteHint"),
    //         this.$t("message.laborMange.hint"),
    //         {
    //             confirmButtonText: this.$t("message.laborMange.confirm"),
    //             cancelButtonText: this.$t("message.laborMange.cancel"),
    //             type: "warning",
    //         }
    //     )
    //         .then(() => {
    //             let data = {
    //                 id: value.id,
    //             };
    //             deleteWorkerInfoAuditApi(data).then((res) => {
    //                 if (res.code == 200) {
    //                     this.$message({
    //                         type: "success",
    //                         message: this.$t("message.laborMange.deleteSuccess"),
    //                     });
    //                     this.getInfoList();
    //                 }
    //             });
    //         })
    // },
    //查看详情
    showDetail(value) {
      this.addForm = {};
      this.addForm = JSON.parse(JSON.stringify(value));
      this.temporaryDialog = true;
      this.temporaryTitle = this.$t("message.laborMange.crewInfoDetail");
      this.operationType = "detail";
    },
    //查看图片

    handlePreview(file) {
      console.log("文件", file);
      this.bigImageDialog = true;
      // this.bigImageUrl = this.$store.state.FILEURL + file;
      this.bigImageUrl = this.$store.state.FILEURL + file;
    },

    //重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //切换数量
    handleSizeChange(value) {
      this.pageSize = value;
      this.getInfoList();
    },
    handleCurrentChange(value) {
      this.page = value;
      this.getInfoList();
    },
    //上传前
    beforeUpload(file) {
      if (
        file.type != "image/jpeg" &&
        file.type != "image/png" &&
        file.type != "image/jpg" &&
        file.type != "image/bmp"
      ) {
        this.$message.error(this.$t("message.companyDiagram.uploadMsg")); //只能上传图片
        return false;
      } else {
        return true;
      }
    },
    //上传成功
    uploadSuccess(file, type) {
      if (type == 1) {
        this.addForm.idCardBigPhotoUrl = file.data[0].imageUrl;
      } else {
        //   this.addForm.fieldAcquisitionUrl = file.data[0].imageUrl;
      }
    },
    //下载高拍仪插件
    downloadPlugIn() {
      window.open("http://139.159.226.224:9000/itbgp/file/IDCamera1.0.rar");
    },

    //高拍仪获取身份证信息
    getIdCardInfo() {
      var ws = new WebSocket("ws://127.0.0.1:1818");
      this.webSocket = ws;
      ws.onopen = (event) => {
        this.onopen(event);
      };

      ws.onmessage = (event) => {
        this.onmessage(event);
      };

      ws.onerror = this.onerror;
    },
    //发送链接设备请求
    onopen(event) {
      // 识别身份证
      this.webSocket.send("ReadCard(1001,C:\\Doccamera\\)");
    },
    //接收服务器返回的信息
    onmessage(event) {
      //结束通讯
      if (
        event.data.indexOf("BeginbStopPlaytrueEndbStopPlay") >= 0 ||
        event.data.indexOf("BeginbStopPlayfalseEndbStopPlay") >= 0 ||
        event.data.indexOf("BeginbStartPlayfalseEndbStartPlay") >= 0 ||
        event.data.indexOf("BeginbStartPlay2falseEndbStartPlay2") >= 0 ||
        event.data.indexOf("BeginOpenFaceFrametrueEndOpenFaceFrame") >= 0
      ) {
        return;
      }

      if (event.data.indexOf("BeginReadCard") >= 0) {
        //获取身份证信息
        if (event.data == "BeginReadCardEndReadCard") {
          this.$message.error(
            this.$t("message.laborMange.failedToObtainIdentityInformation")
          );
          return;
        } else {
          // 截取掉 多余的字符
          let data = JSON.parse(
            event.data.replace("BeginReadCard", "").replace("EndReadCard", "")
          );
          console.log(data);
          //身份证 人脸照片
          this.uploadFile(data.FrontB64);
          this.addForm.sex = data.Sex == "男" ? 1 : 2;
          this.addForm.workerName = data.Name;
          this.addForm.nation = data.Folk + this.$t("message.laborMange.clan");
          this.addForm.issuingAuthorityForIdcard = data.Agency;
          this.addForm.birthday =
            data.BirthDate.substring(0, 4) +
            "-" +
            data.BirthDate.substring(4, 6) +
            "-" +
            data.BirthDate.substring(6, 8);
          //截取身份证有效日期
          let date = data.Valid.split("-");
          this.addForm.idCardEndDate = date[1] == "长期" ? "" : date[1];
          this.addForm.nativePlace = data.Address;
          this.addForm.idCard = data.IdNo;
        }
      }
    },
    onerror() {
      this.$message.error(this.$t("message.laborMange.failedToConnectDevice"));
    },

    //上传现场采集照片发到服务器
    uploadFile(url) {
      let param = new FormData(); //创建form对象
      param.append("base64Image", "data:image/jpeg;base64," + url); //通过append向form对象添加数据
      this.$http({
        url: "/upload/uploadBase64",
        method: "post",
        data: param,
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
      }).then((res) => {
        if ((res.status = "SUCCESS")) {
          this.addForm.idCardBigPhotoUrl = res.data.data.imageUrl;
        }
      });
    },
    tableRowClassName({ row, rowIndex }) {
      if (!this.isIscDevice) {
        return;
      }
      if (row.sendSuccessStatus === 1) {
        return "green2";
      }
      if (row.sendSuccessStatus === 2 || row.sendSuccessStatus === 4) {
        return "red2";
      }
      if (row.sendSuccessStatus === 3) {
        return "yellow2";
      }
    },
    async issueTeamEvent(id) {
      this.issueTeamDialog = true;
      this.whoId = id;
      this.getNewestList();
    },
    async getNewestList() {
      const res = await xmglXzHikvisionSyncGetNewestList({
        // pageNo:this.issuePage.pageNo,
        // pageSize:this.issuePage.pageSize,
        whoId: this.whoId,
      });
      console.log(res, "---------------------");
      this.issuePointList = res.result;
    },
    async retryEvent(id) {
      this.$notify({
        title: "正在重试...",
        type: "success",
        duration: 1500,
      });
      const res = await xmglXzHikvisionSyncRetryAPI({
        id: id,
      });
      console.log(res);
    },
  },
};
</script>
<style lang="less" scoped>
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex2 {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.flex3 {
  display: flex;
  align-items: center;
}

.flex4 {
  display: flex;
  justify-content: space-between;
}

.flex5 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.temporary {
  width: 100%;
  height: 100%;

  .content {
    padding: 15px 0;
    box-sizing: border-box;
    width: 100%;
    // height: calc(100% - 42px);
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .title_wrap {
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
    border-bottom: 2px solid @borderColor;
  }

  .titleStyle {
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    margin: -15px 0 30px;
    background: #ededed;
    padding: 10px 15px;
    box-sizing: border-box;
  }

  .el-button--small {
    height: 32px;
  }

  .uploadImage_wrap {
    margin: 10px 0 0 0;

    .position {
      position: relative;
    }

    .shut_icon {
      position: absolute;
      top: -11px;
      right: -11px;
      z-index: 100;
      margin: 5px;
      cursor: pointer;
    }
  }

  .required {
    color: #f56c6c;
  }

  .workerName {
    color: #5181f6;
    font-size: 18px;
    margin-bottom: 10px;
    cursor: pointer;
  }

  .bigImageDialog {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    z-index: 1000000;
    overflow-y: auto;
    // padding-bottom: 50px;
    height: 100%;

    .bigImageContent {
      height: 100%;
      margin: 0 auto;
      text-align: center;
    }

    img {
      // margin-top: 10%;
      position: relative;
      top: 10%;
      max-height: 80%;
      max-width: 80%;
    }
  }
}

.valuesColor {
  color: #fff;
  padding: 3px;
}

.yellow {
  background-color: #fbe000;
}

.green {
  background-color: #72cb40;
}

.red {
  background-color: #ec373e;
}

::v-deep {
  .el-table .yellow2 {
    background-color: #fffce6;
  }

  .el-table .green2 {
    background-color: #f1faec;
  }

  .el-table .red2 {
    background-color: #feebed;
  }

  .dialog-footer {
    margin-top: 20px;
  }

  .pagerBox {
    margin-top: 0;
  }
}
</style>
