<!--
 Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

 https://www.mall4j.com/

 未经允许，不可做商业用途！

 版权所有，侵权必究！
-->
<template>
  <div class="page-shop-process-container">
    <div>
      <Navbar />
    </div>
    <div class="sp-wrapper">
      <!-- 待申请开店状态 -->
      <div
        v-if="applyStatus===-2"
        class="submit-status-tips status-tips"
      >
        <el-icon class="text-icon">
          <WarningFilled />
        </el-icon>
        <span class="text">{{ $t('multishop.shopProcess.openShop') }}</span>
      </div>
      <!-- 店铺正在审核状态 -->
      <div
        v-if="applyStatus === 0 && loadGetAuditingInfo"
        class="pedding-status-tips status-tips"
      >
        <el-icon class="text-icon">
          <SuccessFilled />
        </el-icon>
        <span class="text">{{ $t('multishop.shopProcess.openApplicationShop') }}~</span>
      </div>
      <!-- 开店未通过状态 -->
      <div
        v-if="applyStatus === -1"
        class="fail-status-tips status-tips"
      >
        <el-icon class="text-icon">
          <CircleCloseFilled />
        </el-icon>
        <span class="text">{{ $t('multishop.shopProcess.openApplicationFailedShop') + auditingInfo }}</span>
      </div>

      <!-- 准备 协议部分 第0步 -->
      <div
        v-if="applyStep===0 && loadGetAuditingInfo"
        class="shop-agreement"
      >
        <div class="sa-title">
          {{ $t('multishop.shopProcess.Applysupplier') }}
        </div>
        <div class="sa-content">
          <div v-rich="shopProtocol" />
        </div>
        <div class="sa-checkbox">
          <el-checkbox v-model="isAgreen">
            <span class="text">{{ $t('register.agree2') }}<span class="flag">《{{ $t('login.agreement') }}》</span></span>
          </el-checkbox>
        </div>
        <div
          class="next-btn"
          @click="toNextStep"
        >
          {{ $t('forgetPassword.nextStep') }}
        </div>
      </div>

      <div
        v-if="applyStep > 0"
        class="info-frame"
      >
        <!-- 进度条 -->
        <!-- applyStatus 0 未审核 1已通过 -1未通过 2平台下线 3 平台下线待审核, -2未开店 -->
        <div
          v-if="applyStatus === -2"
          class="sbi-title title"
        >
          {{ $t('multishop.shopProcess.Applysupplier') }}
        </div>
        <div
          v-if=" applyStatus === 0"
          class="sbi-title title"
        >
          {{ $t('multishop.shopProcess.openingApplication') }}
        </div>
        <div
          v-if=" applyStatus === -1"
          class="sbi-title title"
        >
          {{ $t('multishop.shopProcess.openingApplicationFail') }}
        </div>
        <div class="sbi-content content">
          <div class="progress-bar">
            <div
              class="first-step step"
              :class="{'active-step':applyStep>0}"
            >
              <div class="step-item">
                <div class="si-wrapper">
                  <div class="step-num">
                    1
                  </div>
                  <div class="step-text">
                    {{ $t('multishop.shopInformation.baseInfo') }}
                  </div>
                </div>
              </div>
            </div>
            <div
              class="second-step step"
              :class="{'active-step':applyStep>1}"
            >
              <div class="step-item">
                <div class="si-wrapper">
                  <div class="step-num">
                    2
                  </div>
                  <div class="step-text">
                    {{ $t('multishop.shopInformation.businessInfo') }}
                  </div>
                </div>
              </div>
            </div>
            <div
              class="third-step step"
              :class="{'active-step':applyStep>2}"
            >
              <div class="step-item">
                <div class="si-wrapper">
                  <div class="step-num">
                    3
                  </div>
                  <div class="step-text">
                    {{ $t('multishop.shopInformation.contractInfo') }}
                  </div>
                </div>
              </div>
            </div>
            <div
              class="fourth-step step"
              :class="{'active-step':applyStep>3}"
            >
              <div class="step-item">
                <div class="si-wrapper">
                  <div class="step-num">
                    4
                  </div>
                  <div class="step-text">
                    {{ $t('multishop.shopInformation.financialInfo') }}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 第一步 基本信息 -->
          <div
            v-if="applyStep===1"
            class="shop-base-info"
          >
            <div class="company-info">
              <el-form
                ref="baseInfoFormRef"
                :model="baseInfoForm"
                :rules="baseInfoRule"
                class="base-info"
                label-width="100px"
                @submit.prevent
              >
                <div class="ci-wrapper">
                  <div class="left-info">
                    <el-form-item
                      :label="$t('multishop.shopInformation.supplierName')"
                      prop="supplierName"
                    >
                      <el-input
                        v-model="baseInfoForm.supplierName"
                        :placeholder="$t('multishop.shopInformation.supplierTips')"
                        maxlength="10"
                        :disabled="isNotEdit"
                      />
                    </el-form-item>
                    <el-form-item
                      :label="$t('multishop.shopInformation.contactName')"
                      prop="contactName"
                    >
                      <el-input
                        v-model="baseInfoForm.contactName"
                        :placeholder="$t('multishop.shopInformation.contactNameTips')"
                        maxlength="10"
                        :disabled="isNotEdit"
                      />
                    </el-form-item>
                    <el-form-item
                      :label="$t('multishop.shopInformation.contactPhone')"
                      prop="contactPhone"
                    >
                      <el-input
                        v-model="baseInfoForm.contactPhone"
                        :placeholder="$t('multishop.shopInformation.contactPhoneTips')"
                        maxlength="11"
                        :disabled="isNotEdit"
                        @input="onHandlePhone('contactPhone')"
                      />
                    </el-form-item>
                    <el-form-item
                      :label="$t('multishop.shopInformation.intro')"
                      prop="intro"
                    >
                      <el-input
                        v-model="baseInfoForm.intro"
                        :disabled="isNotEdit"
                        type="textarea"
                        :rows="4"
                        maxlength="200"
                        style="width: 100%"
                        :placeholder="$t('multishop.shopInformation.introTips')"
                      />
                    </el-form-item>
                  </div>
                </div>

                <div class="btn">
                  <div
                    v-if="applyStatus !== 0"
                    class="next-btn"
                    @click="toNextStep"
                  >
                    {{ $t('multishop.shopProcess.submitNext') }}
                  </div>
                  <div
                    v-if="applyStatus === 0"
                    class="next-btn"
                    @click="viewNextStep"
                  >
                    {{ $t('multishop.shopProcess.viewNext') }}
                  </div>
                </div>
              </el-form>
            </div>
          </div>

          <!-- 第二步 工商信息 -->
          <div
            v-if="applyStep===2"
            class="company-info"
          >
            <el-form
              ref="companyInfoFormRef"
              :model="companyInfoForm"
              :rules="companyInfoRule"
              label-width="auto"
              @submit.prevent
            >
              <div class="ci-wrapper">
                <div class="left-info">
                  <el-form-item
                    :label="$t('multishop.shopInformation.creditCode')"
                    prop="creditCode"
                  >
                    <el-input
                      v-model.trim="companyInfoForm.creditCode"
                      maxlength="20"
                      :placeholder="$t('multishop.shopInformation.creditCodeTips')"
                      :disabled="isNotEdit"
                    />
                  </el-form-item>
                  <el-form-item
                    :label="$t('multishop.shopInformation.firmName')"
                    prop="firmName"
                  >
                    <el-input
                      v-model="companyInfoForm.firmName"
                      maxlength="50"
                      :placeholder="$t('multishop.shopInformation.firmNameTips')"
                      :disabled="isNotEdit"
                    />
                  </el-form-item>
                  <el-form-item
                    :label="$t('multishop.shopInformation.residence')"
                    prop="residence"
                  >
                    <el-input
                      v-model="companyInfoForm.residence"
                      maxlength="50"
                      :placeholder="$t('multishop.shopInformation.residenceTips')"
                      :disabled="isNotEdit"
                    />
                  </el-form-item>
                  <el-form-item
                    :label="$t('multishop.shopInformation.representative')"
                    prop="representative"
                  >
                    <el-input
                      v-model="companyInfoForm.representative"
                      maxlength="20"
                      :placeholder="$t('multishop.shopInformation.representativeTips')"
                      :disabled="isNotEdit"
                    />
                  </el-form-item>
                  <el-form-item
                    v-if="paySettlementType===1"
                    label="法人身份证号"
                    prop="legalIds"
                  >
                    <el-input
                      v-model="companyInfoForm.legalIds"
                      maxlength="18"
                      placeholder="输入法人身份证号"
                      :disabled="isNotEdit"
                    />
                  </el-form-item>
                  <el-form-item
                    v-if="paySettlementType===1"
                    label="法人手机号"
                    prop="legalPhone"
                  >
                    <el-input
                      v-model="companyInfoForm.legalPhone"
                      maxlength="11"
                      placeholder="输入法人手机号"
                      :disabled="isNotEdit"
                      @input="onHandlePhone('legalPhone')"
                    />
                  </el-form-item>
                  <el-form-item
                    :label="$t('multishop.shopInformation.capital')"
                    class="capital-int"
                  >
                    <el-input
                      v-model="companyInfoForm.capital"
                      prop="capital"
                      :disabled="isNotEdit"
                      style="width:200px"
                      @input="changeNum"
                      @keydown="channelInputLimit"
                    />
                    <span class="price-unit-text">{{ $t('multishop.shopInformation.priceUnit') }}</span>
                  </el-form-item>
                  <el-form-item
                    :label="$t('multishop.shopInformation.foundTime')"
                    prop="foundTime"
                  >
                    <el-date-picker
                      v-model="companyInfoForm.foundTime"
                      style="width:200px"
                      type="date"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      :placeholder="isNotEdit ? '' : $t('multishop.shopInformation.foundTimeTips')"
                      :disabled="isNotEdit"
                      :picker-options="pickerOptions"
                    />
                  </el-form-item>
                  <el-form-item
                    required
                    :label="$t('multishop.shopInformation.timeRange')"
                  >
                    <div style="display: flex">
                      <el-form-item prop="startTime">
                        <el-date-picker
                          v-model="companyInfoForm.startTime"
                          style="width:172px;"
                          type="date"
                          value-format="YYYY-MM-DD HH:mm:ss"
                          :placeholder="$t('date.start')"
                          :disabled="isNotEdit"
                          :clearable="false"
                        />
                      </el-form-item>
                      <span style="margin: 0 10px">-</span>
                      <el-form-item prop="endTime">
                        <span class="end-time">
                          <el-date-picker
                            ref="endTimeRef"
                            v-model="companyInfoForm.endTime"
                            style="width:172px;"
                            type="date"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            :placeholder="isNotEdit && !companyInfoForm.endTime ? '' : $t('date.end')"
                            clearable
                            :disabled="isNotEdit"
                          />
                          <span
                            v-if="isNotEdit && !companyInfoForm.endTime"
                            class="text"
                          >
                            {{ $t('multishop.shopInformation.noFixedTerm') }}
                          </span>
                        </span>
                      </el-form-item>
                    </div>
                  </el-form-item>
                  <el-form-item
                    :label="$t('multishop.shopInformation.businessScope')"
                    prop="businessScope"
                    style="margin-bottom:30px;"
                  >
                    <el-input
                      v-model="companyInfoForm.businessScope"
                      type="textarea"
                      resize="none"
                      :rows="4"
                      :placeholder="$t('multishop.shopInformation.businessScopeTips')"
                      maxlength="500"
                      :disabled="isNotEdit"
                    />
                  </el-form-item>
                </div>
                <div class="right-info">
                  <el-form-item
                    :label="$t('multishop.shopInformation.businessLicense')"
                    prop="businessLicense"
                  >
                    <div class="business-license-box">
                      <div class="license-content">
                        <img-upload
                          v-if="applyStatus !== 0"
                          v-model="companyInfoForm.businessLicense"
                          @update:model-value="imgChange(companyInfoForm.businessLicense, 'companyInfoForm', 'businessLicense')"
                        />
                        <el-image
                          v-if="applyStatus === 0 && companyInfoForm.businessLicense"
                          class="rotating-img"
                          style="width: 120px; height: 120px"
                          :src="addDomain(companyInfoForm.businessLicense)"
                          :preview-src-list="[addDomain(companyInfoForm.businessLicense)]"
                        >
                          <template #error>
                            <img
                              class="img-slot"
                              src="~@/assets/images/def.png"
                              alt
                            >
                          </template>
                        </el-image>
                        <div class="example-box">
                          <img
                            src="@/assets/example-img/Business-license.png"
                            alt
                          >
                          <div class="tips">
                            {{ $t('multishop.shopInformation.example') }}
                          </div>
                        </div>
                      </div>
                      <div class="upload-tips">
                        {{ $t('multishop.shopInformation.uploadTips') }}
                      </div>
                    </div>
                  </el-form-item>
                  <div class="id-box">
                    <div class="upload-content">
                      <div class="upload-img">
                        <el-form-item
                          class="idcard"
                          :label="$t('multishop.shopInformation.identityCardFront')"
                          prop="identityCardFront"
                        >
                          <img-upload
                            v-if="applyStatus !== 0 || (applyStatus === 0 && !companyInfoForm.identityCardFront)"
                            v-model="companyInfoForm.identityCardFront"
                            @update:model-value="imgChange(companyInfoForm.identityCardFront, 'companyInfoForm', 'identityCardFront')"
                          />
                          <el-image
                            v-if="applyStatus === 0 && companyInfoForm.identityCardFront"
                            class="rotating-img"
                            style="width: 120px; height: 120px"
                            :src="addDomain(companyInfoForm.identityCardFront)"
                            :preview-src-list="[addDomain(companyInfoForm.identityCardFront)]"
                          >
                            <template #error>
                              <img
                                class="img-slot"
                                src="~@/assets/images/def.png"
                                alt
                              >
                            </template>
                          </el-image>
                        </el-form-item>
                        <el-form-item
                          class="idcard"
                          label-width="0"
                          prop="identityCardLater"
                        >
                          <img-upload
                            v-if="applyStatus !== 0 || (applyStatus === 0 && !companyInfoForm.identityCardLater)"
                            v-model="companyInfoForm.identityCardLater"
                            @update:model-value="imgChange(companyInfoForm.identityCardLater, 'companyInfoForm', 'identityCardLater')"
                          />
                          <el-image
                            v-if="applyStatus === 0 && companyInfoForm.identityCardLater"
                            class="rotating-img"
                            style="width: 120px; height: 120px"
                            :src="addDomain(companyInfoForm.identityCardLater)"
                            :preview-src-list="[addDomain(companyInfoForm.identityCardLater)]"
                          >
                            <template #error>
                              <img
                                class="img-slot"
                                src="~@/assets/images/def.png"
                                alt
                              >
                            </template>
                          </el-image>
                        </el-form-item>
                      </div>
                      <div class="upload-example">
                        <div class="example-box">
                          <img
                            src="@/assets/example-img/idcard1.png"
                            alt
                          >
                          <div class="tips">
                            {{ $t('multishop.shopInformation.portraitFace') }}
                          </div>
                        </div>
                        <div
                          class="example-box"
                        >
                          <img
                            src="@/assets/example-img/idcard2.png"
                            alt
                          >
                          <div class="tips">
                            {{ $t('multishop.shopInformation.national') }}
                          </div>
                        </div>
                      </div>
                      <div class="upload-tips">
                        {{ $t('multishop.shopInformation.identityCardTips') }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="footer">
                <div
                  v-if="applyStatus !== 0"
                  class="btn-box"
                >
                  <div
                    class="prev-btn"
                    @click="toPrevStep"
                  >
                    {{ $t('multishop.shopProcess.back') }}
                  </div>
                  <div
                    class="next-btn"
                    @click="toNextStep"
                  >
                    {{ $t('multishop.shopProcess.submitNext') }}
                  </div>
                </div>
                <div
                  v-if="applyStatus === 0"
                  class="btn-box"
                >
                  <div
                    class="prev-btn"
                    @click="toPrevStep"
                  >
                    {{ $t('multishop.shopProcess.viewBack') }}
                  </div>
                  <div
                    class="next-btn"
                    @click="viewNextStep"
                  >
                    {{ $t('multishop.shopProcess.viewNext') }}
                  </div>
                </div>
              </div>
            </el-form>
          </div>

          <!-- 第三步 签约信息 -->
          <div
            v-if="applyStep===3"
            class="signing-content"
          >
            <!-- 签约类目 -->
            <div class="s-category-item s-item">
              <div class="table-data-title">
                <div class="text">
                  <span class="stress">*</span>{{ $t('multishop.shopInformation.category') }}
                </div>
                <div class="tips">
                  已签约<span class="txt-bold">{{ signCategoryList.length }}</span>{{ $t('multishop.shopInformation.signableBefore') }}
                  <span class="txt-bold">200</span>{{ $t('multishop.shopInformation.signableAfter') }}
                </div>
                <div
                  v-if="applyStatus !== 0"
                  class="edit-btn"
                  @click="cateAddOrUpdateHandle(0)"
                >
                  {{ $t('multishop.shopInformation.applySigningCategory') }}
                </div>
              </div>
              <div class="si-content">
                <!-- height="306" -->
                <el-table
                  :data="signCategoryList"
                  :header-cell-style="{height:'50px',background:'#F5F5F5',color:'#000','font-weight': '400'}"
                >
                  <el-table-column
                    prop="name"
                    :label="$t('multishop.shopInformation.categoryName')"
                    align="center"
                  />
                  <el-table-column
                    prop="parentName"
                    :label="$t('multishop.shopInformation.parentName')"
                    align="center"
                  />
                  <el-table-column
                    prop="platformRate"
                    :label="$t('multishop.shopInformation.platformRate')"
                    align="center"
                  >
                    <template #default="{ row }">
                      <span>{{ row.platformRate }} %</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="qualifications"
                    :label="$t('multishop.shopInformation.qualifications')"
                    width="250"
                    align="center"
                  >
                    <template #default="{row}">
                      <div
                        v-if="row.imgs && row.imgs.length"
                        class="img-box"
                      >
                        <el-image
                          v-for="(item, index) in row.imgs"
                          :key="index"
                          preview-teleported
                          class="rotating-img"
                          :src="addDomain(item)"
                          :preview-src-list="addDomain(row.imgs)"
                        >
                          <template #error>
                            <img
                              class="img-slot"
                              src="~@/assets/images/def.png"
                              alt
                            >
                          </template>
                        </el-image>
                      </div>
                      <span v-if="!row.imgs || !row.imgs.length">--</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="categoryStatus"
                    :label="$t('table.status')"
                    width="80"
                  >
                    <template #default="scope">
                      <div
                        v-if="scope.row.categoryStatus === 1"
                        class="tag-txt"
                      >
                        {{ $t('multishop.shopInformation.tag') }}
                      </div>
                      <div
                        v-if="scope.row.categoryStatus === 0"
                        class="tag-txt red-tag-txt"
                      >
                        {{ $t('multishop.shopInformation.redTag') }}
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <!-- 签约品牌 -->
            <div class="s-brand-item s-item">
              <div class="table-data-title">
                <div class="text">
                  {{ $t('multishop.shopInformation.brand') }}
                </div>
                <div class="tips">
                  {{ $t('multishop.shopInformation.signed') }}<span class="txt-bold">{{ signedBrands.length }}</span>
                  {{ $t('multishop.shopInformation.brandBefore') }}
                  <span class="txt-bold">50</span>{{ $t('multishop.shopInformation.brandAfter') }}
                </div>
                <div
                  v-if="applyStatus !== 0"
                  class="edit-btn"
                  @click="cateAddOrUpdateHandle(1)"
                >
                  {{ $t('multishop.shopInformation.applySigningBrand') }}
                </div>
              </div>
              <div class="si-content">
                <!-- height="284" -->
                <el-table
                  :data="signedBrands"
                  :header-cell-style="{height:'50px',background:'#F5F5F5',color:'#000','font-weight': '400'}"
                >
                  <el-table-column
                    prop="name"
                    :label="$t('multishop.shopInformation.brandName')"
                    align="center"
                  />
                  <el-table-column
                    prop="firstLetter"
                    :label="$t('multishop.shopInformation.firstLetter')"
                    align="center"
                  />
                  <el-table-column
                    prop="platformRate"
                    :label="$t('multishop.shopInformation.platformRateLogo')"
                    align="center"
                  >
                    <template #default="scope">
                      <div class="img-box">
                        <el-image
                          preview-teleported
                          class="rotating-img"
                          :src="addDomain(scope.row.imgUrl)"
                          :preview-src-list="[addDomain(scope.row.imgUrl)]"
                        >
                          <template #error>
                            <img
                              class="img-slot"
                              src="~@/assets/images/def.png"
                              alt
                            >
                          </template>
                        </el-image>
                        <span v-if="!scope.row.imgUrl">--</span>
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="imgs"
                    :label="$t('multishop.shopInformation.imgs')"
                    width="250"
                    align="center"
                  >
                    <template #default="{row}">
                      <div
                        v-if="row.imgs && row.imgs.length"
                        class="img-box"
                      >
                        <el-image
                          v-for="(item, index) in row.imgs"
                          :key="index"
                          preview-teleported
                          class="rotating-img"
                          :src="addDomain(item)"
                          :preview-src-list="addDomain(row.imgs)"
                        >
                          <template #error>
                            <img
                              class="img-slot"
                              src="~@/assets/images/def.png"
                              alt
                            >
                          </template>
                        </el-image>
                      </div>
                      <div v-if="!row.imgs.length">
                        --
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="brandStatus"
                    :label="$t('table.status')"
                    width="80"
                  >
                    <template #default="{row}">
                      <div
                        v-if="row.type === 0 && row.brandStatus === 1"
                        class="tag-txt"
                      >
                        {{ $t('multishop.shopInformation.tag') }}
                      </div>
                      <div
                        v-if="row.type === 0 && row.brandStatus === 0"
                        class="tag-txt red-tag-txt"
                      >
                        {{ $t('multishop.shopInformation.redTag') }}
                      </div>
                      <!-- 自定义的品牌 -->
                      <div
                        v-if="row.type === 1 && row.brandStatus === 3"
                        class="tag-txt"
                      >
                        待审核
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div
              v-if="applyStatus !== 0"
              class="btn-box"
            >
              <div
                class="prev-btn"
                @click="toPrevStep"
              >
                {{ $t('multishop.shopProcess.back') }}
              </div>
              <div
                class="next-btn"
                @click="toNextStep"
              >
                {{ $t('forgetPassword.nextStep') }}
              </div>
            </div>
            <div
              v-if="applyStatus === 0"
              class="btn-box"
            >
              <div
                class="prev-btn"
                @click="toPrevStep"
              >
                {{ $t('multishop.shopProcess.viewBack') }}
              </div>
              <div
                class="next-btn"
                @click="viewNextStep"
              >
                {{ $t('multishop.shopProcess.viewNext') }}
              </div>
            </div>
          </div>

          <!-- 第四步 财务信息 -->
          <div
            v-if="applyStep>=4"
            class="finance-info content-wrapper"
          >
            <div class="table-data-title">
              <div class="text">
                <span class="stress">*</span>{{ $t('multishop.shopInformation.bankAccount') }}
              </div>
              <div
                v-if="paySettlementType!==1"
                class="tips"
              >
                {{ $t('multishop.shopInformation.add') }}<span class="txt-bold">{{ bankCartInfoForm.data.length }}</span>
                {{ $t('multishop.shopInformation.bankBefore') }}
                <span class="txt-bold">5</span>
                {{ $t('multishop.shopInformation.bankAfter') }}
              </div>
              <div
                v-else
                class="tips"
              >
                开店时最多可添加1个对公账户
              </div>
              <div
                v-if="applyStatus !== 0 && applyStatus !== 1 && paySettlementType!==1"
                class="edit-btn"
                @click="addBankInfo"
              >
                {{ $t('multishop.shopInformation.addNew') }}
              </div>
            </div>
            <div class="fi-content">
              <!-- 添加图表 -->
              <!-- 审核状态applyStatus 0 未审核 1已通过 -1未通过 -->
              <el-form
                v-if="applyStatus !== 0 && applyStatus !== 1"
                ref="bankCartInfoFormRef"
                :model="bankCartInfoForm"
                :rules="rule"
                @submit.prevent
              >
                <el-table
                  ref="bankTableRef"
                  class="add-bank-info-table"
                  :data="bankCartInfoForm.data"
                  :header-cell-style="{height:'50px',background:'#F5F5F5',color:'#000','font-weight': '400'}"
                  style="width: 100%"
                >
                  <el-table-column
                    type="index"
                    width="80px"
                    :label="$t('table.id')"
                  />
                  <template v-if="paySettlementType!==1">
                    <el-table-column
                      prop="bankName"
                      :label="$t('multishop.shopInformation.bankName')"
                    >
                      <template #default="scope">
                        <el-form-item
                          :prop="'data.' + scope.$index + '.bankName'"
                          :rules="rule.bankName"
                        >
                          <el-input
                            v-model="scope.row.bankName"
                            :placeholder="$t('multishop.shopInformation.bankNameTips')"
                            maxlength="20"
                            style="width:200px"
                          />
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="recipientName"
                      :label="$t('multishop.shopInformation.recipientName')"
                    >
                      <template #default="scope">
                        <el-form-item
                          :prop="'data.' + scope.$index + '.recipientName'"
                          :rules="rule.recipientName"
                        >
                          <el-input
                            v-model="scope.row.recipientName"
                            maxlength="20"
                            :placeholder="$t('multishop.shopInformation.recipientNameBetween')"
                            style="width:200px"
                          />
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="cardNo"
                      :label="$t('multishop.shopInformation.cardNo')"
                      width="300"
                    >
                      <template #default="scope">
                        <el-form-item
                          :prop="'data.' + scope.$index + '.cardNo'"
                          :rules="rule.cardNo"
                        >
                          <el-input
                            v-model.trim="scope.row.cardNo"
                            maxlength="23"
                            oninput="value=value.replace(/[^\d]/g,'')"
                            :placeholder="$t('multishop.shopInformation.cardNoTips')"
                            style="width:230px"
                          />
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="branchName"
                      :label="$t('multishop.shopInformation.branchName')"
                    >
                      <template #default="scope">
                        <el-form-item
                          :prop="'data.' + scope.$index + '.branchName'"
                          :rules="rule.branchName"
                        >
                          <el-input
                            v-model="scope.row.branchName"
                            :placeholder="$t('multishop.shopInformation.branchNameTips')"
                            maxlength="20"
                            style="width:230px"
                          />
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column width="50">
                      <template #default="scope">
                        <el-icon
                          v-if="bankCartInfoForm.data.length > 1"
                          style="cursor: pointer;font-size: 20px;"
                        >
                          <Remove @click="deleteBankInfoItem(scope.$index)" />
                        </el-icon>
                      </template>
                    </el-table-column>
                  </template>
                  <template v-else>
                    <el-table-column
                      prop="parentBankName"
                      label="银行名称"
                    >
                      <template #default="scope">
                        <el-form-item
                          :prop="'data.' + scope.$index + '.parentBankName'"
                          :rules="rule.parentBankName"
                        >
                          <el-select
                            v-model="selectBank"
                            filterable
                            placeholder="请选择"
                            style="width:200px"
                            @change="changeBank"
                          >
                            <el-option
                              v-for="item in bankList"
                              :key="item.bankId"
                              :label="item.bankName"
                              :value="item.bankName"
                            />
                          </el-select>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="bankName"
                      label="开户分行名称"
                    >
                      <template #default="scope">
                        <el-form-item
                          :prop="'data.' + scope.$index + '.bankName'"
                          :rules="rule.bankName"
                        >
                          <el-input
                            v-model="scope.row.bankName"
                            maxlength="20"
                            placeholder="例如：南京市雨花区雨花支行"
                            style="width:200px"
                          />
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="accountNo"
                      label="企业对公账户"
                      width="300"
                    >
                      <template #default="scope">
                        <el-form-item
                          :prop="'data.' + scope.$index + '.accountNo'"
                          :rules="rule.accountNo"
                        >
                          <el-input
                            v-model.trim="scope.row.accountNo"
                            maxlength="23"
                            oninput="value=value.replace(/[^\d]/g,'')"
                            placeholder="请输入企业对公账户"
                            style="width:230px"
                          />
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="unionBank"
                      label="支付行号"
                    >
                      <template #default="scope">
                        <el-form-item
                          :prop="'data.' + scope.$index + '.unionBank'"
                          :rules="rule.unionBank"
                        >
                          <el-input
                            v-model="scope.row.unionBank"
                            placeholder="请输入12位的支付行号"
                            oninput="value=value.replace(/[^\d]/g,'')"
                            maxlength="12"
                            style="width:230px"
                          />
                        </el-form-item>
                      </template>
                    </el-table-column>
                  </template>
                </el-table>
              </el-form>

              <!-- 展示图表 -->
              <div
                v-if="applyStatus === 0 || applyStatus === 1"
                class="show-tab"
              >
                <el-table
                  :data="bankCartInfoForm.data"
                  style="width: 100%"
                >
                  <el-table-column
                    type="index"
                    :label="$t('table.id')"
                    width="80"
                  />
                  <template v-if="paySettlementType===0">
                    <el-table-column
                      prop="bankName"
                      :label="$t('multishop.shopInformation.bankName')"
                    />
                    <el-table-column
                      prop="recipientName"
                      :label="$t('multishop.shopInformation.recipientName')"
                    />
                    <el-table-column
                      prop="cardNo"
                      :label="$t('multishop.shopInformation.cardNo')"
                    />
                    <el-table-column
                      prop="branchName"
                      :label="$t('multishop.shopInformation.branchName')"
                    />
                  </template>
                  <template v-else-if="paySettlementType===1">
                    <el-table-column
                      prop="parentBankName"
                      label="银行名称"
                    />
                    <el-table-column
                      prop="bankName"
                      label="开户分行名称"
                    />
                    <el-table-column
                      prop="accountNo"
                      label="企业对公账户"
                    />
                    <el-table-column
                      prop="unionBank"
                      label="支付行号"
                    />
                  </template>
                </el-table>
              </div>
              <div
                v-if="applyStatus !== 0 && applyStatus !== 1"
                class="btn-box"
              >
                <div
                  class="prev-btn"
                  @click="toPrevStep"
                >
                  {{ $t('multishop.shopProcess.back') }}
                </div>
                <div
                  class="next-btn"
                  @click="toNextStep"
                >
                  {{ $t('table.submit') }}
                </div>
              </div>
              <div
                v-if="applyStatus === 0 || applyStatus === 1"
                class="btn-box"
              >
                <div
                  class="prev-btn"
                  @click="toPrevStep"
                >
                  {{ $t('multishop.shopProcess.viewBack') }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <category-add-or-update
      v-if="cateAddOrUpdateVisible"
      ref="cateAddOrUpdateRef"
      :sign-category-list="signCategoryList"
      :push="categoryPush"
      :delete-by-id="deleteById"
      :splice="categorySplice"
      :map="categoryMap"
      @close-popup="closePopup"
    />
    <brand-add-or-update
      v-if="brandAddOrUpdateVisible"
      ref="brandAddOrUpdateRef"
      :brand-name-list="brandNameList"
      :parent-brand-list="parentBrandList"
      @close-popup="closePopup"
    />

    <picture-preview
      v-if="picturePreviewVisible"
      ref="picturePreviewRef"
    />
  </div>
</template>

<script setup>
import Navbar from '@/layout/components/Navbar.vue'
import * as api from '@/api/multishop/shop-process'
import { ElMessage } from 'element-plus'
import moment from 'moment'
import brandAddOrUpdate from './components/brand-add-or-update/index.vue'
import categoryAddOrUpdate from './components/category-add-or-update/index.vue'
import { isMobile, isEmail, isCreditCode, validNoEmptySpace, checkIDCard } from '@/utils/validate'
const companyInfoFormRef = ref(null)
const bankCartInfoFormRef = ref(null)
const baseInfoFormRef = ref(null)
const brandAddOrUpdateRef = ref(null)
const cateAddOrUpdateRef = ref(null)
const picturePreviewRef = ref(null)
const isAgreen = ref(false)
const applyStep = ref(0)
const picturePreviewVisible = ref(false) // 预览图片弹窗
const paySettlementType = useAllinpayStore().paySettlementType

const cateAddOrUpdateVisible = ref(false)
const brandAddOrUpdateVisible = ref(false)

const applyStatus = ref(0) // 店铺申请状态 0：未审核 1：已通过 -1：未通过 -2：未提交过申请
const isNotEdit = ref(false) // 是否不可以编辑信息, 当申请状态为待审核时不能编辑
const auditingInfo = ref('') // 审核信息

const categoryPush = item => {
  signCategoryList.value.push(item)
}
const deleteById = (id, list) => {
  for (let index = list.length - 1; index >= 0; index--) {
    if (list[index] && list[index].categoryId === id) {
      list.splice(index, 1)
    }
  }
  return list
}
const categorySplice = (inx, num) => {
  signCategoryList.value.splice(inx, num)
}
const categoryMap = (fun) => {
  return signCategoryList.value.map(fun)
}

// 第零步---进店协议
const shopProtocol = ref('')

// 第一步---基本信息
const baseInfoForm = ref({
  supplierName: '',
  supplierShopName: '',
  contactName: '',
  contactPhone: '',
  supplierLogo: '',
  intro: '',
  mobileBackgroundPic: '',
  pcBackgroundPic: '',
  supplierId: null
})

// 第二步---工商信息
const companyInfoForm = ref({
  creditCode: '',
  firmName: '',
  residence: '',
  representative: '',
  capital: '',
  foundTime: '',
  startTime: '',
  endTime: '',
  businessScope: '',
  businessLicense: '',
  identityCardFront: '',
  identityCardLater: '',
  legalIds: '',
  legalPhone: ''
})
// 成立日期：今日之前可选
const pickerOptions = reactive({
  disabledDate (time) {
    const date = moment().add(0, 'days').startOf('days')
    return (
      time.getTime() > date.valueOf()
    )
  }
})

// 第三步---签约信息
const signedBrands = ref([]) // 平台品牌+自定义品牌

const signCategoryList = ref([]) // 签约的分类信息
const parentBrandList = ref([]) // 自定义品牌的上级分类
// 已有品牌类目
const brandNameList = ref([])

// 第四步---财务信息
const bankCartInfoForm = reactive({
  data: [
    {
      bankName: '',
      recipientName: '',
      cardNo: '',
      branchName: '',
      accountNo: '', // 企业对公账户
      parentBankName: '', // 开户银行名称
      unionBank: '', // 支付行号 12位数字
      bankCardPro: 1 // 银行卡属性 0法人 1企业对公
    }
  ]
})
const bankList = ref([])
const selectBank = ref('') // 选择的银行，通联
// eslint-disable-next-line no-unused-vars
const validateMobile = (rule, value, callback) => {
  if (isMobile(value) || (isContactPhone.value && isStarMobile(value))) {
    callback()
  } else {
    callback(new Error($t('multishop.shopInformation.correctContactInformation')))
  }
}
// eslint-disable-next-line no-unused-vars
const validateEmail = (rule, value, callback) => {
  if (!isEmail(value) || value.indexOf(' ') !== -1) {
    callback(new Error($t('multishop.shopInformation.correctEmail')))
  } else {
    callback()
  }
}
// eslint-disable-next-line no-unused-vars
const vaildCreditCode = (rule, value, callback) => {
  if (!isCreditCode(value)) {
    callback(new Error($t('multishop.shopProcess.correctCreditCode')))
  } else {
    // 检查统一信用码是否已存在
    api.checkForDuplicateCreditCode({
      creditCode: value,
      supplierId: baseInfoForm.value.supplierId === null ? -1 : baseInfoForm.value.supplierId
    }).then(data => {
      if (data) {
        callback(new Error($t('multishop.shopProcess.checkCreditCode')))
      } else {
        callback()
      }
    }).catch(() => {
      callback()
    })
  }
}
// eslint-disable-next-line no-unused-vars
const validEmptyTab = (rule, value, callback) => {
  if (validNoEmptySpace(value)) {
    callback(new Error($t('multishop.shopInformation.EmptyTips')))
  } else {
    callback()
  }
}
// eslint-disable-next-line no-unused-vars
const validIDCard = (rule, value, callback) => {
  if (!value || !checkIDCard(value)) {
    callback(new Error('请输入正确的法人身份证'))
  } else {
    callback()
  }
}
// eslint-disable-next-line no-unused-vars
const validMobile = (rule, value, callback) => {
  if (isMobile(value) || (isLegalPhone.value && isStarMobile(value))) {
    callback()
  } else {
    callback(new Error('请输入正确的手机号'))
  }
}
const loadGetAuditingInfo = ref(false)

// 基础信息验证
const baseInfoRule = {
  supplierName: [
    { required: true, message: $t('multishop.shopInformation.supplierEmpty'), trigger: 'blur' },
    { min: 2, max: 10, message: $t('multishop.shopInformation.supplierBetween'), trigger: 'blur' },
    { validator: validEmptyTab, trigger: 'blur' }
  ],
  supplierShopName: [
    { required: true, message: $t('multishop.shopInformation.shopNameEmpty'), trigger: 'blur' },
    { min: 2, max: 20, message: $t('multishop.shopInformation.shopNameBetween'), trigger: 'blur' },
    { validator: validEmptyTab, trigger: 'blur' }
  ],
  contactName: [
    { required: true, message: $t('multishop.shopInformation.contactNameEmpty'), trigger: 'blur' },
    { min: 2, max: 10, message: $t('multishop.shopInformation.contactNameBetween'), trigger: 'blur' },
    { validator: validEmptyTab, trigger: 'blur' }
  ],
  contactPhone: [
    { required: true, message: $t('multishop.shopInformation.contactPhoneEmpty'), trigger: 'blur' },
    { validator: validateMobile, trigger: 'blur' }
  ],
  supplierLogo: [
    { required: true, message: $t('multishop.shopInformation.shopLogoTips'), trigger: 'change' }
  ],
  intro: [
    { validator: validEmptyTab, trigger: 'blur' }
  ]
}

const companyInfoRule = {
  creditCode: [
    { required: true, message: $t('multishop.shopInformation.creditCodeEmpty'), trigger: 'blur' },
    { validator: vaildCreditCode, trigger: 'blur' }
  ],
  firmName: [
    { required: true, message: $t('multishop.shopInformation.firmNameEmpty'), trigger: 'blur' },
    { validator: validEmptyTab, trigger: 'blur' }
  ],
  residence: [
    // 住所
    { validator: validEmptyTab, trigger: 'blur' }
  ],
  businessScope: [
    { required: true, message: $t('multishop.shopInformation.businessScopeEmpty'), trigger: 'blur' },
    { validator: validEmptyTab, trigger: 'blur' }
  ],
  startTime: [
    { required: true, message: $t('multishop.shopInformation.startTimeTip'), trigger: 'change' }
  ],
  businessLicense: [
    { required: true, message: $t('multishop.shopInformation.businessLicenseTips'), trigger: 'change' }
  ],
  representative: [
    { required: true, message: $t('multishop.shopInformation.representativeEmpty'), trigger: 'blur' },
    { validator: validEmptyTab, trigger: 'blur' }
  ],
  legalIds: [
    { required: true, message: '法人身份证不能为空', trigger: 'blur' },
    { validator: validIDCard, trigger: 'blur' }
  ],
  legalPhone: [
    { required: true, message: '法人手机号不能为空', trigger: 'blur' },
    { validator: validMobile, trigger: 'blur' }
  ],
  identityCardFront: [
    { required: true, message: $t('multishop.shopInformation.identityCardFrontTips'), trigger: 'change' }
  ],
  identityCardLater: [
    { required: true, message: $t('multishop.shopInformation.identityCardLaterTips'), trigger: 'change' }
  ]
}

const rule = {
  bankName: [
    { required: true, message: paySettlementType === 1 ? '请填写开户支行名称' : $t('multishop.shopInformation.bankNameEmpty'), trigger: 'blur' },
    { min: 2, max: 20, message: paySettlementType === 1 ? '开户支行名称长度在2到20个字符' : $t('multishop.shopInformation.bankNameBetween'), trigger: 'blur' },
    { validator: validEmptyTab, trigger: 'blur' }
  ],
  recipientName: [
    { required: true, message: $t('multishop.shopInformation.recipientNameEmpty'), trigger: 'blur' },
    { min: 2, max: 20, message: $t('multishop.shopInformation.recipientNameBetween'), trigger: 'blur' },
    { validator: validEmptyTab, trigger: 'blur' }
  ],
  cardNo: [
    { required: true, message: $t('multishop.shopInformation.cardNoEmpty'), trigger: 'blur' },
    { validator: validEmptyTab, trigger: 'blur' }
  ],
  branchName: [
    { required: true, message: $t('multishop.shopInformation.branchNameEmpty'), trigger: 'blur' },
    { min: 2, max: 20, message: $t('multishop.shopInformation.branchNameBetween'), trigger: 'blur' },
    { validator: validEmptyTab, trigger: 'blur' }
  ],
  accountNo: [
    { required: true, message: '请填写企业对公账户', trigger: 'blur' }
  ],
  parentBankName: [
    { required: true, message: '请填写开户银行名称', trigger: 'change' }
  ],
  unionBank: [
    { required: true, message: '请填写支付行号', trigger: 'blur' },
    { min: 12, max: 12, message: '请填写正确的支付行号', trigger: 'blur' }
  ]
}

watch(applyStep, (newStep) => {
  if (newStep === 0) {
    getShopProtocol()
    return
  }
  switch (newStep) {
    case 0:
      getShopProtocol()
      break
    case 1:
      getBasicInfo()
      break
    case 2:
      getCompanyInfo()
      break
    case 3:
      getSignCategoryList()
      getSignBrandList()
      break
    case 4:
      getBankCartInfo()
      if (paySettlementType === 1) {
        getBankList()
      }
      break
  }
})
// 获取店铺审核状态
onMounted(() => {
  getOnAuditingInfo()
  if (paySettlementType.value === 1) {
    bankCartInfoForm.data = [{
      bankName: '',
      accountNo: '', // 企业对公账户
      parentBankName: '', // 开户银行名称
      unionBank: '', // 支付行号 12位数字
      bankCardPro: 1 // 银行卡属性 0法人 1企业对公
    }]
  } else {
    bankCartInfoForm.data = [{
      bankName: '',
      recipientName: '',
      cardNo: '',
      branchName: ''
    }]
  }
  switch (applyStep.value) {
    case 0:
      getShopProtocol()
      break
    case 1:
      getBasicInfo()
      break
    case 2:
      getCompanyInfo()
      break
    case 3:
      getSignCategoryList()
      getSignBrandList()
      break
    case 4:
      getBankCartInfo()
      break
  }
})

const onHandlePhone = (attr) => {
  if (attr === 'contactPhone') {
    const rex = isContactPhone.value ? /[^\d|*]/g : /[^\d]/g
    baseInfoForm.value.contactPhone = baseInfoForm.value.contactPhone.replace(rex, '')
  } else if (attr === 'legalPhone') {
    const rex = isLegalPhone.value ? /[^\d|*]/g : /[^\d]/g
    companyInfoForm.value.legalPhone = companyInfoForm.value.legalPhone.replace(rex, '')
  }
}

/**
 * 图片的值发生改变，重新校验对应表单字段
 * @param {String} value 改变的值
 * @param {String} formName 表单名称
 * @param {String} prop 校验字段
 */
// eslint-disable-next-line no-unused-vars
const imgChange = (value, formName, prop) => {
  if (value) {
    companyInfoFormRef.value.validateField(prop)
  }
}

/**
 * 获取店铺协议
 */
const getShopProtocol = () => {
  api.getShopProtocol().then(data => {
    shopProtocol.value = data
  })
}

/**
 * 获取店铺审核状态信息
 */
const getOnAuditingInfo = () => {
  api.getAuditingInfo().then(data => {
    if (data) {
      // 审核状态status 0 未审核 1已通过 -1未通过 2平台下线 3 平台下线待审核
      applyStatus.value = data.status
      auditingInfo.value = data.remarks
      isNotEdit.value = data.status === 0
    } else {
      // 未开店
      applyStatus.value = -2
    }
    if (applyStatus.value === 0) {
      applyStep.value = 1
    }
    loadGetAuditingInfo.value = true
  })
}

/**
 * 获取店铺基本信息
 */
const isContactPhone = ref(false)
const getBasicInfo = () => {
  api.getBasicInfo().then(data => {
    if (data) {
      baseInfoForm.value = data
      isContactPhone.value = Boolean(data.contactPhone)
    }
  })
}
/**
 * 储存基本信息
 */
const saveBasicInfo = Debounce(function () {
  api.saveBasicInfo(baseInfoForm.value).then(() => {
    ElMessage({
      message: $t('multishop.shopInformation.baseInfoSuccess'),
      type: 'success',
      duration: 1000
    })
    applyStep.value += 1
  })
}, 1500)

/**
 * 获取工商信息
 */
const isLegalPhone = ref(false)
const getCompanyInfo = () => {
  api.getCompanyInfo().then(data => {
    if (data) {
      companyInfoForm.value = data
      isLegalPhone.value = Boolean(data.legalPhone)
    }
  })
}

/**
 * 储存工商信息
 */
const saveCompanyInfo = Debounce(function () {
  api.saveCompanyInfo(companyInfoForm.value).then(() => {
    ElMessage({
      message: $t('multishop.shopInformation.businessupdateSuccess'),
      type: 'success',
      duration: 1000
    })
    applyStep.value += 1
  }).catch(() => {})
}, 1500)

// 限制长度
const changeNum = () => {
  if (companyInfoForm.value.capital < 1) {
    companyInfoForm.value.capital = ''
  }
  if (companyInfoForm.value.capital.length > 8) {
    companyInfoForm.value.capital = companyInfoForm.value.capital.slice(0, 8)
  }
}
const channelInputLimit = (e) => {
  const key = e.key
  // 不允许输入'-'
  if (key === '-' || key === '+') {
    e.returnValue = false
    return false
  }
  return true
}

/**
 * 增加银行信息项
 */
const addBankInfo = () => {
  if (bankCartInfoForm.data.length < 5) {
    bankCartInfoForm.data.push(
      {
        bankName: '',
        recipientName: '',
        cardNo: '',
        branchName: ''
      }
    )
  } else {
    ElMessage({
      message: $t('multishop.shopProcess.maxBankAccount'),
      type: 'error',
      duration: 1000
    })
  }
}

// 获取可选银行名称列表（通联）
const getBankList = () => {
  api.getBankList().then(data => {
    bankList.value = data
  })
}

/**
 * 签约类目列表
 */
const getSignCategoryList = () => {
  api.getSignCategoryList().then((data) => {
    if (data) {
      data.forEach(item => {
        item.imgs = item.qualifications ? item.qualifications.split(',') : []
      })

      signCategoryList.value = data
      parentBrandList.value = JSON.parse(JSON.stringify(signCategoryList.value))

      const obj = {}
      parentBrandList.value = parentBrandList.value.reduce((cur, next) => {
        if (!obj[next.name]) {
          obj[next.name] = cur.push(next)
        }
        return cur
      }, []) // 设置cur默认类型为数组，并且初始值为空的数组 数组对象去重
    }
  })
}

/**
 * 获取签约品牌列表
 */
const getSignBrandList = () => {
  signedBrands.value = []
  api.getSignBrandList().then(data => {
    data.platformBrandList.forEach((item) => {
      let parentName = ''
      if (item.categories) {
        parentName = `${item.categories[0].categories[0].name}>${item.categories[0].categories[1].name}>${item.categories[0].name}`
      }
      item.parentName = parentName
    })
    data.customizeBrandList.forEach((item) => {
      let parentName = ''
      if (item.categories) {
        parentName = `${item.categories[0].categories[0].name}>${item.categories[0].categories[1].name}>${item.categories[0].name}`
      }
      item.parentName = parentName
    })
    signedBrands.value.splice(0, signedBrands.value.length)
    data.platformBrandList.length ? signedBrands.value.push(...data.platformBrandList) : signedBrands.value = []
    if (data.customizeBrandList.length > 0) {
      signedBrands.value.push(...data.customizeBrandList)
    }
    signedBrands.value.forEach(item => {
      brandNameList.value = item.name
      item.imgs = item.qualifications ? item.qualifications.split(',') : []
    })
    brandNameList.value = brandNameList
  })
}

/**
 * 获取银行卡列表
 */
const getBankCartInfo = () => {
  api.getBankCartInfoList().then(data => {
    bankCartInfoForm.data = data
    if (bankCartInfoForm.data === null || bankCartInfoForm.data.length === 0) {
      if (paySettlementType === 1) {
        bankCartInfoForm.data = [{
          bankName: '',
          accountNo: '', // 企业对公账户
          parentBankName: '', // 开户银行名称
          unionBank: '', // 支付行号 12位数字
          bankCardPro: 1 // 银行卡属性 0法人 1企业对公
        }]
      } else {
        bankCartInfoForm.data = [
          {
            bankName: '',
            recipientName: '',
            cardNo: '',
            branchName: ''
          }
        ]
      }
    } else if (paySettlementType === 1) {
      bankCartInfoForm.data = [{
        ...data[0],
        accountNo: data[0].bankCardNo,
        bankName: data[0].branchName,
        parentBankName: data[0].bankName
      }]
      selectBank.value = data[0].bankName
    }
  })
}

const changeBank = (value) => {
  bankCartInfoForm.data[0].parentBankName = value
}

/**
 * 删除银行信息项
 * @param {Number} index 索引
 */
const deleteBankInfoItem = (index) => {
  bankCartInfoForm.data.splice(index, 1)
}

const router = useRouter()
/**
 * 保存银行卡信息
 */
const saveBankCartInfo = Debounce(() => {
  const req = paySettlementType === 1 ? api.saveAllinpayBankCartInfo(bankCartInfoForm.data[0]) : api.saveBankCartInfo(bankCartInfoForm.data)
  req.then(() => {
    ElMessage({
      message: $t('multishop.shopProcess.shopApply'),
      type: 'success',
      duration: 1500
    })
    if (paySettlementType === 1) {
      location.reload()
      router.push({ path: '/dashboard' })
      return
    }
    // 店铺信息
    getOnAuditingInfo()
    // 获取银行卡列表
    getBankCartInfo()
  })
}, 1500)

/**
 * 查看下一步
 */
const viewNextStep = () => {
  applyStep.value += 1
}
/**
 * 上一步
 */
const toPrevStep = () => {
  applyStep.value -= 1
}

/**
 * 下一步
 */
const toNextStep = () => {
  if (applyStep.value === 0) {
    // 第零步
    if (isAgreen.value === false) {
      // ElMessage.error('请同意商家入驻协议')
      ElMessage({
        message: $t('multishop.shopProcess.readAgreement'),
        type: 'error',
        duration: 1500
      })
    } else {
      applyStep.value += 1
    }
    return
  }
  if (isNotEdit.value) {
    // 店铺处于审核状态不发送数据更新请求
    return
  }
  if (applyStep.value === 1) {
    // 第一步 基本信息
    baseInfoFormRef.value?.validate((valid) => {
      if (valid) {
        saveBasicInfo()
      }
    })
    return
  }
  if (applyStep.value === 2) {
    // 第二步 工商信息
    companyInfoFormRef.value?.validate((valid) => {
      if (valid) {
        if (!companyInfoForm.value.businessScope.trim()) {
          ElMessage({
            message: $t('multishop.shopInformation.businessScopeEmpty'),
            type: 'error',
            duration: 1000
          })
          return
        }
        saveCompanyInfo()
      }
    })
    return
  }
  if (applyStep.value === 3) {
    // 第三步 签约信息
    if (!signCategoryList.value.length) {
      ElMessage({
        message: $t('multishop.shopProcess.selectCategory'),
        type: 'error',
        duration: 1000
      })
      return
    }
    applyStep.value += 1
    return
  }
  if (applyStep.value === 4) {
    // 第四步 财务信息
    bankCartInfoFormRef.value?.validate((valid) => {
      if (valid) {
        saveBankCartInfo()
      }
    })
  }
}

/**
 * 编辑签约信息弹窗
 * @param {Number} type 签约类型 0:类别 1:品牌
 */
const cateAddOrUpdateHandle = (type) => {
  if (type === 0) {
    cateAddOrUpdateVisible.value = true
    nextTick(() => {
      cateAddOrUpdateRef.value?.init()
    })
  } else if (type === 1) {
    brandAddOrUpdateVisible.value = true
    nextTick(() => {
      brandAddOrUpdateRef.value?.init()
    })
  }
}

/**
 * 关闭弹窗
 */
const closePopup = (val) => {
  if (val === 'category') {
    cateAddOrUpdateVisible.value = false
    getSignCategoryList()
  } else if (val === 'brand') {
    brandAddOrUpdateVisible.value = false
    getSignBrandList()
  }
}

/**
 * 图片预览
 */
const picturePreview = (imgUrl) => {
  picturePreviewVisible.value = true
  nextTick(() => {
    picturePreviewRef.value?.init(imgUrl)
  })
}
</script>

<style lang="scss" scoped>
@use "index";
</style>
