<template>
  <div class="bind-page">
    <s-header title="绑定银行卡" :noback="false" :isBorder="false"></s-header>
    <div class="main-content">
      <!-- 步骤条 -->
      <div class="step-container">
        <van-steps :active="currentStep" active-color="#4d6add">
          <van-step>证件信息</van-step>
          <van-step>结算信息</van-step>
          <van-step>信息审核</van-step>
          <van-step>签约</van-step>
        </van-steps>
      </div>

      <!-- 证件信息 -->
      <div v-if="currentStep === 0" class="card-section">
        <van-tabs v-model:active="merchantType" title-active-color="#4d6add">
          <!-- 个人商户 -->
          <van-tab
            title="个人商户"
            :disabled="huifuMchNo != null && merchantType === 1"
          >
            <div class="upload-card">
              <h3 class="upload-title">
                <span class="title-decoration"></span>
                收款人证件(大陆)
              </h3>
              <div class="upload-group">
                <van-uploader
                  v-model="idCardFront"
                  :max-count="1"
                  class="custom-uploader"
                  name="idCardFront"
                  :after-read="afterRead"
                >
                  <template #default>
                    <div class="upload-item">
                      <van-icon name="photo" size="32" color="#4d6add" />
                      <p>上传人像面</p>
                    </div>
                  </template>
                </van-uploader>
                <van-uploader
                  v-model="idCardBack"
                  :max-count="1"
                  class="custom-uploader"
                  name="idCardBack"
                  :after-read="afterRead"
                >
                  <template #default>
                    <div class="upload-item">
                      <van-icon name="photo" size="32" color="#4d6add" />
                      <p>上传国徽面</p>
                    </div>
                  </template>
                </van-uploader>
              </div>
            </div>
          </van-tab>

          <!-- 企业商户 -->
          <van-tab
            title="企业商户"
            :disabled="huifuMchNo != null && merchantType === 0"
          >
            <div class="upload-card">
              <h3 class="upload-title">
                <span class="title-decoration"></span>
                法人证件信息(大陆)
              </h3>
              <div class="upload-group">
                <van-uploader
                  v-model="idCardFront"
                  :max-count="1"
                  class="custom-uploader"
                  name="idCardFront"
                  :after-read="afterRead"
                >
                  <template #default>
                    <div class="upload-item">
                      <van-icon name="photo" size="32" color="#4d6add" />
                      <p>上传人像面</p>
                    </div>
                  </template>
                </van-uploader>
                <van-uploader
                  v-model="idCardBack"
                  :max-count="1"
                  class="custom-uploader"
                  name="idCardBack"
                  :after-read="afterRead"
                >
                  <template #default>
                    <div class="upload-item">
                      <van-icon name="photo" size="32" color="#4d6add" />
                      <p>上传国徽面</p>
                    </div>
                  </template>
                </van-uploader>
              </div>

              <h3 class="upload-title" style="margin-top: 20px">
                <span class="title-decoration"></span>
                营业执照
              </h3>
              <van-uploader
                v-model="businessLicense"
                :max-count="1"
                class="custom-uploader"
                name="businessLicense"
                :after-read="afterRead"
              >
                <template #default>
                  <div class="upload-item single">
                    <van-icon name="description" size="32" color="#4d6add" />
                    <p>上传营业执照</p>
                  </div>
                </template>
              </van-uploader>
            </div>
          </van-tab>
        </van-tabs>
      </div>

      <!-- 结算信息 -->
      <div v-if="currentStep === 1" class="card-section">
        <van-tabs v-model:active="merchantType" title-active-color="#4d6add">
          <!-- 个人商户 -->
          <van-tab title="个人商户" :disabled="merchantType === 1">
            <div class="upload-card">
              <h3 class="upload-title">
                <span class="title-decoration"></span>
                银行卡正面
              </h3>
              <van-uploader
                v-model="bankCard"
                :max-count="1"
                class="custom-uploader"
                name="bankCard"
                :after-read="afterRead"
              >
                <template #default>
                  <div class="upload-item single">
                    <van-icon name="card" size="32" color="#4d6add" />
                    <p>上传银行卡正面</p>
                  </div>
                </template>
              </van-uploader>
            </div>
          </van-tab>

          <!-- 企业商户 -->
          <van-tab title="企业商户" :disabled="merchantType === 0">
            <div class="upload-card">
              <h3 class="upload-title">
                <span class="title-decoration"></span>
                开户许可证
              </h3>
              <van-uploader
                v-model="accountLicense"
                :max-count="1"
                class="custom-uploader"
                name="accountLicense"
                :after-read="afterRead"
              >
                <template #default>
                  <div class="upload-item single">
                    <van-icon name="description" size="32" color="#4d6add" />
                    <p>上传开户许可证</p>
                  </div>
                </template>
              </van-uploader>
            </div>
          </van-tab>
        </van-tabs>
      </div>

      <!-- 信息审核步骤 -->
      <div v-if="currentStep === 2" class="review-section">
        <van-collapse v-model="activeCollapse">
          <!-- 基础信息 -->
          <van-collapse-item title="主体信息" name="1">
            <van-cell
              title="商户类型"
              :value="merchantType === 0 ? '个人商户' : '企业商户'"
            />
            <template v-if="merchantType === 0">
              <van-cell title="姓名" :value="formData.name" />
              <van-cell title="身份证号" :value="formData.idNumber" />
              <van-cell title="有效开始日期" :value="formData.validStartDate" />
              <van-cell
                v-if="formData.idValidType === '0'"
                title="有效截止日期"
                :value="formData.validEndDate"
              />
              <van-cell title="手机号" :value="formData.phone" />
            </template>
            <template v-else>
              <van-cell title="企业名称" :value="formData.companyName" />
              <van-cell title="营业执照号" :value="formData.licenseNo" />
              <van-cell title="注册日期" :value="formData.companyDate" />
              <van-cell title="法人姓名" :value="formData.name" />
              <van-cell title="法人身份证" :value="formData.idNumber" />
              <van-cell title="法人手机号" :value="formData.phone" />
              <van-cell title="有效开始日期" :value="formData.validStartDate" />
              <van-cell
                v-if="formData.idValidType === '0'"
                title="有效截止日期"
                :value="formData.validEndDate"
              />
            </template>
          </van-collapse-item>

          <!-- 银行信息 -->
          <van-collapse-item title="结算信息" name="2">
            <van-cell
              title="账户类型"
              :value="merchantType === 0 ? '个人账户' : '企业账户'"
            />
            <van-cell
              :title="merchantType === 0 ? '银行卡号' : '对公账号'"
              :value="formData.bankCardNo"
            />
            <van-cell
              v-if="merchantType === 1"
              title="联行号"
              :value="formData.bankChannelNo"
            />
            <van-cell
              title="结算方式"
              :value="formData.settMode === '1' ? '自动结算' : '手动提现'"
            />
            <van-cell title="到账时效" value="D1" />
          </van-collapse-item>
        </van-collapse>
      </div>

      <!-- 签约确认步骤 -->
      <div v-if="currentStep === 3" class="sign-section">
        <div class="upload-card">
          <h3 class="upload-title">
            <span class="title-decoration"></span>
            信息认证状态
          </h3>

          <!-- 信息认证状态 -->
          <div class="audit-status-bar" :class="infoStatusClass">
            <div class="status-content">
              <van-icon :name="infoStatusIcon" class="status-icon" />
              <div class="status-text">
                <p class="main-text">{{ infoStatusMainText }}</p>
                <p class="sub-text">{{ infoStatusSubText }}</p>
              </div>
              <van-button
                v-if="infoStatus == 2"
                size="small"
                type="primary"
                text="修改"
                @click="handleInfoReupload"
              >
              </van-button>
            </div>
          </div>

          <h3 class="upload-title" v-if="infoStatus == 1">
            <span class="title-decoration"></span>
            签约状态
          </h3>

          <!-- 签约状态栏 -->
          <div
            class="audit-status-bar"
            :class="signStatusClass"
            v-if="infoStatus == 1"
          >
            <div class="status-content">
              <van-icon :name="signStatusIcon" class="status-icon" />
              <div class="status-text">
                <p class="main-text">{{ signStatusMainText }}</p>
                <p class="sub-text">{{ signStatusSubText }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 操作按钮 -->
    <div class="action-section">
      <!-- 条件显示提示语 -->
      <div v-if="currentStep === 0 && merchantType === 1" class="action-notice">
        <van-icon name="warning" class="notice-icon" />
        <span>请确认上传法人证件信息与营业执照主体一致</span>
      </div>
      <div class="action-buttons">
        <van-button
          v-if="(currentStep == 1 && infoStatus != 1) || currentStep == 2"
          round
          class="prev-btn"
          @click="currentStep--"
        >
          上一步
        </van-button>
        <van-button
          v-if="currentStep < 3"
          round
          type="primary"
          class="next-btn"
          @click="handleNextStep"
        >
          下一步
        </van-button>
        <van-button
          v-if="currentStep == 3 && infoStatus == 1 && signStatus == 1"
          round
          type="primary"
          class="next-btn"
          @click="handleNextStep"
        >
          立即签约
        </van-button>
        <van-button
          v-if="currentStep == 3 && infoStatus == 1"
          round
          type="primary"
          class="next-btn"
          @click="updateBankCard"
        >
          修改银行卡
        </van-button>
      </div>
    </div>
    <!-- 信息确认 ActionSheet -->
    <van-action-sheet
      v-model:show="showConfirmSheet"
      title="信息确认"
      :round="false"
      class="custom-actionsheet"
    >
      <!-- 证件信息 -->
      <div class="sheet-content" v-if="currentStep === 0">
        <van-form @submit="confirmInfo(0)">
          <!-- 个人商户表单 -->
          <template v-if="merchantType === 0">
            <!-- 收款人证件信息-->
            <van-cell>
              <template #title>
                <div class="custom-title">
                  <span class="blue-line"></span>
                  <span style="font-size: 16px; color: #333"
                    >收款人证件信息</span
                  >
                </div>
              </template>
            </van-cell>
            <van-field
              v-model="formData.name"
              label="姓名"
              placeholder="请输入姓名"
              required
              :rules="[{ required: true, message: '请输入姓名' }]"
            />
            <van-field
              v-model="formData.idNumber"
              label="身份证号"
              placeholder="请输入身份证号"
              :formatter="formatIdCard"
              required
              :rules="[{ required: true, message: '请输入身份证号' }]"
            />
            <van-field label="有效期类型" required>
              <template #input>
                <van-radio-group
                  v-model="formData.idValidType"
                  direction="horizontal"
                >
                  <van-radio name="1" checked-color="#4d6add" icon-size="18px"
                    >长期</van-radio
                  >
                  <van-radio name="0" checked-color="#4d6add" icon-size="18px"
                    >非长期</van-radio
                  >
                </van-radio-group>
              </template>
            </van-field>
            <van-field
              v-model="formData.validStartDate"
              label="有效开始日期"
              placeholder="请选择日期"
              readonly
              clickable
              required
              @click="showStartDatePicker = true"
              :rules="[{ required: true, message: '请选择日期' }]"
            />
            <van-field
              v-if="formData.idValidType == '0'"
              v-model="formData.validEndDate"
              label="有效截止日期"
              placeholder="请选择日期"
              readonly
              clickable
              required
              @click="showEndDatePicker = true"
              :rules="[{ required: true, message: '请选择日期' }]"
            />
            <van-field
              v-model="formData.phone"
              label="收款人手机号"
              placeholder="收款人手机号"
              :formatter="formatPhone"
              required
              :rules="[
                {
                  required: true,
                  message: '请输入11位手机号',
                  validator: (val) =>
                    /^1[3-9]\d{9}$/.test(val.replace(/\s/g, '')),
                },
              ]"
            />
          </template>

          <!-- 企业商户表单 -->
          <template v-else>
            <!-- 法人信息  -->
            <van-cell>
              <template #title>
                <div class="custom-title">
                  <span class="blue-line"></span>
                  <span style="font-size: 0.45rem; color: #333"
                    >法人证件信息</span
                  >
                </div>
              </template>
            </van-cell>
            <van-field
              v-model="formData.name"
              label="法人姓名"
              placeholder="请输入法人姓名"
              required
              :rules="[{ required: true, message: '请输入法人姓名' }]"
            />
            <van-field
              v-model="formData.idNumber"
              label="法人身份证"
              placeholder="请输入法人身份证"
              :rules="[{ required: true, message: '请输入法人身份证' }]"
              :formatter="formatIdCard"
              required
            />
            <van-field label="有效期类型" required>
              <template #input>
                <van-radio-group
                  v-model="formData.idValidType"
                  direction="horizontal"
                >
                  <van-radio name="1" checked-color="#4d6add" icon-size="18px"
                    >长期</van-radio
                  >
                  <van-radio name="0" checked-color="#4d6add" icon-size="18px"
                    >非长期</van-radio
                  >
                </van-radio-group>
              </template>
            </van-field>
            <van-field
              v-model="formData.validStartDate"
              label="有效开始日期"
              placeholder="请选择日期"
              readonly
              clickable
              required
              @click="showStartDatePicker = true"
              :rules="[{ required: true, message: '请选择日期' }]"
            />
            <van-field
              v-if="formData.idValidType == '0'"
              v-model="formData.validEndDate"
              label="有效截止日期"
              placeholder="请选择日期"
              readonly
              clickable
              required
              @click="showEndDatePicker = true"
              :rules="[{ required: true, message: '请选择日期' }]"
            />
            <van-field
              v-model="formData.phone"
              label="法人手机号"
              placeholder="请输入法人手机号"
              :formatter="formatPhone"
              required
              :rules="[
                {
                  required: true,
                  message: '请输入11位手机号',
                  validator: (val) =>
                    /^1[3-9]\d{9}$/.test(val.replace(/\s/g, '')),
                },
              ]"
            />
            <!-- 营业执照信息  -->
            <van-cell>
              <template #title>
                <div class="custom-title">
                  <span class="blue-line"></span>
                  <span style="font-size: 0.45rem; color: #333"
                    >营业执照信息</span
                  >
                </div>
              </template>
            </van-cell>
            <van-field
              v-model="formData.licenseNo"
              label="执照编号"
              placeholder="请输入营业执照编号"
              :rules="[{ required: true, message: '请输入营业执照编号' }]"
              required
            />
            <van-field
              v-model="formData.companyName"
              label="企业名称"
              placeholder="请输入企业全称"
              :rules="[{ required: true, message: '请输入企业全称' }]"
              required
            />
            <van-field
              v-model="formData.companyDate"
              label="注册日期"
              placeholder="请选择注册日期"
              :rules="[{ required: true, message: '请选择注册日期' }]"
              readonly
              clickable
              required
              @click="showCompanyDatePicker = true"
            />
            <van-field
              v-model="registeredAddress"
              readonly
              clickable
              required
              :label="$t('huifuMch.huifuRegisteredAddress')"
              :placeholder="$t('huifuMch.huifuRegisteredAddressPlaceholder')"
              :rules="[
                {
                  required: true,
                  message: $t('huifuMch.huifuRegisteredAddressPlaceholder'),
                },
              ]"
              @click="showReAddress = true"
            />
            <van-field
              v-model="formData.address"
              label="详细地址"
              placeholder="请输入详细地址"
              :rules="[{ required: true, message: '请输入详细地址' }]"
              required
            />
          </template>

          <div class="confirm-buttons">
            <van-button
              round
              block
              type="primary"
              class="confirm-btn"
              native-type="submit"
            >
              确认信息
            </van-button>
          </div>
        </van-form>
      </div>
      <!-- 银行卡信息 -->
      <div class="sheet-content" v-if="currentStep === 1">
        <van-form @submit="confirmInfo(1)">
          <!-- 个人商户表单 -->
          <template v-if="merchantType === 0">
            <!-- 银行卡信息-->
            <van-cell>
              <template #title>
                <div class="custom-title">
                  <span class="blue-line"></span>
                  <span style="font-size: 0.45rem; color: #333"
                    >银行卡信息</span
                  >
                </div>
              </template>
            </van-cell>
            <van-field
              v-model="formData.bankCardNo"
              label="银行账号"
              placeholder="请输入银行账号"
              required
              :rules="[{ required: true, message: '请输入银行账号' }]"
            />
            <!-- <van-field label="结算方式" required>
              <template #input>
                <div class="settlement-container">
                  <van-radio-group
                    v-model="formData.settMode"
                    direction="horizontal"
                  >
                    <van-radio
                      :name="1"
                      checked-color="#4d6add"
                      icon-size="18px"
                      >自动结算</van-radio
                    >
                    <van-radio
                      :name="2"
                      checked-color="#4d6add"
                      icon-size="18px"
                      >手动提现</van-radio
                    >
                  </van-radio-group>
                  <div class="settlement-tip">
                    <van-icon name="info" color="#999" size="14px" />
                    <span>24小时内到账</span>
                  </div>
                </div>
              </template>
            </van-field> -->
            <!-- 银行地址 -->
            <van-field
              v-model="bankAddress"
              readonly
              clickable
              required
              :label="$t('huifuMch.huifuBankAddress')"
              :placeholder="$t('huifuMch.huifuBankAddressPlaceholder')"
              :rules="[
                {
                  required: true,
                  message: $t('huifuMch.huifuBankAddressPlaceholder'),
                },
              ]"
              @click="showBankAddress = true"
            />
          </template>

          <!-- 企业商户表单 -->
          <template v-else>
            <!-- 法人信息  -->
            <van-cell>
              <template #title>
                <div class="custom-title">
                  <span class="blue-line"></span>
                  <span style="font-size: 0.45rem; color: #333"
                    >开户许可证信息</span
                  >
                </div>
              </template>
            </van-cell>
            <van-field
              v-model="formData.bankCardNo"
              label="对公账号"
              placeholder="请输入对公账号"
              required
              :rules="[{ required: true, message: '请输入对公账号' }]"
            />
            <van-field
              v-model="formData.bankChannelNo"
              label="联行号"
              placeholder="请输入联行号"
              required
              :rules="[{ required: true, message: '请输入联行号' }]"
            />
            <!-- <van-field label="结算方式" required>
              <template #input>
                <div class="settlement-container">
                  <van-radio-group
                    v-model="formData.settMode"
                    direction="horizontal"
                  >
                    <van-radio
                      :name="1"
                      checked-color="#4d6add"
                      icon-size="18px"
                      >自动结算</van-radio
                    >
                    <van-radio
                      :name="2"
                      checked-color="#4d6add"
                      icon-size="18px"
                      >手动提现</van-radio
                    >
                  </van-radio-group>
                  <div class="settlement-tip">
                    <van-icon name="info" color="#999" size="14px" />
                    <span>自动结算和手工提现均为次日到账</span>
                  </div>
                </div>
              </template>
            </van-field> -->
            <van-field
              v-model="bankAddress"
              readonly
              clickable
              required
              :label="$t('huifuMch.huifuBankAddress')"
              :placeholder="$t('huifuMch.huifuBankAddressPlaceholder')"
              :rules="[
                {
                  required: true,
                  message: $t('huifuMch.huifuBankAddressPlaceholder'),
                },
              ]"
              @click="showBankAddress = true"
            />
            <!-- 银行编号 -->
            <van-field
              required
              v-model="formData.bankCode"
              :label="$t('huifuMch.bankCodeLabel')"
              :placeholder="$t('huifuMch.bankCodePlaceholder')"
              :rules="[
                { required: true, message: $t('huifuMch.bankCodePlaceholder') },
              ]"
            >
              <template #button>
                <van-button
                  size="small"
                  type="primary"
                  @click="showBankCode = true"
                >
                  选择所属银行
                </van-button>
              </template>
            </van-field>
          </template>

          <div class="confirm-buttons">
            <van-button
              round
              block
              type="primary"
              class="confirm-btn"
              native-type="submit"
            >
              确认信息
            </van-button>
          </div>
        </van-form>
      </div>
    </van-action-sheet>
    <!-- 组合选择器弹窗 -->
    <van-popup
      v-model:show="showStartDatePicker"
      round
      position="bottom"
      class="custom-date-picker"
    >
      <van-date-picker
        v-model="validStartDate"
        title="选择日期"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="idStartDateConfirm"
        @cancel="showStartDatePicker = false"
      />
    </van-popup>
    <van-popup
      v-model:show="showEndDatePicker"
      round
      position="bottom"
      class="custom-date-picker"
    >
      <van-date-picker
        v-model="validEndDate"
        title="选择日期"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="idEndDateConfirm"
        @cancel="showEndDatePicker = false"
      />
    </van-popup>
    <!-- 公司注册日期选择器弹窗 -->
    <van-popup
      v-model:show="showCompanyDatePicker"
      round
      position="bottom"
      class="custom-date-picker"
    >
      <van-date-picker
        v-model="companyDate"
        title="选择日期"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="companyDateConfirm"
        @cancel="showCompanyDatePicker = false"
      />
    </van-popup>
    <van-popup v-model:show="showReAddress" position="bottom">
      <van-area
        :area-list="areaList"
        @confirm="onConfirmReAddress"
        @cancel="showReAddress = false"
      />
    </van-popup>
    <van-popup v-model:show="showBankAddress" position="bottom">
      <van-area
        :area-list="areaList"
        :columns-num="2"
        @confirm="onConfirmBankAddress"
        @cancel="showBankAddress = false"
      />
    </van-popup>
    <!-- 银行编号弹窗 -->
    <van-popup v-model:show="showBankCode" position="bottom">
      <van-picker
        title="请选择所属银行"
        :columns="bankCodePopList"
        @confirm="bankCodePopConfirm"
        @cancel="showBankCode = false"
      />
    </van-popup>
  </div>
</template>

<script>
import {
  showConfirmDialog,
  showToast,
  showFailToast,
  showSuccessToast,
} from "vant";
import { getLoginUser } from "../../common/js/utils";
import sHeader from "../../components/SimpleHeader";
import {
  idCardRecognition,
  createHuifuMch,
  getHuifuMchCheck,
  huifuMchSign,
  // getPhotos,
} from "../../service/purse/index.js";
import { ref, computed, onMounted } from "vue";
import dateUtil from "../../utils/dateUtil";
import router from "../../router";
import { areaList } from "@vant/area-data";

export default {
  components: { sHeader },
  setup() {
    const user = getLoginUser();
    const currentStep = ref(0);
    const merchantType = ref(0);
    //
    const activeCollapse = ref(["1", "2"]);
    // 图片信息
    const idCardFront = ref([]);
    const idCardBack = ref([]);
    const businessLicense = ref([]);
    const bankCard = ref([]);
    const accountLicense = ref([]);
    // 企业法人确认
    const legalPersonName = ref("");
    // 确认信息弹窗
    const showConfirmSheet = ref(false);
    // 日期选择
    const showStartDatePicker = ref(false);
    const showEndDatePicker = ref(false);
    const showCompanyDatePicker = ref(false);
    const minDate = ref(new Date(2000, 0, 1));
    const maxDate = ref(new Date(2099, 11, 31));
    const companyDate = ref(["2022", "06", "01"]);
    // 身份证有效期限
    const validStartDate = ref(["2022", "06", "01"]);
    const validEndDate = ref(["2023", "06", "01"]);
    // 地址选择
    const showReAddress = ref(false);
    const registeredAddress = ref();
    const showBankAddress = ref(false);
    const bankAddress = ref();
    // 银行编号
    const showBankCode = ref(false);
    const bankCodePopList = [
      {
        text: "中国银行",
        value: "01040000",
      },
      {
        text: "中国农业银行",
        value: "01030000",
      },
      {
        text: "中国工商银行",
        value: "01020000",
      },
      {
        text: "中国建设银行",
        value: "01050000",
      },
      {
        text: "交通银行",
        value: "03010000",
      },
      {
        text: "中信银行",
        value: "03020000",
      },
      {
        text: "中国光大银行",
        value: "03030000",
      },
      {
        text: "华夏银行",
        value: "03040000",
      },
      {
        text: "中国民生银行",
        value: "03050000",
      },
      {
        text: "广发银行",
        value: "03060000",
      },
      {
        text: "招商银行",
        value: "03080000",
      },
      {
        text: "兴业银行",
        value: "03090000",
      },
      {
        text: "中国邮政储蓄银行",
        value: "04030000",
      },
      {
        text: "农村商业银行",
        value: "03140000",
      },
      {
        text: "广州银行",
        value: "03134401",
      },
      {
        text: "平安银行",
        value: "03134402",
      },
      {
        text: "其他，请咨询售后人员",
        value: "",
      },
    ];
    const bankCodePopConfirm = ({ selectedOptions }) => {
      formData.value.bankCode = selectedOptions[0].value;
      showBankCode.value = false;
    };
    // 信息认证状态（0: 未认证 1: 已认证 2: 认证失败）
    const infoStatus = ref(0);
    // 信息认证计算属性
    const infoStatusClass = computed(() => ({
      "audit-status-bar--warning": infoStatus.value === 0,
      "audit-status-bar--success": infoStatus.value === 1,
      "audit-status-bar--error": infoStatus.value === 2,
    }));

    const infoStatusIcon = computed(
      () =>
        ({
          0: "clock",
          1: "passed",
          2: "warning",
        }[infoStatus.value])
    );

    const infoStatusMainText = computed(
      () =>
        ({
          0: "信息认证中",
          1: "认证成功",
          2: "认证失败",
        }[infoStatus.value])
    );

    const infoStatusSubText = ref("");

    // 签约状态（0: 未签约 1: 已签约 2: 签约失败）
    const signStatus = ref(0);

    const signStatusIcon = computed(() => {
      return {
        1: "clock",
        2: "passed",
        3: "warning",
      }[signStatus.value];
    });

    const signStatusClass = computed(() => {
      return {
        "audit-status-bar--success": signStatus.value === 2,
        "audit-status-bar--warning": signStatus.value === 1,
        "audit-status-bar--error": signStatus.value === 3,
      };
    });

    const signStatusMainText = computed(() => {
      return {
        1: "未签约",
        2: "签约成功",
        3: "签约失败",
      }[signStatus.value];
    });

    const signStatusSubText = ref("");

    // 汇付记录ID
    const huifuMchID = ref(null);
    // 汇付商户号
    const huifuMchNo = ref(null);

    // 信息
    const formData = ref({
      // 收款人/法人信息
      merchantType: "0", // 商户类型,“0”为个人，“1”为企业
      name: "", // 身份证名称
      idNumber: "", // 身份证
      idValidType: "1", // 身份证有效期类型,“0”为身份证有效期限，“1”为长期
      validStartDate: "", // 身份证有效开始时间
      validEndDate: "", // 身份证有效结束时间
      phone: "", // 手机号
      // 营业执照信息
      licenseNo: "", // 营业执照编号
      companyName: "", // 企业名称
      companyDate: "", // 企业注册日期
      regProvId: "", // 注册省id
      regAreaId: "", // 注册市id
      regDistrictId: "", // 注册区id
      address: "", // 注册地址
      // 银行卡信息
      bankName: "", // 银行名称
      bankCardNo: "", // 银行卡号
      bankCardType: "0", // 银行卡类型,“0”为对公卡，“1”为对私卡
      settMode: 1, // 结算方式,“1”为自动结算，“2”为手动提现
      cardProvId: "", // 银行开户省id
      cardAreaId: "", // 银行开户市id
      // 开户许可证信息
      bankChannelNo: "", // 联行号
      bankCode: "", // 银行编号
    });
    // 提交参数
    const submitParam = ref({
      adminId: user.id, // 用户ID
      regName: "", // 收账方名称
      huifuId: "", // 收账方账号
      type: "0", // 收账方商户类型，“0”为个人，“1”为企业
      // 收款人/法人信息
      name: "", // 法人名称
      certNo: "", // 身份证
      certValidityType: "1", // 身份证有效期类型 * 1 有效期，0 有效期限;
      certBeginDate: "", // 身份证有效开始日期
      certEndDate: "", // 身份证有效结束日期
      phone: "", // 法人手机号
      regProvId: "", // 注册省id
      regAreaId: "", // 注册市id
      regDistrictId: "", // 注册区id
      regDetail: "", // 注册详细地址
      // 银行卡信息
      cardType: "1", // 银行卡类型, “0”为对公账户，“1”为个人账户"
      cardName: "", // 银行账户名称
      cardNo: "", // 银行账号
      cardProvId: "", // 银行开户行所在省id
      cardAreaId: "", // 银行开户行所在市id
      bankCode: "", // 银行编号
      branchCode: "", // 联行号
      settType: 1, // 结算方式,“1”为自动结算，“2”为手动提现
      // 营业执照信息
      licenseCode: "", // 营业执照编号
      licenseValidityType: "1", // 营业执照有效期类型，0：非长期有效 ,1：长期有效
      licenseBeginDate: "", // 营业执照有效期开始时间
      licenseEndDate: "", // 营业执照有效期结束时间
      bindingSteps: 0, // 绑定步骤
    });

    // 上传证照
    const afterRead = async (file, type) => {
      try {
        const fileData = new FormData();
        if (file.file.size > 100 * 1024) {
          // 压缩文件
          const compressedFile = await createCompressedImage(file);
          fileData.append("file", compressedFile);
        } else {
          fileData.append("file", file.file);
        }
        fileData.append("adminId", user.id);
        fileData.append("imageType", type.name);
        const { data } = await idCardRecognition(fileData);
        if (data.code === "00000") {
          console.log(data.data);
          switch (type.name) {
            // 身份证人像面
            case "idCardFront":
              console.log(idCardFront.value);
              formData.value.name = data.data.name;
              formData.value.idNumber = data.data.idCard;
              break;
            // 身份证国徽面
            case "idCardBack":
              if (data.data.idCardEndDate === "长期") {
                formData.value.idValidType = "1";
                validStartDate.value = data.data.idCardStartDate.split(".");
                validEndDate.value = data.data.idCardEndDate.split(".");
              } else {
                formData.value.idValidType = "0";
                validStartDate.value = data.data.idCardStartDate.split(".");
                validEndDate.value = data.data.idCardEndDate.split(".");
                formData.value.validStartDate = validStartDate.value.join("-");
                formData.value.validEndDate = validEndDate.value.join("-");
              }
              break;
            // 营业执照
            case "businessLicense":
              formData.value.licenseNo = data.data.businessLicenseNo;
              formData.value.companyName = data.data.businessLicenseName;
              formData.value.companyDate = dateUtil.formatDate(
                data.data.businessLicenseValidDate
              );
              companyDate.value = formData.value.companyDate.split("-");
              legalPersonName.value = data.data.legalPerson;
              formData.value.address = data.data.businessLicenseAddress;
              break;
            // 银行卡正面
            case "bankCard":
              formData.value.bankCardNo = data.data.bankCardNo;
              break;
            // 开户许可证
            case "accountLicense":
              formData.value.bankCardNo = data.data.accountNo;
              break;
          }
          console.log(formData.value);
        }
      } catch (error) {
        console.log(error);
      }
    };

    // 压缩图片
    const createCompressedImage = (file) => {
      return new Promise((resolve, reject) => {
        const img = new Image();
        img.src = file.content;

        img.onload = () => {
          // 计算新尺寸（保持宽高比）
          const maxSize = 1920;
          let width = img.width;
          let height = img.height;

          if (width > maxSize || height > maxSize) {
            const ratio = Math.min(maxSize / width, maxSize / height);
            width = Math.floor(width * ratio);
            height = Math.floor(height * ratio);
          }

          // 创建Canvas进行压缩
          const canvas = document.createElement("canvas");
          canvas.width = width;
          canvas.height = height;

          const ctx = canvas.getContext("2d");
          ctx.drawImage(img, 0, 0, width, height);

          // 调整压缩质量（大图用0.7，中等图用0.8）
          const quality = 0.7;

          canvas.toBlob(
            (blob) => {
              const compressedFile = new File([blob], file.file.name, {
                type: "image/jpeg",
                lastModified: Date.now(),
              });
              resolve(compressedFile);
            },
            "image/jpeg",
            quality
          );
        };

        img.onerror = reject;
      });
    };

    // 确认日期选择
    const idStartDateConfirm = () => {
      formData.value.validStartDate = validStartDate.value.join("-");
      showStartDatePicker.value = false;
    };

    const idEndDateConfirm = () => {
      formData.value.validEndDate = validEndDate.value.join("-");
      showEndDatePicker.value = false;
    };

    const companyDateConfirm = () => {
      formData.value.companyDate = companyDate.value.join("-");
      showCompanyDatePicker.value = false;
    };

    // 确认地址选择
    const onConfirmReAddress = ({ selectedOptions }) => {
      showReAddress.value = false;
      registeredAddress.value =
        (selectedOptions[0]?.text != selectedOptions[1]?.text
          ? selectedOptions[0]?.text
          : "") +
        selectedOptions[1]?.text +
        selectedOptions[2]?.text;
      formData.value.regProvId = selectedOptions[0]?.value || "";
      formData.value.regAreaId = selectedOptions[1]?.value || "";
      formData.value.regDistrictId = selectedOptions[2]?.value || "";
    };

    const onConfirmBankAddress = ({ selectedOptions }) => {
      showBankAddress.value = false;
      bankAddress.value =
        (selectedOptions[0]?.text != selectedOptions[1]?.text
          ? selectedOptions[0]?.text
          : "") + selectedOptions[1]?.text;
      formData.value.cardProvId = selectedOptions[0]?.value || "";
      formData.value.cardAreaId = selectedOptions[1]?.value || "";
    };

    // 确认信息
    const confirmInfo = (value) => {
      console.log(formData.value);
      showConfirmDialog({
        message: "确认信息无误？",
      })
        .then(async () => {
          if (value === 0) {
            // 证件信息
            if (merchantType.value === 0) {
              // 个人
              submitParam.value.regName = formData.value.name;
              submitParam.value.type = "0";
              submitParam.value.name = formData.value.name;
              submitParam.value.certNo = formData.value.idNumber.replace(
                /\s/g,
                ""
              );
              submitParam.value.certValidityType = formData.value.idValidType;
              submitParam.value.certBeginDate =
                formData.value.validStartDate.replace(/-/g, "");
              submitParam.value.certEndDate =
                formData.value.validEndDate.replace(/-/g, "");
              submitParam.value.phone = formData.value.phone.replace(/\s/g, "");
            } else {
              // 企业
              submitParam.value.type = "1";
              if (legalPersonName.value != formData.value.name) {
                showToast("法人姓名与营业执照主体不一致！");
                return;
              }
              submitParam.value.name = formData.value.name;
              submitParam.value.certNo = formData.value.idNumber.replace(
                /\s/g,
                ""
              );
              submitParam.value.certValidityType = formData.value.idValidType;
              submitParam.value.certBeginDate =
                formData.value.validStartDate.replace(/-/g, "");
              submitParam.value.certEndDate =
                formData.value.validEndDate.replace(/-/g, "");
              submitParam.value.phone = formData.value.phone.replace(/\s/g, "");
              submitParam.value.regProvId = formData.value.regProvId;
              submitParam.value.regAreaId = formData.value.regAreaId;
              submitParam.value.regDistrictId = formData.value.regDistrictId;
              submitParam.value.regDetail = formData.value.address;

              submitParam.value.regName = formData.value.companyName;
              submitParam.value.licenseCode = formData.value.licenseNo;
              submitParam.value.licenseBeginDate =
                formData.value.companyDate.replace(/-/g, "");
            }
            submitParam.value.bindingSteps = 0;
          }
          if (value === 1) {
            // 结算信息
            if (merchantType.value === 0) {
              // 个人
              submitParam.value.cardType = "1";
              submitParam.value.cardName = formData.value.name;
              submitParam.value.cardNo = formData.value.bankCardNo;
              submitParam.value.cardProvId = formData.value.cardProvId;
              submitParam.value.cardAreaId = formData.value.cardAreaId;
            } else {
              // 企业
              submitParam.value.cardType = "0";
              submitParam.value.cardName = formData.value.companyName;
              submitParam.value.cardNo = formData.value.bankCardNo;
              submitParam.value.cardProvId = formData.value.cardProvId;
              submitParam.value.cardAreaId = formData.value.cardAreaId;
              submitParam.value.branchCode = formData.value.bankChannelNo;
              submitParam.value.bankCode = formData.value.bankCode;
            }
            submitParam.value.settType = formData.value.settMode;
            submitParam.value.bindingSteps = 1;
          }
          try {
            const { data } = await createHuifuMch(submitParam.value);
            if (data.code === "00000") {
              currentStep.value++;
            } else {
              showToast(data.message);
            }
          } catch (error) {
            console.log(error);
          }
          console.log("提交参数", submitParam.value);
          showConfirmSheet.value = false;
        })
        .catch(() => {
          return;
        });
    };

    // 回显数据
    const getMchInfo = async () => {
      try {
        const { data } = await getHuifuMchCheck({ adminId: user.id });
        if (data.code === "00000") {
          console.log("回显数据", data.data);
          huifuMchID.value = data.data.id;
          if (data.data.huifuId != null && data.data.huifuId != "") {
            huifuMchNo.value = data.data.huifuId;
          }
          formData.value.merchantType = data.data.type;
          if (formData.value.merchantType === "1") {
            merchantType.value = 1;
          }
          formData.value.name = data.data.name;
          formData.value.idNumber = data.data.certNo;
          formData.value.idValidType = data.data.certValidityType;
          if (
            data.data.certBeginDate != null &&
            data.data.certBeginDate != ""
          ) {
            validStartDate.value = formatDate(data.data.certBeginDate);
            formData.value.validStartDate = validStartDate.value.join("-");
          }
          if (data.data.certEndDate != null && data.data.certEndDate != "") {
            validEndDate.value = formatDate(data.data.certEndDate);
            formData.value.validEndDate = validEndDate.value.join("-");
          }
          formData.value.phone = data.data.phone;

          if (merchantType.value === 1) {
            formData.value.licenseNo = data.data.licenseCode;
            formData.value.companyName = data.data.regName;
            if (
              data.data.licenseBeginDate != null &&
              data.data.licenseBeginDate != ""
            ) {
              companyDate.value = formatDate(data.data.licenseBeginDate);
              formData.value.companyDate = data.data.licenseBeginDate;
            }
            formData.value.regProvId = data.data.regProvId;
            formData.value.regAreaId = data.data.regAreaId;
            formData.value.regDistrictId = data.data.regDistrictId;
            formData.value.address = data.data.regDetail;
            formData.value.bankChannelNo = data.data.branchCode;
          }

          bankAddress.value =
            areaList.province_list[data.data.cardProvId] ==
            areaList.city_list[data.data.cardAreaId]
              ? areaList.province_list[data.data.cardProvId]
              : areaList.province_list[data.data.cardProvId] +
                areaList.city_list[data.data.cardAreaId];
          formData.value.bankName = data.data.cardName;
          formData.value.bankCardNo = data.data.cardNo;
          formData.value.bankCardType = data.data.cardType;
          formData.value.cardProvId = data.data.cardProvId;
          formData.value.cardAreaId = data.data.cardAreaId;
          formData.value.settMode = data.data.settType;

          // 步骤
          currentStep.value = data.data.bindingSteps;
          // 认证状态
          switch (data.data.openStatus) {
            case 0:
              // 认证中
              infoStatus.value = 0;
              infoStatusSubText.value = "预计3分钟内完成认证";
              break;
            case 1:
              // 认证成功
              infoStatus.value = 1;
              infoStatusSubText.value = "认证信息已验证通过";
              break;
            case 2:
              // 认证失败
              infoStatus.value = 2;
              infoStatusSubText.value = data.data.openDesc;
              break;
          }
          // 签约状态
          switch (data.data.status) {
            case "1":
              // 待签约
              signStatus.value = 1;
              signStatusSubText.value = "请点击签约";
              break;
            case "2":
              // 签约成功
              signStatus.value = 2;
              signStatusSubText.value = "签约成功，可前往绑定机器";
              break;
            case "3":
              // 签约成功
              signStatus.value = 3;
              signStatusSubText.value = data.data.auditDesc;
              break;
            case "4":
              // 签约失败
              signStatus.value = 1;
              signStatusSubText.value = "请点击签约";
              break;
          }
        }
      } catch (error) {
        console.log(error);
      }
    };

    // 获取图片
    // const getUserLicense = async () => {
    //   try {
    //     const { data } = await getPhotos({
    //       adminId: user.id,
    //     });
    //     if (data.code === "00000") {
    //       if (data.data.idCardFront) {
    //         idCardFront.value = [
    //           {
    //             url: "data:image/jpeg;base64," + data.data.idCardFront,
    //             isImage: true,
    //           },
    //         ];
    //       }
    //       if (data.data.idCardBack) {
    //         idCardBack.value = [
    //           {
    //             url: "data:image/jpeg;base64," + data.data.idCardBack,
    //             isImage: true,
    //           },
    //         ];
    //       }
    //       if (data.data.bankCard) {
    //         bankCard.value = [
    //           {
    //             url: "data:image/jpeg;base64," + data.data.bankCard,
    //             isImage: true,
    //           },
    //         ];
    //       }
    //       if (data.data.businessLicense) {
    //         businessLicense.value = [
    //           {
    //             url: "data:image/jpeg;base64," + data.data.businessLicense,
    //             isImage: true,
    //           },
    //         ];
    //       }
    //       if (data.data.accountLicense) {
    //         accountLicense.value = [
    //           {
    //             url: "data:image/jpeg;base64," + data.data.accountLicense,
    //             isImage: true,
    //           },
    //         ];
    //       }
    //     }
    //   } catch (error) {
    //     console.log(error);
    //   }
    // };

    onMounted(async () => {
      await getMchInfo();
      // await getUserLicense();
    });

    const handleNextStep = () => {
      if (currentStep.value === 0) {
        // 先检查是否上传证件照
        if (merchantType.value === 0) {
          if (idCardFront.value.length === 0 || idCardBack.value.length === 0) {
            showToast("请先上传相关证照");
            return;
          }
        } else {
          if (businessLicense.value.length === 0) {
            showToast("请先上传相关证照");
            return;
          }
        }
        showConfirmSheet.value = true;
      }
      if (currentStep.value === 1) {
        // 先检查是否银行卡或者开户开户许可证
        if (merchantType.value === 0) {
          if (bankCard.value.length === 0) {
            showToast("请先上传银行卡");
            return;
          }
        } else {
          if (accountLicense.value.length === 0) {
            showToast("请先上传开户许可证");
            return;
          }
        }
        showConfirmSheet.value = true;
      }
      if (currentStep.value === 2) {
        showConfirmDialog({
          message: "请再次确认信息无误？",
        })
          .then(async () => {
            // 初次提交
            submitParam.value.bindingSteps = 2;
            try {
              const { data } = await createHuifuMch(submitParam.value);
              if (data.code === "00000") {
                showSuccessToast("提交成功");
              } else {
                showToast(data.message);
              }
              setTimeout(() => {
                router.go(0);
              }, 1500);
            } catch (error) {
              console.log(error);
            }
          })
          .catch(() => {
            return;
          });
      }
      if (currentStep.value === 3) {
        if (infoStatus.value != 1) {
          showToast("请确认信息认证通过");
          return;
        }
        showConfirmDialog({
          message: "确认签约？",
        })
          .then(async () => {
            // 签约
            try {
              const { data } = await huifuMchSign({ id: huifuMchID.value });
              if (data.code === "00000") {
                showSuccessToast("签约成功");
                setTimeout(() => {
                  router.go(0);
                }, 1000);
              } else {
                showFailToast(data.message);
              }
            } catch (error) {
              console.error("请求发生错误:", error);
            }
          })
          .catch(() => {
            return;
          });
      }
    };

    // 跳转修改认证信息
    const handleInfoReupload = () => {
      currentStep.value = 0;
    };

    // 修改银行卡
    const updateBankCard = () => {
      currentStep.value = 1;
    };

    const handlePrevStep = () => {
      if (currentStep.value > 0) currentStep.value--;
    };

    // 格式化身份证号码
    const formatIdCard = (value) => {
      // 步骤1：过滤非法字符（保留数字和X）
      let val = value.replace(/[^\dXx]/g, "");

      // 步骤2：自动大写转换
      val = val.toUpperCase();

      // 步骤3：智能分段（前6位+8位+4位）
      const parts = [];
      if (val.length > 6) {
        parts.push(val.substr(0, 6));
        val = val.substr(6);
      }
      if (val.length > 8) {
        parts.push(val.substr(0, 8));
        val = val.substr(8);
      }
      parts.push(val);

      // 步骤4：组合分段并限制最大长度
      return parts.join(" ").substr(0, 21);
    };

    // 格式化手机
    const formatPhone = (value) => {
      // 1. 去除非数字字符并截取前11位
      const phone = value.replace(/\D/g, "").slice(0, 11);

      // 2. 按 3-4-4 格式添加空格
      return phone.replace(/(\d{3})(\d{0,4})(\d{0,4})/, (_, $1, $2, $3) => {
        let formatted = $1;
        if ($2) formatted += ` ${$2}`;
        if ($3) formatted += ` ${$3}`;
        return formatted;
      });
    };

    const formatDate = (str) => {
      const year = str.slice(0, 4);
      const month = str.slice(4, 6);
      const day = str.slice(6, 8);
      return [year, month, day];
    };

    return {
      // 响应式数据
      currentStep,
      merchantType,
      idCardFront,
      idCardBack,
      businessLicense,
      bankCard,
      accountLicense,
      formData,
      minDate,
      maxDate,
      companyDate,
      validStartDate,
      validEndDate,
      showReAddress,
      registeredAddress,
      showBankAddress,
      bankAddress,
      activeCollapse,
      infoStatusClass,
      infoStatusIcon,
      infoStatusMainText,
      infoStatusSubText,
      infoStatus,
      signStatus,
      signStatusClass,
      signStatusIcon,
      signStatusMainText,
      signStatusSubText,
      areaList,
      huifuMchNo,
      showBankCode,
      bankCodePopList,
      bankCodePopConfirm,

      // 方法
      handleNextStep,
      handlePrevStep,
      afterRead,
      formatIdCard,
      formatPhone,
      idStartDateConfirm,
      idEndDateConfirm,
      onConfirmReAddress,
      onConfirmBankAddress,
      confirmInfo,
      companyDateConfirm,
      handleInfoReupload,
      updateBankCard,

      // 弹窗
      showConfirmSheet,
      showStartDatePicker,
      showEndDatePicker,
      showCompanyDatePicker,
    };
  },
};
</script>

<style lang="less" scoped>
.bind-page {
  background: #f8f9ff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  overflow-y: auto;
}

.main-content::-webkit-scrollbar {
  width: 6px;
  background: #f1f1f1;
}

.main-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.step-container {
  background: white;
  padding: 15px;
  margin: 10px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(77, 106, 221, 0.05);

  :deep(.van-step__title) {
    font-size: 0.35rem;
  }
}

.card-section {
  margin: 10px;
}

.upload-card {
  background: white;
  border-radius: 0 0 12px 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(77, 106, 221, 0.08);

  .upload-title {
    // color: #4d6add;
    font-size: 16px;
    // margin-bottom: 15px;
    position: relative;
    padding-left: 12px;
    /* 留出装饰条位置 */

    .title-decoration {
      position: absolute;
      left: 0;
      top: 55%;
      transform: translateY(-50%);
      width: 3px;
      height: 16px;
      background: #4d6add;
      border-radius: 2px;
    }
  }
}

.upload-group {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 10px;
  margin-bottom: 15px;
}

.upload-item {
  border: 2px dashed #e0e3ff;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s;
  width: 3rem;

  p {
    color: #666;
    margin-top: 8px;
    font-size: 12px;
  }

  &.single {
    grid-column: span 2;
  }

  &:active {
    border-color: #4d6add;
    background: rgba(77, 106, 221, 0.05);
  }
}

.custom-uploader :deep(.van-uploader__preview-image) {
  width: 4rem !important;
  height: 2.8rem !important;
  border-radius: 6px;
}

.custom-uploader :deep(.van-uploader__preview) {
  width: 4rem !important;
  height: 100% !important;
  margin: 0 !important;
}

/* 信息审核样式 */
.review-section {
  padding: 12px;

  .van-collapse-item__content {
    padding: 0;
  }

  .van-cell {
    background: #f8f9ff;
    margin: 4px 0;
    border-radius: 6px;
  }
}

.sign-section {
  margin: 10px;

  .audit-status-bar {
    background: #f8f9ff;
    border-radius: 8px;
    padding: 15px;
    margin: 20px 5px;
    display: flex;
    align-items: center;
    border: 1px solid transparent;

    .status-content {
      display: flex;
      align-items: center;
      gap: 15px;

      .status-icon {
        font-size: 22px;
      }

      .status-text {
        line-height: 1.4;

        .main-text {
          color: #333;
          font-weight: 500;
          font-size: 14px;
        }

        .sub-text {
          color: #666;
          font-size: 12px;
        }
      }
    }

    // 不同状态样式
    &--success {
      border-color: #38b48d;
      background: #e8faf0;

      .status-icon {
        color: #38b48d;
      }
    }

    &--warning {
      border-color: #ff9500;
      background: #fff4e8;

      .status-icon {
        color: #ff9500;
      }
    }

    &--error {
      border-color: #ff4d4f;
      background: #ffecec;

      .status-icon {
        color: #ff4d4f;
      }
    }
  }

  .sign-notice {
    margin-top: 20px;
    padding: 12px;
    background: #fffbe8;
    border-radius: 6px;
    color: #ff9500;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;

    .van-icon {
      flex-shrink: 0;
    }
  }
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 8px;

  .preview-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

    .van-image {
      width: 100%;
      height: 120px;
    }

    .file-name {
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 4px;
      background: rgba(0, 0, 0, 0.6);
      color: white;
      font-size: 12px;
      text-align: center;
    }
  }
}

/* 固定底部容器 */
.action-section {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
  z-index: 100;
}

/* 提示语样式 */
.action-notice {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: #fffbe8;
  border-radius: 6px;
  color: #ed6a0c;
  font-size: 13px;
  line-height: 1.5;
  animation: slideUp 0.3s ease;
}

.notice-icon {
  margin-right: 6px;
  font-size: 16px;
  flex-shrink: 0;
}

/* 按钮容器 */
.action-buttons {
  display: flex;
  gap: 10px;

  .prev-btn {
    flex: 2;
    border-color: #4d6add;
    color: #4d6add;
    margin: 10px;
  }

  .next-btn {
    flex: 2;
    background: #4d6add;
    margin: 10px;
  }

  :deep(.van-button__text) {
    font-size: 16px;
  }
}

/* 主要内容区域需要添加底部padding防遮挡 */
// .main-content {
//   // padding-bottom: 10px;
//   /* 根据实际高度调整 */
// }

/* 动画效果 */
@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 自定义 ActionSheet 样式 */
:deep(.van-action-sheet) {
  border-radius: 16px 16px 0 0;
  overflow: visible;

  .van-action-sheet__header {
    font-size: 18px;
    color: #4d6add;
    font-weight: 500;
    padding: 18px 16px;
    background: linear-gradient(to bottom, #f8f9ff, white 60%);
  }
}

.sheet-content {
  padding: 0 16px 20px;
  max-height: 70vh;
  // overflow-y: auto;

  .van-cell {
    background: #f8f9ff;
    margin: 8px 0;
    border-radius: 8px;

    &::after {
      display: none;
    }

    &__title {
      flex: none;
      width: 80px;
    }
  }

  /* 自定义标题样式 */
  .custom-title {
    display: flex;
    align-items: center;
    padding: 5px 0;
  }

  .blue-line {
    display: inline-block;
    width: 4px;
    height: 16px;
    background: #4d6add;
    margin-right: 8px;
    border-radius: 2px;
  }

  .van-field {
    margin: 12px 0;
    background: #f8f9ff;
    border-radius: 8px;
    padding: 8px 16px;

    :deep(.van-field__label) {
      width: 80px;
      color: #666;
    }

    :deep(.van-field__control) {
      color: #333;
      font-weight: 500;
    }
  }

  /* 结算方式容器 */
  .settlement-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }

  /* 提示语样式 */
  .settlement-tip {
    display: flex;
    align-items: center;
    color: #999;
    font-size: 12px;
    /* 对齐单选按钮 */
    line-height: 1.4;

    .van-icon {
      margin-right: 4px;
    }
  }
}

.confirm-buttons {
  padding: 15px 0;
  .confirm-btn {
    background: #4d6add;
    border: none;
    font-size: 16px;

    &:active {
      opacity: 0.9;
    }
  }
}

.custom-date-picker {
  width: 100%;
}

/* 调整列宽 */
.year-column {
  width: 35% !important;
}

.month-column {
  width: 30% !important;
}

.day-column {
  width: 35% !important;
}

/* 长期选项样式 */
.van-picker-column__item--longterm {
  color: #1989fa;
  font-weight: bold;
}

/* 适配移动端 */
@media (max-width: 480px) {
  .upload-item {
    padding: 15px;
  }

  .upload-group {
    gap: 8px;
  }

  .sheet-content {
    padding: 0 12px 20px;

    .van-cell,
    .van-field {
      margin: 6px 0;
    }
  }

  .settlement-tip {
    font-size: 11px;
  }

  :deep(.van-action-sheet__header) {
    padding: 14px 12px;
    font-size: 16px;
  }
}
</style>
