zhywpt-web/src/views/onlineBusinessHall/informationManagement/userInfo/index.vue

<template>
  <div>
    <crud-template ref="crudRef" class="as-weight" :homeData="field" :tableData="tableData" @btnSearch="btnSearch"
      @unitClick="unitClick" @handleEdit="handleEdit" @handleInfo="handleInfo" @cancel="cancel"
      @CurrentChange="handleCurrentChange" @refreshLeft="refreshLeft" @submit="submit">
      <template #search>
        <el-input maxlength="60" v-trim clearable v-model="searchForm.customerId" style="width: 200px"
          placeholder="请输入用户编号" />
        <el-input maxlength="60" v-trim clearable v-model="searchForm.customerName" style="width: 200px"
          placeholder="请输入用户名称" />
        <el-select clearable v-model="searchForm.customerIdType" style="width: 200px;" placeholder="请选择用户证件号类型">
          <el-option v-for="item in CERTIFICATE_TYPE" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-input maxlength="60" v-trim clearable v-model="searchForm.customerIdNum" style="width: 200px"
          placeholder="请输入用户证件号码" />
        <el-input maxlength="60" v-trim clearable v-model="searchForm.customerTel" style="width: 200px"
          placeholder="请输入用户手机号" />
      </template>
      <template #customerTelSlot>
        <el-input maxlength="60" @input="customerTelInput" v-trim clearable v-model="customerTel" style="width: 100%"
          placeholder="请输入用户手机号">
          <template #append v-if="verificationCodeShow">
            <el-button type="primary" class="code-btn" @click="unitClick('', '', customerTel, 1)"
              :disabled="rowData[rowId].disabled1">
              {{ rowData[rowId].disabled1 ? `获取验证码${rowData[rowId].count1}` : '获取验证码' }}
            </el-button>
          </template>
        </el-input>
      </template>

      <template #operation="{ scope }">
        <el-button v-if="IsPermission(route, 'EDIT_LIST')" type="primary" size="small" class="code-btn" @click="edit(scope.row)">编辑</el-button>
        <el-button v-if="IsPermission(route, 'INFO_LIST')" type="success" size="small" class="code-btn" @click="showUserInfo(scope.row)">详情</el-button>
      </template>

    </crud-template>
    <el-dialog title="手机验证" v-model="phoneVerificationDialog" width="30%">
      <el-form ref="verificationDialog" :model="verification" label-width="100px" label-position="right">
        <el-form-item label="提示：">
          <div>填写验证码验证成功使用该功能</div>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input maxlength="60" v-trim clearable  :disabled="true"
            v-model="verification.mobileDesensitization" :placeholder="`请输入手机验证码`">
          </el-input>
          <el-button style="margin-top: 10px;position: absolute;right: 0;top: -10px;" type="primary" class="code-btn"
            @click="unitClick('', '', verification.mobile, 0)" :disabled="rowData[rowId].disabled">
            {{ rowData[rowId].disabled ? `获取验证码${rowData[rowId].count}` : '获取验证码' }}
          </el-button>
          <!-- <el-button style="margin-top: 10px;position: absolute;right: 0;top: -10px;" type="primary" class="code-btn"
            @click="unitClick('', '', verification.mobile)">
            获取验证码
          </el-button> -->
        </el-form-item>
        <el-form-item label="手机验证码">
          <el-input maxlength="60" v-trim clearable  v-model="verification.code" :placeholder="`请输入手机验证码`">
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="phoneVerificationDialog = false">取 消</el-button>
        <el-button type="primary" @click="verificationForm(verificationDialog)">确 定</el-button>
      </template>
    </el-dialog>

    <el-dialog title="详情" v-model="userInfoDialog" width="50%">
      <el-descriptions direction="vertical" border :column="3">
        <template v-for="(value, index) in info" :key="index">
          <el-descriptions-item class-name="my-content" :label="value.label" width="33%" v-if="value.type==='text'" :span="1">
            <span v-if="value.listData">{{getLabel(value.listData,value.value)}}</span>
            <span v-else>{{ value.value ?? '---' }}</span>
          </el-descriptions-item>
          <el-descriptions-item class-name="my-content" :label="value.label" width="33%" v-else :span="1">
            <template v-if="value.value!=='--'">
              <el-image class="my-img-box" :src="changeAddress(value.value)" style="width: 100%;max-height: 150px;"
              :hide-on-click-modal="true"
              :preview-teleported="true"
              :preview-src-list="[changeAddress(value.value)]"
              />
            </template>
            <template v-else><sapn>无</sapn></template>
          </el-descriptions-item>
        </template>
      </el-descriptions>
    </el-dialog>

    <el-dialog title="用户信息变更" v-model="userChangeDialog" width="900">
      <div v-loading="submitLoading">
        <el-form ref="userChangeFormRef" :model="userChangeForm" label-width="80px" :rules="rules">
          <el-row gutter="20">
            <el-col :span="12">
              <el-form-item label="用户编号">
                <el-input disabled readonly v-model="userChangeForm.customerId"/>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="名称" prop="name">
                <el-input maxlength="60" v-model="userChangeForm.name"/>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="证件号码">
                <el-input readonly disabled v-model="userChangeForm.idNo"/>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="地址" prop="address">
                <el-input v-model="userChangeForm.address"/>
              </el-form-item>
            </el-col>

            <el-col :span="12" v-if="userChangeForm.type==='1'">
              <el-form-item label="有效期" prop="vld">
                <el-input v-model="userChangeForm.vld"/>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <div class="tel-container">
                <div class="tel-input" :style="{ width: showVerifyButtons ? '50%' : '100%' }">
                  <el-form-item label="手机号" prop="tel">
                    <el-input v-model="userChangeForm.tel" @change="handleTelChange" placeholder="请输入手机号"/>
                  </el-form-item>
                </div>
                <div class="tel-verify" :style="{width: showVerifyButtons ? '48%' : '0px',marginLeft: showVerifyButtons?'12px':'0px'}">
                  <el-button type="primary" style="width: 117.18px;margin-right: 12px">获取验证码</el-button>
                  <el-form-item label="" prop="verifyCode" label-width="0px" v-if="showVerifyButtons">
                    <el-input v-model="userChangeForm.verifyCode" placeholder="验证码"/>
  <!--                  <el-button type="success">验 证</el-button>-->
                  </el-form-item>
                </div>
              </div>
            </el-col>
          </el-row>

          <el-row gutter="20" v-if="userChangeForm.type==='2'">
            <el-col :span="12" class="img-upload-box">
              <el-form-item label="营业执照正面" prop="idCardFront">
                <el-upload ref="uploadImgYyzz" class="avatar-uploader"
                           style="width: 340px;height:214px"
                           :limit="1" :on-exceed="handleImg" :data="data" accept=".png,.jpg,jpeg"
                           :before-upload="beforeAvatarImgUpload" :show-file-list="false" :action="BaseService.getFileUploadUrl()"
                           @success="(response: any, uploadFile: UploadFile) => onSuccess(response, uploadFile, 'idCardFront')">
                  <img v-if="userChangeForm.idCardFront" :src="userChangeForm.idCardFront" class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                  </el-icon>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12"></el-col>
            <el-col :span="12">
              <el-form-item label="">
                <el-button type="primary" @click="doOcr(5)" :loading="yyzzLoading">识别营业执照</el-button>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row gutter="20" v-if="userChangeForm.type==='2'">
            <el-col :span="12">
              <el-form-item label="经办人姓名" prop="agentName" label-width="110px">
                <el-input v-model="userChangeForm.agentName"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="经办人证件号" prop="agentIdNo" label-width="110px">
                <el-input v-model="userChangeForm.agentIdNo"/>
              </el-form-item>
            </el-col>

          </el-row>

          <el-row gutter="20">
            <el-col :span="12" class="img-upload-box">
              <el-form-item :label="userChangeForm.type==='1'?'申请人身份证正面':'经办人身份证正面'" :prop="userChangeForm.type==='1'?'idCardFront':'agentIdCardFront'">
                <el-upload ref="uploadImg" class="avatar-uploader"
                           style="width: 340px;height:214px"
                           :limit="1" :on-exceed="handleImg" :data="data" accept=".png,.jpg,jpeg"
                           :before-upload="beforeAvatarImgUpload" :show-file-list="false" :action="BaseService.getFileUploadUrl()"
                           @success="(response: any, uploadFile: UploadFile) => onSuccess(response, uploadFile, userChangeForm.type==='1'?'idCardFront':'agentIdCardFront')">
                  <img v-if="userChangeForm.type==='1' && userChangeForm.idCardFront" :src="userChangeForm.idCardFront" class="avatar" />
                  <img v-else-if="userChangeForm.type==='2' && userChangeForm.agentIdCardFront" :src="userChangeForm.agentIdCardFront" class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                  </el-icon>
                </el-upload>
              </el-form-item>
            </el-col>

            <el-col :span="12" class="img-upload-box">
              <el-form-item :label="userChangeForm.type==='1'?'申请人身份证背面':'经办人身份证背面'" :prop="userChangeForm.type==='1'?'idCardBack':'agentIdCardBack'">
                <el-upload ref="uploadImgBack" class="avatar-uploader"
                           style="width: 340px;height:214px"
                           :limit="1" :on-exceed="handleImgBack" :data="data" accept=".png,.jpg,jpeg"
                           :before-upload="beforeAvatarImgUpload" :show-file-list="false" :action="BaseService.getFileUploadUrl()"
                           @success="(response: any, uploadFile: UploadFile) => onSuccess(response, uploadFile, userChangeForm.type==='1'?'idCardBack':'agentIdCardBack')">
                  <img v-if="userChangeForm.type==='1' && userChangeForm.idCardBack" :src="userChangeForm.idCardBack" class="avatar" />
                  <img v-else-if="userChangeForm.type==='2' && userChangeForm.agentIdCardBack" :src="userChangeForm.agentIdCardBack" class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                  </el-icon>
                </el-upload>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="">
                <el-button type="primary" @click="doOcr(1)" :loading="frontLoading">识别正面证件</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="" v-if="userChangeForm.type==='1'">
                <el-button type="primary" @click="doOcr(2)" :loading="backLoading">识别背面证件</el-button>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>
        <div class="btn_btm">
          <el-button @click="userChangeDialog = false">取 消</el-button>
          <el-button type="primary" @click="submitChange()">确 定</el-button>
        </div>
      </div>
    </el-dialog>

  </div>
</template>
<!-- 用户信息查询 -->
<script setup lang="ts">
  import { ref, toRaw, onMounted, watch, computed, reactive, onUnmounted } from "vue";
  // @ts-ignore crudFrom模板
  import CrudTemplate from "@/crud/index.vue";
  import $storeinitData from "@/store/initData"; //引入tab vuex
  import BaseService from "@/utils/baseService"; //引入接口请求
  import {ElMessage, genFileId, UploadInstance, UploadProps, UploadRawFile} from "element-plus"; //提示
  import {
    userInfoQuery,
    userPersonalInfoEdit,
    userUnitInfoEdit
  } from "@/api/onlineBusinessHall/informationManagement";
  import { getCodeApi, checkCodeApi } from "@/api/system/login"
  import { useRoute } from 'vue-router';
  import { IsPermission } from "@/router/routerUtil";
  import { dataDesensitization,changeAddress } from "@/utils/utils";
  //或取路由传入过来的对象数据
  const route = useRoute();

  const crudRef = ref();
  //启用状态
  const VEHICLE_COLOR_TYPE = computed(() => {
    return $storeinitData.state.dictData["VEHICLE_COLOR_TYPE"] || [];
  }); //车牌颜色
  const CERTIFICATE_TYPE = computed(() => {
    return $storeinitData.state.dictData["ID_TYPE"] || [];
  }); //用户证件类型
  const USER_TYPE = computed(() => {
    return $storeinitData.state.dictData["ETC_USER_TYPE"] || [];
  }); //用户类型
  const AGENCY_TYPE = computed(() => {
    return $storeinitData.state.dictData["AGENCY_TYPE"] || [];
  }); // 渠道类型
  const EMERGENCY_VEHICLE_TYPE = computed(() => {
    return $storeinitData.state.dictData["EMERGENCY_VEHICLE_TYPE"] || [];
  }); // 应急车标识

  //查询参数
  const searchForm = ref({
    customerId: '', // 用户编号
    customerName: '', // 用户名称
    customerIdType: '', // 用户证件号类型
    customerIdNum: '', // 用户证件号码
    customerTel: '', //  用户手机号
  });
  let tableData: any = ref([]);
  const typeOption = ref("");

  onMounted(() => {
    getList();
  });
  // 搜索按钮
  function btnSearch() {
    field.value.paging.currentPage = 1;
    getList();
  }
  const userType = ref() // 用户类型 1个人 2单位

  // 普通客服手机验证
  const phoneVerificationDialog = ref(false)
  const userInfoDialog = ref(false)
  const info = ref({})
  const verificationDialog = ref()
  const verification = reactive({
    mobileDesensitization: '',
    mobile: '',
    code: ''
  })
  const rowId = ref()
  const rowData: any = ref({})
  function verificationForm(verificationDialog) {
    BaseService.post('/userw/portal/checkmobilecode', { mobile: verification.mobile, code: verification.code }).then((res: any) => {
      if (res && res.statusCode === 0) {
        ElMessage.success("验证成功");
        if (typeOption.value == 'edit') {
          crudRef.value.dialogFormVisible = true
        } else if (typeOption.value == 'info') {
          crudRef.value.dialogInfo = true
        }
        phoneVerificationDialog.value = false
        rowData.value[rowId.value].isVerification = false
        rowData.value[rowId.value].disabled = false
        rowData.value[rowId.value].count = 60
      } else {
        ElMessage.error(res.message);
      }
    });
  }
  // 编辑按钮
  function handleEdit(idx: any, row: any) {
    rowId.value = row.customerId
    unit.value = '获取验证码'
    typeOption.value = "edit";
    if (row.userType == 1) {
      userType.value = 1
      field.value.dialogArray = userPersonalArray
    } else if (row.userType == 2) {
      userType.value = 2
      field.value.dialogArray = userUnitArray
    } else {
      userType.value = ''
      field.value.dialogArray = []
    }
    customerTel.value = JSON.parse(JSON.stringify(row.customerTel))
    oldTel.value = JSON.parse(JSON.stringify(row.customerTel))
    customerTelInput(row.customerTel)
    // if (IsPermission(route, 'REGULAR_CUSTOMER_SERVICE') && rowData.value[rowId.value].isVerification) {
    //   crudRef.value.dialogFormVisible = false
    //   verification.mobile = row.customerTel
    //   verification.mobileDesensitization = dataDesensitization(row.customerTel)
    //   verification.code = ''
    //   phoneVerificationDialog.value = true
    // }
  }

  // 点击验证
  function unitClick(e, item, value, type) {
    console.log(value, 'value')
    //iaw/message/sendMessage
    BaseService.post('/iaw/portal/sendCode', { mobile: value }).then((res: any) => {
      if (res && res.statusCode === 0) {
        ElMessage.success("验证码已发送到手机");
        timerHandler(type)
      } else {
        ElMessage.error(res.message);
      }
    });
  }

  let timer: any = {}
  let timer1: any = {}
  // 倒计时
  const timerHandler = (type) => {
    if (type == 0) {
      rowData.value[rowId.value].count = 60
      rowData.value[rowId.value].disabled = true
      timer[rowId.value] = setInterval(() => {
        if (rowData.value[rowId.value].count > 1 && rowData.value[rowId.value].count <= 60) {
          rowData.value[rowId.value].count = rowData.value[rowId.value].count - 1
        } else {
          rowData.value[rowId.value].disabled = false
          clearInterval(timer[rowId.value])
        }
      }, 2000)
    } else {
      rowData.value[rowId.value].count1 = 60
      rowData.value[rowId.value].disabled1 = true
      timer1[rowId.value] = setInterval(() => {
        if (rowData.value[rowId.value].count1 > 1 && rowData.value[rowId.value].count1 <= 60) {
          rowData.value[rowId.value].count1 = rowData.value[rowId.value].count1 - 1
        } else {
          rowData.value[rowId.value].disabled1 = false
          clearInterval(timer1[rowId.value])
        }
      }, 2000)
    }
  }

  // 取消
  function cancel() {
    crudRef.value.reset();
  }
  //分页
  function handleCurrentChange(val: number) {
    field.value.paging.currentPage = val;
    getList();
  }

  // 搜索重置
  function refreshLeft() {
    searchForm.value = {
      customerId: '',
      customerName: '',
      customerIdType: '',
      customerIdNum: '',
      customerTel: '',
    };
    field.value.paging.currentPage = 1;
    getList();
  }
  // 详情
  function handleInfo(idx: any, row: any) {
    rowId.value = row.customerId
    typeOption.value = "info";
    unit.value = null
    if (row.userType == 1) {
      userType.value = 1
      field.value.dialogArray = userPersonalArray
    } else if (row.userType == 2) {
      userType.value = 2
      field.value.dialogArray = userUnitArray
    } else {
      userType.value = ''
      field.value.dialogArray = []
    }
    // if (IsPermission(route, 'REGULAR_CUSTOMER_SERVICE') && rowData.value[rowId.value].isVerification) {
    //   crudRef.value.dialogInfo = false
    //   verification.mobile = row.customerTel
    //   verification.mobileDesensitization = dataDesensitization(row.customerTel)
    //   verification.code = ''
    //   phoneVerificationDialog.value = true
    // }
  }
  function customerTelInput(value) {
    if (oldTel.value === value) {
      verificationCodeShow.value = false
      field.value.dialogArray.forEach(item => {
        if (item.prop === 'newMobileCode') {
          item.form.hideEdit = true
        }
      })
    } else {
      verificationCodeShow.value = true
      field.value.dialogArray.forEach(item => {
        if (item.prop === 'newMobileCode') {
          item.form.hideEdit = false
        }
      })
    }
  }
  const customerTel = ref()
  const oldTel = ref()
  const unit = ref()
  const verificationCodeShow = ref(false)
  //编辑与添加提交
  function submit(data: any) {
    let api = ''
    if (userType.value == 1) {
      api = 'iaw/aftersale/customerInfoChange/changeApply'
    } else if (userType.value == 2) {
      api = userUnitInfoEdit
    }
    if (oldTel.value !== customerTel.value) {
      data.customerTel = customerTel.value
    } else {
      data.customerTel = ''
    }
    // console.log(data, 'datadata')
    let datas = JSON.parse(JSON.stringify(toRaw(data)));
    BaseService.post(api, datas).then((res: any) => {
      if (res && res.statusCode === 0) {
        ElMessage.success("操作成功");
        getList();
        cancel();
      } else {
        ElMessage.error(res.message);
      }
    });
  }
  //获取列表
  function getList() {
    if(!IsPermission(route, 'QUERY_BASE')){
      ElMessage.error('您没有权限，请联系管理员！')
      return
    }
    let falg = false
    let params: any = {
      pageNo: field.value.paging.currentPage,
      pageSize: field.value.paging.pageSize,
    }
    let searchFormList = { ...searchForm.value };
    for (let key in searchFormList) {
      if (searchFormList[key]) {
        falg = true
        params[key] = searchFormList[key];
      }
    }
    // if (!falg) {
    //   ElMessage.error('请输入查询条件')
    //   return
    // }
    // if (!searchForm.value.customerId || !searchForm.value.customerIdNum || !searchForm.value.customerIdType|| !searchForm.value.customerIdNum|| !searchForm.value.customerTel) {
    //   ElMessage.error('请输入查询信息');
    // }
    crudRef.value.tableLoding = true;
    BaseService.post('/managew/api/baseInfo/queryCustomer', params).then((res: any) => {
      if (res && res.statusCode === 0) {
        //数据转换
        let bizContent = res
        let data = bizContent.data.result || [];
        //数据渲染
        data.forEach(item => {
          item.customerIdNumDesensitization = dataDesensitization(item.customerIdNum)
          item.customerTelDesensitization = dataDesensitization(item.customerTel)
          item.agentIdNumDesensitization = dataDesensitization(item.agentIdNum)
          rowData.value[item.customerId] = {
            isVerification: true,
            count: 60,
            disabled: false,
            count1: 60,
            disabled1: false
          }
        })
        tableData.value = data;
        crudRef.value.tableLoding = false;
        //分页总数
        console.log('分页总数', bizContent.totalCount)
        field.value.paging.total = bizContent.data.totalCount;
      } else {
        crudRef.value.tableLoding = false;
        // ElMessage.error(res.message);
      }
    });
  }
  function getLabel(item, selectedValue) {
    let data = item;
    let selectedLabel = "未知";
    for (var i = 0; i < data.length; i++) {
      if (data[i].code == selectedValue) {
        selectedLabel = data[i].name;
        break;
      }
    }
    return selectedLabel;
  }
  //详情信息
  function showUserInfo(row: any){
    let labels = field.value.field

    const result: Record<string, any> = {}; // 临时存储结果

    // 遍历 labels，提取 label 和对应的 value
    labels.forEach((fieldConfig) => {
      const { prop, label, type, listData } = fieldConfig;
      // console.log('isShow', isShow)

        result[prop] = {
          label: label, // 显示名称
          value: row[prop] ?? '--', // 对应 row 的值
          type: type,
          listData: listData
        };
    });

    info.value = result; // 更新响应式数据

    // console.log('info.value', info.value)

    userInfoDialog.value = true
  }

  let formLabelWidth = "180px";

  const userPersonalArray = [
    {
      prop: "customerIdType",
      label: "证件类型",
      listData: CERTIFICATE_TYPE,
      form: {
        hideEdit: true,
        width: '90%',
        formLabelWidth: formLabelWidth,
        type: 'select',
        listData: CERTIFICATE_TYPE,
      }
    },
    {
      prop: "customerIdNum",
      label: "证件号码",
      form: {
        hideEdit: true,
        width: '90%',
        formLabelWidth: formLabelWidth,
        type: 'input',
      }
    },
    {
      prop: "customerTel",
      label: "手机号",
      form: {
        width: '90%',
        formLabelWidth: formLabelWidth,
        slotSetEdit: true,
        slotSetNameEdit: "customerTelSlot",
      }
    },
    {
      prop: "newMobileCode",
      label: "手机号验证",
      form: {
        hideInfo: true,
        hideEdit: true,
        formLabelWidth: formLabelWidth,
        placeholder: '请输入验证码',
        width: '90%',
        type: 'input',
      }
    },
    {
      prop: "customerAddress",
      label: "地址",
      form: {
        formLabelWidth: formLabelWidth,
        width: '90%',
        type: 'input',
      }
    },
    {
      prop: "customerPosImgUrl",
      label: "证件照正面照片",
      type: 'img',
      form: {
        width: '90%',
        formLabelWidth: formLabelWidth,
        type: 'uploadImg',
      }
    },
    {
      prop: "customerNegImgUrl",
      label: "证件照反面照片",
      type: 'img',
      form: {
        width: '90%',
        formLabelWidth: formLabelWidth,
        type: 'uploadImg',
      }
    },
    {
      prop: "sceneType",
      label: "用户协议支撑服务场景",
      form: {
        formLabelWidth: formLabelWidth,
        width: '90%',
        type: 'input',
        hideEdit: true
      }
    },
  ]
  const userUnitArray = [
    {
      prop: "customerIdType",
      label: "证件类型",
      listData: CERTIFICATE_TYPE,
      form: {
        hideEdit: true,
        width: '90%',
        formLabelWidth: formLabelWidth,
        type: 'select',
        listData: CERTIFICATE_TYPE,
      }
    },
    {
      prop: "customerIdNum",
      label: "证件号码",
      form: {
        hideEdit: true,
        width: '90%',
        formLabelWidth: formLabelWidth,
        type: 'input',
      }
    },
    {
      prop: "customerTel",
      label: "手机号",
      form: {
        width: '90%',
        formLabelWidth: formLabelWidth,
        slotSetEdit: true,
        slotSetNameEdit: "customerTelSlot",
      }
    },
    {
      prop: "newMobileCode",
      label: "手机号验证",
      form: {
        hideInfo: true,
        hideEdit: true,
        formLabelWidth: formLabelWidth,
        placeholder: '请输入验证码',
        width: '90%',
        type: 'input',
      }
    },
    {
      prop: "customerPosImgUrl",
      label: "用户证件号正面照",
      type: 'img',
      width: '90%',
      form: {
        formLabelWidth: formLabelWidth,
        type: 'uploadImg',
      }
    },
    {
      prop: "customerNegImgUrl",
      label: "用户证件号反面照",
      type: 'img',
      form: {
        width: '90%',
        formLabelWidth: formLabelWidth,
        type: 'uploadImg',
      }
    },
    {
      prop: "customerAddress",
      label: "单位地址",
      form: {
        formLabelWidth: formLabelWidth,
        width: '90%',
        type: 'input',
      }
    },
    {
      prop: "sceneType",
      label: "用户协议支撑服务场景",
      form: {
        formLabelWidth: formLabelWidth,
        width: '90%',
        type: 'input',
        hideEdit: true
      }
    },
    {
      prop: "agentName",
      label: "指定经办人姓名",
      form: {
        formLabelWidth: formLabelWidth,
        width: '90%',
        type: 'input',
      }
    },
    {
      prop: "agentIdType",
      label: "指定经办人证件号类型",
      listData: CERTIFICATE_TYPE,
      form: {
        formLabelWidth: formLabelWidth,
        listData: CERTIFICATE_TYPE,
        width: '90%',
        type: 'select',
      }
    },
    {
      prop: "agentIdNum",
      label: "指定经办人证件号",
      form: {
        formLabelWidth: formLabelWidth,
        width: '90%',
        type: 'input',
      }
    },
    {
      prop: "agentPosImgUrl",
      label: "指定经办人证件正面照",
      type: 'img',
      form: {
        width: '90%',
        hideEdit: true,
        formLabelWidth: formLabelWidth,
        type: 'uploadImg',
      }
    },
    {
      prop: "agentNegImgUrl",
      label: "指定经办人证件反面照",
      type: 'img',
      form: {
        width: '90%',
        hideEdit: true,
        formLabelWidth: formLabelWidth,
        type: 'uploadImg',
      }
    },
    {
      prop: "channelId",
      label: "开户渠道编号",
      form: {
        hideEdit: true,
        formLabelWidth: formLabelWidth,
        width: '90%',
        type: 'input',
      }
    },
    {
      prop: "channelType",
      label: "渠道类型",
      listData: AGENCY_TYPE,
      form: {
        hideEdit: true,
        formLabelWidth: formLabelWidth,
        width: '90%',
        listData: AGENCY_TYPE,
        type: 'select',
      }
    },
    {
      prop: "proxyUrl",
      label: "委托书",
      type: 'img',
      form: {
        hideEdit: true,
        formLabelWidth: formLabelWidth,
        width: '90%',
        type: 'uploadImg',
      }
    },
    {
      prop: "emergencyFlag",
      label: "应急车辆用户标识",
      listData: EMERGENCY_VEHICLE_TYPE,
      form: {
        hideEdit: true,
        formLabelWidth: formLabelWidth,
        width: '90%',
        listData: EMERGENCY_VEHICLE_TYPE,
        type: 'select',
      }
    },
  ]

  //以下为修改客户信息
  const submitLoading = ref(false)
  const userChangeDialog = ref(false)
  const showVerifyButtons = ref(false)
  const userChangeFormRef = ref()
  const userChangeForm = ref({
    type: '',
    name: '',
    idNo: '',
    address: '',
    tel: '',
    vld: '',
    agentName: '',
    agentIdNo: '',
    agentAddress: '',
    verifyCode: '',
    idCardFront: '',
    idCardBack: '',
    agentIdCardFront: '',
    agentIdCardBack: '',
    mobileChange: '',
  })
  const originalTel = ref()
  const rules = reactive({
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    address: [{ required: true, message: '请输入地址', trigger: 'blur' },],
    tel: [{ required: true, message: '请输入手机号', trigger: 'blur' },],
    vld: [{ required: true, message: '请输入有效期', trigger: 'blur' },],
    verifyCode: [{ required: true, message: '请输入验证码', trigger: 'blur' },],
    idCardFront: [{ required: true, message: '请上传证件正面照', trigger: 'blur' },],
    idCardBack: [{ required: true, message: '请上传证件反面照', trigger: 'blur' },],
    agentIdCardFront: [{ required: true, message: '请上传经办人证件正面照', trigger: 'blur' },],
    agentIdCardBack: [{ required: true, message: '请上传经办人证件反面照', trigger: 'blur' },],
    agentName: [{ required: true, message: '请输入经办人姓名', trigger: 'blur' }],
    agentIdNo: [{ required: true, message: '请输入经办人证件号', trigger: 'blur' }],
  })

  function edit(row: any) {
    console.log("===>row", row)
    const data = toRaw(row)
    originalTel.value = data.customerTel
    userChangeForm.value = {
      customerId: data.customerId,
      //提交数据
      type: data.userType==="PERSONAL_USER"?'1':'2',
      name: data.customerName,
      idNo: data.customerIdNum,
      address: data.customerAddress,
      tel: data.customerTel,
      vld: data.customerVid,
      agentName: data.agentName,
      agentIdNo: data.agentIdNum,
      agentAddress: '',
      verifyCode: '',
      idCardFront: import.meta.env.VITE_APP_UPLOAD_URL+data.customerPosImgUrl,
      idCardBack: import.meta.env.VITE_APP_UPLOAD_URL+data.customerNegImgUrl,
      agentIdCardFront: import.meta.env.VITE_APP_UPLOAD_URL+data.agentPosImgUrl,
      agentIdCardBack: import.meta.env.VITE_APP_UPLOAD_URL+data.agentNegImgUrl,
      mobileChange: '1',
    }
    userChangeDialog.value = true
  }
  // 上传成功
  function onSuccess(response: any, uploadFile: any, item: any) {
    if(response.code == 200){
      // console.log("1===>form.value",form.value)
      // if (item.prop == 'front') {
      //   form.value.imagePath = response.data.ossFilePath
      // }
      userChangeForm.value[item] = import.meta.env.VITE_APP_UPLOAD_URL + response.data.ossFilePath
      ElMessage.success(response.msg)
    }
  }
  const data = { bucket: "" };
  const uploadImg = ref<UploadInstance>()
  const uploadImgBack = ref<UploadInstance>()
  const uploadImgYyzz = ref<UploadInstance>()
  //覆盖替换上一个文件
  const handleImg: UploadProps['onExceed'] = (files) => {
    uploadImg.value![0].clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    uploadImg.value![0].handleStart(file)
    uploadImg.value![0].submit()
  }
  const handleImgBack: UploadProps['onExceed'] = (files) => {
    uploadImgBack.value![0].clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    uploadImgBack.value![0].handleStart(file)
    uploadImgBack.value![0].submit()
  }
  const handleImgYyzz: UploadProps['onExceed'] = (files) => {
    uploadImgYyzz.value![0].clearFiles()
    const file = files[0] as UploadRawFile
    file.uid = genFileId()
    uploadImgYyzz.value![0].handleStart(file)
    uploadImgYyzz.value![0].submit()
  }
  const beforeAvatarImgUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.size / 1024 / 1024 > 5) {
      ElMessage.error('文件大小不能超过 5MB!')
      return false
    }
    return true
  }

  function submitChange(){
    userChangeFormRef.value.validate((valid) => {
      console.log("===>userChangeForm",userChangeForm.value)
      if (valid) {
        submitLoading.value = true
        BaseService.postN('/managew/customerInfoChange/apply', userChangeForm.value).then((res) => {
          if (res.code == 200) {
            ElMessage.success(res.msg)
            submitLoading.value = false
            userChangeDialog.value = false
          }
        }).catch((error) => {
          submitLoading.value = false
        })
      }
    })
  }

  // 监听手机号变化
  watch(() => userChangeForm.value.tel, (newVal, oldVal) => {
    if (newVal !== oldVal) {
      handleTelChange()
    }
  })

  const handleTelChange = () => {
    showVerifyButtons.value = userChangeForm.value.tel !== originalTel.value
    userChangeForm.value.mobileChange = showVerifyButtons.value?'2':'1'
  }

  const frontLoading = ref(false)
  const backLoading = ref(false)
  const yyzzLoading = ref(false)

  function doOcr(type) {
    let img = '';
    let changeType = userChangeForm.value.type;
    if (changeType === '1') {
      if (type === 1) {
        frontLoading.value = true
        img = userChangeForm.value.idCardFront ?? ''
        if (!img) {
          ElMessage.error('请上传证件正面');
          frontLoading.value = false
          return
        }
      } else if (type === 2) {
        backLoading.value = true
        img = userChangeForm.value.idCardBack ?? ''
        if (!img) {
          ElMessage.error('请上传证件背面');
          backLoading.value = false
          return
        }
      }
    } else if (changeType === '2') {
      if (type === 1) {
        frontLoading.value = true
        img = userChangeForm.value.agentIdCardFront ?? ''
        if (!img) {
          ElMessage.error('请上传证件正面');
          frontLoading.value = false
          return
        }
      } else if (type === 5) {
        yyzzLoading.value = true
        img = userChangeForm.value.idCardFront ?? ''
        if (!img) {
          ElMessage.error('请上传营业执照正面');
          yyzzLoading.value = false
          return
        }
      }
    }

    const params = {
      type: type,
      imagePath: img.replace(import.meta.env.VITE_APP_UPLOAD_URL, '')
    }
    // console.log("===>params",params)
    BaseService.postN('/iaw/api/ocr/do', params).then((res: any) => {
      if (res && res.statusCode === 0) {
        const data = res.data
        // console.log("====>data",data)
        if (changeType === '1') {
          if (type === 1) {
            userChangeForm.value.name = data.name
            userChangeForm.value.address = data.address
          } else if (type === 2) {
            userChangeForm.value.vld = data.enddate
          }
        }else if (changeType === '2') {
          if (type === 1) {
            userChangeForm.value.agentName = data.name
            userChangeForm.value.agentIdNo = data.address
          } else if (type === 5) {
            userChangeForm.value.name = data.unitName
            userChangeForm.value.address = data.adress
          }
        }
        frontLoading.value = false
        backLoading.value = false
        yyzzLoading.value = false
        ElMessage.success('识别成功');
      }
    }).catch((error) => {
      frontLoading.value = false
      backLoading.value = false
      yyzzLoading.value = false
    })

  }

  //表单数据配置
  let field: any = ref({
    dialogInfo: false, //是否展示详情 (默认false)
    // dialogCustom: true,
    border: true, //是否添加边框(默认false)
    searchShow: IsPermission(route, 'QUERY_BASE'), //搜索展示
    crudChildShow: true,
    operateFixed: true,
    paginStart: true, //是否显示分页查询 (默认false)
    dialogWidth: "60%",
    operateWidth: "140", //操作栏宽度
    operateTitle: '操作', //操作栏标题(默认为"")
    crud: {
      add: false,
    },
    operate: {
      info: false,
      // edit: IsPermission(route, 'EDIT_LIST'), //是否编辑(默认true)
      edit: false,
      delete: false, //是否删除(默认true)
      remark: false, // 查看
      announcement: false, // 公告
      forbidden: false, // 禁用
      enable: false, // 启用
      authorization: false, // 授权
      cancel: false, // 取消订单
    },
    tableSize: -1,
    paging: {
      pageSize: 10,
      currentPage: 1,
      total: 0,
    },
    extend: [
      {
        label: "序号",
        type: "index",
        width: "50px",
      },
    ],
    field: [
      {
        width: '140',
        prop: "customerId",
        label: "用户编号",
        type: 'text',
        form: {
          hideEdit: true,
          width: '90%',
          formLabelWidth: formLabelWidth,
          type: 'input',
          required: true,
        }
      },
      {
        prop: "issuerId",
        label: "发行方编号",
        type: 'text',
        hide: true,
        form: {
          width: '90%',
          formLabelWidth: formLabelWidth,
          type: 'input',
        }
      },
      {
        prop: "registeredDate",
        label: "注册日期",
        type: 'text',
        hide: true,
        form: {
          width: '90%',
          formLabelWidth: formLabelWidth,
          type: 'input',
        }
      },
      {
        prop: "seriseNo",
        label: "流水编号",
        type: 'text',
        form: {
          width: '90%',
          formLabelWidth: formLabelWidth,
          type: 'input',
        }
      },
      {
        prop: "userType",
        label: "用户类型",
        type: 'text',
        listData: USER_TYPE,
        form: {
          width: '90%',
          formLabelWidth: formLabelWidth,
          type: 'select',
          listData: USER_TYPE,
        }
      },
      {
        prop: "customerName",
        label: "用户名称",
        type: 'text',
        form: {
          width: '90%',
          formLabelWidth: formLabelWidth,
          type: 'input',
        }
      },
      {
        prop: "customerIdType",
        label: "证件类型",
        type: 'text',
        // listData: CERTIFICATE_TYPE,
        form: {
          width: '90%',
          formLabelWidth: formLabelWidth,
          type: 'select',
          // listData: CERTIFICATE_TYPE,
        }
      },
      {
        width: '150',
        prop: "customerIdNumDesensitization",
        label: "证件号码",
        type: 'text',
        form: {
          width: '90%',
          formLabelWidth: formLabelWidth,
          type: 'input',
        }
      },
      {
        prop: "customerTelDesensitization",
        label: "手机号",
        type: 'text',
        form: {
          width: '90%',
          formLabelWidth: formLabelWidth,
          type: 'input',
        }
      },
      {
        prop: "customerAddress",
        label: "开户人地址",
        type: 'text',
        form: {
          width: '90%',
          formLabelWidth: formLabelWidth,
          type: 'input',
        }
      },
      {
        prop: "customerPosImgUrl",
        label: "正面图片",
        type: 'img',
        hide: true,
        form: {
          width: '90%',
          formLabelWidth: formLabelWidth,
          type: 'input',
        }
      },
      {
        prop: "customerNegImgUrl",
        label: "反面图片",
        type: 'img',
        hide: true,
        form: {
          width: '90%',
          formLabelWidth: formLabelWidth,
          type: 'input',
        }
      },
      {
        prop: "agentName",
        label: "经办人",
        type: 'text',
        hide: true,
        form: {
          hideEdit: true,
          width: '90%',
          formLabelWidth: formLabelWidth,
          type: 'input',
        }
      },
      {
        prop: "agentIdType",
        label: "经办人证件类型",
        // listData: CERTIFICATE_TYPE,
        type: 'text',
        hide: true,
        form: {
          width: '90%',
          formLabelWidth: formLabelWidth,
          type: 'select',
          // listData: CERTIFICATE_TYPE,
        }
      },
      {
        prop: "agentIdNumDesensitization",
        label: "经办人证件号码",
        type: 'text',
        hide: true,
        form: {
          hideEdit: true,
          width: '90%',
          formLabelWidth: formLabelWidth,
          type: 'input',
        }
      },
      {
        prop: "agentPosImgUrl",
        label: "经办人正面图片",
        type: 'img',
        hide: true,
        form: {
          width: '90%',
          formLabelWidth: formLabelWidth,
          type: 'input',
        }
      },
      {
        prop: "agentNegImgUrl",
        label: "经办人反面图片",
        type: 'img',
        hide: true,
        form: {
          width: '90%',
          formLabelWidth: formLabelWidth,
          type: 'input',
        }
      },
      {
        prop: "customerVid",
        label: "证件过期时间",
        type: 'text',
        form: {
          width: '90%',
          formLabelWidth: formLabelWidth,
          type: 'input',
        }
      },
      {
        prop: "channelId",
        label: "开户渠道编号",
        type: 'text',
        hide: true,
        form: {
          width: '90%',
          formLabelWidth: formLabelWidth,
          type: 'input',
        }
      },
      {
        prop: "department",
        label: "部门",
        type: 'text',
        hide: true,
        form: {
          hideEdit: true,
          width: '90%',
          formLabelWidth: formLabelWidth,
          type: 'input',
        }
      },
    ],
  });
</script>
<style scoped>
:deep(.my-content){
  word-break: break-all;
}
::v-deep .el-upload {
  width: 100%;
  height: 100%;
}

::v-deep .el-upload .avatar-uploader-icon {
  width: 100%;
  height: 100%;
}

.avatar-uploader .avatar {
  width: 100%;
  height: 100%;
  display: block;
}
.btn_btm{
  text-align: right;
}
::v-deep.img-upload-box .el-form-item__label{
  text-align: right;
}
.tel-container {
  display: flex; /* 启用 Flex 布局 */
  width: 100%; /* 确保容器宽度占满 */
}

.tel-input,.tel-verify{
  transition: all 0.5s; /* 可选：添加平滑过渡效果 */
}
.tel-verify{
  display: flex;
  overflow: hidden
}
::v-deep.my-img-box .el-image__preview{
  width: 100%;
  max-height: 150px;
  object-fit: cover;
}
</style>