group_web_merchant/src/views/storeDecoration/add.vue

<template>
  <div class="add-container">
    <el-dialog v-model="dialogVisible" title="新建" width="800px" :close-on-click-modal="false" @close="handleClose">
      <el-form ref="formRef" :model="formData" :rules="rules" label-width="140px" label-position="right">
        <!-- 需求标题 -->
        <el-form-item label="需求标题" prop="requirementTitle" required>
          <el-input v-model="formData.requirementTitle" placeholder="请输入" maxlength="100" clearable />
        </el-form-item>

        <!-- 装修类型 -->
        <el-form-item label="装修类型" prop="renovationType">
          <el-radio-group v-model="formData.renovationType">
            <el-radio :label="1"> 新房装修 </el-radio>
            <el-radio :label="2"> 旧房改造 </el-radio>
            <el-radio :label="3"> 局部装修 </el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 房屋面积 -->
        <el-form-item label="房屋面积(㎡)" prop="houseArea" required>
          <el-input-number
            v-model="formData.houseArea"
            :min="0"
            :max="99999"
            :precision="2"
            placeholder="请输入"
            style="width: 100%"
          />
        </el-form-item>

        <!-- 装修预算 -->
        <el-form-item label="装修预算(万元)" prop="renovationBudget" required>
          <el-input-number
            v-model="formData.renovationBudget"
            :min="0"
            :max="99999"
            :precision="2"
            placeholder="请输入"
            style="width: 100%"
          />
        </el-form-item>

        <!-- 详细需求 -->
        <el-form-item label="详细需求" prop="detailedRequirement">
          <el-input
            v-model="formData.detailedRequirement"
            type="textarea"
            :rows="4"
            placeholder="请输入"
            maxlength="500"
            show-word-limit
            clearable
          />
        </el-form-item>

        <!-- 期望装修时间 -->
        <el-form-item label="期望装修时间" prop="expectedRenovationTime" required>
          <el-date-picker
            v-model="formData.expectedRenovationTime"
            type="date"
            placeholder="请选择"
            value-format="YYYY-MM-DD"
            style="width: 100%"
            :disabled-date="disabledBeforeToday"
          />
        </el-form-item>

        <!-- 上传房屋图纸 -->
        <el-form-item label="上传房屋图纸" prop="attachmentUrls" required>
          <el-upload
            v-model:file-list="fileList"
            action="#"
            list-type="picture-card"
            :limit="9"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-exceed="handleExceed"
            :before-upload="beforeUpload"
            :http-request="handleAttachmentUpload"
            accept="image/jpeg,image/png,image/gif,image/webp,image/bmp,video/mp4,video/quicktime,video/webm,.jpg,.jpeg,.png,.gif,.webp,.bmp,.mp4,.mov,.webm,.m4v"
            multiple
          >
            <template #file="{ file }">
              <div class="attachment-upload-item">
                <video
                  v-if="isVideoUploadFile(file) && file.url"
                  :src="file.url"
                  :poster="getAttachmentVideoPoster(file)"
                  class="attachment-upload-thumb"
                  muted
                  preload="metadata"
                  playsinline
                />
                <img v-else-if="file.url" class="attachment-upload-thumb" :src="file.url" alt="" />
                <div v-else class="attachment-upload-placeholder">
                  <el-icon><VideoPlay v-if="isVideoUploadFile(file)" /><Picture v-else /></el-icon>
                </div>
                <div class="attachment-upload-handle" @click.stop>
                  <div class="attachment-upload-handle-icon" @click="handlePictureCardPreview(file)">
                    <el-icon><ZoomIn /></el-icon>
                    <span>查看</span>
                  </div>
                  <div class="attachment-upload-handle-icon" @click="handleAttachmentRemove(file)">
                    <el-icon><Delete /></el-icon>
                    <span>删除</span>
                  </div>
                </div>
              </div>
            </template>
            <el-icon><Plus /></el-icon>
          </el-upload>
          <div class="upload-tip">支持图片或视频 ({{ fileList.length }}/9)，图片单文件不超过 20MB，视频单文件不超过 200MB</div>
        </el-form-item>

        <!-- 联系人 -->
        <el-form-item label="联系人" prop="contactName" required>
          <el-input v-model="formData.contactName" placeholder="请输入" maxlength="50" clearable />
        </el-form-item>

        <!-- 联系电话 -->
        <el-form-item label="联系电话" prop="contactPhone" required>
          <el-input v-model="formData.contactPhone" placeholder="请输入" maxlength="20" clearable />
        </el-form-item>

        <!-- 所在城市 -->
        <el-form-item label="所在城市" prop="city" required>
          <el-input
            v-model="formData.city"
            placeholder="请选择"
            readonly
            @click="showCityDialog = true"
            clearable
            @clear="handleCityClear"
          >
            <template #suffix>
              <el-icon class="cursor-pointer" @click="showCityDialog = true">
                <ArrowDown />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>

        <!-- 详细地址 -->
        <el-form-item label="详细地址" prop="detailedAddress" required>
          <el-input
            v-model="formData.detailedAddress"
            type="textarea"
            :rows="3"
            placeholder="请输入"
            maxlength="200"
            show-word-limit
            clearable
          />
        </el-form-item>

        <!-- 服务协议确认 -->
        <el-form-item prop="agreementConfirmed">
          <el-checkbox v-model="formData.agreementConfirmed" :true-label="1" :false-label="0">
            我已阅读并同意
            <el-link type="primary" :underline="false" @click="handleShowAgreement"> 《用户服务协议》 </el-link>
            和
            <el-link type="primary" :underline="false" @click="handleShowPrivacy"> 《隐私政策》 </el-link>
            ，允许装修商家查看我的需求信息并与我联系
          </el-checkbox>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose"> 返回 </el-button>
          <el-button type="primary" :loading="submitLoading" @click="handleSubmit"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 城市选择对话框 -->
    <el-dialog v-model="showCityDialog" title="选择城市" width="600px">
      <div class="city-selector">
        <el-select
          v-model="selectedProvince"
          placeholder="请选择省"
          clearable
          style="width: 100%; margin-bottom: 10px"
          @change="handleProvinceChange"
        >
          <el-option v-for="province in provinceOptions" :key="province.adcode" :label="province.name" :value="province.adcode" />
        </el-select>
        <el-select
          v-model="selectedCity"
          placeholder="请选择市"
          clearable
          style="width: 100%; margin-bottom: 10px"
          :disabled="!selectedProvince"
          @change="handleCitySelect"
        >
          <el-option v-for="city in cityOptions" :key="city.adcode" :label="city.name" :value="city.adcode" />
        </el-select>
        <el-select
          v-model="selectedDistrict"
          placeholder="请选择区"
          clearable
          style="width: 100%"
          :disabled="!selectedCity"
          @change="handleDistrictSelect"
        >
          <el-option v-for="district in districtOptions" :key="district.adcode" :label="district.name" :value="district.adcode" />
        </el-select>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showCityDialog = false"> 取消 </el-button>
          <el-button type="primary" @click="handleConfirmCity"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 图片预览 -->
    <PcImagePreviewViewer
      v-model:visible="imageViewerVisible"
      :url-list="imageViewerUrlList"
      :initial-index="imageViewerInitialIndex"
    />

    <PcVideoPreviewDialog v-model="videoPreviewVisible" :src="videoPreviewUrl" title="查看视频" />

    <!-- 用户服务协议弹窗 -->
    <el-dialog v-model="agreementDialogVisible" title="用户服务协议" width="800px" :close-on-click-modal="false">
      <div class="agreement-content">
        <p>
          您在使用爱丽恩严（大连）商务科技有限公司旗下U店在这APP软件提供的服务前，应当仔细认真阅读本《服务条款》(下称"本条款")中的全部规则、《用户协议》及发布的其他服务条款、专项产品或服务规则或规范的内容，尤其是以粗体或加下划线标示的条款，包括但不限于免除或者限爱丽恩严（大连）商务科技有限公司责任的条款、对用户权利进行限制的条款以及约定争议解决方式、司法管辖的条款，上述条款请您重点阅读。您有权选择同意或者不同意本协议。
        </p>

        <p><strong>本协议所称的爱丽恩严</strong>是指爱丽恩严（大连）商务科技有限公司的简称。</p>

        <p>
          您与爱丽恩严均应当严格履行本协议及其补充协议所约定的各项义务，如发生争议或者纠纷，双方可以友好协商解决；协商不成的，任何一方均可向本协议签订地有管辖权的人民法院提起诉讼。本协议签订地为大连市中山区。
        </p>

        <p>
          您如果通过登录U店在哪APP用户注册页面或者爱丽恩严提供的其他用户注册渠道注册用户账号，完成我们的注册流程并通过点击同意的形式在线签署本协议即视为您完全同意本协议，愿意接受本协议所有及任何条款的约束。
        </p>

        <p>所有服务规则视为本条款不可分割的一部分，与本条款具有同等法律效力。</p>

        <p>
          <strong>本条款的签约双方</strong>为爱丽恩严服务的实际运营商爱丽恩严（大连）商务科技有限公司（下称"爱丽恩严"）
          与使用爱丽恩严相关服务的使用人（以下称"用户"或"您"），本条款是您与爱丽恩严之间关于您使用爱丽恩严提供的各项服务所订立的服务条款，具有正式书面合同的效力。
        </p>

        <p>
          本条款为爱丽恩严平台《用户协议》（包括但不限于所附的《隐私协议》）
          的必要组成部分。《用户协议》将同时适用于爱丽恩严的各项服务。如本条款与《用户协议》文本内容存在冲突之处，则以时间上最新发布的内容为准，发布时间相同的，以本条款为准。本条款有待明确、存在歧义或未规定之处均以《用户协议》中的规定为准。
        </p>

        <p>
          您理解并同意，爱丽恩严将根据《用户协议》的约定，对本条款或各项服务规则不时地进行修改更新。修改更新内容的发布和实施均适用《用户协议》的相关约定。
        </p>

        <h3>一、名词解释</h3>
        <p>除您与爱丽恩严另有约定外，本协议及其补充协议当中的下列名词均采用如下解释：</p>

        <p>
          1.
          服务条款：即本协议，指您与爱丽恩严当下订立的旨在约定您登录、使用本平台，通过本平台下达订单、购买商品/服务、支付价款以及爱丽恩严运用自己的平台系统，通过互联网络等方式为用户提供商户信息、点评信息、消费信息、优惠信息、团购等整个网络服务过程中，您与爱丽恩严之间的权利、义务的书面合同。
        </p>

        <p>
          2. 爱丽恩严：指是爱丽恩严（大连）商务科技有限公司运营的爱丽恩严生活服务信息平台，包括但不限于
          爱丽恩严网站、爱丽恩严客户端、爱丽恩严小程序等形式的互联网平台。
        </p>

        <p>
          3.
          商户：是指根据本条款及其他适用的服务规则，在爱丽恩严平台上发布信息为爱丽恩严用户提供各项线上及线下的商品或服务的第三方商家。
        </p>

        <p>
          4.
          团购：团购是指通过爱丽恩严平台，一定数量的用户组团或者参团，以较低折扣价格购买同一种服务或商品的行为，包括消费买单、预约及预订服务项目等。
        </p>

        <p>
          5.
          团购信息：是指商户通过爱丽恩严发布的团购商品或服务的信息，此类信息包括但不限于团购商品或服务的名称、种类、数量、质量、价格、配送方式、支付形式、退换货方式、退款条件、售后服务等内容。
        </p>

        <p>
          6.
          团购券：是指用户通过爱丽恩严购买商户的服务或商品并成功支付团购价款后，相关商户通过爱丽恩严自动向用户出具的供用户向该商户要求提供商品或服务的交易凭证。
        </p>

        <p>
          7.
          优惠券：是指用户通过爱丽恩严购买商户的服务或商品时，购买、免费领取或使用积分兑换用于享受减免、折扣或其他优惠条件的电子交易凭证。
        </p>

        <p>
          8. 交互信息服务：交互信息服务是指用户在爱丽恩严应用上交互平台（下称 "点评交互平台
          "）上发布文字、图片、视频及表演（直播）等信息。点评交互平台包括但不限于点评社区、点评头条、 点评直播、笔记功能等。
        </p>

        <h3>二、用户账号</h3>
        <p>
          1.在注册、管理、使用账号时，您应遵循诚实信用、合法善意的原则。您向平台提交的相关注册资料应当遵守法律法规、社会主义制度、国家利益、公民合法权益、公序良俗、信息真实等原则，不应提交任何违法或不良信息。相关资料如有变动，您应及时更新。如果因您所提供的注册资料不合法、不真实、不准确或未及时更新，从而导致相关法律责任或不利后果的，您将承担相应的法律责任及不利后果。同时，爱丽恩严有权拒绝为您提供注册服务。
        </p>
        <p>2.您同意并承诺以合法、合规、合理的方式使用爱丽恩严账号：</p>
        <ul>
          <li>
            （1）您设置的账号昵称、头像及个人介绍等个人资料不得出现违法和不良信息，包括但不限于使用政治、色情、低俗、侮辱、诽谤等违反法律、道德及公序良俗的词语。
          </li>
          <li>
            （2）未经他人许可，您不得使用他人名义（包括但不限于冒用他人姓名、名称、字号、头像、身份等或采取其他足以让人引起混淆的方式）开设爱丽恩严账号。
          </li>
          <li>
            （3）不得假冒、仿冒、捏造党政军机关、企事业单位、新闻媒体等组织机构名称、标识信息或采取其他足以让人引起混淆的方式开设爱丽恩严账号。
          </li>
          <li>
            （4）您不得恶意注册爱丽恩严账号（包括但不限于频繁注册、批量注册账号等行为）或将账号用于非法或不正当用途（包括但不限于流量作假等行为），不得实施任何侵害国家利益、损害其他公民合法权益，有害社会道德风尚的行为，不得采取各种技术手段恶意绕开或者对抗平台规则。
          </li>
        </ul>
        <p>
          3.您理解并同意，您的爱丽恩严账号的所有权及有关权益均归爱丽恩严所有，您仅享有该账号的使用权且仅限于您本人使用。为保证账号安全，未经爱丽恩严的书面同意，您不应将爱丽恩严账号以赠与、转让、出售、出借或其他方式许可他人使用，否则您应当承担由此产生的全部责任，爱丽恩严保留拒绝提供相应服务、冻结或收回注册账号或终止本服务协议的权利，并可要求您对爱丽恩严所承受的损失予以赔偿。
        </p>
        <p>
          4.您应妥善保管账号信息、账号密码以及其他与账号相关的信息、资料。您有责任维护个人账号、密码的安全性与保密性，并对您以注册账号名义所从事的活动承担全部法律责任，包括但不限于您在爱丽恩严平台进行的任何信息发表、浏览点击等操作行为可能引起的一切法律责任。若发现他人未经许可使用您的账号或发生其他任何安全漏洞问题时，您应当立即通知爱丽恩严。
        </p>
        <p>
          5.您理解并同意，如您违反上述条款，爱丽恩严有权对您采取要求限期改正、禁止注册、删除或屏蔽违法违规信息、不同时限的禁止信息发布和账号信息修改、封号、注销账号等处置措施。
        </p>
        <p>
          6.您理解并同意，您可通过注册新的账号或登录您现有的账号以使用爱丽恩严的各项服务及功能，您使用爱丽恩严账号应同时遵守《用户协议》中的各项规定。
        </p>

        <h3>三、用户管理</h3>
        <p>
          1.您知悉、理解并同意，爱丽恩严在服务过程中，可能涉及收集、存储、使用、共享和保护用户个人信息。在您使用爱丽恩严提供的服务时，您同意爱丽恩严依据《隐私协议》的规定执行相关个人信息的收集、使用和共享。您进一步同意，就爱丽恩严平台所产生的交易或其他与个人信息使用紧密相关的交易，您授权爱丽恩严使用或允许爱丽恩严许可的第三方在必要、合理的限度内使用您的个人信息，包括但不限于身份信息、账号信息、交易信息等。
        </p>
        <p>
          2.您知悉并同意，爱丽恩严将按照有权网络信息主管部门的相关规定对您的账号信息及所发布的各项信息进行必要的安全审查及评估，保留并向有关部门定期报送您的账号信息及您所发布的各项信息。
        </p>
        <p>
          3.用户有权在爱丽恩严平台上发布客观、真实、亲身体验的文字点评、图片点评、视频点评或者自行添加商户、完善爱丽恩严平台中商户的商户名称、营业时间、位置等信息。用户同意并理解，为了遵守法律法规和政策，维护良好的平台秩序，爱丽恩严有权对特定用户、特定行业、特定商品或者服务的点评信息或者商户信息发布流程作出特别设定或者限制。
        </p>
        <p>
          4.您可以通过正式的页面公告和/或站内信和/或电子邮件和/或客服电话和/或手机短信、常规的信件接收和查看中奖、优惠等活动或信息，并在爱丽恩严上自行浏览、下载和使用优惠券和/或团购券。
        </p>
        <p>
          5.用户知晓并同意，他人可能通过"认领"等操作获得用户在爱丽恩严平台中添加的商户条目之管理权限，并可能对用户添加、完善之信息进行修改或者使用。
        </p>
        <p>6.用户有权根据爱丽恩严相关规定，在发布点评信息等贡献后，取得爱丽恩严给予的奖励（如贡献值、积分等）。</p>
        <p>
          7.用户在发布信息时，您应确保该等信息的真实性、客观性、合法性，爱丽恩严提倡用户贡献高质量点评。用户应确保在爱丽恩严上发表的各类点评信息、攻略或文章、图片及视频均不涉及侵犯第三方隐私、著作权或其他合法权益。用户需维护点评的客观性，不得利用爱丽恩严用户身份进行任何违反法律、法规、国家政策以及诚实信用原则的行为，包括但不限于：
        </p>
        <ul>
          <li>（1）违反法律法规及国家政策的行为：</li>
          <li>①反对宪法所确定的基本原则的；</li>
          <li>②危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一的；</li>
          <li>③损害国家荣誉和利益的；</li>
          <li>④歪曲、丑化、亵渎、否定英雄烈士事迹和精神，以侮辱、诽谤或者其他方式侵害英雄烈士的姓名、肖像、名誉、荣誉的；</li>
          <li>⑤宣扬恐怖主义、极端主义或者煽动实施恐怖活动、极端主义活动的；</li>
          <li>⑥煽动民族仇恨、民族歧视，破坏民族团结的；</li>
          <li>⑦破坏国家宗教政策，宣扬邪教和封建迷信的；</li>
          <li>⑧散布谣言，扰乱经济秩序和社会秩序的；</li>
          <li>⑨散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；</li>
          <li>⑩侮辱或者诽谤他人，侵害他人名誉、隐私和其他合法权益的；</li>
          <li>⑪法律、行政法规禁止的其他内容。</li>
          <li>（2）违反诚实信用原则的行为：</li>
          <li>①炒作并向商户收取费用或获取利益；</li>
          <li>②为获得利益或好处，参与或组织撰写及发布虚假点评；</li>
          <li>③以差评威胁、要求商户提供额外的利益或好处；</li>
          <li>④以虚构事实、侮辱、诽谤等方式恶意诋毁爱丽恩严网或商家的商誉；</li>
          <li>⑤进行其他其它影响点评客观、干扰扰乱爱丽恩严正常秩序的违规行为等。</li>
        </ul>
        <p>如您存在以上行为的，爱丽恩严有权采取如下行动：</p>
        <ul>
          <li>①屏蔽违规信息，视情节轻重情况发出警告；</li>
          <li>②清除其所有评价、图片，屏蔽其发布的涉及商业性炒作的帖子；</li>
          <li>③暂时限制/永久限制您使用账号在爱丽恩严平台上发布信息；</li>
          <li>④法律、行政法规、本条款及《用户协议》规定的其他方式。</li>
        </ul>
        <p>
          8.禁止用户将爱丽恩严以任何形式作为从事各种非法活动的场所、平台或媒介。未经爱丽恩严的授权或许可，用户不得借用爱丽恩严的名义从事任何商业活动，也不得以任何形式将爱丽恩严作为从事商业活动的场所、平台或媒介。
        </p>
        <p>
          9.您违反本条款、《用户协议》或爱丽恩严发布的其他任何服务规则，则爱丽恩严有权在法律允许的范围内采取一切必要的措施，包括但不限于删除用户发布的内容、取消用户在爱丽恩严获得的用户积分、星级、荣誉以及虚拟财富，暂停或终止您对爱丽恩严账号的使用，给爱丽恩严造成损失的，您应负全部赔偿责任，包括且不限于财产损害赔偿、名誉损害赔偿、诉讼费、律师费、公证费、交通费等因维权而产生的合理费用。爱丽恩严有权按照本条款及《用户协议》的相关规定对您的行为进行处理。
        </p>

        <h3>四、团购服务特别约定</h3>
        <p>1.您有权通过爱丽恩严平台浏览各项团购信息，购买团购券、优惠券并使用其参与相关商户提供的商品或服务。</p>
        <p>
          2.您知悉并同意，您在爱丽恩严平台上所浏览及购买的团购券、优惠券或其他消费产品均系商户所提供的商品或服务，如您因购买或使用该等商品或服务产生任何问题或争议，您应自行与相应商户协商解决。
        </p>

        <h3>五、信息评价等特别约定</h3>
        <p>
          1.您应确保具有相应的资格并符合在爱丽恩严开展信息评价的相应条件。
          如果因为您不具备相应资格或者条件的情形下通过爱丽恩严平台发布信息而引发任何法律责任，您应自行承担。因此给爱丽恩严平台造成损失的，您应予以全额赔偿。
        </p>
        <p>
          2.平台有可能在相关法律法规和政策的指引下，对评价、帖子等信息发布实施分级分类管理，建立发布者信用等级管理体系，建立黑名单管理制度等。
        </p>
        <p>3.用户在平台发布的文字、图片、视频、表演（直播）等信息均应遵守相关法律法规、规章、本条款及《用户协议》的相关规定。</p>
        <p>4.您同意：如出现以下任一情形的，爱丽恩严将视情节轻重采取删除信息、限制平台使用功能、停止您的账号使用等处理措施：</p>
        <ul>
          <li>（1）发布违反相关法律法规、规章、政策之规定或者违反本条款及相关服务规则的信息；</li>
          <li>（2）发布与主题无关的信息或评论，包含文字、图片、视频等；</li>
          <li>（3）发布可能存在交易风险的外部网站和APP信息，如发布社交、团购等外部网站或 APP的名称、超链接、二维码等信息；</li>
          <li>
            （4）发布的视频违反国家法律法规的相关要求，包括但不限于《广播电视管理条例》、《电影管理条例》、《互联网视听节目服务管理规定》、《广电总局关于加强互联网视听节目内容管理的通知》等的相关要求；
          </li>
          <li>
            （5）用户进行表演（直播）时违反国家法律法规的相关要求，包括但不限于《互联网文化管理暂行规定》、《互联网直播服务管理规定》等的相关要求；
          </li>
          <li>（6）其他违反及《用户协议》相关规定的情形。</li>
        </ul>

        <h3>六、关于服务终止的约定</h3>
        <p>
          1.您同意爱丽恩严有权随时修改或中断其向您提供的任何免费服务而无需事先通知您。您与爱丽恩严进行的有偿交易，您同意爱丽恩严有权在事先通知的情况下予以修改、中断，并按照公平、诚实信用、等价有偿的原则处理后续事宜。
        </p>
        <p>
          2.如您的账号同时符合以下条件，则爱丽恩严有权利终止您对爱丽恩严账号的使用。这将导致您的账号不能再登录爱丽恩严，相应服务亦同时终止：
        </p>
        <ul>
          <li>（1）连续六个月未登录；</li>
          <li>（2）不存在未到期的有效业务；</li>
          <li>（3）终止您的账号和服务的行为不违反相关法律法规的强制性规定。</li>
        </ul>
        <p>
          3.如您对本条款及其不时修订有任何异议的，您有权停止使用爱丽恩严的各项服务，或通过客服等渠道告知爱丽恩严停止对您提供服务。停止服务后，除法律法规另有明确规定外，爱丽恩严有权（但无义务）保留您的账号访问爱丽恩严的相关信息和数据，或留存、转发任何账号内的任何站内信或短消息。在此情况下，爱丽恩严没有义务（但有权利）向您或代为向商家或其他第三方传送任何未处理的信息或未完成的服务或交易信息。您同意爱丽恩严不就终止爱丽恩严服务而对您或任何第三方承担任何责任。
        </p>
        <p>
          4.您同意，您与爱丽恩严的合同关系终止后，爱丽恩严就您在使用爱丽恩严服务期间存在违法行为或违反本条款和／或其他服务规则的行为的，
          仍可依据本条款向您主张权利。
        </p>

        <h3>七、知识产权及其它权利</h3>
        <p>1.用户确认其已经仔细阅读并同意爱丽恩严关于知识产权等相关权利的一切声明。</p>
        <p>
          2.爱丽恩严平台及相关服务的运营系统由爱丽恩严自主开发、运营并提供技术支持，爱丽恩严对平台服务的开发和运营等过程中产生的所有数据和信息等享有全部权利。爱丽恩严提供各项服务时所依托软件的著作权、专利权，所使用的各项商标、商业形象、商业标识、技术诀窍，其著作权、商标权及其他各项相关权利均归爱丽恩严所有。
        </p>
        <p>
          3，您理解并同意，您在爱丽恩严发表的各项点评信息、文章、视频、反馈意见等所有信息及其衍生品的知识产权及所有权，适用《用户协议》中的相关约定。
        </p>

        <h3>八、免责事由</h3>
        <p>
          1.除非爱丽恩严以书面形式明确约定，爱丽恩严对于用户以任何方式（包括但不限于包含、经由、连接或下载）从爱丽恩严所获得的任何由商户发布的内容信息，包括但不限于商户信息、点评内容等，不保证其准确性、完整性、可靠性。用户应当自行审核判断相关信息，并对于用户因爱丽恩严上的内容信息而购买、获取的任何产品、服务、信息或资料自行承担责任和风险。用户因此受损的，爱丽恩严在法律允许的最大范围内予以免责。爱丽恩严内所有用户所发表的用户点评、商户或者产品信息等，仅代表用户个人观点，并不表示爱丽恩严赞同其观点或证实其描述，爱丽恩严在法律允许的最大范围内予以免责。
        </p>
        <p>
          2.您同意并理解，针对商户向您销售/提供的商品/服务，爱丽恩严并非您所购买的具体商品或者服务的生产者和销售者。您同意，针对该等商品或者服务以及相关售后服务中所产生的任何矛盾和纠纷均不应针对爱丽恩严提出。在法律允许的范围内，爱丽恩严不对上述商品/服务承担包括解释说明、赔偿在内的任何责任。
        </p>
        <p>
          3.您在爱丽恩严平台上传、发布任何信息或者内容的，应当自行保留备份。爱丽恩严不对用户所发布信息的保存、修改、删除或储存失败负责，对爱丽恩严上的非因爱丽恩严故意所导致的排字错误、疏忽等不承担责任。爱丽恩严有权但无义务，改善或更正爱丽恩严任何部分之疏漏、错误。
        </p>
        <p>
          4.您知悉爱丽恩严在其平台上所公布的各项排行榜单系根据用户真实评价、访问次数、浏览时长等数据自行生成，并无人工干预。该等榜单仅为您选择商品或服务提供参考，不涉及任何商户付费宣传，您应自行判断榜单中所列商品及服务的属性，爱丽恩严将不对此榜单中所列商品和服务做出任何形式的担保或保证。
        </p>
        <p>5.任何非经爱丽恩严正规渠道获得的中奖、优惠等活动或信息，爱丽恩严不承担法律责任。</p>
        <p>
          6.爱丽恩严因发现爱丽恩严上显现的团购、预订、消费买单等交易产品信息明显错误或缺货时，有权单方面作出修改，但该等修改不应视为爱丽恩严对您作出的任何承诺。
        </p>
        <p>
          7.爱丽恩严有权在法律允许范围内，在不通知您的情况下删除任何用户发布的不符合本条款及各项服务规则、《用户协议》以及法律规定的信息。爱丽恩严将不对删除该等信息给您造成的不便或损失承担任何责任。
        </p>
        <p>
          8.您同意，在法律许可范围内，爱丽恩严在任何情况下都不对任何个人或实体的直接、间接、偶然、特殊、惩罚性的损害或其他损害或损失承担责任，这些损害或损失包括但不限于：
        </p>
        <ul>
          <li>（1）您理解并同意，由于互联网的特殊性造成的爱丽恩严显示的信息所存在的滞后性或差错，爱丽恩严对此不承担任何责任；</li>
          <li>
            （2）您在使用爱丽恩严服务中，因第三方原因使您遭受侮辱、诽谤、不作为、淫秽、色情或亵渎事件，爱丽恩严在法律允许的范围内不承担法律责任；
          </li>
          <li>（3）《用户协议》中规定其他不可抗力及免责事由。</li>
        </ul>

        <h3>九、管辖、法律适用与争议解决</h3>
        <p>1.本协议的成立、生效、履行、解释与纠纷解决，适用中华人民共和国法律法规，并且排除一切冲突法规定的适用。</p>
        <p>
          2.您同意并理解，如您因通过爱丽恩严平台购买的任何商品或者服务产生任何纠纷的，爱丽恩严可在法律法规要求的范围内协助您与争议对方进行协商调解。您同意，爱丽恩严有权向争议双方了解情况，并将所了解的情况通过必要方式通知对方。但您理解并同意，爱丽恩严无任何义务对您与商家之间的任何争议承担任何责任。
        </p>
        <p>
          3.您与爱丽恩严均应当严格履行本协议及其补充协议所约定的各项义务，如发生争议或者纠纷，双方可以友好协商解决；协商不成的，任何一方均可向本协议签订地有管辖权的法院提起诉讼。
        </p>
        <p>本协议签订地：大连市中山区。</p>

        <h3>十、意见及反馈</h3>
        <p>如您对本协议有任何问题或建议，请在工作时间联系爱丽恩严客服部门。联系方式如下：</p>
        <ul>
          <li>您可以通过网站（ailien.shop）/App上提供的在线联系方式/客服系统与我们联系；</li>
        </ul>
      </div>
      <template #footer>
        <div class="dialog-footer-center">
          <el-button type="primary" @click="agreementDialogVisible = false"> 已阅读并同意协议内容 </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 隐私政策弹窗 -->
    <el-dialog v-model="privacyDialogVisible" title="隐私政策" width="800px" :close-on-click-modal="false">
      <div class="agreement-content">
        <p>生效日期：2024 年 10 月 29 日</p>
        <p>
          欢迎使用[U店在这]！我们深知个人信息对您的重要性，并将竭尽全力保护您的隐私。本隐私协议旨在向您说明我们如何收集、使用、存储和保护您的个人信息，以及您对个人信息享有的权利。
        </p>
        <p>一、定义</p>
        <p>
          1."个人信息"是指以电子或者其他方式记录的能够单独或者与其他信息结合识别特定自然人身份或者反映特定自然人活动情况的各种信息。
        </p>
        <p>2."我们"、"本公司" 或 "[U店在这]" 指 [APP 所属公司名称]。</p>
        <p>二、信息收集范围</p>
        <p>3.您在注册、登录 [U店在这] 时提供的信息，包括但不限于用户名、密码、手机号码、电子邮箱等。</p>
        <p>4.您在使用 [U店在这] 过程中产生的信息，如浏览记录、搜索记录、交易记录等。</p>
        <p>5.我们从第三方获取的信息，如您通过第三方平台登录 [U店在这] 时，我们可能会获取您在该第三方平台上的部分信息。</p>
        <p>三、信息使用目的</p>
        <p>6.为您提供个性化的服务和内容，满足您的需求。</p>
        <p>7.改善和优化 [U店在这] 的功能和体验。</p>
        <p>8.进行数据分析和研究，以提升我们的服务质量和效率。</p>
        <p>9.与您进行沟通和互动，回复您的咨询和反馈。</p>
        <p>10.遵守法律法规的要求，履行我们的法律义务。</p>
        <p>四、信息存储</p>
        <p>11.我们将按照法律法规的要求，将您的个人信息存储在安全的服务器上。</p>
        <p>12.我们会采取合理的技术和管理措施，确保您的个人信息的安全，防止其被未经授权的访问、披露、使用、修改或丢失。</p>
        <p>
          13.我们将根据您的使用情况和需求，确定个人信息的存储期限。在存储期限届满后，我们将对您的个人信息进行删除或匿名化处理。
        </p>
        <p>五、信息共享与披露</p>
        <p>14.我们不会向第三方出售、出租或交易您的个人信息。</p>
        <p>
          15.我们可能会在以下情况下与第三方共享您的个人信息： 在获得您的明确同意后；
          为了向您提供特定的服务，我们需要与第三方合作，此时我们会与该第三方签订保密协议，确保其按照本隐私协议的要求处理您的个人信息；
          为了遵守法律法规的要求，履行我们的法律义务。
        </p>
        <p>
          16.在以下情况下，我们可能会披露您的个人信息： 经您明确同意或授权； 根据法律法规的要求，向有权机关披露；
          为了维护我们的合法权益，如在涉及诉讼、仲裁等法律程序时。
        </p>
        <p>六、您的权利</p>
        <p>17.您有权访问、更正、删除您的个人信息。您可以通过 [U店在这] 的设置页面或联系我们的客服来行使这些权利。</p>
        <p>18.您有权撤回您对我们处理您个人信息的同意。但请注意，撤回同意可能会影响您使用 [U店在这] 的部分功能。</p>
        <p>19.您有权要求我们提供关于我们处理您个人信息的详细信息，包括处理目的、处理方式、处理的个人信息种类等。</p>
        <p>
          20.您有权要求我们限制对您个人信息的处理，例如在您认为我们处理您个人信息的行为违反法律法规的要求或您的合法权益受到侵害时。
        </p>
        <p>七、Cookie 和同类技术的使用</p>
        <p>21.我们可能会使用 Cookie 和同类技术来收集和存储您的信息，以便为您提供更好的服务和体验。</p>
        <p>
          22.您可以通过设置浏览器的隐私设置来拒绝接受 Cookie 和同类技术。但请注意，拒绝接受 Cookie和同类技术可能会影响您使用
          [U店在这] 的部分功能。
        </p>
        <p>八、未成年人保护</p>
        <p>23.[U店在这] 不面向未成年人提供服务。如果您是未成年人，请不要使用 [U店在这]。</p>
        <p>24.如果我们发现我们在未经授权的情况下收集了未成年人的个人信息，我们将立即采取措施删除该信息。</p>
        <p>九、隐私政策的变更</p>
        <p>25.我们可能会根据法律法规的要求、业务发展的需要或用户反馈等因素，对本隐私协议进行修订。</p>
        <p>
          26.修订后的隐私协议将在 [U店在这]上公布，并在公布后的特定时间生效。如果您在修订后的隐私协议生效后继续使用
          [U店在这]，则视为您同意修订后的隐私协议。
        </p>
        <p>十、联系方式</p>
        <p>如果您对本隐私协议有任何疑问、意见或建议，请通过以下方式与我们联系：</p>
        <p>[爱丽恩（大连）贸易有限公司]</p>
        <p>[辽宁省大连市中山区普照街44号国泰港汇中心一层F109-110、112-117、FGQ103号商铺]</p>
        <p>[0411-81820856]</p>
        <p>[15641179898@163.com]</p>
        <p>我们将尽快回复您的咨询和反馈。</p>
        <p>感谢您对 [U店在这]的信任和支持！</p>
      </div>
      <template #footer>
        <div class="dialog-footer-center">
          <el-button type="primary" @click="privacyDialogVisible = false"> 已阅读并同意协议内容 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="decorationAdd">
import { ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  ElMessage,
  type FormInstance,
  type UploadFile,
  type UploadProps,
  type UploadRequestOptions,
  type UploadUserFile
} from "element-plus";
import { Plus, ArrowDown, Delete, ZoomIn, VideoPlay, Picture } from "@element-plus/icons-vue";
import { saveOrUpdateDecoration, getDistrict } from "@/api/modules/storeDecoration";
import { uploadFileToOss } from "@/api/upload.js";
import { useSimpleUploadOverlayStore } from "@/stores/modules/simpleUploadOverlay";
import { localGet } from "@/utils";
import PcImagePreviewViewer from "@/components/pcMediaPreview/PcImagePreviewViewer.vue";
import PcVideoPreviewDialog from "@/components/pcMediaPreview/PcVideoPreviewDialog.vue";

const route = useRoute();
const router = useRouter();

const dialogVisible = ref(true);
const formRef = ref<FormInstance>();
const submitLoading = ref(false);

const formData = reactive({
  requirementTitle: "",
  renovationType: 1,
  houseArea: null as number | null,
  renovationBudget: null as number | null,
  detailedRequirement: "",
  expectedRenovationTime: "",
  attachmentUrls: [] as string[],
  contactName: "",
  contactPhone: "",
  city: "",
  cityAdcode: "",
  detailedAddress: "",
  agreementConfirmed: 0,
  storeId: localGet("createdId") || 0
});

const fileList = ref<UploadFile[]>([]);

/** 多选时 el-upload 会并发触发 http-request；串行化 + 整批共用一个全局上传弹层 */
let sequentialUploadTail = Promise.resolve();
let pendingBatchUploadCount = 0;
let batchHadUploadError = false;

function overlaySleep(ms: number) {
  return new Promise<void>(resolve => setTimeout(resolve, ms));
}

async function finishBatchUploadOverlay() {
  const overlay = useSimpleUploadOverlayStore();
  if (batchHadUploadError) {
    overlay.dismiss();
  } else {
    if (overlay.show && overlay.percent < 100) {
      overlay.completeSuccess();
    }
    await overlaySleep(420);
    overlay.dismiss();
  }
}

const imageViewerVisible = ref(false);
const imageViewerUrlList = ref<string[]>([]);
const imageViewerInitialIndex = ref(0);
const videoPreviewVisible = ref(false);
const videoPreviewUrl = ref("");

const ATTACHMENT_IMAGE_MAX_MB = 20;
const ATTACHMENT_VIDEO_MAX_MB = 200;

function isVideoUploadFile(file: UploadFile) {
  const resp = file.response as { isVideo?: boolean } | undefined;
  if (resp?.isVideo) return true;
  const raw = file.raw as File | undefined;
  if (raw && String(raw.type || "").startsWith("video/")) return true;
  const url = String(file.url || "");
  return /\.(mp4|mov|m4v|webm|3gp|ogg|avi)(\?|#|$)/i.test(url);
}

function isImageUploadFile(file: File) {
  const mime = String(file.type || "").toLowerCase();
  if (mime.startsWith("image/")) return true;
  return /\.(jpe?g|png|gif|webp|bmp)(\?.*)?$/i.test(file.name || "");
}

function isVideoUploadRawFile(file: File) {
  const mime = String(file.type || "").toLowerCase();
  if (mime.startsWith("video/")) return true;
  return /\.(mp4|m4v|webm|ogg|mov|avi|3gp)(\?.*)?$/i.test(file.name || "");
}

/** OSS 视频首帧封面（列表缩略图） */
function ossVideoSnapshotPosterUrl(videoUrl: string): string {
  const u = String(videoUrl || "").trim();
  if (!u || /^blob:/i.test(u) || /^data:/i.test(u)) return "";
  if (!/\.(mp4|mov|m4v|webm|3gp)(\?|#|$)/i.test(u)) return "";
  const sep = u.includes("?") ? "&" : "?";
  return `${u}${sep}x-oss-process=video/snapshot,t_0,f_jpg,w_400,h_400,m_fast`;
}

function getAttachmentVideoPoster(file: UploadFile): string | undefined {
  const cover = (file as UploadFile & { coverUrl?: string }).coverUrl;
  if (cover) return cover;
  const url = String(file.url || "");
  const poster = ossVideoSnapshotPosterUrl(url);
  return poster || undefined;
}

// 协议和隐私政策弹窗
const agreementDialogVisible = ref(false);
const privacyDialogVisible = ref(false);

// 城市选择相关
const showCityDialog = ref(false);
const selectedProvince = ref("");
const selectedCity = ref("");
const selectedDistrict = ref("");
const provinceOptions = ref<any[]>([]);
const cityOptions = ref<any[]>([]);
const districtOptions = ref<any[]>([]);
const selectedProvinceName = ref("");
const selectedCityName = ref("");
const selectedDistrictName = ref("");

// 禁用「当天之前」的日期（核心方法）
const disabledBeforeToday = date => {
  // 初始化今天的日期（重置时分秒为0，避免时间戳干扰）
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  // 核心判断：日期 < 今天 → 禁用；今天及以后 → 可用
  return date < today;
};
// 表单验证规则
const rules = reactive({
  requirementTitle: [{ required: true, message: "请输入需求标题", trigger: "blur" }],
  houseArea: [{ required: true, message: "请输入房屋面积", trigger: "blur" }],
  renovationBudget: [{ required: true, message: "请输入装修预算", trigger: "blur" }],
  expectedRenovationTime: [{ required: true, message: "请选择期望装修时间", trigger: "change" }],
  attachmentUrls: [
    {
      required: true,
      validator: (rule: any, value: any, callback: any) => {
        // 检查所有文件是否都已上传成功
        const successFiles = fileList.value.filter((file: UploadFile) => file.status === "success");
        if (successFiles.length === 0) {
          callback(new Error("请上传房屋图纸"));
        } else {
          callback();
        }
      },
      trigger: "change"
    }
  ],
  contactName: [{ required: true, message: "请输入联系人", trigger: "blur" }],
  contactPhone: [
    { required: true, message: "请输入联系电话", trigger: "blur" },
    { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码", trigger: "blur" }
  ],
  city: [{ required: true, message: "请选择所在城市", trigger: "change" }],
  detailedAddress: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
  agreementConfirmed: [
    {
      required: true,
      validator: (rule: any, value: any, callback: any) => {
        if (formData.agreementConfirmed !== 1) {
          callback(new Error("请阅读并同意用户服务协议和隐私政策"));
        } else {
          callback();
        }
      },
      trigger: "change"
    }
  ]
});

// 获取省份数据
const getProvinceData = async () => {
  try {
    const res: any = await getDistrict();
    if (res && res.data && res.data.districts && Array.isArray(res.data.districts) && res.data.districts.length > 0) {
      const chinaData = res.data.districts[0];
      if (chinaData && chinaData.districts && Array.isArray(chinaData.districts)) {
        provinceOptions.value = chinaData.districts;
      }
    }
  } catch (error) {
    console.error("获取省份数据失败:", error);
  }
};

// 省份变化时获取城市数据
const handleProvinceChange = async (provinceCode: string) => {
  selectedCity.value = "";
  selectedDistrict.value = "";
  cityOptions.value = [];
  districtOptions.value = [];
  selectedCityName.value = "";
  selectedDistrictName.value = "";

  if (!provinceCode) {
    selectedProvinceName.value = "";
    return;
  }

  const province = provinceOptions.value.find(p => p.adcode === provinceCode);
  selectedProvinceName.value = province ? province.name : "";

  try {
    const res: any = await getDistrict({ adCode: provinceCode });
    if (res && res.data && res.data.districts && Array.isArray(res.data.districts) && res.data.districts.length > 0) {
      const provinceData = res.data.districts[0];
      if (provinceData && provinceData.districts && Array.isArray(provinceData.districts)) {
        cityOptions.value = provinceData.districts;
      }
    }
  } catch (error) {
    console.error("获取城市数据失败:", error);
  }
};

// 城市变化时获取区县数据
const handleCitySelect = async (cityCode: string) => {
  selectedDistrict.value = "";
  districtOptions.value = [];
  selectedDistrictName.value = "";

  if (!cityCode) {
    selectedCityName.value = "";
    return;
  }

  const city = cityOptions.value.find(c => c.adcode === cityCode);
  selectedCityName.value = city ? city.name : "";

  try {
    const res: any = await getDistrict({ adCode: cityCode });
    if (res && res.data && res.data.districts && Array.isArray(res.data.districts) && res.data.districts.length > 0) {
      const cityData = res.data.districts[0];
      if (cityData && cityData.districts && Array.isArray(cityData.districts)) {
        districtOptions.value = cityData.districts;
      }
    }
  } catch (error) {
    console.error("获取区县数据失败:", error);
  }
};

// 区县选择
const handleDistrictSelect = (districtCode: string) => {
  if (!districtCode) {
    selectedDistrictName.value = "";
    return;
  }
  const district = districtOptions.value.find(d => d.adcode === districtCode);
  selectedDistrictName.value = district ? district.name : "";
};

// 确认城市选择
const handleConfirmCity = () => {
  if (!selectedProvince.value || !selectedCity.value) {
    ElMessage.warning("请至少选择省和市");
    return;
  }
  // 构建城市名称：省+市+区（如果有区）
  let cityName = selectedProvinceName.value + selectedCityName.value;
  if (selectedDistrictName.value) {
    cityName += selectedDistrictName.value;
  }
  formData.city = cityName;
  formData.cityAdcode = selectedDistrict.value || selectedCity.value || selectedProvince.value;
  showCityDialog.value = false;
};

// 清除城市选择
const handleCityClear = () => {
  formData.city = "";
  formData.cityAdcode = "";
  selectedProvince.value = "";
  selectedCity.value = "";
  selectedDistrict.value = "";
  selectedProvinceName.value = "";
  selectedCityName.value = "";
  selectedDistrictName.value = "";
  cityOptions.value = [];
  districtOptions.value = [];
};

// 房屋图纸上传前验证（图片 / 视频）
const beforeUpload: UploadProps["beforeUpload"] = (rawFile: File) => {
  const isVideo = isVideoUploadRawFile(rawFile);
  const isImage = isImageUploadFile(rawFile);

  if (!isImage && !isVideo) {
    ElMessage.error("仅支持上传图片或视频文件");
    return false;
  }
  const sizeMb = rawFile.size / 1024 / 1024;
  if (isVideo) {
    if (sizeMb > ATTACHMENT_VIDEO_MAX_MB) {
      ElMessage.error(`视频大小不能超过 ${ATTACHMENT_VIDEO_MAX_MB}MB`);
      return false;
    }
    return true;
  }
  if (sizeMb > ATTACHMENT_IMAGE_MAX_MB) {
    ElMessage.error(`图片大小不能超过 ${ATTACHMENT_IMAGE_MAX_MB}MB`);
    return false;
  }
  return true;
};

// 附件上传：OSS 直传（@/api/upload.js）；多文件一次 loading、请求串行
const handleAttachmentUpload = (options: UploadRequestOptions): Promise<void> => {
  const uploadFileItem = options.file as UploadUserFile;
  const raw = uploadFileItem.raw || uploadFileItem;
  const file = raw instanceof File ? raw : null;

  if (!file) {
    ElMessage.error("文件对象不存在");
    return Promise.resolve();
  }

  if (pendingBatchUploadCount === 0) {
    batchHadUploadError = false;
  }
  pendingBatchUploadCount++;
  if (pendingBatchUploadCount === 1) {
    useSimpleUploadOverlayStore().beginUpload();
  }

  const runOne = async (): Promise<void> => {
    uploadFileItem.status = "uploading";
    uploadFileItem.percentage = 0;
    if (isVideoUploadRawFile(file) && !uploadFileItem.url) {
      uploadFileItem.url = URL.createObjectURL(file);
    }

    try {
      const isVideo = isVideoUploadRawFile(file);
      const fileUrl = await uploadFileToOss(file, isVideo ? "video" : "image", {
        skipSimpleUploadOverlay: true as const
      });
      if (!fileUrl) {
        throw new Error("上传失败，未返回文件地址");
      }

      uploadFileItem.status = "success";
      uploadFileItem.percentage = 100;
      if (uploadFileItem.url && uploadFileItem.url.startsWith("blob:")) {
        URL.revokeObjectURL(uploadFileItem.url);
      }
      uploadFileItem.url = fileUrl;
      uploadFileItem.response = { url: fileUrl, isVideo };
      if (isVideo) {
        (uploadFileItem as UploadUserFile & { coverUrl?: string }).coverUrl = ossVideoSnapshotPosterUrl(fileUrl);
      }

      if (!formData.attachmentUrls.includes(fileUrl)) {
        formData.attachmentUrls.push(fileUrl);
      }
      options.onSuccess?.({ code: 200, data: fileUrl, url: fileUrl });
      formRef.value?.validateField("attachmentUrls");
    } catch (error: any) {
      batchHadUploadError = true;
      console.error("文件上传失败:", error);
      uploadFileItem.status = "fail";
      if (uploadFileItem.url && uploadFileItem.url.startsWith("blob:")) {
        URL.revokeObjectURL(uploadFileItem.url);
      }
      const index = fileList.value.findIndex(f => f.uid === uploadFileItem.uid);
      if (index > -1) {
        fileList.value.splice(index, 1);
      }
      if (error?.message === "上传失败，未返回文件地址") {
        ElMessage.error(error.message);
      }
      options.onError?.(error);
      throw error;
    } finally {
      pendingBatchUploadCount--;
      if (pendingBatchUploadCount === 0) {
        await finishBatchUploadOverlay();
      }
    }
  };

  const p = sequentialUploadTail.then(runOne);
  sequentialUploadTail = p.catch(() => {
    /* 保持队列继续，不因单张失败阻断后续文件 */
  });
  return p;
};

// 附件预览（图片 / 视频）
const handlePictureCardPreview = (file: UploadFile) => {
  if (!file.url) return;
  if (isVideoUploadFile(file)) {
    videoPreviewUrl.value = file.url;
    videoPreviewVisible.value = true;
    return;
  }
  const imageFiles = fileList.value.filter(item => item.url && !isVideoUploadFile(item));
  imageViewerUrlList.value = imageFiles.map(item => item.url || "");
  imageViewerInitialIndex.value = imageFiles.findIndex(item => item.uid === file.uid);
  if (imageViewerInitialIndex.value < 0) imageViewerInitialIndex.value = 0;
  imageViewerVisible.value = true;
};

const handleAttachmentRemove = (file: UploadFile) => {
  const index = fileList.value.findIndex(f => f.uid === file.uid);
  if (index > -1) {
    fileList.value.splice(index, 1);
  }
  handleRemove(file);
};

// 删除附件
const handleRemove = (file: UploadFile) => {
  if (file.url) {
    const index = formData.attachmentUrls.indexOf(file.url);
    if (index > -1) {
      formData.attachmentUrls.splice(index, 1);
    }
  }
  formRef.value?.validateField("attachmentUrls");
};

// 超出限制
const handleExceed = () => {
  ElMessage.warning("最多只能上传 9 个文件");
};

// 显示服务协议
const handleShowAgreement = () => {
  agreementDialogVisible.value = true;
};

// 显示隐私政策
const handleShowPrivacy = () => {
  privacyDialogVisible.value = true;
};

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return;

  await formRef.value.validate(async valid => {
    if (!valid) return;

    submitLoading.value = true;
    try {
      // 确保 attachmentUrls 是数组格式，包含所有上传成功的图片路径
      const attachmentUrlsList = Array.isArray(formData.attachmentUrls)
        ? formData.attachmentUrls.filter(url => url && url.trim() !== "")
        : [];

      console.log("提交时的附件列表:", attachmentUrlsList);

      // 构建提交参数 - attachmentUrls 字段存储图片路径数组
      const params: any = {
        id: 0, // 新建时传0
        requirementTitle: formData.requirementTitle,
        renovationType: formData.renovationType,
        houseArea: formData.houseArea || 0,
        renovationBudget: formData.renovationBudget || 0,
        detailedRequirement: formData.detailedRequirement || "",
        expectedRenovationTime: formData.expectedRenovationTime,
        // 将上传获取的图片路径数组存入 attachmentUrls 字段，传递给保存接口
        attachmentUrls: attachmentUrlsList,
        contactName: formData.contactName,
        contactPhone: formData.contactPhone,
        city: formData.city,
        cityAdcode: formData.cityAdcode || "",
        detailedAddress: formData.detailedAddress || "",
        agreementConfirmed: formData.agreementConfirmed,
        storeId: formData.storeId || 0,
        auditStatus: 0,
        auditReason: "", // 拒绝原因字段，新建时为空
        status: 0,
        hasCommunicated: false,
        inquiryCount: 0,
        viewCount: 0,
        createdTime: "",
        updatedTime: "",
        storeAddress: "",
        storeAvatar: "",
        storeBlurb: "",
        storeName: "",
        storeTel: ""
      };

      console.log("提交参数:", params);
      const res: any = await saveOrUpdateDecoration(params);

      if (res.code == 200 || res.code == 0) {
        ElMessage.success("创建成功");
        // 返回到列表页面
        router.push("/storeDecorationManagement/decorationManagement");
      } else {
        ElMessage.error(res.msg || "创建失败");
        // 创建失败也返回到列表页面
        router.push("/storeDecorationManagement/decorationManagement");
      }
    } catch (error: any) {
      ElMessage.error(error?.msg || error?.message || "创建失败");
      // 创建失败也返回到列表页面
      router.push("/storeDecorationManagement/decorationManagement");
    } finally {
      submitLoading.value = false;
    }
  });
};

// 关闭对话框
const handleClose = () => {
  dialogVisible.value = false;
  // 返回到列表页面
  router.push("/storeDecorationManagement/decorationManagement");
};

// 初始化
onMounted(() => {
  getProvinceData();
});
</script>

<style lang="scss" scoped>
.add-container {
  :deep(.el-dialog__body) {
    max-height: 70vh;
    padding: 20px;
    overflow-y: auto;
  }
  :deep(.el-form-item) {
    margin-bottom: 20px;
  }
  :deep(.el-radio-group) {
    display: flex;
    gap: 20px;
  }
  .upload-tip {
    margin-top: 5px;
    font-size: 12px;
    color: #999999;
  }
  .dialog-footer {
    padding: 20px 0 0;
    text-align: center;
  }
  :deep(.el-upload--picture-card) {
    width: 100px;
    height: 100px;
  }
  :deep(.el-upload-list--picture-card .el-upload-list__item) {
    width: 100px;
    height: 100px;
    overflow: hidden;
  }
  .attachment-upload-item {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .attachment-upload-thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #f0f2f5;
  }
  .attachment-upload-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #909399;
    background: #f0f2f5;
    .el-icon {
      font-size: 28px;
    }
  }
  .attachment-upload-handle {
    position: absolute;
    inset: 0;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    cursor: default;
    background: rgb(0 0 0 / 55%);
    opacity: 0;
    transition: opacity 0.2s;
  }
  .attachment-upload-item:hover .attachment-upload-handle {
    opacity: 1;
  }
  .attachment-upload-handle-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    color: #ffffff;
    cursor: pointer;
    .el-icon {
      font-size: 18px;
    }
    span {
      margin-top: 4px;
      font-size: 12px;
      line-height: 1;
    }
  }
  .city-selector {
    padding: 10px 0;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .agreement-content {
    height: 50vh;
    padding: 10px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.6;
    h3 {
      margin-top: 20px;
      margin-bottom: 10px;
      font-weight: 600;
    }
    p {
      margin-bottom: 10px;
    }
    ul {
      margin-bottom: 10px;
      margin-left: 20px;
      li {
        margin-bottom: 5px;
      }
    }
  }
  .dialog-footer-center {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    .el-button {
      width: 406px;
      height: 60px;
      color: #ffffff;
      background-color: #6c8ff8;
      border-radius: 10px;
    }
  }
}
</style>