<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"
            maxlength="30"
          />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="queryParams.sex" placeholder="性别" clearable>
            <el-option
              v-for="dict in dict.type.sys_user_sex"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @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"
            v-hasPermi="['basic:person:add']"
          >新增人员</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['basic:person:export']"
          >导出</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="info"
            plain
            icon="el-icon-upload"
            size="mini"
            @click="handleImport"
            v-hasPermi="['basic:person:excelUpload']"
          >导入人员</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleFile"
          >模板下载</el-button>
        </el-col>
        
        <!-- <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-edit"
            size="mini"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['basic:person:edit']"
          >修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['basic:person:del']"
          >删除</el-button>
        </el-col>
         -->
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
  
      <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="序号" align="center" width="80" type="index">
            <template slot-scope="scope">
              <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
            </template>
          </el-table-column>
        <el-table-column label="姓名" align="center" prop="name" sortable/>
        <el-table-column label="性别" align="center" prop="sex" width="80" sortable>
          <template slot-scope="scope">
                <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.sex"/>
            </template>
        </el-table-column>
        <el-table-column label="身份证号" align="center" prop="idCard" width="200" sortable/>
        <el-table-column label="电话" align="center" prop="phone" sortable/>
        <el-table-column label="岗位" align="center" prop="post" />
        <el-table-column label="是否推送人脸库" align="center" prop="post">
          <template slot-scope="scope">
               <div v-if="scope.row.isPush==0">未推送</div> 
               <div v-if="scope.row.isPush==1">已推送</div> 
          </template>
        </el-table-column>
        <el-table-column label="安全帽编号" align="center" prop="aqmCode" />
        <el-table-column label="马甲编号" align="center" prop="mjCode" />
        <el-table-column label="人脸信息" align="center" prop="filePath">
            <template slot-scope="scope">
                <div @click="openImg(scope.row.base64Url)"
                    style="color: #02a7f0; cursor: pointer"
                    >
                    <img :src="scope.row.base64Url" style="width: 100px;height: 100px;">
                </div>
            </template>
        </el-table-column> 
        <el-table-column label="证书" align="center" prop="certificateNum" sortable>
          <template slot-scope="scope">
              <div @click="openCertificate(scope.row)" style="color: #02a7f0; cursor: pointer">
                {{ scope.row.certificateNum}}
              </div>
          </template>
        </el-table-column> 
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['basic:person:edit']"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['basic:person:del']"
            >删除</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              v-if="scope.row.isPush == 0"
              @click="pushFace(scope.row)"
              v-hasPermi="['basic:person:push']"
            >推送</el-button>
          </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 :title="title" :visible.sync="showCertificate" width="1000px" append-to-body>
        <el-form ref="certificateForm" :model="certificateForm" label-width="100px">
          <!-- 文件格式下载，图片格式预览 -->
          <el-form-item label="高处作业证">
            <el-upload
                class = "upload-demo"
                action="#" 
                :file-list="highImgList"
                :show-file-list="true"
                :auto-upload="false"
                list-type="picture-card"
                accept=".png, .jpg, .jpeg, .pdf, .doc, .docx"
                :on-change="handleChangeHighImgList"
                :class="{ disabled: uploadDisabled }"
                :on-preview="picturePreview"
                :on-remove="handleRemoveHighImgList"
            >
            <!-- 文件格式下载，图片格式预览 -->
            <div slot="file" slot-scope="{file}">
                <img v-if="isImage(file)" class="el-upload-list__item-thumbnail"  :src="file.url" alt="">
                <div v-else class="picture-card-container" >
                  <img class="picture-card" :src="urlTemp" alt="">
                  <p class="file-name">{{ file.name }}</p>
                </div>
                <!-- <img v-else class="el-upload-list__item-thumbnail" :src="urlTemp" alt="">
                <p class=""file-name>{{ file.name }}</p> -->
                <!-- <div class="file-overlay">
                  <p class="file-name">{{ file.name }}</p>
                </div> -->
                <!-- <p>{{ file.name }}</p> -->
                <span class="el-upload-list__item-actions">
                  <span v-if="updataIf(file)" class="el-upload-list__item-delete" @click="handleDownload(file)">
                  <i class="el-icon-download" />
                  </span>
                  <span v-else class="el-upload-list__item-preview" @click="picturePreview(file)">
                  <i class="el-icon-zoom-in" />
                  </span>
                  <span class="el-upload-list__item-delete" @click="handleRemoveHighImgList(file)">
                  <i class="el-icon-delete" />
                  </span>
                </span>
               
            </div>


                <i class="el-icon-plus avatar-uploader-icon" ></i>
                <!-- <div  slot="tip" class="el-upload__tip">只能上传jpg/png/jpeg/pdf/doc/docx文件，且不超过10Mb</div> -->
            </el-upload>
          </el-form-item>
          <el-form-item label="电工作业证">
            <el-upload
                action="#"
                :file-list="electricianImgList"
                :show-file-list="true"
                :auto-upload="false"
                list-type="picture-card"
                accept=".png, .jpg, .jpeg, .pdf, .doc, .docx"
                :on-change="handleChangeElectricianImgList"
                :class="{ disabled: uploadDisabled }"
                :on-preview="picturePreview"
                :on-remove="handleRemoveElectricianImgList"
            >

             <!-- 文件格式下载，图片格式预览 -->
             <div slot="file" slot-scope="{file}">
                <img v-if="isImage(file)" class="el-upload-list__item-thumbnail"  :src="file.url" alt="">
                <img v-else class="el-upload-list__item-thumbnail"  :src="urlTemp" alt="">
                <span class="el-upload-list__item-actions">
                  <span v-if="updataIf(file)" class="el-upload-list__item-delete" @click="handleDownload(file)">
                  <i class="el-icon-download" />
                  </span>
                  <span v-else class="el-upload-list__item-preview" @click="picturePreview(file)">
                  <i class="el-icon-zoom-in" />
                  </span>
                  <span class="el-upload-list__item-delete" @click="handleRemoveElectricianImgList(file)">
                  <i class="el-icon-delete" />
                  </span>
                </span>
            </div>

                <i class="el-icon-plus avatar-uploader-icon" ></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="其他作业证">
            <el-upload
                action="#"
                :file-list="elseImgList"
                :show-file-list="true"
                :auto-upload="false"
                list-type="picture-card"
                accept=".png, .jpg, .jpeg, .pdf, .doc, .docx"
                :on-change="handleChangeElseImgList"
                :class="{ disabled: uploadDisabled }"
                :on-preview="picturePreview"
                :on-remove="handleRemoveElseImgList"
            >
             <!-- 文件格式下载，图片格式预览 -->
             <div slot="file" slot-scope="{file}">
                <img v-if="isImage(file)" class="el-upload-list__item-thumbnail"  :src="file.url" alt="">
                <img v-else class="el-upload-list__item-thumbnail"  :src="urlTemp" alt="">
                <span class="el-upload-list__item-actions">
                  <span v-if="updataIf(file)" class="el-upload-list__item-delete" @click="handleDownload(file)">
                  <i class="el-icon-download" />
                  </span>
                  <span v-else class="el-upload-list__item-preview" @click="picturePreview(file)">
                  <i class="el-icon-zoom-in" />
                  </span>
                  <span class="el-upload-list__item-delete" @click="handleRemoveElseImgList(file)">
                  <i class="el-icon-delete" />
                  </span>
                </span>
            </div>
                <i  class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitCertificate">确 定</el-button>
          <el-button @click="cancelCertificate">取 消</el-button>
        </div>
      </el-dialog>

      <!-- 添加或修改人员对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body @close="cancel">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="人员姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入人员名称" maxlength="20"/>
          </el-form-item>
          <el-form-item label="人员性别" prop="sex">
            <el-select v-model="form.sex" placeholder="请选择人员性别" clearable style="width: 100%;">
            <el-option
              v-for="dict in dict.type.sys_user_sex"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
          </el-form-item>
          <el-form-item label="身份证号" prop="idCard">
            <el-input v-model="form.idCard" placeholder="请输入人员身份证号" maxlength="18"/>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入人员手机号" maxlength="11"/>
          </el-form-item>
          <el-form-item label="安全帽编号" prop="aqmCode">
            <el-input v-model="form.aqmCode" placeholder="请输入安全帽编号" maxlength="10"/>
          </el-form-item>
          <el-form-item label="马甲编号" prop="mjCode">
            <el-input v-model="form.mjCode" placeholder="请输入马甲编号" maxlength="10"/>
          </el-form-item>
          <el-form-item label="人员岗位" prop="post">
            <el-select v-model="form.post" placeholder="请选择人员岗位" clearable style="width: 100%;">
            <el-option
              v-for="dict in dict.type.post_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
          </el-form-item>
          <el-form-item label="人脸照片" prop="fileName">
            <el-upload
                action="#"
                :limit="1"
                :file-list="fileList"
                :show-file-list="true"
                :auto-upload="false"
                list-type="picture-card"
                accept=".png, .jpg, .jpeg"
                :on-change="handleChange"
                :class="{ disabled: uploadDisabled }"
                :on-preview="picturePreview"
                :on-remove="handleRemove"
            >
                <i
                    class="el-icon-plus avatar-uploader-icon"
                ></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm" :loading="isSubmit">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>

       <!-- 用户导入对话框 -->
      <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
        <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
          :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
          :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" 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>
            <!-- <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
              @click="importTemplate">下载模板</el-link> -->
          </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 :visible.sync="dialogVisible">
        <img width="100%" height="650px" :src="dialogImageUrl"  />
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { listPerson, addPerson, editPerson, getPersonInfo, delPerson, exportPerson, personFile,getCertificate,updateCertificate,pushFace} from "@/api/base/staff";
  import { downloadFile,downloadFileData } from '@/utils/download'
  import { getToken } from '@/utils/auth'
  import uploadFile from '../../components/uploadFile.vue'
  export default {
    name: "Post",
    dicts: ['sys_normal_disable','sys_user_sex','post_type'],
    components: {
			uploadFile
		},
    data() {
      return {
        // 遮罩层
        loading: true,
        isSubmit: false,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 人员表格数据
        postList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          name: undefined,
          sex: undefined,
          roleCode: this.$store.getters.roleCode,
          departId: this.$store.getters.departId,
          teamId: this.$store.getters.teamId,
        },
        showCertificate:false,
        memberId:"",

        accept:'.png, .jpg, .jpeg, .pdf, .doc, .docx',
        highImgList: [],
        electricianImgList: [],
        elseImgList: [],
        // 表单参数
        form: {},
        //图片上传
        fileList: [],
        //证书上传
        certificateForm: {}, 
        // 人员岗位
        postTypeArr: [],
        delHighFileIdList: [],
        delElectFileIdList: [],
        delElseFileIdList: [],
        //图片查看弹窗
        dialogImageUrl: '',
        dialogVisible: false,
        // 用户导入参数
        upload: {
          // 是否显示弹出层（用户导入）
          open: false,
          // 弹出层标题（用户导入）
          title: "",
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的用户数据
          updateSupport: 0,
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/bracelet/person/excelUpload"
        },
        // 表单校验
        rules: {
          name: [
            { required: true, message: "人员姓名不能为空", trigger: "blur" }
          ],
          sex: [
            { required: true, message: "人员性别不能为空", trigger: "blur" }
          ],
          idCard: [
            { required: true, message: "身份证号码不能为空", trigger: "blur" },
            {
              pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
              message: "请输入正确的身份证号码",
              trigger: "blur"
            }
          ],
          phone: [
            { required: true, message: "手机号不能为空", trigger: "blur" },
            {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              message: "请输入正确的手机号码",
              trigger: "blur"
            }
          ],
          // aqmCode: [
          //   { required: true, message: "安全帽编号不能为空", trigger: "blur" }
          // ],
          // mjCode: [
          //   { required: true, message: "马甲编号不能为空", trigger: "blur" }
          // ],
          post: [
            { required: true, message: "人员岗位不能为空", trigger: "blur" }
          ],
          // fileName: [
          //   { required: true, message: "人脸图片不能为空", trigger: "change" }
          // ],
          fileName: [
            {
                  required: true,
                  validator: this.fileMustUpload,
                  trigger: "change",
            },
          ],
        }
      };
    },
    computed: {
     
        //图片上传1张后，隐藏上传框
        uploadDisabled() {
            return this.fileList.length > 0
        },
    },
    created() {
      this.getList();
    },
    methods: {
        // base64转blob
        base64ToBlob(code) {
          let parts = code.split(";base64,");
          let contentType = parts[0].split(":")[1];
          let raw = window.atob(parts[1]);
          let rawLength = raw.length;
          let uInt8Array = new Uint8Array(rawLength);
          for (let i = 0; i < rawLength; ++i) {
            uInt8Array[i] = raw.charCodeAt(i);
          }
          return new Blob([uInt8Array], { type: contentType });
        },

        isImage(file){
            this.urlTemp = require('@/assets/file.png');
            if(this.updataIf(file)){
                return false
          }else{
            return true
          }
        },
      // 判断文件类型,图片预览，文件下载
       updataIf(e) {
                if (e.fileName) {
                    if (e.fileName.split('.')[1] === 'png' || e.fileName.split('.')[1] === 'jpeg' || e.fileName.split('.')[1] === 'jpg') {
                        return false
                    } else {
                    return true
                    }
                } else {
                    if (e.name.split('.')[1] === 'png' || e.name.split('.')[1] === 'jpeg' || e.name.split('.')[1] === 'jpg') {
                        return false
                    } else {
                        return true
                    }
                }
            },
      handleDownload(file) {
        console.log(file.url)
        if(file.status === 'ready'){
                downloadFile({ fileName: file.name, fileData: file.raw, fileType: 'application/vnd.ms-excel;charset=utf-8' })
        }else if(file.status === 'success'){
                downloadFileData({ fileName: file.name,fileUrl:file.url })
        }
      },
      //上传组件-图片查看
      picturePreview(file) {
        this.dialogImageUrl = file.url;
        if(file.name.split('.')[1] === 'doc'||file.name.split('.')[1] === 'docx'||file.name.split('.')[1] === 'pdf'){
          const windowName = file.name;
          window.open(file.url,windowName)
        }else{
          this.dialogVisible = true
        }
      },
       //自定义人脸图片必填校验
       fileMustUpload(rule, value, callback) {
          if (this.form.fileName == '') {
            // 未上传文件
            callback("请上传人脸图片");
          }
          callback();//不要忘记写这个callback
        },
        /** 查询人员列表 */
        getList() {
            this.loading = true;
            listPerson(this.queryParams).then(response => {
              this.postList = response.rows;
              this.total = response.total;
              this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.fileList=[];
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {};
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length!=1
            this.multiple = !selection.length
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.fileList = []
            this.reset();
            this.open = true;
            this.title = "添加人员";
        },
        // 图片上传
        handleChange(file, fileList) {
            // console.log(file)
            this.form.fileName = file.name;
            this.$refs["form"].clearValidate()
            this.fileList = fileList;
        },
        handleChangeHighImgList(file, fileList) {
          console.log(fileList.length)
          if(fileList.length > 5){
            this.$message.warning('最多上传5张图片')
            fileList = fileList.filter(item => {
                return item.uid != file.uid
            })
          }
            const fileListTemp = fileList.filter(item => {
                        return item.uid != file.uid
                    });
                
            if(!(file.name.split('.')[1] === 'doc'||file.name.split('.')[1] === 'docx'||file.name.split('.')[1] === 'pdf' || file.name.split('.')[1] === 'png' || file.name.split('.')[1] === 'jpg' || file.name.split('.')[1] === 'jpeg')){
                this.$message.warning('文件格式不正确')
                fileList = fileList.filter(item => {
                    return item.uid != file.uid
                })
            }
            if(file.size > 1024 * 1024 * 10){
                    this.$message.warning('文件大小不能超过10Mb')
                    fileList = fileList.filter(item => {
                        return item.uid != file.uid
                    })
                }
            if(file.name.length > 40){
                    this.$message.warning('文件名长度不能超过40个字符')
                    fileList = fileList.filter(item => {
                        return item.uid != file.uid
                    })
                }
            if(fileListTemp.some(item =>item.name === file.name)){
                    this.$message.warning('文件名重复')
                    fileList = fileList.filter(item => {
                        return item.uid != file.uid
                    })
                }
                fileList.forEach(file=>{
                    if(file.name.split('.')[1] === 'doc'||file.name.split('.')[1] === 'docx'||file.name.split('.')[1] === 'pdf'){
                        this.urlTemp = require('../../../assets/file.png');
                    
                    }
                  }),
            this.highImgList = fileList;
        },
        handleChangeElectricianImgList(file, fileList) {
          const fileListTemp = fileList.filter(item => {
                        return item.uid != file.uid
                    });
            if(fileList.length > 5){
            this.$message.warning('最多上传5张图片')
            fileList = fileList.filter(item => {
                return item.uid != file.uid
            })
          }
            if(!(file.name.split('.')[1] === 'doc'||file.name.split('.')[1] === 'docx'||file.name.split('.')[1] === 'pdf' || file.name.split('.')[1] === 'png' || file.name.split('.')[1] === 'jpg' || file.name.split('.')[1] === 'jpeg')){
                this.$message.warning('文件格式不正确')
                fileList = fileList.filter(item => {
                    return item.uid != file.uid
                })
            }
            if(file.size > 1024 * 1024 * 10){
                    this.$message.warning('文件大小不能超过10Mb')
                    fileList = fileList.filter(item => {
                        return item.uid != file.uid
                    })
                }
            if(file.name.length > 40){
                    this.$message.warning('文件名长度不能超过40个字符')
                    fileList = fileList.filter(item => {
                        return item.uid != file.uid
                    })
                }
            if(fileListTemp.some(item =>item.name === file.name)){
                    this.$message.warning('文件名重复')
                    fileList = fileList.filter(item => {
                        return item.uid != file.uid
                    })
                }
                fileList.forEach(file=>{
                    if(file.name.split('.')[1] === 'doc'||file.name.split('.')[1] === 'docx'||file.name.split('.')[1] === 'pdf'){
                        this.urlTemp = require('../../../assets/file.png');
                    
                    }
                  }),
            this.electricianImgList = fileList;
        },
        handleChangeElseImgList(file, fileList) {
          const fileListTemp = fileList.filter(item => {
                        return item.uid != file.uid
                    });
            if(fileList.length > 5){
            this.$message.warning('最多上传5张图片')
            fileList = fileList.filter(item => {
                return item.uid != file.uid
            })
          }
            if(!(file.name.split('.')[1] === 'doc'||file.name.split('.')[1] === 'docx'||file.name.split('.')[1] === 'pdf' || file.name.split('.')[1] === 'png' || file.name.split('.')[1] === 'jpg' || file.name.split('.')[1] === 'jpeg')){
                this.$message.warning('文件格式不正确')
                fileList = fileList.filter(item => {
                    return item.uid != file.uid
                })
            }
            if(file.size > 1024 * 1024 * 10){
                    this.$message.warning('文件大小不能超过10Mb')
                    fileList = fileList.filter(item => {
                        return item.uid != file.uid
                    })
                }
            if(file.name.length > 40){
                    this.$message.warning('文件名长度不能超过40个字符')
                    fileList = fileList.filter(item => {
                        return item.uid != file.uid
                    })
                }
            if(fileListTemp.some(item =>item.name === file.name)){
                    this.$message.warning('文件名重复')
                    fileList = fileList.filter(item => {
                        return item.uid != file.uid
                    })
                }
                fileList.forEach(file=>{
                    if(file.name.split('.')[1] === 'doc'||file.name.split('.')[1] === 'docx'||file.name.split('.')[1] === 'pdf'){
                        this.urlTemp = require('../../../assets/file.png');
                    
                    }
                  }),
            this.elseImgList = fileList;
        },
        //图片删除
        handleRemove(file, fileList) {
            let sum = 0
            this.fileList.forEach((item, index) => {
                if (item.uid == file.uid) {
                  if(!item?.hasOwnProperty('raw')) {
                    this.form.delFiles = this.form.filePath;
                  }
                  sum = index;
                }
            })
            this.fileList.splice(sum, 1)
            this.form.fileName = '';
        },
        handleRemoveHighImgList(file, fileList) {
            let sum = 0
            this.highImgList.forEach((item, index) => {
                if (item.uid == file.uid) {
                    sum = index
                }
            })
            this.delHighFileIdList.push(this.highImgList[sum].fileId)
            this.highImgList.splice(sum, 1)
        },
        handleRemoveElectricianImgList(file, fileList) {
            let sum = 0
            this.electricianImgList.forEach((item, index) => {
                if (item.uid == file.uid) {
                    sum = index
                }
            })
            this.delElectFileIdList.push(this.electricianImgList[sum].fileId)
            this.electricianImgList.splice(sum, 1)
        },
        handleRemoveElseImgList(file, fileList) {
            let sum = 0
            this.elseImgList.forEach((item, index) => {
                if (item.uid == file.uid) {
                    sum = index
                }
            })
            this.delElseFileIdList.push(this.elseImgList[sum].fileId)
            this.elseImgList.splice(sum, 1)
        },
        //列表-图片查看
        openImg(url) {
            this.dialogImageUrl = url
            this.dialogVisible = true
        },

        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();
            const id = row.id
            this.fileList=[];
            getPersonInfo({id:id}).then(response => {
              this.form = response.data;
              this.$set(this.form,'sex',response.data.sex+'')
              this.fileList.push({
                name: response.data.fileId,
                url: response.data.base64Url,
              })
              //触发校验
              this.form.fileName = response.data.fileId;
                this.open = true;
                this.title = "修改人员";
             
            });
        },
        /** 提交按钮 */
        submitForm() { 
            this.$refs["form"].validate(valid => {
            if (valid) {
                if (this.form.id != undefined) {
                  //base64地址别传后台，过长
                  this.form.base64Url = '';
                  const reqData = new FormData()
                  reqData.append('params', JSON.stringify(this.form))
                  const { file } = this.getFileData()
                  file.forEach(item => {
                    reqData.append('file', item)
                  })
                  this.isSubmit=true;
                  editPerson(reqData).then(response => {
                    if(response.code==200){
                      this.$modal.msgSuccess("修改成功");
                      this.open = false;
                      this.fileList=[];
                      this.getList();
                      this.isSubmit=false;
                    }else{
                      this.isSubmit=false;
                    }
                  }).catch(res=>{
                    this.isSubmit=false;
                  });
                } else {
                  
                  const reqData = new FormData()
                  reqData.append('params', JSON.stringify(this.form))
                  const { file } = this.getFileData()
                  file.forEach(item => {
                    reqData.append('file', item)
                  })
                  this.isSubmit=true;
                  addPerson(reqData).then(response => {
                    if(response.code==200){
                      this.$modal.msgSuccess("新增成功");
                      this.open = false;
                      this.fileList=[];
                      this.getList();
                      this.isSubmit=false;
                    }else{
                      this.isSubmit=false;
                    }
                  }).catch(res=>{
                    this.isSubmit=false;
                  });;
                }
            }
            });
        },

        //提交时循环fileList 获取raw文件
        getFileData() {
          const file = []
          this.fileList.forEach(item => {
            if (item?.hasOwnProperty('raw')) {
              file.push(item.raw)
            }
          })
          return { file }
        },

        //提交时循环highImgList获取raw文件
        getHighImgListFileData() {
          const highfile = []
          this.highImgList.forEach(item => {
            if (item?.hasOwnProperty('size')) {
              highfile.push(item.raw)
            }
          })
          console.log(highfile)
          return { highfile }
        },

        //提交时循环electricianImgList获取raw文件
        getElectricianImgListFileData() {
          const electfile = []
          this.electricianImgList.forEach(item => {
            if (item?.hasOwnProperty('size')) {
              electfile.push(item.raw)
            }
          })
          return { electfile }
        },

        //提交时循环elseImgList获取raw文件
        getElseImgListFileData() {
        const elsefile = []
        this.elseImgList.forEach(item => {
          if (item?.hasOwnProperty('size')) {
            elsefile.push(item.raw)
          }
        })
        return { elsefile }
      },

        /** 删除按钮操作 */
        handleDelete(row) {
            console.log(row)
            const param = {
              id:row.id,
              fileId:row.fileId,
              filePath:row.filePath,
              teamId:row.teamId,
            }
            this.$modal.confirm('是否确认删除人员编号为"' + row.id + '"的数据项？').then(function() {
              return delPerson(param);
            }).then(() => {
              this.getList();
              this.$modal.msgSuccess("删除成功");
            }).catch(() => {});
        },
        // 推送人脸照片至人脸库
        pushFace(row){
          console.log(row)
          const param = {
              id:row.id,
              filePath:row.filePath
            }
            this.$modal.confirm('是否确认推送姓名为"' + row.name + '"的数据项？').then(function() {
              return pushFace(param);
            }).then((res) => {
              this.getList();
              this.$modal.msgSuccess("推送成功");
            });
        },
        /** 导出按钮操作 */
        handleExport() {
          exportPerson(this.queryParams).then(res => {
            downloadFile({ fileName: `人员_${new Date().getTime()}.xlsx`, fileData: res, fileType: 'application/vnd.ms-excel;charset=utf-8' })
          })
        },
        //模板下载
        handleFile(){
          personFile().then(res => {
            downloadFile({ fileName: `人员模板.xlsx`, fileData: res, fileType: 'application/vnd.ms-excel;charset=utf-8' })
          })
        },
        /** 导入按钮操作 */
        handleImport() {
          this.upload.title = "人员导入";
          this.upload.open = true;
        },
        // 文件上传中处理
        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() {
          this.$refs.upload.submit();
        },
        //打开证书上传
        openCertificate(row){
          this.title = "证书上传";
          this.memberId = row.id;
          this.highImgList = [];
          this.electricianImgList = [];
          this.elseImgList = [];
          this.delHighFileIdList=[];
          this.delElectFileIdList=[];
          this.delElseFileIdList=[];
          // this.showCertificate = true;
          getCertificate(this.memberId).then(response => {
            response.data.highImgList.forEach(item => {
              if(item.fileType==0)
            {
              this.highImgList.push({
                  fileId: item.filePath,
                  raw:item.bast64Image,
                  url: URL.createObjectURL(this.base64ToBlob(item.bast64Image)),
                  name: item.fileName,
                })
                console.log(this.highImgList)
            }else{
              this.highImgList.push({
                  fileId: item.filePath,
                  raw:item.bast64Image,
                  url: item.bast64Image,
                  name: item.fileName,               
                })
            }
              });
            response.data.electricianImgList.forEach(item => {
              if(item.fileType==0)
              {
                this.electricianImgList.push({
                  fileId: item.filePath,
                  raw:item.bast64Image,
                  url: URL.createObjectURL(this.base64ToBlob(item.bast64Image)),
                  name: item.fileName
                })
              }else{
                this.electricianImgList.push({
                  fileId: item.filePath,
                  raw:item.bast64Image,
                  url: item.bast64Image,
                  name: item.fileName
                })
              }

              });
            response.data.elseImgList.forEach(item => {
              if(item.fileType==0)
              {
                this.elseImgList.push({
                  fileId: item.filePath,
                  raw:item.bast64Image,
                  url: URL.createObjectURL(this.base64ToBlob(item.bast64Image)),
                  name: item.fileName
                })
              }else{
                this.elseImgList.push({
                  fileId: item.filePath,
                  raw:item.bast64Image,
                  url: item.bast64Image,
                  name: item.fileName
                })
              }
              });
                this.showCertificate = true;

          });
        },

        //关闭证书上传
        cancelCertificate(){
          this.highImgList = []
          this.electricianImgList = []
          this.elseImgList = []
          this.showCertificate = false;
        },
        //提交证书上传
        submitCertificate(){
          this.$refs["certificateForm"].validate(valid => {
        if (valid) {
            const reqData = new FormData();
            this.certificateForm.delHighFileIdList = this.delHighFileIdList;
            this.certificateForm.delElectFileIdList = this.delElectFileIdList;
            this.certificateForm.delElseFileIdList = this.delElseFileIdList;
            this.delHighFileIdList.forEach(item => {
              reqData.append('delHighFileIdList', item)
            });
            this.delElectFileIdList.forEach(item => {
              reqData.append('delElectFileIdList', item)
            });
            this.delElseFileIdList.forEach(item => {
              reqData.append('delElseFileIdList', item)
            });
            const { highfile } = this.getHighImgListFileData();
            const { electfile } = this.getElectricianImgListFileData();
            const { elsefile } = this.getElseImgListFileData();
            reqData.append('id', this.memberId);
            highfile.forEach(item => {
              reqData.append('highfile', item)
            })
            electfile.forEach(item => {
              reqData.append('electfile', item)
            })
            elsefile.forEach(item => {
              reqData.append('elsefile', item)
            })
            updateCertificate(reqData).then(response => {
              this.$modal.msgSuccess("修改证书成功");
              this.showCertificate = false;
              this.highImgList=[];
              this.electricianImgList=[];
              this.elseImgList=[];
              this.delHighFileIdList=[];
              this.delElectFileIdList=[];
              this.delElseFileIdList=[];
              this.getList();
            });
        }
      });

          this.showCertificate = false;
        },
  
    }
  };
  </script>

  <style lang="scss" scoped>
  ::v-deep.el-table .fixed-width .el-button--mini {
      width: 60px !important;
      margin-bottom: 10px;
  }
  //隐藏图片上传框的css
  ::v-deep.disabled {
      .el-upload--picture-card {
          display: none;
      }
  }
  // ::v-deep .el-upload-list--picture-card .el-upload-list__item {
  //   overflow: revert !important;
  //   // width: 100%;
  //   // height: 100%!important;
  // }

  // .el-upload-list__item-thumbnail{
  //   height: 100%!important;
  // }
  // ::v-deep.el-upload-list__item-thumbnail {
  //   width: 100%;
  //   height: 100%!important;
  //   object-fit: cover;
  // }
  // ::v-deep.el-upload-list--picture-card .el-upload-list__item{
  //   overflow: auto;
  // }

  .picture-card-container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }
  .picture-card{
    width: 100%;
    height: 100%;
    object-fit:cover;
    justify-content: center;
    // border: 1px solid  #ddd;
    // border-radius: 4px;
  }
  .file-name{
    position: absolute;
    bottom: -20px;
    // margin-top: 8px;
    text-align: center;
    font-size: 14px;
    color:#333;
    z-index: 999999;
  }
  .file-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 20px;
  }

  
  </style>