<template>
  <div class="signUp-container">
    <div
      :class="[
        'steps-container',
        { nodata: ![2, 21].includes(auditInfo.approval_status) },
      ]"
    >
      <div class="myresult">
        <el-result
          v-if="[2].includes(auditInfo.approval_status)"
          icon="error"
          title="很遗憾，您无法入驻我们的商城"
          :sub-title="`拒绝原因：${auditInfo.approval_remark}`"
        >
        </el-result>

        <el-result
          v-if="
            [3].includes(auditInfo.approval_status) &&
            !auditInfo.lkl_ec_result_url
          "
          icon="warning"
          title="审核中，1-7个工作日内答复，请耐心等待"
        >
        </el-result>

        <el-result
          v-if="
            auditInfo.approval_status == 5 &&
            auditInfo.has_ec_signed == 2 &&
            auditInfo.lkl_ec_result_url
          "
          class="result"
          icon="warning"
          title="开店申请资料已通过！请尽快签署合同！"
          sub-title="签署合同链接24小时内有效，过期需重新申请！"
        >
          <template #extra>
            <el-button type="danger" @click="toSign">立即签署</el-button>
          </template>
        </el-result>

        <el-result
          v-if="
            [21].includes(auditInfo.approval_status) &&
            auditInfo.has_ec_signed == 1
          "
          class="result"
          icon="warning"
          title="合同签署完成，商家信息正在提交审核，请耐心等待。"
        >
        </el-result>

        <el-result
          v-if="
            [21].includes(auditInfo.approval_status) &&
            auditInfo.has_ec_signed == 2
          "
          class="result"
          icon="error"
          title="抱歉，系统未能完成处理，请联系客服进一步审核后重试。"
        >
        </el-result>

        <el-result
          v-if="
            auditInfo.approval_status == 5 &&
            auditInfo.has_apply_mer == 1 &&
            auditInfo.store_status == 2
          "
          class="result"
          icon="error"
          title="系统正在初始化店铺，预计很快完成，请您稍后再来探索。"
        >
        </el-result>

        <el-result
          v-if="
            [21].includes(auditInfo.approval_status) &&
            auditInfo.has_ec_signed == 1 &&
            auditInfo.has_apply_mer == 2
          "
          class="result"
          icon="error"
          title=" 抱歉，系统未能完成处理，请联系客服进一步审核后重试。"
        >
        </el-result>

        <el-result
          v-if="
            auditInfo.approval_status == 5 &&
            auditInfo.has_apply_mer == 1 &&
            auditInfo.has_apply_split == 2 &&
            auditInfo.store_status == 1
          "
          class="result"
          icon="success"
          title=" 店铺创建成功，系统正在处理分账业务申请"
        >
        </el-result>

        <el-result
          v-if="
            [21].includes(auditInfo.approval_status) &&
            auditInfo.has_ec_signed == 1 &&
            auditInfo.has_apply_mer == 1 &&
            auditInfo.store_status == 2
          "
          class="result"
          icon="error"
          title=" 店铺创建未成功，请联系客服协助处理，我们将尽快为您解决。"
        >
        </el-result>

        <el-result
          v-if="
            auditInfo.approval_status == 5 &&
            auditInfo.has_apply_mer == 1 &&
            auditInfo.store_status == 1 &&
            auditInfo.has_apply_split == 1 &&
            auditInfo.has_bind_receiver == 2
          "
          class="result"
          icon="success"
          title="分账业务申请已通过，系统正在处理接收方绑定"
        >
        </el-result>

        <el-result
          v-if="
            [21].includes(auditInfo.approval_status) &&
            auditInfo.has_ec_signed == 1 &&
            auditInfo.has_apply_mer == 1 &&
            auditInfo.store_status == 1 &&
            auditInfo.has_apply_split == 2
          "
          class="result"
          icon="error"
          title="分账业务处理遇到小问题，需要客服再次确认哦~请稍后联系他们完成审核后重试。"
        >
        </el-result>

        <el-result
          v-if="
            [21].includes(auditInfo.approval_status) &&
            auditInfo.has_ec_signed == 1 &&
            auditInfo.has_apply_mer == 1 &&
            auditInfo.store_status == 1 &&
            auditInfo.has_apply_split == 1 &&
            auditInfo.has_bind_receiver == 2
          "
          class="result"
          icon="success"
          title="分账接收方绑定成功，入驻流程即将完成"
        >
        </el-result>

        <el-result
          v-if="
            [1, 5].includes(auditInfo.approval_status) &&
            auditInfo.has_apply_mer == 1 &&
            auditInfo.store_status == 1 &&
            auditInfo.has_apply_split == 1 &&
            auditInfo.has_bind_receiver == 1
          "
          class="result"
          icon="error"
          title="很抱歉，您的分账请求未能通过审核，请联系我们的客服人员获取帮助。"
        >
        </el-result>
        <view class="time" v-if="auditInfo.approval_status != 4">
          申请时间：{{ auditInfo.created_at }}
        </view>
      </div>
    </div>

    <div class="form-submit" v-if="[2, 21].includes(auditInfo.approval_status)">
      <el-form
        :model="applyFormData"
        :rules="rules"
        ref="formRef"
        label-width="160px"
        v-loading.fullscreen.lock="loading"
        element-loading-text="数据加载中..."
        element-loading-background="rgba(0,0,0,.75)"
      >
        <el-form-item
          :label="item.label"
          :prop="item.key"
          v-for="(item, index) in formItemData"
          :key="item.key"
        >
          <el-input
            v-if="item.type == 'input'"
            v-model="applyFormData[item.key!]"
            :placeholder="item.placeholder"
          />

          <el-input
            :rows="5"
            type="textarea"
            v-if="item.type == 'textarea'"
            v-model="applyFormData[item.key!]"
            :placeholder="item.placeholder"
          />

          <el-date-picker
            v-if="item.type == 'datepicker'"
            v-model="applyFormData[item.key!]"
            type="date"
            :placeholder="item.placeholder"
          />

          <template v-if="item.type == 'select' && item.key == 'mapAddress'">
            <el-cascader
              style="margin-right: 5px"
              v-model="applyFormData.map_address"
              :options="cascaderOptions2"
              @change="handleChange"
              :placeholder="item.placeholder"
               popperClass="multi-choose"
            />
            <el-autocomplete
              v-if="applyFormData.map_address"
              style="width: 180px"
              v-model="applyFormData.position"
              placeholder="试试搜索，快速填写地址"
              :fetch-suggestions="querySearch"
              value-key="value"
              :options="autocompleteOptions"
              @select="handleSelect"
            >
              <template #default="{ item }">
                <div class="auto-item" v-if="item">
                  <div>
                    <p>{{ item.name }}</p>
                  </div>
                  <div>
                    <span>{{ item.address }}</span>
                  </div>
                </div>
              </template>
            </el-autocomplete>
          </template>

          <el-select-v2
            v-if="
              (item.type == 'select' && item.key == 'bank_name') ||
              item.key == 'bank_branch_name'
            "
            clearable
            filterable
            remote
            :remote-method="bankListRemoteMethod"
            @change="bankListChange"
            v-model="applyFormData[item.key]"
            placeholder="搜索银行名称"
            placement="top-start"
            style="width: 350px"
            :options="bankList2"
          >
            <template #prefix>
              <el-icon>
                <Search />
              </el-icon>
            </template>
          </el-select-v2>
          <div
            class="bank_name_tip"
            v-if="
              (item.type == 'select' && item.key == 'bank_name') ||
              item.key == 'bank_branch_name'
            "
          >
            <el-tooltip placement="top" effect="light">
              <template #content>
                <div class="bank_name_cont">
                  <p>
                    如开户地为县级市或乡镇区无法搜索到，可选择相同银行的市级支行网点
                  </p>
                </div>
              </template>

              <el-button type="info" link>
                <el-icon color="#e6a23c" size="14" style="margin-right: 5px"
                  ><WarningFilled /></el-icon
                >搜不到我的开户银行，怎么处理？</el-button
              >
            </el-tooltip>
          </div>

          <el-cascader
            v-if="item.type == 'select' && item.key == 'biz_category'"
            v-model="applyFormData[item.key]"
            :placeholder="item.placeholder"
            :options="cascaderOptions"
            :show-all-levels="false"
            @change="handleChangeBizCategory"
            clearable
          />

          <el-select
            v-if="item.type == 'select' && item.key == 'license_type'"
            v-model="applyFormData[item.key]"
            placeholder="请选择类型"
            clearable
          >
            <el-option
              v-for="item in optionsPermitType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>

          <el-upload
            v-if="item.type == 'upload'"
            ref="uploadRef"
            :limit="1"
            list-type="picture-card"
            :auto-upload="true"
            :on-preview="handlePictureCardPreview"
            v-model="applyFormData[item.key!]"
            :on-remove="
              (file, fileList) => handleRemove(file, fileList, item.key)
            "
            :on-success="
              (response, file, fileList) =>
                handleUploadSuccess(response, file, fileList, item.key)
            "
            :on-error="handleUploadError"
            :before-upload="beforeUpload"
            :action="uploadUrl"
            name="upfile"
            :class="{
                'upload-hidden': isUploadHidden(item.key!),
              }"
          >
            <el-icon class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
    </div>

    <div class="form-button" v-if="[2, 21].includes(auditInfo.approval_status)">
      <div class="myui_check_text">检查并确认店铺信息和证件信息无误</div>
      <el-button type="primary" @click="merchToApply" class="custom-button"
        >重新审核</el-button
      >
    </div>

    <el-dialog v-model="dialogSigned" width="100%">
      <iframe
        :src="auditInfo?.lkl_ec_result_url"
        class="signed_iframe"
        border="0"
        frameborder="0"
      ></iframe>
    </el-dialog>

    <el-dialog v-model="dialogVisible" width="max-content">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { Plus, Search, WarningFilled } from "@element-plus/icons-vue";
import { uniq, difference } from "lodash";

import cityData from "../../stores/cityData";
import type { CityDataStructure } from "../../stores/cityData";
import { useUserStore } from "@/stores/userStore";
import { compressImage } from "@/utils/file";

import {
  GetStoreCategories,
  transformStoreCategories,
  GetPostion,
  GetBank,
  merchApply,
  re_apply,
  GetAppDistrict,
  GetAuditInfo,
} from "@/api/login";
import { batchNoApi, imgOcrResultApi } from "@/api/upload";
import config from "./formConfig";

interface FormItemType {
  type?: string;
  key?: string | undefined;
  hide?: boolean;
  label?: string;
  placeholder?: string;
  sort?: number;
}

type ApplyFormDataType = {
  [key in string]: any;
};

const orcImgTypeConf = {
  FR_ID_CARD_FRONT: "FR_ID_CARD_FRONT",
  FR_ID_CARD_BEHIND: "FR_ID_CARD_BEHIND",
  ID_CARD_FRONT: "ID_CARD_FRONT",
  ID_CARD_BEHIND: "ID_CARD_BEHIND",
  BUSINESS_LICENCE: "BUSINESS_LICENCE",
  BANK_CARD: "BANK_CARD",
};

const userStore = useUserStore();
const router = useRouter();

const processData = () => {
  const { provinceData, cityData: cityList, areaData } = cityData;
  return provinceData.map((province, provinceIndex) => {
    const provinceItem = {
      ...province,
      children: cityList[provinceIndex].map((city, cityIndex) => {
        const cityItem = {
          ...city,
        };
        if (areaData[provinceIndex] && areaData[provinceIndex][cityIndex]) {
          cityItem.children = areaData[provinceIndex][cityIndex];
        }
        return cityItem;
      }),
    };
    return provinceItem;
  });
};

const loading = ref(false);
const formRef = ref(null);
const dialogSigned = ref(false);
const dialogVisible = ref(false);
const dialogImageUrl = ref("");
const cascaderOptions = ref([]);
const cascaderOptions2 = ref(processData());
const cityData2 = ref<CityDataStructure>();
const cascaderOptions3 = ref();
const bankList2 = ref([]);

let orcTimeout = 0;
let currentFile = ref(null);
let currentBbatchNo = ref("");

const handleChangeBizCategory = (value) => {
  if (value && value.length === 2) {
    const [bizCategoryId, bizSecondCategoryId] = value;
    applyFormData.biz_category = bizCategoryId;
    applyFormData.biz_second_category = bizSecondCategoryId;
  }
};
const applyFormData = reactive<ApplyFormDataType>({});
const isLoggedIn = ref(!!userStore.token);
const optionsPermitType = [
  {
    value: 1,
    label: "无需特殊资质",
  },
  {
    value: 2,
    label: "需许可证资质",
  },
  {
    value: 3,
    label: "需特许证件资质",
  },
];
const rules = reactive({});
const formItemData = ref<FormItemType[]>([]);
let auditInfo = ref<{ [key: string]: any }>({
  id: 0,
  approval_status: 0,
  created_at: "2099-02-17 09:25:53",
  approval_remark: "",
  lkl_ec_result_url: "",
  approval_invalid_col: [],
});
const formConfig = reactive(JSON.parse(JSON.stringify(config.formConfig)));

const toSign = () => {
  dialogSigned.value = true;
};

const handleGetAuditInfo = async () => {
  const res = (await GetAuditInfo({
    mobile: localStorage.getItem("mobilePhone"),
  })) as any;

  if (res.data == null || res.data.approval_status == 4) {
    router.push({ name: "start" });
    return;
  }

  let arr = JSON.parse(res.data.approval_invalid_col);
  arr = uniq(arr);

  if (arr.includes("all")) {
    router.push({ name: "start", query: { id: res.auditInfo.id } });
    return;
  }

  const arr2 = formConfig.reduce((acc, item) => {
    if (arr.includes(item.key)) {
      if (item.key == "license_image") {
        applyFormData[item.key] = [];
      } else {
        applyFormData[item.key] = "";
      }
      acc.push(item);
    }
    return acc;
  }, []);

  auditInfo.value = { ...res.data, approval_invalid_col: arr };

  formItemData.value = arr2.sort((a, b) => a.sort - b.sort);

  arr2.forEach((element) => {
    if (element.required) {
      rules[element.key] = {
        required: true,
        message: element.placeholder,
        trigger: "blur",
      };
    }
  });
};

const handleMerchApply = async () => {
  const res = await re_apply({
    id: auditInfo.value.id,
    ...applyFormData,
  });
  if (res.status == 200 && res.code == 0) {
    ElMessage.success("资料已提交~");
    formItemData.value = [];
    handleGetAuditInfo();
  }
};

const checkForm = async () => {
  const isValid = await (formRef.value as any).validate((valid) => {
    return valid;
  });

  if (isValid) {
    if (
      difference(
        ["license_type", "license_image", "license_number"],
        auditInfo.value.approval_invalid_col
      ).length == 0 &&
      applyFormData?.license_type != 1
    ) {
      if (!applyFormData?.license_image?.length) {
        ElMessage.error("请上传许可证图片");
        return;
      }
      if (!applyFormData?.license_number) {
        ElMessage.error("请输入许可证编号");
        return;
      }
    }
    handleMerchApply();
  }
};

const merchToApply = async () => {
  checkForm();
};

const bankListChange = (val) => {
  const item: any = bankList2.value.find((item: any) => item.value == val);
  if (item) {
    applyFormData.bank_name = item.label;
    applyFormData.bank_district = item.district;
    applyFormData.bank_area = item.area;
    applyFormData.openning_bank_code = item.branch_bank_no;
    applyFormData.clearing_bank_code = item.clear_no;
  }
};

const bankListRemoteMethod = (val) => {
  if (!val) {
    bankList2.value = [];
    return;
  }

  GetBank({
    keyword: val,
    pageNum: 1,
    pageSize: 5000,
  }).then((res) => {
    if (res.status == 200) {
      bankList2.value = res.data.items.map((item) => {
        return {
          district: item.district,
          area: item.area,
          branch_bank_no: item.branch_bank_no,
          clear_no: item.clear_no,
          label: item.branch_bank_name,
          value: item.branch_bank_no,
        };
      });
    }
  });
};

const handleChange = (value) => {
  // 假设 cascader 的值是一个数组，格式为 [省份ID, 城市ID, 区县ID]
  console.log(11, value);

  if (value && value.length === 3) {
    const [provinceId, cityId, countyId] = value;
    applyFormData.province_id = provinceId;
    applyFormData.city_id = cityId;
    applyFormData.county_id = countyId;
  }

  const names = value.map((id, level) => {
    const findName = (options, targetId) => {
      for (const item of options) {
        if (item.value === targetId) {
          return item.label;
        }
        if (item.children) {
          const childName = findName(item.children, targetId);
          if (childName) return childName;
        }
      }
      return "";
    };

    return findName(cascaderOptions2.value, id);
  });

  const str = names?.join("/");

  applyFormData.mapAddressLabel = str;
  applyFormData.store_area = str;
  (formRef.value as any).validate();
};

const autocompleteOptions = ref([]);
const querySearch = async (queryString, cb) => {
  if (!queryString) {
    cb([]);
    return;
  }

  try {
    const params = {
      query: queryString,
      region:
        applyFormData.mapAddressLabel.indexOf("/") &&
        applyFormData.mapAddressLabel?.split("/")[1],
      city_limit: true,
      ret_coordtype: "gcj02ll",
    };

    const res = await GetPostion(params);

    if (res?.result?.length) {
      const results = res.result
        .filter((item) => "location" in item)
        .map((item) => ({
          value: item.name, // 确保有 value 属性
          label: item.name, // 确保有 label 属性
          name: item.name,
          address: item.address || "", // 确保 address 属性存在
          lat: item.location?.lat || "", // 确保 lat 属性存在
          lng: item.location?.lng || "", // 确保 lng 属性存在
        }));
      cb(results);
    } else {
      ElMessage.error("搜索失败");
      cb([]);
    }
  } catch (error) {
    ElMessage.error("搜索失败");
    cb([]);
  }
};

const handleSelect = (item) => {
  applyFormData.position = "";
  applyFormData.store_address = item.value;
  applyFormData.store_latitude = item.lat;
  applyFormData.store_longitude = item.lng;
  (formRef.value as any).validate();
};

const beforeUpload = (file) => {
  const isJPG = file.type === "image/jpeg";
  const isPNG = file.type === "image/png";
  const isLt2M = file.size / 1024 / 1024 < 10;

  loading.value = true;

  if (!isJPG && !isPNG) {
    loading.value = false;
    ElMessage.error("上传的图片必须是JPG或PNG格式！");
    return false;
  }
  if (!isLt2M) {
    loading.value = false;
    ElMessage.error("上传的图片大小不能超过10MB！");
    return false;
  }
  return true;
};

const uploadUrl = ref("https://mall.gpxscs.cn/mobile/shop/oss/upload");

const handleRemove = (file, fileList, field) => {
  if (field === "license_image") {
    const removedUrl = file.url;
    applyFormData[field] = applyFormData[field].filter(
      (url) => url !== removedUrl
    );
  } else {
    applyFormData[field] = "";
  }
};

const isUploadHidden = (field: string) => {
  const limits = {
    license_image: 5,
  };
  const limit = limits[field] || 1;

  if (field === "license_image") {
    return applyFormData[field].length >= limit;
  } else {
    return applyFormData[field] !== "" && applyFormData[field] != null;
  }
};

const handleExceed = (files, fileList) => {
  ElMessage.warning(`最多只能上传1张图片`);
};

const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};

const getBatchNo = async (file, type) => {
  loading.value = true;
  file = await compressImage(file);
  const rsp = await batchNoApi(file, type).then((res) => {
    return res;
  });
  loading.value = false;
  if (rsp.status == 200) {
    return rsp?.data;
  } else {
    return null;
  }
};

const getOcrText = async (batchNo, type) => {
  return new Promise(async (resolve, reject) => {
    let formData: null | FormData = new FormData();

    formData.append("batchNo", batchNo);
    formData.append("imgType", type);

    clearTimeout(orcTimeout);

    orcTimeout = setTimeout(async () => {
      const imgOcrRes = await imgOcrResultApi(formData);

      formData = null;
      clearTimeout(orcTimeout);

      if (imgOcrRes.status != 200) {
        reject(imgOcrRes?.data);
      } else {
        resolve(imgOcrRes?.data);
      }
      loading.value = false;
    }, 2000);
  });
};

const handleOcrText = async (batchNo, imgType) => {
  loading.value = true;

  switch (imgType) {
    case "biz_license_image":
      var res = (await getOcrText(
        batchNo,
        orcImgTypeConf.BUSINESS_LICENCE
      )) as any;

      console.log("biz_license_image", res);
      applyFormData.biz_license_company = res.bizLicenseCompanyName;
      applyFormData.legal_person_name = res.bizLicenseOwnerName;
      applyFormData.biz_license_number = res.bizLicenseCreditCode;
      applyFormData.account_holder_name = res.bizLicenseCompanyName;
      applyFormData.biz_license_content = res.bizLicenseScope;
      break;
    case "legal_person_id_images":
      var res = (await getOcrText(
        batchNo,
        orcImgTypeConf.FR_ID_CARD_FRONT
      )) as any;

      console.log("legal_person_id_images", res);
      applyFormData.legal_person_id_number = res.idNumber;
      applyFormData.legal_person_id_addr = res.address;
      break;
    case "legal_person_id_images2":
      var res = (await getOcrText(
        batchNo,
        orcImgTypeConf.FR_ID_CARD_BEHIND
      )) as any;
      var validity = res.validity.split("-");

      console.log("legal_person_id_images2", res);
      applyFormData.legal_person_id_period_begin = validity[0];

      if (validity[1] != "长期") {
        applyFormData.legal_person_id_period_end = validity[1];
      } else {
        applyFormData.legal_person_id_period_end = "9999-12-31";
      }
      break;
    case "individual_id_images":
      var res = (await getOcrText(
        batchNo,
        orcImgTypeConf.ID_CARD_FRONT
      )) as any;

      console.log("individual_id_images", res);
      applyFormData.individual_id_name = res.name;
      applyFormData.account_holder_name = res.name;
      applyFormData.individual_id_number = res.idNumber;
      applyFormData.individual_id_addr = res.address;
      break;
    case "individual_id_images2":
      var res = (await getOcrText(
        batchNo,
        orcImgTypeConf.ID_CARD_BEHIND
      )) as any;

      var validity = res.validity.split("-");

      console.log("individual_id_images2", res);
      applyFormData.individual_id_period_begin = validity[0];

      if (validity[1] != "长期") {
        applyFormData.individual_id_period_end = validity[1];
      } else {
        applyFormData.individual_id_period_end = "9999-12-31";
      }
      break;
    case "bank_image":
      var res = (await getOcrText(batchNo, orcImgTypeConf.BANK_CARD)) as any;
      console.log("bank_image", res);
      applyFormData.account_number = res.card_number;
      break;
  }

  loading.value = false;
  (formRef.value as any).validate();
};

const handleUploadSuccess = async (response, file, fileList, field) => {
  if (response && response.status === 200 && response.code === 0) {
    if (response.data && response.data.url) {
      file.url = response.data.url;

      if (field === "license_image") {
        applyFormData[field].push(file.url);
      } else {
        applyFormData[field] = file.url;
      }
      loading.value = false;
      currentFile.value = file.raw;

      switch (field) {
        case "biz_license_image":
          var res = await getBatchNo(file.raw, orcImgTypeConf.BUSINESS_LICENCE);
          currentBbatchNo.value = res.batchNo;
          handleOcrText(res.batchNo, field);
          break;
        case "legal_person_id_images":
          var res = await getBatchNo(file.raw, orcImgTypeConf.FR_ID_CARD_FRONT);
          currentBbatchNo.value = res.batchNo;
          handleOcrText(res.batchNo, field);
          break;
        case "legal_person_id_images2":
          var res = await getBatchNo(
            file.raw,
            orcImgTypeConf.FR_ID_CARD_BEHIND
          );
          currentBbatchNo.value = res.batchNo;
          handleOcrText(res.batchNo, field);
          break;
        case "individual_id_images":
          var res = await getBatchNo(file.raw, orcImgTypeConf.ID_CARD_FRONT);
          currentBbatchNo.value = res.batchNo;
          handleOcrText(res.batchNo, field);
          break;
        case "individual_id_images2":
          var res = await getBatchNo(file.raw, orcImgTypeConf.ID_CARD_BEHIND);
          currentBbatchNo.value = res.batchNo;
          handleOcrText(res.batchNo, field);
          break;
        case "bank_image":
          var res = await getBatchNo(file.raw, orcImgTypeConf.BANK_CARD);
          currentBbatchNo.value = res.batchNo;
          handleOcrText(res.batchNo, field);
          break;
      }
    } else {
      ElMessage.error("文件上传成功，但未返回文件 URL");
      loading.value = false;
    }
  } else {
    ElMessage.error(response.msg || "文件上传失败");
    loading.value = false;
  }

  (formRef.value as any).validate();
};

const handleUploadError = (error, file) => {
  loading.value = false;
  ElMessage.error("文件上传失败");
};

onMounted(() => {

  if (!isLoggedIn.value) {
    router.push({ name: "index" });
    return;
  }

  handleGetAuditInfo();

  GetStoreCategories()
    .then((res) => {
      if (res.code === 0 && res.status === 200) {
        cascaderOptions.value = transformStoreCategories(res.data);
      } else {
      }
    })
    .catch((err) => {
      ElMessage.error("获取店铺分类失败");
    });

  GetAppDistrict()
    .then((res) => {
      if (res.code === 0 && res.status === 200) {
        cityData2.value = res.data;
        console.log(cascaderOptions3.value);
      } else {
        ElMessage.error("获取银行失败");
      }
    })
    .catch((err) => {
      ElMessage.error("获取银行失败");
    });
});
</script>

<style lang="scss" scoped>
:deep(.el-upload--picture-card),
:deep(.el-upload-list__item) {
  width: 96px;
  height: 96px;
  text-align: center;
  flex-direction: column;
  color: #666;
  line-height: 20px;
}

.result {
  margin: 30px 0;
}

.signed_iframe {
  width: 100%;
  height: 50vh;
}

.signUp-container {
  display: flex;
  margin-top: 70px;//因为修改了顶部导航栏，所以调整了一下
  padding-top: 12px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #eee;

  .myresult {
    display: flex;
    flex-direction: column;
    gap: 40px;
    :deep(.el-result) {
      padding: 0;
    }
    :deep(.el-result) {
      .el-result__icon {
        position: relative;
        &::after {
          content: "";
          width: 0px;
          height: 35px;
          position: absolute;
          top: -36px;
          left: 50%;
          border-right: 1px #ccc dashed;
        }
      }

      &:first-of-type {
        .el-result__icon {
          position: relative;
          &::after {
            display: none;
            height: 0;
          }
        }
      }
    }
    .time {
      font-size: 14px;
      text-align: center;
    }
  }

  .steps-container {
    width: 1000px;
    padding: 15px;
    border-radius: 5px;
    background: #fff;
    margin-bottom: 12px;
    &.nodata {
      min-height: calc(100vh - 220px);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  :deep(.upload-hidden .el-upload--picture-card) {
    display: none;
  }

  .form-submit {
    width: 1000px;
    min-height: calc(100vh - 220px);
    padding: 15px;
    border-radius: 5px;
    background: #fff;
    margin-bottom: 12px;

    // :deep(.el-form) {
    //   max-width: 100% !important;
    // }

    .from_box {
      // width: 100%;
      padding: 15px;
      margin: 0 0 12px;
      border-radius: 5px;
      background: #fff;
    }
  }

  .form-button {
    width: 100%;
    text-align: center;
    padding: 20px;
    background: #fff;
  }
}

.bank_name_tip {
  display: flex;
  align-items: center;
  margin-left: 10px;
}
.bank_name_cont {
  width: 300px;
  h3 {
    margin-bottom: 12px;
  }
  p {
    font-size: 14px;
    margin-bottom: 12px;
  }
}

.myui_check_text {
  color: #999;
  padding-bottom: 10px;
  text-align: center;
  font-size: 14px;
}

.auto-item {
  p {
    font-size: 15px;
    font-weight: 900;
  }

  span {
    font-size: 10px;
  }
}

@media (max-width: 768px) {
  .el-cascader-menu {
    width: 120px;
    min-width: 120px;
  }

  .signUp-container {
    .steps-container {
      width: 100%;
    }

    .form-submit {
      width: 100%;
    }
  }
}
</style>
