<template>
  <div class="signUp-container">
    <!-- 步骤条 -->
    <div class="steps-container">
      <div class="tit" style="margin-bottom: 0">免费开店资料填写</div>
    </div>

    <div class="form-submit">
      <el-form
        :model="applyFormData"
        :rules="rules"
        ref="formRef"
        label-width="160px"
        style="max-width: 600px"
        v-loading.fullscreen.lock="loading"
        element-loading-text="数据加载中..."
        element-loading-background="rgba(0,0,0,.75)"
      >
        <div class="from_box">
          <div class="tit">店铺信息</div>

          <el-form-item label="主体类型" prop="entity_type">
            <el-radio-group
              v-model="applyFormData.entity_type"
              @change="clearOtherFields"
            >
              <el-radio-button :value="1">企业</el-radio-button>
              <el-radio-button :value="2">个人</el-radio-button>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="联系人" prop="contact_name">
            <el-input
              v-model="applyFormData.contact_name"
              placeholder="请输入联系人姓名"
            />
          </el-form-item>
          <el-form-item label="联系电话" prop="login_mobile">
            <el-input
              v-model="applyFormData.login_mobile"
              placeholder="请输入联系人电话"
              disabled
            />
          </el-form-item>
          <!-- <el-form-item label="邮箱" prop="email">
            <el-input v-model="applyFormData.email" placeholder="请输入邮箱" />
          </el-form-item> -->
          <el-form-item label="经营品类" prop="biz_category">
            <el-cascader
              v-model="applyFormData.biz_category"
              :options="cascaderOptions"
              placeholder="请选择经营品类"
              :show-all-levels="false"
              @change="handleChangeBizCategory"
              clearable
            />
          </el-form-item>
          <el-form-item label="门店名称" prop="store_name">
            <el-input
              v-model="applyFormData.store_name"
              placeholder="请输入门店名称"
            />
          </el-form-item>
          <el-form-item label="所在地区" prop="map_address">
            <el-cascader
              style="marginright: 5px"
              v-model="applyFormData.map_address"
              :options="cascaderOptions2"
              @change="handleChange"
            />
            <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>
          </el-form-item>
          <el-form-item
            label="详细地址"
            prop="store_address"
            v-if="applyFormData.map_address"
          >
            <el-input
              v-model="applyFormData.store_address"
              placeholder="请输入详细地址"
            />
          </el-form-item>
          <el-form-item
            :label="getLabel('front_facade_image', 1)"
            prop="front_facade_image"
          >
            <el-upload
              ref="uploadRef"
              multiple
              :limit="1"
              list-type="picture-card"
              :auto-upload="true"
              :on-remove="
                (file, fileList) =>
                  handleRemove(file, fileList, 'front_facade_image')
              "
              :on-success="
                (response, file, fileList) =>
                  handleUploadSuccess(
                    response,
                    file,
                    fileList,
                    'front_facade_image'
                  )
              "
              :on-preview="handlePictureCardPreview"
              :on-error="handleUploadError"
              :on-exceed="handleExceed"
              :before-upload="beforeUpload"
              :action="uploadUrl"
              name="upfile"
              :class="{ 'upload-hidden': isUploadHidden('front_facade_image') }"
            >
              <el-icon class="avatar-uploader-icon">
                <Plus />
              </el-icon>
              <div class="uploader-tips">上传门店图</div>
            </el-upload>
          </el-form-item>
          <el-form-item
            :label="getLabel('environment_image', 1)"
            prop="environment_image"
          >
            <el-upload
              ref="uploadRef"
              multiple
              :limit="1"
              list-type="picture-card"
              :auto-upload="true"
              :on-preview="handlePictureCardPreview"
              v-model="applyFormData.environment_image"
              :on-remove="
                (file, fileList) =>
                  handleRemove(file, fileList, 'environment_image')
              "
              :on-success="
                (response, file, fileList) =>
                  handleUploadSuccess(
                    response,
                    file,
                    fileList,
                    'environment_image'
                  )
              "
              :on-error="handleUploadError"
              :before-upload="beforeUpload"
              :action="uploadUrl"
              name="upfile"
              :class="{ 'upload-hidden': isUploadHidden('environment_image') }"
            >
              <el-icon>
                <Plus />
              </el-icon>
              <div class="uploader-tips">上传环境图</div>
            </el-upload>
          </el-form-item>
        </div>

        <div class="from_box">
          <div class="tit">营业信息</div>
          <div v-if="applyFormData.entity_type === 1">
            <el-form-item
              :label="getLabel('biz_license_image', 1)"
              prop="biz_license_image"
            >
              <el-upload
                :ref="
                  (el) => {
                    el && (uploadRefs.biz_license_image = el);
                  }
                "
                v-model:file-list="uploadFiles.biz_license_image"
                multiple
                :limit="1"
                list-type="picture-card"
                :auto-upload="true"
                v-model="applyFormData.biz_license_image"
                :on-remove="
                  (file, fileList) =>
                    handleRemove(file, fileList, 'biz_license_image')
                "
                :on-preview="handlePictureCardPreview"
                :on-success="
                  (response, file, fileList) =>
                    handleUploadSuccess(
                      response,
                      file,
                      fileList,
                      'biz_license_image'
                    )
                "
                :on-error="handleUploadError"
                :before-upload="beforeUpload"
                :action="uploadUrl"
                name="upfile"
                :class="{
                  'upload-hidden': isUploadHidden('biz_license_image'),
                }"
              >
                <el-icon>
                  <Plus />
                </el-icon>
                <div class="uploader-tips">上传营业执照</div>
              </el-upload>

              <el-button
                type="info"
                plain
                v-if="
                  applyFormData.biz_license_image &&
                  !applyFormData.biz_license_company &&
                  currentBbatchNo
                "
                @click="handleOcrText(currentBbatchNo, 'biz_license_image')"
                >点击免填营业执照信息</el-button
              >
            </el-form-item>
            <el-form-item
              label="公司名称"
              prop="biz_license_company"
              v-if="applyFormData.biz_license_image"
            >
              <el-input
                v-model="applyFormData.biz_license_company"
                placeholder="请输入公司名称"
              />
            </el-form-item>
            <el-form-item
              label="法人姓名"
              prop="legal_person_name"
              v-if="applyFormData.biz_license_image"
            >
              <el-input
                v-model="applyFormData.legal_person_name"
                placeholder="请输入法人姓名"
              />
            </el-form-item>
            <el-form-item
              label="法人手机号"
              prop="legal_person_mobile"
              v-if="applyFormData.biz_license_image"
            >
              <el-input
                v-model="applyFormData.legal_person_mobile"
                placeholder="请输入法人手机号"
              />
            </el-form-item>
            <el-form-item
              label="注册号"
              prop="biz_license_number"
              v-if="applyFormData.biz_license_image"
            >
              <el-input
                v-model="applyFormData.biz_license_number"
                placeholder="请输入注册号"
              />
            </el-form-item>
            <el-form-item
              label="经营范围"
              prop="biz_license_content"
              v-if="applyFormData.biz_license_image"
            >
              <el-input
                :rows="2"
                type="textarea"
                v-model="applyFormData.biz_license_content"
                placeholder="请输入经营范围"
              />
            </el-form-item>
            <el-form-item
              label="许可证类型"
              prop="license_type"
              v-if="applyFormData.biz_license_image"
            >
              <el-select
                v-model="applyFormData.license_type"
                value-key=""
                placeholder="请选择类型"
                clearable
                @change=""
              >
                <el-option
                  v-for="item in optionsPermitType"
                  :key="item.value2"
                  :label="item.label"
                  :value="item.value2"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              :label="getLabel('license_image', 5)"
              prop="license_image"
              v-if="applyFormData.license_type != 1"
            >
              <el-upload
                ref="uploadRef"
                multiple
                :limit="5"
                list-type="picture-card"
                :auto-upload="true"
                v-model="applyFormData.license_image"
                :on-preview="handlePictureCardPreview"
                :on-remove="
                  (file, fileList) =>
                    handleRemove(file, fileList, 'license_image')
                "
                :on-success="
                  (response, file, fileList) =>
                    handleUploadSuccess(
                      response,
                      file,
                      fileList,
                      'license_image'
                    )
                "
                :on-error="handleUploadError"
                :before-upload="beforeUpload"
                :action="uploadUrl"
                name="upfile"
                :class="{ 'upload-hidden': isUploadHidden('license_image') }"
              >
                <el-icon>
                  <Plus />
                </el-icon>
                <div class="uploader-tips">上传许可证</div>
              </el-upload>
            </el-form-item>

            <el-form-item
              label="许可证编号"
              prop="license_number"
              v-if="applyFormData.license_type != 1"
            >
              <el-input
                v-model="applyFormData.license_number"
                placeholder="请输入许可证编号"
              />
            </el-form-item>

            <!-- 法人身份证正反面 -->
            <el-form-item
              :label="getLabel('legal_person_id_images', 1)"
              prop="legal_person_id_images"
            >
              <el-upload
                :ref="
                  (el) => {
                    el && (uploadRefs.legal_person_id_images = el);
                  }
                "
                v-model:file-list="uploadFiles.legal_person_id_images"
                :limit="1"
                list-type="picture-card"
                :auto-upload="true"
                :on-preview="handlePictureCardPreview"
                v-model="applyFormData.legal_person_id_images"
                :on-remove="
                  (file, fileList) =>
                    handleRemove(file, fileList, 'legal_person_id_images')
                "
                :on-success="
                  (response, file, fileList) =>
                    handleUploadSuccess(
                      response,
                      file,
                      fileList,
                      'legal_person_id_images'
                    )
                "
                :on-error="handleUploadError"
                :before-upload="beforeUpload"
                :action="uploadUrl"
                name="upfile"
                :class="{
                  'upload-hidden': isUploadHidden('legal_person_id_images'),
                }"
              >
                <el-icon class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
                <div class="uploader-tips">上传证件正面</div>
              </el-upload>
              <el-button
                type="info"
                plain
                v-if="
                  applyFormData.legal_person_id_images &&
                  !applyFormData.legal_person_id_number &&
                  currentBbatchNo
                "
                @click="
                  handleOcrText(currentBbatchNo, 'legal_person_id_images')
                "
                >点击免填身份证</el-button
              >
            </el-form-item>
            <el-form-item
              :label="getLabel('legal_person_id_images2', 1)"
              prop="legal_person_id_images2"
            >
              <el-upload
                :ref="
                  (el) => {
                    el && (uploadRefs.legal_person_id_images2 = el);
                  }
                "
                v-model:file-list="uploadFiles.legal_person_id_images2"
                :limit="1"
                list-type="picture-card"
                :auto-upload="true"
                :on-preview="handlePictureCardPreview"
                v-model="applyFormData.legal_person_id_images2"
                :on-remove="
                  (file, fileList) =>
                    handleRemove(file, fileList, 'legal_person_id_images2')
                "
                :on-success="
                  (response, file, fileList) =>
                    handleUploadSuccess(
                      response,
                      file,
                      fileList,
                      'legal_person_id_images2'
                    )
                "
                :on-error="handleUploadError"
                :before-upload="beforeUpload"
                :action="uploadUrl"
                name="upfile"
                :class="{
                  'upload-hidden': isUploadHidden('legal_person_id_images2'),
                }"
              >
                <el-icon class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
                <div class="uploader-tips">上传证件反面</div>
              </el-upload>
            </el-form-item>
            <el-form-item
              label="法人身份证号码"
              prop="legal_person_id_number"
              v-if="applyFormData.legal_person_id_images"
            >
              <el-input
                v-model="applyFormData.legal_person_id_number"
                placeholder="请输入法人身份证号码"
              />
            </el-form-item>
            <el-form-item
              label="身份证详细地址"
              prop="legal_person_id_addr"
              v-if="applyFormData.legal_person_id_images"
            >
              <el-input
                v-model="applyFormData.legal_person_id_addr"
                placeholder="请输入身份证详细地址"
              />
            </el-form-item>
            <el-form-item
              label="身份证生效日期"
              prop="legal_person_id_period_begin"
              v-if="applyFormData.legal_person_id_images2"
            >
              <el-date-picker
                v-model="applyFormData.legal_person_id_period_begin"
                type="date"
                placeholder="请选择有效日期"
              />
            </el-form-item>
            <el-form-item
              label="身份证截止日期"
              prop="legal_person_id_period_end"
              v-if="applyFormData.legal_person_id_images2"
            >
              <el-radio-group v-model="legal_person_date_type">
                <el-radio :label="1">长期</el-radio>
                <el-radio :label="2">非长期</el-radio>
              </el-radio-group>
              <el-date-picker
                v-if="legal_person_date_type == 2"
                v-model="applyFormData.legal_person_id_period_end"
                type="date"
                placeholder="请选择截止日期"
              />
            </el-form-item>
          </div>
          <div v-if="applyFormData.entity_type === 2">
            <!-- 个人身份证正反面 -->
            <el-form-item
              :label="getLabel('individual_id_images', 1)"
              prop="individual_id_images"
            >
              <el-upload
                :ref="
                  (el) => {
                    el && (uploadRefs.individual_id_images = el);
                  }
                "
                v-model:file-list="uploadFiles.individual_id_images"
                :limit="1"
                list-type="picture-card"
                :auto-upload="true"
                :on-preview="handlePictureCardPreview"
                v-model="applyFormData.individual_id_images"
                :on-remove="
                  (file, fileList) =>
                    handleRemove(file, fileList, 'individual_id_images')
                "
                :on-success="
                  (response, file, fileList) =>
                    handleUploadSuccess(
                      response,
                      file,
                      fileList,
                      'individual_id_images'
                    )
                "
                :on-error="handleUploadError"
                :before-upload="beforeUpload"
                :action="uploadUrl"
                name="upfile"
                :class="{
                  'upload-hidden': isUploadHidden('individual_id_images'),
                }"
              >
                <el-icon class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
                <div class="uploader-tips">上传证件正面</div>
              </el-upload>
            </el-form-item>

            <el-form-item
              :label="getLabel('individual_id_images2', 1)"
              prop="individual_id_images2"
            >
              <el-upload
                :ref="
                  (el) => {
                    el && (uploadRefs.individual_id_images2 = el);
                  }
                "
                v-model:file-list="uploadFiles.individual_id_images2"
                :limit="1"
                list-type="picture-card"
                :auto-upload="true"
                :on-preview="handlePictureCardPreview"
                v-model="applyFormData.individual_id_images2"
                :on-remove="
                  (file, fileList) =>
                    handleRemove(file, fileList, 'individual_id_images2')
                "
                :on-success="
                  (response, file, fileList) =>
                    handleUploadSuccess(
                      response,
                      file,
                      fileList,
                      'individual_id_images2'
                    )
                "
                :on-error="handleUploadError"
                :before-upload="beforeUpload"
                :action="uploadUrl"
                name="upfile"
                :class="{
                  'upload-hidden': isUploadHidden('individual_id_images2'),
                }"
              >
                <el-icon class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
                <div class="uploader-tips">上传证件反面</div>
              </el-upload>
            </el-form-item>
            <el-form-item
              label="个人身份证姓名"
              prop="individual_id_name"
              v-if="applyFormData.individual_id_images"
            >
              <el-input
                v-model="applyFormData.individual_id_name"
                placeholder="请输入个人身份证姓名"
              />
            </el-form-item>
            <el-form-item
              label="个人身份证号"
              prop="individual_id_number"
              v-if="applyFormData.individual_id_images"
            >
              <el-input
                v-model="applyFormData.individual_id_number"
                placeholder="请输入个人身份证号"
              />
            </el-form-item>
            <el-form-item
              label="身份证详细地址"
              prop="individual_id_addr"
              v-if="applyFormData.individual_id_images"
            >
              <el-input
                v-model="applyFormData.individual_id_addr"
                placeholder="请输入身份证详细地址"
              />
            </el-form-item>
            <el-form-item
              label="身份证生效日期"
              prop="individual_id_period_begin"
              v-if="applyFormData.individual_id_images2"
            >
              <el-date-picker
                v-model="applyFormData.individual_id_period_begin"
                type="date"
                placeholder="请选择有效日期"
              />
            </el-form-item>
            <el-form-item
              label="身份证截止日期"
              prop="individual_id_period_end"
              v-if="applyFormData.individual_id_images2"
            >
              <el-radio-group v-model="individual_date_type">
                <el-radio :label="1">长期</el-radio>
                <el-radio :label="2">非长期</el-radio>
              </el-radio-group>
              <el-date-picker
                v-if="individual_date_type == 2"
                v-model="applyFormData.individual_id_period_end"
                type="date"
                placeholder="请选择截止日期"
              />
            </el-form-item>
          </div>
        </div>

        <div class="from_box">
          <div class="tit">结算信息</div>
          <el-form-item label="银行卡" prop="bank_image">
            <el-upload
              :ref="
                (el) => {
                  el && (uploadRefs.bank_image = el);
                }
              "
              v-model:file-list="uploadFiles.bank_image"
              :limit="1"
              list-type="picture-card"
              :auto-upload="true"
              :on-preview="handlePictureCardPreview"
              v-model="applyFormData.bank_image"
              :on-remove="
                (file, fileList) => handleRemove(file, fileList, 'bank_image')
              "
              :on-success="
                (response, file, fileList) =>
                  handleUploadSuccess(response, file, fileList, 'bank_image')
              "
              :on-error="handleUploadError"
              :before-upload="beforeUpload"
              :action="uploadUrl"
              name="upfile"
              :class="{
                'upload-hidden': isUploadHidden('bank_image'),
              }"
            >
              <el-icon class="avatar-uploader-icon">
                <Plus />
              </el-icon>
              <div class="uploader-tips">上传银行卡<br />免填卡号</div>
            </el-upload>
            <el-button
              type="info"
              plain
              v-if="
                applyFormData.bank_image &&
                !applyFormData.account_number &&
                currentBbatchNo
              "
              @click="handleOcrText(currentBbatchNo, 'bank_image')"
              >点击免填卡号</el-button
            >
          </el-form-item>
          <template
            v-if="applyFormData.entity_type == 1 || applyFormData.bank_image"
          >
            <el-form-item label="开户名称" prop="account_holder_name">
              <el-input
                v-model="applyFormData.account_holder_name"
                placeholder="请输入开户名称"
              />
            </el-form-item>
            <el-form-item label="银行卡号" prop="account_number">
              <el-input
                v-model="applyFormData.account_number"
                placeholder="请输入银行卡号"
              />
            </el-form-item>
            <el-form-item label="开户银行" prop="bank_branch_name">
              <el-select-v2
                clearable
                filterable
                remote
                @change="bankListChange"
                :remote-method="bankListRemoteMethod"
                v-model="applyFormData.bank_branch_name"
                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">
                <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-form-item>
          </template>
        </div>
      </el-form>
    </div>

    <div class="form-button">
      <div class="myui_check_text">检查并确认店铺信息和证件信息无误</div>
      <el-button type="primary" @click="merchToApply">提交审核</el-button>
    </div>

    <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, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { Plus, Search, WarningFilled } from "@element-plus/icons-vue";

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

import {
  GetStoreCategories,
  transformStoreCategories,
  GetPostion,
  GetBank,
  merchApply,
  GetAppDistrict,
} from "@/api/login";
import { batchNoApi, imgOcrResultApi } from "@/api/upload";
import { compressImage } from "@/utils/file";
import { isNumber } from "lodash";

interface Bank {
  id: number;
  bank_name: string;
}

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 route = useRoute();

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 isLoggedIn = ref(!!userStore.token);
const active = ref(1);
const loading = ref(false);
const formRef = ref(null);
const dialogVisible = ref(false);
const dialogImageUrl = ref("");
const cascaderOptions = ref([]);
const cascaderOptions2 = ref(processData());
const cityData2 = ref<CityDataStructure>();
const cascaderOptions3 = ref();
const bankList2 = ref([]);
const uploadRefs = ref({
  biz_license_image: null,
  individual_id_images: null,
  individual_id_images2: null,
  legal_person_id_images: null,
  legal_person_id_images2: null,
  bank_image: null,
});
const uploadFiles = reactive({
  biz_license_image: [],
  individual_id_images: [],
  individual_id_images2: [],
  legal_person_id_images: [],
  legal_person_id_images2: [],
  bank_image: [],
});

let orcTimeout = 0;
let currentFile = ref(null);
let pid = ref<string|number>("");
let currentBbatchNo = ref("");
let legal_person_date_type = ref(2);
let individual_date_type = ref(2);

const handleChangeBizCategory = (value) => {
  if (value && value.length === 2) {
    const [bizCategoryId, bizSecondCategoryId] = value;
    applyFormData.biz_category = bizCategoryId;
    applyFormData.biz_second_category = bizSecondCategoryId;
  }
};
const applyFormData = reactive({
  bank_name: "",
  bank_district: "",
  bank_area: "",
  openning_bank_code: "",
  clearing_bank_code: "",
  bank_branch_name: "",
  account_number: "",
  account_holder_name: "",
  biz_license_period_end: "9999-12-31",
  biz_category: null,
  biz_license_company: "",
  biz_license_image: "",
  biz_license_number: "",
  biz_second_category: null,
  biz_license_content: "",
  city_id: null,
  contact_name: "",
  county_id: null,
  entity_type: 1,
  environment_image: "",
  front_facade_image: "",
  individual_id_images: "",
  individual_id_images2: "",
  individual_id_number: "",
  individual_id_name: "",
  individual_id_addr: "",
  individual_id_period_begin: "",
  individual_id_period_end: "",
  legal_person_id_images: "",
  legal_person_id_images2: "",
  legal_person_id_number: "",
  legal_person_mobile: "",
  legal_person_name: "",
  legal_person_id_addr: "",
  legal_person_id_period_begin: "",
  legal_person_id_period_end: "",
  license_image: [],
  license_number: "",
  license_type: 1,
  login_mobile: localStorage.getItem("mobilePhone"),
  province_id: null,
  store_address: "",
  map_address: "",
  position: "",
  store_latitude: null,
  store_longitude: null,
  store_name: "",
  mapAddressLabel: "",
  license_imageToString: "",
  store_area: "",
  user_status: "",
  bank_image: "",
  email: "",
  biz_license_period_begin: "",
});
const optionsPermitType = [
  {
    value2: 1,
    label: "无需特殊资质",
  },
  {
    value2: 2,
    label: "需许可证资质",
  },
  {
    value2: 3,
    label: "需特许证件资质",
  },
];
const rules = reactive({
  contact_name: [
    { required: true, message: "请输入联系人姓名", trigger: "blur" },
  ],
  legal_person_id_addr: [
    { required: true, message: "请输入法人身份证详细地址", trigger: "blur" },
  ],
  biz_license_content: [
    { required: true, message: "请输入经营范围内容", trigger: "blur" },
  ],
  // email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
  biz_category: [
    { required: true, message: "请选择经营品类", trigger: "change" },
  ],
  store_name: [{ required: true, message: "请输入门店名称", trigger: "blur" }],
  map_address: [
    { required: true, message: "请选择地图地址", trigger: "change" },
  ],
  //   position: [{ required: true, message: "请选择地图地址", trigger: "change" }],
  store_address: [
    { required: true, message: "请输入详细地址", trigger: "blur" },
  ],
  front_facade_image: [
    { required: true, message: "请上传门脸图", trigger: ["change", "blur"] },
  ],
  environment_image: [
    { required: true, message: "请上传环境图", trigger: ["change", "blur"] },
  ],
  entity_type: [{ required: true, message: "请主体类型", trigger: "change" }],
  // license_type: [{ required: true, message: "请选择许可证类型", trigger: "change" }],
  // license_number: [{ required: true, message: "请输入许可证编号", trigger: "blur" }],
  biz_license_number: [
    { required: true, message: "请输入注册号", trigger: "blur" },
  ],
  biz_license_company: [
    { required: true, message: "请输入公司名称", trigger: "blur" },
  ],
  legal_person_name: [
    { required: true, message: "请输入法人姓名", trigger: "blur" },
  ],
  legal_person_mobile: [
    { required: true, message: "请输入法人手机号", trigger: "blur" },
  ],
  legal_person_id_period_begin: [
    {
      required: true,
      message: "请输入法人身份证开始有效日期",
      trigger: "blur",
    },
  ],
  legal_person_id_period_end: [
    {
      required: true,
      message: "请输入法人身份证截止有效日期",
      trigger: "blur",
    },
  ],
  legal_person_id_number: [
    { required: true, message: "请输入法人身份证号", trigger: "blur" },
  ],
  biz_license_image: [
    { required: true, message: "请上传营业执照", trigger: "change" },
  ],
  legal_person_id_images: [
    { required: true, message: "请上传法人身份证正面", trigger: "change" },
  ],
  legal_person_id_images2: [
    { required: true, message: "请上传法人身份证反面", trigger: "change" },
  ],
  individual_id_name: [
    { required: true, message: "请输入个人身份证姓名", trigger: "blur" },
  ],
  individual_id_number: [
    { required: true, message: "请输入个人身份证号", trigger: "blur" },
  ],
  individual_id_images: [
    { required: true, message: "请上传个人身份证正面", trigger: "change" },
  ],
  individual_id_images2: [
    { required: true, message: "请上传个人身份证反面", trigger: "change" },
  ],
  individual_id_addr: [
    { required: true, message: "请输入个人身份证详细地址", trigger: "change" },
  ],
  individual_id_period_begin: [
    {
      required: true,
      message: "请选择个人身份证开始有效日期",
      trigger: "change",
    },
  ],
  individual_id_period_end: [
    {
      required: true,
      message: "请选择个人身份证截止有效日期",
      trigger: "change",
    },
  ],
  bank_branch_name: [
    { required: true, message: "请选择银行", trigger: "change" },
  ],
  // bank_branch_name: [{ required: true, message: '请输入支行名称', trigger: 'blur' }],
  account_number: [
    { required: true, message: "请输入银行卡号", trigger: "blur" },
  ],
  account_holder_name: [
    { required: true, message: "请输入开户名称", trigger: "blur" },
  ],
});

watch(legal_person_date_type, (newVal) => {
  if (newVal == 1) {
    applyFormData.legal_person_id_period_end = "9999-12-31";
  } else {
    applyFormData.legal_person_id_period_end = "";
  }
  (formRef.value as any).validate("legal_person_id_period_end");
});

watch(individual_date_type, (newVal) => {
  if (newVal == 1) {
    applyFormData.individual_id_period_end = "9999-12-31";
  } else {
    applyFormData.individual_id_period_end = "";
  }
  (formRef.value as any).validate("individual_id_period_end");
});

const handleMerchApply = async () => {
  const {
    bank_name,
    bank_district,
    bank_area,
    openning_bank_code,
    clearing_bank_code,
    account_number,
    account_holder_name,
    biz_license_company,
    biz_license_image,
    biz_license_number,
    biz_second_category,
    city_id,
    contact_name,
    county_id,
    entity_type,
    environment_image,
    front_facade_image,
    individual_id_images,
    individual_id_images2,
    individual_id_number,
    individual_id_name,
    legal_person_id_images,
    legal_person_id_images2,
    legal_person_id_number,
    legal_person_mobile,
    legal_person_name,
    license_image,
    license_number,
    license_type,
    login_mobile,
    province_id,
    store_address,
    store_latitude,
    store_longitude,
    store_name,
    store_area,
    biz_category,
    biz_license_content,
    legal_person_id_addr,
    legal_person_id_period_begin,
    legal_person_id_period_end,
    individual_id_addr,
    individual_id_period_begin,
    individual_id_period_end,
  } = applyFormData;

  let ext = {};

  if (isNumber(pid.value)) {
    ext = {
      id: pid.value,
    };
  }

  const res = await merchApply({
    ...ext,
    bank_name,
    bank_district,
    bank_area,
    openning_bank_code,
    clearing_bank_code,
    account_number,
    account_holder_name,
    biz_category,
    biz_license_content,
    biz_license_company,
    biz_license_image,
    biz_license_number,
    biz_second_category,
    city_id,
    contact_name,
    county_id,
    entity_type,
    environment_image,
    front_facade_image,
    individual_id_images,
    individual_id_images2,
    individual_id_number,
    individual_id_name,
    legal_person_id_images,
    legal_person_id_images2,
    legal_person_id_number,
    legal_person_mobile,
    legal_person_name,
    license_image,
    license_number,
    license_type,
    login_mobile,
    province_id,
    store_address: store_area.replace(/\//g, "") + store_address,
    store_latitude,
    store_longitude,
    store_name,
    store_area,
    legal_person_id_addr,
    legal_person_id_period_begin,
    legal_person_id_period_end,
    individual_id_addr,
    individual_id_period_begin,
    individual_id_period_end,
    email: `${login_mobile}@qq.com`,
  });
  if (res.code == 0 && res.status == 200) {
    ElMessage.success("已提交开店申请~");
    setTimeout(() => {
      router.push({ name: "check" });
    }, 1000);
  }
};

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

  if (applyFormData.entity_type == 2 && !applyFormData.bank_image) {
    ElMessage.error("请上传银行卡");
    return;
  }

  if (isValid) {
    handleMerchApply();
  }
};

const next = () => {
  if (active.value < 3) {
    active.value++;
    window.scrollTo({
      top: 0, //回到顶部
      left: 0,
      behavior: "smooth",
    });
  }
};
const pre = () => {
  if (active.value > 1) {
    active.value--;
    window.scrollTo({
      top: 0, //回到顶部
      left: 0,
      behavior: "smooth",
    });
  }
};

const getLabel = (field: string, limit: number) => {
  const labels = {
    front_facade_image: "门脸图",
    environment_image: "环境图",
    biz_license_image: "营业执照",
    license_image: "许可证",
    legal_person_id_images: "法人身份证正面",
    legal_person_id_images2: "法人身份证反面",
    individual_id_images: "个人身份证正面",
    individual_id_images2: "个人身份证反面",
  };

  if (field === "license_image") {
    return `${labels[field]}(${applyFormData[field].length}/${limit})`;
  } else {
    const count = applyFormData[field] ? 1 : 0;
    return `${labels[field]}(${count}/${limit})`;
  }
};

const showAll = () => {
  applyFormData.license_imageToString = applyFormData.license_image
    .map((url) => `${url}`)
    .join(",");
};

const merchToApply = async () => {
  console.log("formdata", applyFormData);
  // showAll();
  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: 2000,
  }).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 = async (file) => {
  const isJPG = file.type === "image/jpeg";
  const isPNG = file.type === "image/png";
  const isLarge = file.size / 1024 / 1024 < 10;

  loading.value = true;

  if (!isJPG && !isPNG) {
    loading.value = false;
    ElMessage.error("上传的图片必须是JPG或PNG格式！");
    return false;
  }

  if (!isLarge) {
    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].length != 0;
  }
};

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

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

const getBatchNo = async (file, type, field) => {
  loading.value = true;
  currentBbatchNo.value = "";
  file = await compressImage(file);
  const rsp = await batchNoApi(file, type)
    .then((res) => {
      loading.value = false;
      return res;
    })
    .catch(() => {
      loading.value = false;
      const _uploadRef = uploadRefs.value[field];
      if (_uploadRef) {
        _uploadRef.clearFiles();
        uploadFiles[field] = [];
        cleanFile(field);
      }
      ElMessage.error("网络异常，请重试！");
    });

  if (rsp?.code == 0 && 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).finally(() => {
        loading.value = false;
      });

      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.biz_license_content = res.bizLicenseScope;
      applyFormData.account_holder_name = res.bizLicenseCompanyName;
      applyFormData.biz_license_period_begin = res.bizLicenseStartTime
        .replace(/年|月|日/g, "-")
        .replace(/-$/g, "")
        .replace(/-+/g, "-");
      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 {
        legal_person_date_type.value = 1;
        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 {
        legal_person_date_type.value = 1;
        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 cleanFile = (field) => {
  if (field === "license_image") {
    applyFormData[field] = [];
  } else {
    applyFormData[field] = "";
  }
  currentFile.value = null;
};

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;
      }

      currentFile.value = file.raw;
      loading.value = false;

      switch (field) {
        case "biz_license_image":
          var res = await getBatchNo(
            file.raw,
            orcImgTypeConf.BUSINESS_LICENCE,
            field
          );
          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,
            field
          );
          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,
            field
          );
          currentBbatchNo.value = res.batchNo;
          handleOcrText(res.batchNo, field);
          break;
        case "individual_id_images":
          var res = await getBatchNo(
            file.raw,
            orcImgTypeConf.ID_CARD_FRONT,
            field
          );
          currentBbatchNo.value = res.batchNo;
          handleOcrText(res.batchNo, field);
          break;
        case "individual_id_images2":
          var res = await getBatchNo(
            file.raw,
            orcImgTypeConf.ID_CARD_BEHIND,
            field
          );
          currentBbatchNo.value = res.batchNo;
          handleOcrText(res.batchNo, field);
          break;
        case "bank_image":
          var res = await getBatchNo(file.raw, orcImgTypeConf.BANK_CARD, field);
          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("文件上传失败");
};

const clearOtherFields = () => {
  applyFormData.individual_id_number = "";
  applyFormData.individual_id_name = "";
  applyFormData.individual_id_images = "";
  applyFormData.individual_id_images2 = "";
  applyFormData.individual_id_addr = "";
  applyFormData.individual_id_period_begin = "";
  applyFormData.individual_id_period_end = "";

  applyFormData.license_type = 1;
  applyFormData.license_number = "";
  applyFormData.license_image = [];
  applyFormData.biz_license_image = "";
  applyFormData.biz_license_number = "";
  applyFormData.biz_license_company = "";
  applyFormData.biz_license_content = "";
  applyFormData.legal_person_name = "";
  applyFormData.legal_person_mobile = "";
  applyFormData.legal_person_id_number = "";
  applyFormData.legal_person_id_images = "";
  applyFormData.legal_person_id_images2 = "";
  applyFormData.legal_person_id_addr = "";
  applyFormData.legal_person_id_period_begin = "";
  applyFormData.legal_person_id_period_end = "";
};

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

  const id = route.query?.id;

  if (isNumber(id)) {
    pid.value = id;
  }

  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;
}

.signUp-container {
  display: flex;
  padding-top: 12px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #eee;

  .tit {
    font-size: 16px;
    margin-bottom: 15px;
  }

  .steps-container {
    width: 50%;
    padding: 15px;
    border-radius: 5px;
    background: #fff;
    margin-bottom: 12px;
  }

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

  .form-submit {
    width: 50%;
    min-height: 300px;

    :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: 360px;

  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%;
    }
  }

  .bank_name_tip {
    margin-left: 0px;
  }
}
</style>
