ads_web/src/views/adManage/sp/campaigns/CreateCampaigns/index.vue

<template>
  <div>
    <el-card>
      <div style="padding-left: 5px">
        <!-- 广告活动 -->
        <el-form
          :label-position="labelPosition"
          ref="campaignFormRef"
          :model="campaignRuleForm"
          :rules="campaignRules"
          label-width="120px"
          class="demo-ruleForm"
          :size="formSize"
          status-icon>
          <el-card shadow="never" body-style="padding-bottom: 0 !important;" v-loading="campaignLoading">
            <div style="font-size: 24px; font-weight: bold">广告活动</div>
            <hr />
            <br />
            <el-form-item label="广告活动名称" prop="name" style="width: 350px">
              <el-input v-model="campaignRuleForm.name" placeholder="请输入广告活动名称" />
            </el-form-item>
            <el-form-item label="广告组合" prop="adMix">
              <el-select v-model="campaignRuleForm.adMix" clearable placeholder="请选择">
                <el-option v-for="item in adMixOptions" :key="item.portfolioId" :label="item.name" :value="item.portfolioId" />
              </el-select>
            </el-form-item>
            <el-form-item prop="startDate" label="开始日期" style="width: 350px">
              <el-date-picker
                v-model="campaignRuleForm.startDate"
                type="date"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                label="开始日期"
                placeholder="开始日期"
                style="width: 100%" />
            </el-form-item>
            <el-form-item prop="date2" label="结束日期" style="width: 350px">
              <el-date-picker
                v-model="campaignRuleForm.date2"
                type="date"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                label="结束日期"
                placeholder="结束日期"
                style="width: 100%" />
            </el-form-item>
            <el-form-item prop="budget" label="每日预算" style="width: 300px">
              <el-input
                v-model="campaignRuleForm.budget"
                maxlength="7"
                oninput="value=value.indexOf('.') > -1?value.slice(0, value.indexOf('.') + 3):value">
                <template #prepend>$</template>
              </el-input>
            </el-form-item>
            <el-form-item label="投放类型" prop="type" class="column-item">
              <el-radio-group v-model="campaignRuleForm.type" @click="changeType">
                <div>
                  <el-radio label="AUTO">自动</el-radio>
                  <div class="radio-description">定向与您推广商品相似的关键词和商品</div>
                </div>
                <div>
                  <el-radio label="MANUAL">手动</el-radio>
                  <div class="radio-description">选择关键词或商品以定向购物者搜索并设置自定义出价</div>
                </div>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="竞价策略" prop="bidStrategy" class="column-item column-margin-bottom">
              <el-radio-group v-model="campaignRuleForm.bidStrategy">
                <div>
                  <el-radio label="LEGACY_FOR_SALES" border>
                    动态竞价-仅降低
                    <div class="radio-description-2">当您的广告不太可能带来销售时，我们将实时降低您的竞价</div>
                  </el-radio>
                </div>
                <div>
                  <el-radio label="AUTO_FOR_SALES" border>
                    动态竞价-提高和降低
                    <div class="radio-description-2">
                      当您的广告很有可能带来销售时，我们将实时提高您的竞价（最高可达 100%），并在您的广告不太可能带来销售时降低您的竞价
                    </div>
                  </el-radio>
                </div>
                <el-radio label="MANUAL" border>
                  固定竞价
                  <div class="radio-description-2">我们将使用您的确切竞价和您设置的任何手动调整，而不会根据售出可能性对您的竞价进行更改</div>
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="按展示位置调整出价" prop="placeBid">
              <p style="color: #8e9196">除了出价策略外，您还可以将出价提高多达900%</p>
              <div class="gap-items">
                <div class="gap-item">搜索结果顶部(首页)</div>
                <el-input v-model="campaignRuleForm.placeBid" class="gap-item">
                  <template #append>%</template>
                </el-input>
              </div>
              <div class="gap-items">
                <div class="gap-item">商品首页</div>
                <el-input v-model="campaignRuleForm.firstPage" class="gap-item">
                  <template #append>%</template>
                </el-input>
              </div>
              <div class="gap-items" style="margin-bottom: 0">
                <div class="gap-item">搜索结果的其余位置</div>
                <el-input v-model="campaignRuleForm.other" class="gap-item">
                  <template #append>%</template>
                </el-input>
              </div>
            </el-form-item>
            <el-form-item style="margin-left: 48%">
              <el-button type="primary" plain @click="submitCampaignForm(campaignFormRef)">保存</el-button>
            </el-form-item>
          </el-card>
          <br />
          <!-- 广告组 -->
          <el-card shadow="never" body-style="padding-bottom: 0 !important;" v-loading="adGroupLoading">
            <div style="font-size: 20px; font-weight: bold">广告组</div>
            <hr />
            <br />
            <el-form ref="adGroupRuleFormRef" :model="adGroupRuleForm" :rules="adGroupRules">
              <el-form-item required label="广告组名称" prop="adGroupName" style="width: 350px; margin-top: 20px">
                <el-input v-model="adGroupRuleForm.adGroupName"  placeholder="请输入广告组名称"/>
              </el-form-item>
              <el-form-item required label="默认竞价" prop="defaultBidInp">
                <el-input v-model="adGroupRuleForm.defaultBidInp" minlength="3" maxlength="4" style="width: 200px">
                  <template #prepend>$</template>
                </el-input>
              </el-form-item>
              <el-form-item style="margin-left: 48%">
                <el-button type="primary" plain @click="submitGroupsForm(adGroupRuleFormRef)" :disabled="adGroupSave">保存</el-button>
              </el-form-item>
            </el-form>
          </el-card>
          <!-- 商品表格 -->
          <div style="margin-top: 20px; font-size: 24px; font-weight: bold">商品</div>
          <hr />
          <br />
          <el-form-item prop="commodity" style="width: 100%" v-loading="commodityLoading">
            <div style="width: 100%; height: 620px; display: flex; border: 1px solid #e5e7ec; border-radius: 6px">
              <div style="width: 50%; border-right: 1px solid #e5e7ec">
                <el-tabs v-model="activeName" class="demo-tabs">
                  <el-tab-pane label="搜索" name="first">
                    <div style="margin-bottom: 10px">
                      <el-input v-model="searchInp" placeholder="Please input" class="input-with-select" @change="inpChange" clearable>
                        <template #prepend>
                          <el-select v-model="select" style="width: 100px" @change="selChange">
                            <el-option label="名称" value="name" />
                            <el-option label="ASIN" value="asin" />
                            <el-option label="SKU" value="sku" />
                          </el-select>
                        </template>
                        <template #append>
                          <el-select v-model="select2" style="width: 100px">
                            <el-option label="最新优先" value="latest" />
                            <el-option label="最早优先" value="earliest" />
                            <el-option label="优选广告" value="optimal" />
                          </el-select>
                        </template>
                      </el-input>
                    </div>
                    <el-table
                      height="490"
                      style="width: 100%"
                      v-loading="loading"
                      :data="fullTableData"
                      :header-cell-style="headerCellStyle"
                      @selection-change="handleSelectionChange">
                      <el-table-column type="selection" width="50" />
                      <el-table-column prop="asin" label="商品">
                        <template #default="scope">
                          <div style="display: flex; align-items: center">
                            <div style="margin-right: 8px; line-height: normal">
                              <el-image class="img-box" :src="scope.row.image_link" />
                            </div>
                            <div>
                              <el-tooltip class="box-item" effect="dark" :content="scope.row.title" placement="top">
                                <div class="single-line">{{ scope.row.title ? scope.row.title : '--' }}</div>
                              </el-tooltip>
                              <div class="data-color">
                                <span style="font-weight: 500; color: rgb(30, 33, 41)">${{ scope.row.price ? scope.row.price : '--' }}</span>
                                <span style="margin: 0 5px; color: #cacdd4">|</span>
                                <span style="color: #6d7784">{{ scope.row.quantity }}</span>
                              </div>
                              <span>
                                ASIN: <span class="data-color" style="margin-right: 8px">{{ scope.row.asin ? scope.row.asin : '--' }}</span>
                              </span>
                              <span>
                                SKU: <span class="data-color">{{ scope.row.sku ? scope.row.sku : '--' }}</span>
                              </span>
                            </div>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="name" label="Name" width="120" align="right">
                        <template #header>
                          <el-button type="primary" size="normal" link @click="handleGoodsAdd">添加已选中</el-button>
                        </template>
                        <template #default="scope">
                          <el-button type="primary" size="small" @click="addSingleGoods(scope)" text>添加</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                    <el-pagination
                      @current-change="handleCurrentChange"
                      @size-change="handleSizeChange"
                      :current-page="currentPage"
                      :page-size="pageSize"
                      :total="totalItems"
                      layout="prev, pager, next" />
                  </el-tab-pane>
                  <el-tab-pane label="输入" name="second">
                    <el-input
                      style="padding: 10px"
                      v-model="goodsTextarea"
                      :rows="20"
                      type="textarea"
                      placeholder="请输入ASIN，多个ASIN使用逗号、空格或换行符分隔。(未完成)"
                      maxlength="11000" />
                    <div style="display: flex; flex-direction: row-reverse; margin-top: 10px">
                      <el-button v-for="button in buttons" :key="button.text" :type="button.type" link @click="addGods">{{ button.text }}</el-button>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
              <div style="width: 50%">
                <el-card class="box-card" shadow="never" style="border: 0">
                  <template #header>
                    <div class="card-header">
                      <span style="font-weight: 550; font-size: 15px; color: #1f2128">已添加: {{ adsTableData.length }}</span>
                      <el-button class="button" text bg @click="delAllGoods">全部删除</el-button>
                    </div>
                  </template>
                  <div class="card-body"></div>
                </el-card>
                <div style="padding: 0 10px 0 10px; margin-top: -12px">
                  <el-table
                    :data="adsTableData"
                    height="475"
                    style="width: 100%"
                    :header-cell-style="headerCellStyle"
                    @selection-change="handleAddedGoodsChange">
                    <el-table-column type="selection" width="50" />
                    <el-table-column prop="asin" label="ASIN">
                      <template #default="scope">
                        <div style="display: flex; align-items: center">
                          <div style="margin-right: 8px; line-height: normal">
                            <el-image class="img-box" :src="scope.row.image_link" />
                          </div>
                          <div>
                            <el-tooltip class="box-item" effect="dark" :content="scope.row.title" placement="top">
                              <div class="single-line">{{ scope.row.title ? scope.row.title : '--' }}</div>
                            </el-tooltip>
                            <div class="data-color">
                              <span style="font-weight: 500; color: rgb(30, 33, 41)">${{ scope.row.price ? scope.row.price : '--' }}</span>
                              <span style="margin: 0 5px; color: #cacdd4">|</span>
                              <span style="color: #6d7784">{{ scope.row.quantity }}</span>
                            </div>
                            <span
                              >ASIN:
                              <span class="data-color" style="margin-right: 8px">{{ scope.row.asin ? scope.row.asin : '--' }}</span>
                            </span>
                            <span
                              >SKU:
                              <span class="data-color">{{ scope.row.sku ? scope.row.sku : '--' }}</span>
                            </span>
                          </div>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="name" label="Name" width="120" align="right">
                      <template #header>
                        <el-button type="primary" size="normal" link @click="delSelectedGoods">删除已选中</el-button>
                      </template>
                      <template #default="scope">
                        <el-button type="primary" size="small" @click="delSingleGoods(scope)" text>删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div style="display: flex; justify-content: space-around; padding-top: 10px">
                  <el-button type="primary" plain :disabled="adsSave" @click="submitAdsForm">保存</el-button>
                </div>
              </div>
            </div>
          </el-form-item>
          <!-- 按目标组设置出价 -->
          <el-form
            :label-position="labelPosition"
            ref="targetGroupFormRef"
            :model="targetGroupRuleForm"
            :rules="targetGroupRules"
            label-width="120px"
            class="demo-ruleForm"
            :size="formSize"
            status-icon>
            <div class="column-item" v-if="campaignRuleForm.type == 'AUTO'">
              <div style="margin-top: 20px; font-size: 24px; font-weight: bold">按目标组设置出价</div>
              <hr />
              <br />
              <el-card shadow="never" v-if="campaignRuleForm.type == 'AUTO'" class="box-card" v-loading="targetGroupLoading">
                <div>
                  <div style="color: #8e9095">
                    <span>目标群体</span>
                    <span class="suggested-bid-item">建议竞价</span>
                    <span>竞价</span>
                  </div>
                  <div style="display: flex">
                    <el-switch v-model="targetGroupRuleForm.closeMatch" size="small" active-text="紧密匹配" @change="closeMatchChange" />
                    <span class="suggested-bid-item">--</span>
                    <el-form-item prop="closeMatchInp">
                      <el-input
                        :disabled="!targetGroupRuleForm.closeMatch"
                        v-model="targetGroupRuleForm.closeMatchInp"
                        minlength="3"
                        maxlength="4"
                        class="bid-input">
                        <template #prepend>$</template>
                      </el-input>
                    </el-form-item>
                  </div>
                  <div>
                    <div style="display: flex">
                      <el-switch v-model="targetGroupRuleForm.broadMatch" size="small" active-text="广泛匹配" @change="broadMatchChange" />
                      <span class="suggested-bid-item">--</span>
                      <el-form-item prop="broadMatchInp">
                        <el-input
                          :disabled="!targetGroupRuleForm.broadMatch"
                          v-model="targetGroupRuleForm.broadMatchInp"
                          minlength="3"
                          maxlength="4"
                          class="bid-input">
                          <template #prepend>$</template>
                        </el-input>
                      </el-form-item>
                    </div>
                  </div>
                  <div>
                    <div style="display: flex">
                      <el-switch v-model="targetGroupRuleForm.similarProducts" size="small" active-text="同类商品" @change="similarProductsChange" />
                      <span class="suggested-bid-item">--</span>
                      <el-form-item prop="similarProductsInp">
                        <el-input
                          :disabled="!targetGroupRuleForm.similarProducts"
                          v-model="targetGroupRuleForm.similarProductsInp"
                          minlength="3"
                          maxlength="4"
                          class="bid-input">
                          <template #prepend>$</template>
                        </el-input>
                      </el-form-item>
                    </div>
                  </div>
                  <div>
                    <div style="display: flex">
                      <el-switch v-model="targetGroupRuleForm.relatedProducts" size="small" active-text="关联商品" @change="relatedProductsChange" />
                      <span class="suggested-bid-item">--</span>
                      <el-form-item prop="relatedProductsInp">
                        <el-input
                          :disabled="!targetGroupRuleForm.relatedProducts"
                          v-model="targetGroupRuleForm.relatedProductsInp"
                          minlength="3"
                          maxlength="4"
                          class="bid-input">
                          <template #prepend>$</template>
                        </el-input>
                      </el-form-item>
                    </div>
                  </div>
                </div>
                <div style="display: flex; justify-content: space-around">
                  <el-button type="primary" plain :disabled="targetGroupBidSave" @click="submitTargetGroupForm">保存</el-button>
                </div>
              </el-card>
            </div>
          </el-form>

          <!-- 投放类型 -->
          <div class="column-item" v-if="campaignRuleForm.type == 'MANUAL'">
            <p style="color: #606266; font-weight: 450"><span style="color: #e47470">*</span> 投放类型</p>
            <el-radio-group v-model="ruleForm.targetType" @change="changeTargetType">
              <div style="display: flex">
                <el-radio label="keyWords" style="align-items: flex-start; margin-top: 5px">
                  <div style="margin-top: -4px">关键词投放</div>
                  <div>选择关键词以帮助您的商品出现在购物者搜索中</div>
                </el-radio>
              </div>
              <div>
                <el-radio label="Goods" style="align-items: flex-start; margin-top: 20px">
                  <div style="margin-top: -4px">商品投放</div>
                  <div>选择特定的商品, 分类, 品牌或者其他商品功能来定向您的广告</div>
                </el-radio>
              </div>
            </el-radio-group>
          </div>
          <!-- 关键词定向 -->
          <div
            style="font-size: 20px; font-weight: bold; margin-top: 30px"
            v-if="ruleForm.targetType == 'keyWords' && campaignRuleForm.type == 'MANUAL'">
            关键词定向
          </div>
          <hr v-if="ruleForm.targetType == 'keyWords' && campaignRuleForm.type == 'MANUAL'" />
          <el-form-item style="width: 100%; margin-top: 20px" v-if="ruleForm.targetType == 'keyWords' && campaignRuleForm.type == 'MANUAL'">
            <div style="width: 100%; height: 600px; display: flex; border: 1px solid #e5e7eb; border-radius: 6px" v-loading="keywordsLoading">
              <div style="width: 50%; border-right: 1px solid #e5e7eb">
                <el-tabs v-model="keyWordsTabs" class="demo-tabs" @tab-click="handleGoodsTabs">
                  <div style="margin: 8px">
                    <p style="margin-left: 8px; margin-bottom: -8px; font-weight: 500; color: #616266">竞价:</p>
                    <div style="display: flex; align-items: center">
                      <el-select v-model="bidType" class="m-2" placeholder="Select" style="width: 450px">
                        <el-option v-for="item in bidTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>
                      <el-input v-model="bidInput" :disabled="!(bidType == 'customBid')" placeholder="Please input">
                        <template #prepend>$</template>
                      </el-input>
                    </div>
                    <div style="display: flex">
                      <span style="margin: 0 10px 0 8px; font-weight: 500; color: #616266">匹配类型: </span>
                      <el-checkbox v-model="broadType" label="广泛" />
                      <el-checkbox v-model="phraseType" label="词组" />
                      <el-checkbox v-model="exactType" label="精确" />
                    </div>
                  </div>
                  <el-tab-pane label="建议" name="first">
                    <el-table
                      height="425"
                      style="width: 100%; padding-left: 5px"
                      v-loading="loading"
                      :data="keyWordsTableData"
                      :header-cell-style="headerCellStyle"
                      :header-row-style="changeKeyWordsTableHeader">
                      <el-table-column prop="asin" label="关键词"> </el-table-column>
                      <el-table-column prop="name" label="匹配类型"> </el-table-column>
                      <el-table-column prop="name" label="建议出价" width="120"> </el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="输入" name="second">
                    <el-input v-model="keyWordsTextarea" :rows="10" type="textarea" style="padding-left: 5px" />
                    <div style="display: flex; flex-direction: row-reverse; margin-top: 10px">
                      <el-button type="primary" text bg @click="addKeyWords">添加</el-button>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
              <div style="width: 50%">
                <el-card class="box-card" shadow="never" style="border: none">
                  <template #header>
                    <div class="card-header">
                      <span style="font-weight: 550; font-size: 15px; color: #1f2128">已添加: {{ addedKeyWordsTableData.length }}</span>
                      <span style="color: #529b2e">成功: {{ successCount }}</span>
                      <span style="color: #c45656">失败: {{ errorCount }}</span>
                      <el-button class="button" type="danger" text bg @click="delAllKeyWords">全部删除</el-button>
                    </div>
                  </template>
                  <div class="card-body" body-style="padding-bottom: -20px;">
                    <el-table
                      :data="addedKeyWordsTableData"
                      style="width: 100%; height: 450px"
                      :header-row-style="changeKeyWordsTableHeader"
                      :header-cell-style="headerCellStyle">
                      <el-table-column prop="keyword" label="关键词" width="auto" />
                      <el-table-column prop="matchType" label="匹配类型" />
                      <el-table-column prop="bid" label="出价">
                        <template #default="scope">
                          <el-input v-model="scope.row.bid" placeholder="Please input bid" />
                        </template>
                      </el-table-column>
                      <el-table-column prop="suggestBid" label="建议出价" />
                      <el-table-column prop="operate" label="操作" width="60" align="right">
                        <template #default="scope">
                          <el-button type="danger" size="small" link @click="delSingleKeyWord(scope)">删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </el-card>
                <div style="display: flex; justify-content: space-around; padding-top: 0px">
                  <el-button type="primary" plain @click="keyWordsSave" :disabled="!addedKeyWordsTableData.length">保存</el-button>
                </div>
              </div>
            </div>
          </el-form-item>

          <div
            style="font-size: 20px; font-weight: bold; margin-top: 30px"
            v-if="campaignRuleForm.type === 'AUTO' || (ruleForm.targetType === 'keyWords' && campaignRuleForm.type === 'MANUAL')">
            否定词
          </div>
          <hr v-if="campaignRuleForm.type === 'AUTO' || (ruleForm.targetType === 'keyWords' && campaignRuleForm.type === 'MANUAL')" />
          <!-- 否定词表格 -->
          <el-form-item
            style="width: 100%; margin-top: 20px"
            v-if="campaignRuleForm.type === 'AUTO' || (ruleForm.targetType === 'keyWords' && campaignRuleForm.type === 'MANUAL')">
            <div style="width: 100%; height: 520px; display: flex; border: 1px solid #e5e7ec; border-radius: 6px" v-loading="negativeWordsLoading">
              <div style="width: 50%; border-right: 1px solid #e5e7ec">
                <div style="margin: 10px 0">
                  <span style="margin-left: 25px; color: #e47470">*</span>
                  <span style="color: #666666; margin-right: 10px">匹配类型: </span>
                  <el-checkbox v-model="NEGATIVE_PHRASE" label="词组否定" />
                  <el-checkbox v-model="NEGATIVE_EXACT" label="精确否定" />
                </div>
                <el-input
                  v-model="negativeWordsTextarea"
                  :rows="17"
                  type="textarea"
                  placeholder="请输入关键词，多个关键词使用逗号或者换行符分隔。(最多添加1000个关键词)"
                  maxlength="11000"
                  style="padding: 0 20px" />
                <div style="display: flex; flex-direction: row-reverse; margin-top: 10px">
                  <el-button style="margin-right: 18px" type="primary" text bg @click="addNegative">添加</el-button>
                </div>
              </div>
              <div style="width: 50%">
                <el-card class="box-card" shadow="never" style="border: none">
                  <template #header>
                    <div class="card-header">
                      <span style="font-weight: 550; font-size: 15px; color: #1f2128">已添加: {{ addedData.length }}</span>
                      <el-button class="button" text bg @click="delAllNegative">全部删除</el-button>
                    </div>
                  </template>
                  <div class="card-body">
                    <el-table :data="tableData" style="width: 100%; height: 370px; padding-bottom: 0" :header-row-style="changeNegTableHeader">
                      <el-table-column prop="negativeWords" label="否定词" width="auto" />
                      <el-table-column prop="operate" label="操作" width="60" align="right">
                        <template #default="scope">
                          <el-button type="primary" size="small" @click="delSingleNegative(scope)" text>删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </el-card>
                <div style="display: flex; justify-content: space-around">
                  <el-button type="primary" plain @click="negativeWordsSave" :disabled="!negativeList.length">保存</el-button>
                </div>
              </div>
            </div>
          </el-form-item>

          <!-- 商品定向 -->
          <div style="font-size: 20px; font-weight: bold; margin-top: 30px" v-if="ruleForm.targetType == 'Goods'">商品定向</div>
          <hr v-if="ruleForm.targetType == 'Goods'" />
          <el-form-item style="width: 100%; margin-top: 20px" v-if="ruleForm.targetType == 'Goods'">
            <div
              style="width: 100%; height: 600px; display: flex; border: 1px solid #e5e7eb; border-radius: 6px"
              v-loading="productOrientationLoading">
              <div style="width: 50%; border-right: 1px solid #e5e7eb">
                <el-tabs
                  type="border-card"
                  stretch
                  class="goods-orientation-tabs"
                  style="border: 0; border-right: 0; border-bottom-left-radius: 6px; border-top-left-radius: 5px; overflow: hidden">
                  <el-tab-pane label="品类" style="border-top-left-radius: 6px">
                    <div style="display: flex; align-items: center">
                      <span style="width: 40px">竞价:</span>
                      <el-select v-model="categoryBiddingType" @change="singleGoodsBidSelectChanged" class="m-2" placeholder="Select">
                        <el-option v-for="item in categoryBiddingTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>
                      <el-input v-model="singleGoodsBidInput" :disabled="categoryBiddingType === 'defaultBid'" style="width: 200px">
                        <template #prepend>$</template>
                      </el-input>
                    </div>

                    <el-tabs v-model="categoryTabs" class="category-tabs">
                      <el-tab-pane label="建议" name="first">
                        <el-table :data="proposalTableData" style="width: 100%" height="422">
                          <el-table-column prop="proposal" label="建议" width="520">
                            <template #header> 0建议 </template>
                          </el-table-column>
                          <el-table-column prop="address" label="Address">
                            <template #header>
                              <el-button type="primary" size="normal" link @click="handleGoodsAdd">全部添加</el-button>
                            </template>
                            <template #default="scope">
                              <el-button type="primary" size="small" @click="addSingleGoods(scope)" text>添加</el-button>
                            </template>
                          </el-table-column>
                        </el-table>
                      </el-tab-pane>
                      <el-tab-pane label="搜索" name="second">
                        <el-input placeholder="请输入关键词过滤" />
                        <el-scrollbar height="390px">
                          <el-tree :data="searchClassifyTableData" :props="defaultProps" :expand-on-click-node="false">
                            <template #default="{ node, data }">
                              <span class="custom-tree-node">
                                <span style="width: 75%">{{ node.label }}</span>
                                <span style="color: rgb(50, 108, 216)" v-if="data.ta == true">
                                  <a @click="refine(data)"> 细化 </a>
                                  <a style="margin-left: 8px" @click="orientate(node, data)"> 定向 </a>
                                </span>
                              </span>
                            </template>
                          </el-tree>
                        </el-scrollbar>
                        <el-dialog v-model="visible" :title="`细化分类: ${dialogTitle}`" @close="dialogClose" destroy-on-close>
                          <div style="display: flex; justify-content: space-between">
                            <span>根据特定品牌、价格范围、星级和Prime配送资格，细化分类</span>
                            <span>
                              <el-checkbox v-model="dialogForm.isCount" label="显示商品数量" @change="isCountChanged" />
                            </span>
                          </div>
                          <el-form :model="dialogForm" :rules="dialogRules" ref="dialogFormRef" style="margin-top: 20px">
                            <el-form-item style="padding-left: 140px">
                              <span style="margin-right: 10px; color: #616266; font-weight: 500">品牌</span>
                              <el-select
                                v-model="dialogForm.dialogselectValue"
                                @change="dialogSelectChange"
                                multiple
                                placeholder="请选择"
                                :loading="dialogSelectLoading">
                                <el-option v-for="item in dialogForm.dialogOptions" :key="item.value" :label="item.label" :value="item.value" />
                              </el-select>
                            </el-form-item>
                            <el-form-item prop="prices" style="padding-left: 112px; margin-top: 10px">
                              <span style="margin-right: 10px; color: #616266; font-weight: 500">价格范围</span>
                              <el-input-number v-model="dialogForm.prices.lowest" :min="1" :controls="false" placeholder="无最低商品价格" />
                              --
                              <el-input-number v-model="dialogForm.prices.highest" :min="1" :controls="false" placeholder="无最高商品价格" />
                            </el-form-item>
                            <el-form-item prop="starRating" style="padding-left: 85px; margin-top: 10px">
                              <span style="margin-right: 15px; color: #616266; font-weight: 500">查看星级评定</span>
                              <el-slider v-model="dialogForm.starRating" range show-stops :max="5" :marks="marks" style="width: 70%" />
                            </el-form-item>
                            <el-form-item prop="delivery" style="padding-left: 140px; margin-top: 30px">
                              <span style="margin-right: 10px; color: #616266; font-weight: 500">配送</span>
                              <el-radio-group v-model="dialogForm.delivery">
                                <el-radio label="all" style="font-weight: 400">所有</el-radio>
                                <el-radio label="eligible" style="font-weight: 400">具备Prime资格</el-radio>
                                <el-radio label="diseligible" style="font-weight: 400">不具备Prime资格</el-radio>
                              </el-radio-group>
                            </el-form-item>
                          </el-form>
                          <template #footer>
                            <div style="display: flex; justify-content: space-between">
                              <span v-loading="countLoadig"
                                >定位到的商品数量:
                                <span v-if="dialogForm.isCount == true">{{ commodityCount[0]?.min }} - {{ commodityCount[0]?.max }}</span></span
                              >
                              <span class="dialog-footer">
                                <el-button @click="visible = false">取消</el-button>
                                <el-button type="primary" @click="dialogFormSubmit">确定</el-button>
                              </span>
                            </div>
                          </template>
                        </el-dialog>
                      </el-tab-pane>
                    </el-tabs>
                  </el-tab-pane>
                  <el-tab-pane label="单个商品">
                    <div style="display: flex; align-items: center">
                      <span style="width: 40px">竞价:</span>
                      <el-select class="m-2" v-model="singleGoodsBidSelect" @change="singleGoodsBidSelectChanged">
                        <el-option v-for="item in singleGoodsBidTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
                      </el-select>
                      <el-input v-model="singleGoodsBidInput" :disabled="singleGoodsBidSelect == 'defaultBid'" style="width: 200px">
                        <template #prepend>$</template>
                      </el-input>
                      <div style="margin-left: 20px">
                        <span style="margin-right: 10px">类型:</span>
                        <el-checkbox v-model="expand" label="扩展" />
                        <el-checkbox v-model="accurate" label="精准" />
                      </div>
                    </div>
                    <el-tabs v-model="singleGoodsTabs" class="category-tabs">
                      <el-tab-pane label="建议" name="first">
                        <el-table :data="proposalTableData" style="width: 100%" height="342">
                          <el-table-column prop="proposal" label="商品" width="520" />
                          <el-table-column prop="address" label="类型" />
                          <el-table-column prop="operational" label="操作" />
                        </el-table>
                      </el-tab-pane>
                      <el-tab-pane label="搜索" name="second">
                        <el-input v-model="singleGoodsSearchInp" @change="singleGoodsSearchChaneged" placeholder="按ASIN搜索"></el-input>
                        <el-table :data="searchTableData" style="width: 100%" height="309">
                          <el-table-column prop="asin" label="商品" width="520">
                            <template #default="{ row }">
                              <div style="display: flex; align-items: center">
                                <img :src="row.image_link" style="width: 40px; height: 40px; margin-right: 10px" />
                                <span>{{ row.title }}</span>
                              </div>
                            </template>
                          </el-table-column>
                          <el-table-column prop="productTypes" label="类型">
                            <template #default="scope">
                              <div v-if="expand">扩展</div>
                              <div v-if="accurate">精准</div>
                            </template>
                          </el-table-column>
                          <el-table-column prop="operational" label="操作">
                            <template #default="scope">
                              <el-button class="button" text @click="addSingleSearch(scope)">添加</el-button>
                            </template>
                          </el-table-column>
                        </el-table>
                      </el-tab-pane>
                      <!-- TODO: 商品定向TextArea -->
                      <el-tab-pane label="输入" name="third">待完成</el-tab-pane>
                    </el-tabs>
                  </el-tab-pane>
                </el-tabs>
              </div>
              <div style="width: 50%">
                <el-card class="box-card" shadow="never" style="border: none">
                  <template #header>
                    <div class="card-header">
                      <span style="font-weight: 550; font-size: 15px; color: #1f2128">已添加: {{ productOrientationTableData.length }}</span>
                      <el-button class="button" text bg @click="delAllCna">全部删除</el-button>
                    </div>
                  </template>
                  <div class="card-body">
                    <el-table
                      height="460"
                      :data="productOrientationTableData"
                      style="width: 100%"
                      :header-row-style="changeKeyWordsTableHeader"
                      :header-cell-style="headerCellStyle">
                      <el-table-column prop="cna" label="分类 & 商品" width="300">
                        <template #default="scope">
                          <div v-if="scope.row.cna || scope.row.classification">
                            分类: <span style="color: #000000">{{ scope.row.cna ? scope.row.cna : scope.row.classification }}</span>
                          </div>
                          <div v-if="scope.row.asin">
                            {{ scope.row.asin ? scope.row.asin : '--' }}
                          </div>
                          <div v-if="scope.row.brand">
                            品牌: <span style="color: #000000">{{ scope.row.brand }}</span>
                          </div>
                          <div v-if="scope.row.low_price || scope.row.high_price">
                            品牌价格:
                            <span style="color: #000000">
                              {{ scope.row.low_price ? '$' + scope.row.low_price : '--' }} -
                              {{ scope.row.high_price ? '$' + scope.row.high_price : '--' }}
                            </span>
                          </div>
                          <div v-if="scope.row.low_rating || scope.row.high_rating">
                            评分: <span style="color: #000000">{{ scope.row.low_rating }} - {{ scope.row.high_rating }}</span>
                          </div>
                          <div v-if="scope.row.deliveryText">
                            配送: <span style="color: #000000">{{ scope.row.deliveryText }}</span>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="type" label="类型">
                        <template #default="scope">
                          {{ scope.row.productTypeText ? scope.row.productTypeText : '--' }}
                        </template>
                      </el-table-column>
                      <el-table-column prop="bid" label="竞价">
                        <template #default="scope">
                          <el-input-number v-model="scope.row.bid" :min="0.02" :max="1000000" :controls="false" size="small" />
                        </template>
                      </el-table-column>
                      <el-table-column prop="operate" label="操作" width="60" align="right">
                        <template #default="scope">
                          <el-button text size="small" @click="delCna(scope.$index)">删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </el-card>
                <div style="display: flex; justify-content: space-around; margin-top: -8px">
                  <el-button type="primary" plain @click="productTagetSave">保存</el-button>
                </div>
              </div>
            </div>
          </el-form-item>

          <div
            style="font-size: 20px; font-weight: bold; margin-top: 30px"
            v-if="campaignRuleForm.type == 'AUTO' || (ruleForm.targetType == 'Goods' && campaignRuleForm.type === 'MANUAL')">
            否定商品
          </div>
          <hr v-if="campaignRuleForm.type == 'AUTO' || (ruleForm.targetType == 'Goods' && campaignRuleForm.type === 'MANUAL')" />
          <el-form-item
            prop="matchType"
            style="width: 100%; margin-top: 20px"
            v-if="campaignRuleForm.type == 'AUTO' || (ruleForm.targetType == 'Goods' && campaignRuleForm.type === 'MANUAL')">
            <div style="width: 100%; height: 600px; display: flex; border: 1px solid #e5e7ec; border-radius: 6px" v-loading="negativeGoodsLoading">
              <div style="width: 50%; border-right: 1px solid #e5e7ec">
                <el-tabs v-model="negativeTabs" class="demo-tabs" @tab-click="handleNegGoodsTabs">
                  <el-tab-pane label="搜索" name="first">
                    <div style="margin-bottom: 10px">
                      <el-input placeholder="按ASIN搜索" v-model="negativeInput" @change="searchNegativeGoods" clearable />
                    </div>
                    <el-table
                      height="495"
                      style="width: 100%"
                      v-loading="loading"
                      :data="negativeTableData"
                      :header-cell-style="headerCellStyle"
                      :show-header="false">
                      <el-table-column prop="asin" label="商品">
                        <template #default="scope">
                          <div style="display: flex; align-items: center">
                            <div style="margin-right: 8px; line-height: normal">
                              <el-image class="img-box" :src="scope.row.image_link" />
                            </div>
                            <div>
                              <el-tooltip class="box-item" effect="dark" :content="scope.row.title" placement="top">
                                <div class="single-line">{{ scope.row.title ? scope.row.title : '--' }}</div>
                              </el-tooltip>
                              <span>
                                ASIN: <span class="data-color" style="margin-right: 8px">{{ scope.row.asin ? scope.row.asin : '--' }}</span>
                              </span>
                            </div>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column prop="name" label="Name" width="120" align="right">
                        <template #header> </template>
                        <template #default="scope">
                          <el-button type="primary" size="small" @click="addSingleNegativeGoods(scope)" text>添加</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="输入" name="second">
                    <el-input
                      v-model="ruleForm.negativeGoodsTextarea"
                      :rows="17"
                      type="textarea"
                      placeholder="未完成"
                      maxlength="11000"
                      style="padding: 10px 10px" />
                    <div style="display: flex; flex-direction: row-reverse; margin-top: 10px">
                      <el-button style="margin-right: 10px" type="primary" text bg @click="addNegativeGoods">添加</el-button>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
              <div style="width: 50%">
                <el-card class="box-card" shadow="never" style="border: none">
                  <template #header>
                    <div class="card-header">
                      <span style="font-weight: 550; font-size: 15px; color: #1f2128">已添加: {{ addedNegetiveTableData.length }}</span>
                      <el-button class="button" text bg @click="delAllNegativeGoods">全部删除</el-button>
                    </div>
                  </template>
                  <div class="card-body"></div>
                </el-card>
                <div style="padding: 0 10px 0 10px; margin-top: -30px">
                  <el-table
                    :data="addedNegetiveTableData"
                    height="473"
                    style="width: 100%"
                    :header-cell-style="headerCellStyle"
                    @selection-change="handleAddedNegGoods">
                    <el-table-column prop="asin" label="商品">
                      <template #default="scope">
                        <div style="display: flex; align-items: center">
                          <div style="margin-right: 8px; line-height: normal">
                            <el-image class="img-box" :src="scope.row.image_link" />
                          </div>
                          <div>
                            <el-tooltip class="box-item" effect="dark" :content="scope.row.title" placement="top">
                              <div class="single-line">{{ scope.row.title ? scope.row.title : '--' }}</div>
                            </el-tooltip>
                            <span
                              >ASIN:
                              <span class="data-color" style="margin-right: 8px">{{ scope.row.asin ? scope.row.asin : '--' }}</span>
                            </span>
                          </div>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="120" align="right">
                      <template #default="scope">
                        <el-button type="primary" size="small" @click="delSingleNegativeGoods(scope)" text>删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div style="display: flex; justify-content: space-around; padding-top: 10px">
                  <el-button plain type="primary" @click="negativeGoodsSave" :disabled="!addedNegetiveTableData.length">保存</el-button>
                </div>
              </div>
            </div>
          </el-form-item>

          <!-- <br />
          <el-form-item>
            <el-button size="large" @click="resetForm(ruleFormRef)">取消</el-button>
            <el-button size="large" type="primary" plain @click="submitForm(ruleFormRef)">保存</el-button>
          </el-form-item> -->
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, computed, watch } from 'vue'
import type { CSSProperties } from 'vue'
import { useRoute } from 'vue-router'
import type { FormInstance, FormRules, TabsPaneContext } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useShopInfo } from '/@/stores/shopInfo'
import { usePublicData } from '/@/stores/publicData'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
import { request } from '/@/utils/service'

const negativeTableData = ref([])
const addedNegetiveTableData = ref([])
const router = useRouter()
const route = useRoute()
const shopInfo = useShopInfo()
const { profile } = storeToRefs(shopInfo)
const loading = ref(true)
const fullTableData = ref([]) // 表格数据
let addedData = ref([]) // 已添加的商品数据
let adsTableData = ref([])
let selections = [] // 添加选中的项
let addedSels = [] // 删除选中的项
const currentPage = ref() // 当前页
const pageSize = ref(20) // 每页显示条目数
const totalItems = ref() // 数据总量
const showCard = ref(false)
const activeName = ref('first')
const negativeTabs = ref('first')
const keyWordsTabs = ref('first')
const productOrientationTabs = ref('first')
const categoryTabs = ref('first')
const singleGoodsTabs = ref('first')
const searchInp = ref('')
const select = ref('name')
const select2 = ref('latest')
const buttons = [{ type: 'primary', text: '添加' }] as const
const negativeInput = ref('')

// 表单相关数据
const campaignLoading = ref(false)
const formSize = ref('default')
const labelPosition = ref('top')
// ------------------------------------------广告活动------------------------------------------
let respCampaignId = ref('')
let adGroupSave = ref(true)
const campaignFormRef = ref<FormInstance>()
interface CampaignForm {
  name: string
  adMix: string
  count: string
  startDate: string
  date2: string
  budget: string
  delivery: boolean
  type: string
  bidStrategy: string
  placeBid: string
  firstPage: string
  other: string
}
const campaignRuleForm = reactive<CampaignForm>({
  name: '',
  adMix: '',
  count: '',
  startDate: '',
  date2: '',
  budget: '',
  delivery: false,
  type: 'AUTO',
  bidStrategy: 'LEGACY_FOR_SALES',
  placeBid: '',
  firstPage: '',
  other: '',
})
const campaignRules = computed(() => ({
  name: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }],
  adMix: [{ required: false, message: 'Please select Activity zone', trigger: 'change' }],
  count: [{ required: true, message: 'Please select Activity count', trigger: 'change' }],
  startDate: [{ required: true, type: 'date', message: 'Please pick a date', trigger: 'change' }],
  date2: [{ required: false, type: 'date', message: 'Please pick a time', trigger: 'change' }],
  budget: [
    { required: true, message: '请输入预算', trigger: 'blur' },
    { pattern: /^(?:[1-9]\d{0,5}|1000000)(?:\.\d{1,2})?$/, message: '预算必须是1到1000000之间的数字，小数点后最多两位', trigger: 'blur' },
  ],
  type: [{ required: false, trigger: 'change' }],
  bidStrategy: [{ required: true, message: 'Please select activity resource', trigger: 'change' }],
  placeBid: [{ required: false, pattern: /^[0-9]{1,3}$/, message: '必须是0~900之间的整数百分比', trigger: 'change' }],
  firstPage: [{ required: false, pattern: /^[0-9]{1,3}$/, message: '必须是0~900之间的整数百分比', trigger: 'change' }],
  other: [{ required: false, pattern: /^[0-9]{1,3}$/, message: '必须是0~900之间的整数百分比', trigger: 'change' }],
}))

async function createCampaigns() {
  const previousRespCampaignId = respCampaignId.value
  try {
    // 必需字段列表
    const requiredFields = [
      { key: 'profile_id', value: profile.value.profile_id },
      { key: 'name', value: campaignRuleForm.name },
      { key: 'startDate', value: campaignRuleForm.startDate },
      { key: 'targetingType', value: campaignRuleForm.type },
      { key: 'strategy', value: campaignRuleForm.bidStrategy },
      { key: 'budget', value: campaignRuleForm.budget },
    ]

    // 检查每个必需字段
    requiredFields.forEach((field) => {
      if (!field.value) {
        throw new Error(`缺少必需的字段: ${field.key}`)
      }
    })

    // 构建请求数据
    const requestData = {
      profile_id: profile.value.profile_id,
      name: campaignRuleForm.name,
      startDate: campaignRuleForm.startDate,
      budget: campaignRuleForm.budget,
      targetingType: campaignRuleForm.type,
      strategy: campaignRuleForm.bidStrategy,
      state: 'PAUSED',
      // 可选字段
      endDate: campaignRuleForm.date2,
      t_percentage: campaignRuleForm.placeBid,
      p_percentage: campaignRuleForm.firstPage,
      r_percentage: campaignRuleForm.other,
      portfolioId: campaignRuleForm.adMix,
    }

    // 过滤掉 undefined 或空的可选字段
    const filteredRequestData = Object.fromEntries(Object.entries(requestData).filter(([_, v]) => v != null))

    const resp = await request({
      url: '/api/ad_manage/spcampaigns/create/',
      method: 'POST',
      data: filteredRequestData,
    })

    if (resp.data && resp.data.campaignId) {
      // 确保 resp.data 和 resp.data.campaignId 存在
      respCampaignId.value = resp.data.campaignId // 更新 respCampaignId
      adGroupSave.value = false
      campaignLoading.value = false
      ElMessage({
        message: '广告活动创建成功',
        type: 'success',
      })
    } else {
      campaignLoading.value = false
      ElMessage.error('广告活动创建失败!')
      // 如果创建失败，恢复到之前的 respCampaignId
      respCampaignId.value = previousRespCampaignId
    }
  } catch (error) {
    console.error('请求失败：', error)
    // 如果请求失败，也恢复到之前的 respCampaignId
    respCampaignId.value = previousRespCampaignId
  }
}

const adMixOptions = ref([])
async function getAdMix() {
  try { 
    const resp = await request({
      url: '/api/ad_manage/portfolios/select_list',
      method: 'GET',
    })
    adMixOptions.value = resp.data
  } catch (error) {
    console.log('error:', error)
  }
}

async function submitCampaignForm(formEl: FormInstance | undefined) {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      campaignLoading.value = true
      createCampaigns()
    } else {
      console.log('error submit!', fields)
    }
  })
}

async function submitForm(formEl: FormInstance | undefined) {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      createCampaigns()
    } else {
      console.log('error submit!', fields)
    }
  })
}

function resetForm(formEl: FormInstance | undefined) {
  if (!formEl) return
  formEl.resetFields()
}

// ------------------------------------------------------广告组------------------------------------------------------
const adGroupRuleFormRef = ref<FormInstance>()
interface AdGroupForm {
  adGroupName: string
  defaultBidInp: string
}
const adGroupRuleForm = reactive<AdGroupForm>({
  adGroupName: '',
  defaultBidInp: '',
})
const adGroupRules = computed(() => ({
  adGroupName: [{ required: true, message: '请输入广告组名称', trigger: 'blur' }],
  defaultBidInp: [
    { required: true, message: '请输入默认出价', trigger: 'blur' },
    { validator: validateDefaultBidInp, trigger: 'blur' },
  ],
}))

function validateDefaultBidInp(rule, value, callback) {
  // 通用校验方法
  if (value === '') {
    callback(new Error('请输入默认出价'))
  } else if (!/^(0\.0[2-9]|0\.[1-9]\d?|[1-9]\d{0,2}(\.\d{1,2})?|1000(\.0{1,2})?)$/.test(value)) {
    callback(new Error('最小不低于0.02,最大不超过1000'))
  } else {
    const numericValue = parseFloat(value)
    const numericBudget = parseFloat(campaignRuleForm.budget)
    if (numericValue > numericBudget) {
      callback(new Error('默认出价不能大于当前预算'))
    } else {
      callback()
    }
  }
}

let respAdGroupId = ref('')
let adsSave = ref(true)
async function createGroups() {
  try {
    // 构建请求数据
    const requestData = {
      profile_id: profile.value.profile_id,
      campaignId: respCampaignId.value,
      name: adGroupRuleForm.adGroupName,
      defaultBid: adGroupRuleForm.defaultBidInp,
      state: 'PAUSED',
    }

    // 过滤掉 undefined 或空的可选字段
    const filteredRequestData = Object.fromEntries(Object.entries(requestData).filter(([_, v]) => v != null))

    const resp = await request({
      url: '/api/ad_manage/spgroups/create/',
      method: 'POST',
      data: filteredRequestData,
    })
    respAdGroupId.value = resp.data.adGroupId
    console.log('🚀 ~ createGroups ~ resp-->>', resp)
    adGroupLoading.value = false
    if (respAdGroupId.value) {
      ElMessage({
        message: '广告组创建成功',
        type: 'success',
      })
    } else {
      ElMessage.error('广告组创建失败!')
    }
  } catch (error) {
    console.error('请求失败：', error)
  }
}

async function submitGroupsForm(formEl: FormInstance | undefined) {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      adGroupLoading.value = true
      console.log('submit!')
      createGroups()
    } else {
      console.log('error submit!', fields)
    }
  })
}

// ------------------------------------------商品------------------------------------------
const goodsTextarea = ref('')
const adGroupLoading = ref(false)
const commodityLoading = ref(false)
let addedAdsTableItems = ref([])

function setTableData(asin = '', sku = '') {
  return request({
    url: '/api/sellers/listings/our/',
    method: 'GET',
    params: {
      page: currentPage.value,
      limit: pageSize.value,
      profile_id: profile.value.profile_id,
      asin,
      sku,
    },
  })
    .then((resp) => {
      fullTableData.value = resp.data
      totalItems.value = resp.total
      currentPage.value = resp.page
      loading.value = false
    })
    .catch((error) => {
      console.error('Error fetching data:', error)
      loading.value = false
    })
}

function addSingleGoods(scope) {
  // console.log('scope', scope.row)
  const isAlreadyAdded = adsTableData.value.some((item) => item.sku === scope.row.sku)
  if (!isAlreadyAdded) {
    adsTableData.value.push(scope.row)
  } else {
    console.log('Item is already added.')
  }
}

function addGods() {
  const inputData = goodsTextarea.value
  const asins = inputData.split(/[\n,]+/)

  asins.forEach((asin) => {
    if (asin.trim()) {
      setTableData(asin.trim())
        .then((response) => {
          console.log(`Data for ASIN ${asin}:`, response) // 更新这里来正确地访问数据
        })
        .catch((error) => {
          console.error(`Error fetching data for ASIN ${asin}:`, error)
        })
    }
  })
}

function delSingleGoods(scope) {
  const index = adsTableData.value.findIndex((item) => item.sku === scope.row.sku)
  if (index !== -1) {
    adsTableData.value.splice(index, 1)
    console.log('Item removed successfully.')
  } else {
    console.log('Item not found.')
  }
}

function delAllGoods() {
  adsTableData.value = []
  // adsTableData.value.splice(0, adsTableData.value.length)
}

// 删除第二个table中已经选中的项
function delSelectedGoods() {
  adsTableData.value = adsTableData.value.filter((item) => !addedSels.includes(item))
  addedSels = []
}

function inpChange(e) {
  const value = e
  if (select.value === 'asin') {
    loading.value = true
    setTableData(value)
  } else if (select.value === 'sku') {
    loading.value = true
    setTableData('', value)
  }
}

function selChange(e) {
  console.log('e', e)
  const value = e
  if (select.value === 'asin' && searchInp.value) {
    loading.value = true
    setTableData(value)
  } else if (select.value === 'sku' && searchInp.value) {
    loading.value = true
    setTableData('', value)
  }
}
// 点击表格选项触发事件
function handleSelectionChange(selection) {
  selections = selection
}
// 获取addedTable中已选中的项
function handleAddedGoodsChange(selection) {
  addedSels = selection
}
// 添加已选中的项
function handleGoodsAdd() {
  // 过滤掉已经存在于addedData.value中的项
  const newSelections = selections.filter(
    (sel) => !adsTableData.value.some((added) => added.sku === sel.sku) // 使用sku作为唯一标识
  )
  // 如果有新的不重复项，加入到addedData.value中
  if (newSelections.length > 0) {
    adsTableData.value.push(...newSelections)
  }
}
// 点击Tab
const handleGoodsTabs = (tab: TabsPaneContext, event: Event) => {
  // console.log(tab, event)
}

function isItemInList(item, list) {
  return list.some((listItem) => listItem.sku === item.sku && listItem.asin === item.asin)
}
// 监听商品右侧表格已添加的数据并转化数据格式
watch(
  adsTableData,
  (newValue, oldValue) => {
    newValue.forEach((item) => {
      if (!isItemInList(item, addedAdsTableItems.value)) {
        addedAdsTableItems.value.push({ sku: item.sku, asin: item.asin })
      }
    })
    if (adsTableData.value.length !== 0) {
      adsSave.value = false
    } else {
      adsSave.value = true
    }
  },
  { deep: true }
)

async function createAds() {
  try {
    const requestData = {
      profile_id: profile.value.profile_id,
      campaignId: respCampaignId.value,
      adGroupId: respAdGroupId.value,
      asinsku: addedAdsTableItems.value,
      state: 'PAUSED',
    }
    const filteredRequestData = Object.fromEntries(Object.entries(requestData).filter(([_, v]) => v != null))
    const resp = await request({
      url: '/api/ad_manage/spads/create/',
      method: 'POST',
      data: filteredRequestData,
    })
    console.log('🚀 ~ createAds ~ resp-->>', resp)
    commodityLoading.value = false
    if (resp.data.success.length > 0) {
      adsSave.value = false
      targetGroupBidSave.value = false
      adsTableData.value = []
      ElMessage({
        message: '商品创建成功',
        type: 'success',
      })
    } else {
      ElMessage.error('商品创建失败!')
    }
  } catch (error) {
    console.error('请求失败：', error)
  }
}

function submitAdsForm() {
  commodityLoading.value = true
  createAds()
}

// ------------------------------------------目标组设置出价------------------------------------------
let targetGroupBidSave = ref(true)
let targetGroupLoading = ref(false)
const targetGroupFormRef = ref<FormInstance>()
interface TargetGroupForm {
  closeMatch: boolean
  broadMatch: boolean
  similarProducts: boolean
  relatedProducts: boolean
  closeMatchInp: string
  broadMatchInp: string
  similarProductsInp: string
  relatedProductsInp: string
}
const targetGroupRuleForm = reactive<TargetGroupForm>({
  closeMatch: true,
  broadMatch: true,
  similarProducts: true,
  relatedProducts: true,
  closeMatchInp: '1',
  broadMatchInp: '1',
  similarProductsInp: '1',
  relatedProductsInp: '1',
})
const targetGroupRules = computed(() => ({
  closeMatchInp: [
    { required: true, message: '请输入默认出价', trigger: 'blur' },
    { validator: validateDefaultBidInp, trigger: 'blur' },
  ],
  broadMatchInp: [
    { required: true, message: '请输入默认出价', trigger: 'blur' },
    { validator: validateDefaultBidInp, trigger: 'blur' },
  ],
  similarProductsInp: [
    { required: true, message: '请输入默认出价', trigger: 'blur' },
    { validator: validateDefaultBidInp, trigger: 'blur' },
  ],
  relatedProductsInp: [
    { required: true, message: '请输入默认出价', trigger: 'blur' },
    { validator: validateDefaultBidInp, trigger: 'blur' },
  ],
}))

function closeMatchChange() {
  if (targetGroupRuleForm.closeMatch == false) {
    targetGroupRuleForm.closeMatchInp = ''
    targetGroupFormRef.value.clearValidate('closeMatchInp')
  } else {
    targetGroupRuleForm.closeMatchInp = '1'
    // targetGroupFormRef.value.validateField('closeMatchInp')
  }
}
function broadMatchChange() {
  if (targetGroupRuleForm.broadMatch == false) {
    targetGroupRuleForm.broadMatchInp = ''
    targetGroupFormRef.value.clearValidate('broadMatchInp')
  } else {
    targetGroupRuleForm.broadMatchInp = '1'
    // targetGroupFormRef.value.validateField('broadMatchInp')
  }
}
function similarProductsChange() {
  if (targetGroupRuleForm.similarProducts == false) {
    targetGroupRuleForm.similarProductsInp = ''
    targetGroupFormRef.value.clearValidate('similarProductsInp')
  } else {
    targetGroupRuleForm.similarProductsInp = '1'
    // targetGroupFormRef.value.validateField('similarProductsInp')
  }
}
function relatedProductsChange() {
  if (targetGroupRuleForm.relatedProducts == false) {
    targetGroupRuleForm.relatedProductsInp = ''
    targetGroupFormRef.value.clearValidate('relatedProductsInp')
  } else {
    targetGroupRuleForm.relatedProductsInp = '1'
    // targetGroupFormRef.value.validateField('relatedProductsInp')
  }
}

async function createTargetGroup() {
  try {
    const requestData = {
      profile_id: profile.value.profile_id,
      adGroupId: respAdGroupId.value,
      QUERY_HIGH_REL_MATCHES: targetGroupRuleForm.closeMatchInp,
      QUERY_BROAD_REL_MATCHES: targetGroupRuleForm.broadMatchInp,
      ASIN_SUBSTITUTE_RELATED: targetGroupRuleForm.similarProductsInp,
      ASIN_ACCESSORY_RELATED: targetGroupRuleForm.relatedProductsInp,
      QUERY_HIGH_REL_MATCHES_state: targetGroupRuleForm.closeMatch,
      QUERY_BROAD_REL_MATCHES_state: targetGroupRuleForm.broadMatch,
      ASIN_SUBSTITUTE_RELATED_state: targetGroupRuleForm.similarProducts,
      ASIN_ACCESSORY_RELATED_state: targetGroupRuleForm.relatedProducts,
    }
    const filteredRequestData = Object.fromEntries(Object.entries(requestData).filter(([_, v]) => v != null))
    const resp = await request({
      url: '/api/ad_manage/sptargets/auto/updata/',
      method: 'POST',
      data: filteredRequestData,
    })
    console.log('🚀 ~ createTargetGroup ~ resp-->>', resp)
    targetGroupLoading.value = false
    if (respAdGroupId.value) {
      ElMessage({
        message: '目标组创建成功',
        type: 'success',
      })
    } else {
      ElMessage.error('目标组创建失败!')
    }
  } catch (error) {
    console.error('请求失败：', error)
  }
}

function submitTargetGroupForm() {
  targetGroupLoading.value = true
  console.log('submit!')
  createTargetGroup()
}

// ------------------------------------------否定词------------------------------------------

const ruleFormRef = ref<FormInstance>()
interface RuleForm {
  autoRedirect: string
  // NEGATIVE_PHRASE: boolean
  // NEGATIVE_EXACT: boolean
  negativeTextarea: string
  negativeGoodsTextarea: string
  targetType: string
}
const ruleForm = reactive<RuleForm>({
  autoRedirect: 'defaultBid',
  // NEGATIVE_PHRASE: true,
  // NEGATIVE_EXACT: true,
  negativeTextarea: '',
  negativeGoodsTextarea: '',
  targetType: 'keyWords',
})
const rules = computed(() => ({
  autoRedirect: [{ required: true, trigger: 'change' }],
  // relatedProductsInp: getValidationRules('relatedProductsInp'),
  // similarProductsInp: getValidationRules('similarProductsInp'),
  // broadMatchInp: getValidationRules('broadMatchInp'),
  // closeMatchInp: getValidationRules('closeMatchInp'),
}))

//------------------------------------------------------------------------------方法------------------------------------------------------------------------------

// 当单选按钮变化时更新showCard状态
function changeBid() {
  console.log(ruleForm.autoRedirect)
  showCard.value = ruleForm.autoRedirect === 'targetBid'
}
// 切换投放类型
function changeType() {}

// 处理分页器当前页变化
function handleCurrentChange(newPage) {
  currentPage.value = newPage
  loading.value = true
  setTableData()
}
// 处理分页器每页显示条目数变化
function handleSizeChange(newSize) {
  pageSize.value = newSize
  currentPage.value = 1 // 重置到第一页
}

// ------------------------------------------投放类型模块------------------------------------------
async function changeTargetType() {
  // console.log(ruleForm.targetType)
  showCard.value = ruleForm.targetType === 'keyWords'
  if (ruleForm.targetType === 'Goods') {
    productOrientationLoading.value = true
    await setProductOrientationData()
  }
}

// ------------------------------------------商品定向模块------------------------------------------
const categoryBiddingType = ref('customBid')
const categoryBiddingTypeOptions = [
  {
    value: 'defaultBid',
    label: '默认竞价',
  },
  {
    value: 'customBid',
    label: '自定义竞价',
  },
]
const categoryBidInput = ref('0.75')
const singleGoodsBidSelect = ref('customBid')
const singleGoodsBidTypeOptions = [
  {
    value: 'defaultBid',
    label: '默认竞价',
  },
  {
    value: 'customBid',
    label: '自定义竞价',
  },
]
const singleGoodsBidInput = ref('0.75')
const expand = ref(true)
const accurate = ref(false)
const proposalTableData = ref([])
const searchClassifyTableData = ref([])
const productOrientationLoading = ref(false)
const dialogSelectLoading = ref(false)
const defaultProps = {
  children: 'ch',
  label: 'cna',
}
const countLoadig = ref(false)
const visible = ref(false)
let dialogTitle = ref('')
let categoryId = ref('')
const dialogselectValue = ref('')
let dialogOptions: any = ref([])
const dialogForm: any = reactive({
  prices: {
    lowest: undefined,
    highest: undefined,
  },
  starRating: [0, 5],
  dialogselectValue: [],
  delivery: 'all',
  isCount: false,
})
const dialogFormRef = ref()
const dialogRules = reactive({
  prices: [{ validator: validatePrices, trigger: 'blur' }],
})

interface Mark {
  style: CSSProperties
  label: string
}
type Marks = Record<number, Mark | string>
const marks = reactive<Marks>({
  0: '0',
  1: '1',
  2: '2',
  3: '3',
  4: '4',
  5: '5',
})
let commodityCount = ref([])
let currentDialogIndex = ref(0)
let productOrientationTableData = ref([])

async function validatePrices(rule, value) {
  if (value.highest !== '' && value.lowest !== '' && value.highest <= value.lowest) {
    return Promise.reject('最高价格必须大于最低价格')
  }
  return Promise.resolve()
}

async function setProductOrientationData() {
  try {
    const resp = await request({
      url: '/api/ad_manage/targetable/categories/',
      method: 'GET',
      params: {
        profile_id: profile.value.profile_id,
      },
    })
    searchClassifyTableData.value = resp.data
    productOrientationLoading.value = false
  } catch (error) {
    console.error('请求失败：', error)
  }
}

async function setDialogOption() {
  try {
    const resp = await request({
      url: '/api/ad_manage/categories/brands/',
      method: 'GET',
      params: {
        profile_id: profile.value.profile_id,
        category_id: categoryId.value,
      },
    })
    const options = resp.data
    dialogForm.dialogOptions = options.brands.map((brand) => {
      return {
        label: brand.name,
        value: brand.id,
      }
    })
    dialogSelectLoading.value = false
  } catch (error) {
    console.error('请求失败：', error)
  }
}

async function getCount(instanceId) {
  try {
    const resp = await request({
      url: '/api/ad_manage/products/count/',
      method: 'POST',
      data: {
        profile_id: profile.value.profile_id,
        category_id: categoryId.value,
      },
    })
    if (instanceId === currentDialogIndex.value) {
      commodityCount.value = resp.data.AsinCounts
    }
  } catch (error) {
    console.error('请求失败：', error)
  } finally {
    if (instanceId === currentDialogIndex.value) {
      countLoadig.value = false
    }
  }
}

function dialogClose() {
  currentDialogIndex.value++
  resetDialogForm()
  dialogForm.isCount = false
  commodityCount.value = []
  countLoadig.value = false
}

function resetDialogForm() {
  dialogForm.prices.lowest = undefined
  dialogForm.prices.highest = undefined
  dialogForm.starRating = [0, 5]
  dialogForm.dialogselectValue = []
  dialogForm.delivery = 'all'
  dialogForm.isCount = false
}

function isCountChanged() {
  if (dialogForm.isCount) {
    const instanceId = currentDialogIndex.value
    countLoadig.value = true
    getCount(instanceId)
  } else {
    countLoadig.value = false
    commodityCount.value = []
  }
}

function delCna(index) {
  productOrientationTableData.value.splice(index, 1)
}

function delAllCna() {
  productOrientationTableData.value = []
}

function singleGoodsBidSelectChanged() {
  if (singleGoodsBidSelect.value === 'defaultBid' || categoryBiddingType.value === 'defaultBid') {
    singleGoodsBidInput.value = ''
  }
}

let singleGoodsSearchInp = ref('')
let searchTableData = ref([])
function setSearchTableData(asin = '', sku = '') {
  return request({
    url: '/api/sellers/listings/our/',
    method: 'GET',
    params: {
      profile_id: profile.value.profile_id,
      asin,
      sku,
    },
  })
    .then((resp) => {
      searchTableData.value = resp.data
      productOrientationLoading.value = false
    })
    .catch((error) => {
      console.error('Error fetching data:', error)
      productOrientationLoading.value = false
    })
}
function singleGoodsSearchChaneged() {
  productOrientationLoading.value = true
  setSearchTableData()
}
function addSingleSearch(scope) {
  console.log('🚀 ~ addSingleSearch ~ scope-->>', scope)

  const typesToAdd = []
  if (expand.value) {
    typesToAdd.push('ASIN_EXPANDED_FROM')
  }
  if (accurate.value) {
    typesToAdd.push('ASIN_SAME_AS')
  }
  const productTypeMap = {
    ASIN_EXPANDED_FROM: '扩展',
    ASIN_SAME_AS: '精确',
  }

  typesToAdd.forEach((productType) => {
    const isAlreadyAdded = productOrientationTableData.value.some((item) => item.sku === scope.row.sku && item.productType === productType)

    let bidValue = null
    // 根据 categoryBiddingType.value 的值设置 bidValue
    if (categoryBiddingType.value === 'defaultBid') {
      bidValue = adGroupRuleForm.defaultBidInp
    } else if (categoryBiddingType.value === 'customBid') {
      bidValue = singleGoodsBidInput.value
    }

    if (!isAlreadyAdded) {
      const newData = {
        type: 'p',
        asin: scope.row.asin,
        sku: scope.row.sku,
        productType: productType,
        productTypeText: productTypeMap[productType],
        bid: bidValue, // 添加 bid 值
      }
      productOrientationTableData.value.push(newData)
    } else {
      console.log(`${productType} item is already added.`)
    }
  })
}

let selectedLabels = ref([]) // 选中的label数组
function dialogSelectChange(event) {
  console.log('🚀 ~ dialogSelectChange ~ event-->>', event)

  // 使用 map 来转换每个选中项的 value 为其对应的 label
  selectedLabels.value = event.map((selectedValue) => {
    const selectedOption = dialogForm.dialogOptions.find((option) => option.value === selectedValue)
    return selectedOption ? selectedOption.label : ''
  })

  console.log('🚀 ~ dialogSelectChange ~ selectedLabels-->>', selectedLabels.value)
}

let refineItem = ref([])
// 细化按钮功能
function refine(data) {
  console.log('🚀 ~ refine ~ data-->>', data)
  commodityCount.value = []
  dialogTitle.value = data.cna
  categoryId.value = data.cid
  refineItem.value.push(data)
  visible.value = true
  dialogSelectLoading.value = true
  setDialogOption()
}
// 弹框提交功能
function dialogFormSubmit() {
  dialogFormRef.value.validate((valid) => {
    if (valid) {
      console.log('表单提交')
      visible.value = false
      const dialogClassification = dialogTitle.value
      const dialogPrices_low = dialogForm.prices.lowest
      const dialogPrices_high = dialogForm.prices.highest
      const dialogStartRating = dialogForm.starRating
      const ratingLow = dialogStartRating[0]
      const ratingHigh = dialogStartRating[1]
      const dialogDelivery = dialogForm.delivery
      console.log('🚀 ~ dialogFormRef.value.validate ~ dialogDelivery-->>', dialogDelivery)
      const deliveryMap = {
        all: '所有',
        eligible: '具备Prime资格',
        diseligible: '不具备Prime资格',
      }

      let bidValue = null
      // 根据 categoryBiddingType.value 的值设置 bidValue
      if (categoryBiddingType.value === 'defaultBid') {
        bidValue = adGroupRuleForm.defaultBidInp
      } else if (categoryBiddingType.value === 'customBid') {
        bidValue = singleGoodsBidInput.value
      }

      selectedLabels.value.forEach((brandLabel) => {
        // 查找与当前 brandLabel 相对应的选项
        const selectedOption = dialogForm.dialogOptions.find((option) => option.label === brandLabel)
        // 获取对应的 brandId，如果没有找到则默认为空
        const brandId = selectedOption ? selectedOption.value : ''
        const refineObj = {
          type: 'c',
          classification: dialogClassification,
          classificationId: categoryId.value,
          brand: brandLabel,
          brandId: brandId, // 使用找到的 brandId
          bid: bidValue, // 添加 bid 值
          low_price: dialogPrices_low,
          high_price: dialogPrices_high,
          low_rating: ratingLow,
          high_rating: ratingHigh,
          delivery: dialogDelivery,
          deliveryText: deliveryMap[dialogDelivery],
        }
        console.log('🚀 ~ dialogFormRef.value.validate ~ refineObj-->>', refineObj)
        productOrientationTableData.value.push(refineObj)
      })
    } else {
      console.log('验证失败')
    }
  })
}

// 定向按钮功能
function orientate(node, data) {
  console.log('🚀 ~ orientate ~ data-->>', data)
  const exists = productOrientationTableData.value.some((item) => item.cid === data.cid)

  let bidValue = null
  // 根据 categoryBiddingType.value 的值设置 bidValue
  if (categoryBiddingType.value === 'defaultBid') {
    bidValue = adGroupRuleForm.defaultBidInp
  } else if (categoryBiddingType.value === 'customBid') {
    bidValue = singleGoodsBidInput.value
  }

  if (!exists) {
    const newData = {
      type: 'c',
      classification: data.cna,
      classificationId: data.cid,
      bid: bidValue, // 将 bid 值添加到新数据中
    }
    productOrientationTableData.value.push(newData)
  }
}

let productTargetBidList = ref([])
async function productTagetSave() {
  console.log('tableData', productOrientationTableData.value)
  // 检查是否存在 bid 为空的行
  const hasEmptyBid = productOrientationTableData.value.some((row) => row.bid == null || row.bid === '')
  // 直接返回，不继续执行
  if (hasEmptyBid) {
    console.log('存在空的 bid，不发送请求')
    ElMessage.error('存在空的 bid，无法创建商品!')
    return
  }
  productOrientationTableData.value.forEach((row) => {
    productTargetBidList.value.push(row.bid)
  })
  console.log('productTargetBidList', productTargetBidList.value)
  productOrientationLoading.value = true
  try {
    const requestData = {
      profile_id: profile.value.profile_id,
      adGroupId: respAdGroupId.value,
      campaignId: respCampaignId.value,
      expressionList: productOrientationTableData.value,
      state: 'PAUSED',
    }
    const filteredRequestData = Object.fromEntries(Object.entries(requestData).filter(([_, v]) => v != null))
    const resp = await request({
      url: '/api/ad_manage/sptargets/manual/create/',
      method: 'POST',
      data: filteredRequestData,
    })

    console.log('🚀 ~ createTargetGroup ~ resp-->>', resp)
    productOrientationLoading.value = false

    if (respAdGroupId.value) {
      ElMessage({
        message: '商品创建成功',
        type: 'success',
      })
    } else {
      ElMessage.error('商品创建失败!')
    }
  } catch (error) {
    console.error('请求失败：', error)
  }

  // 清空表格和 bid 列表
  productOrientationTableData.value = []
  productTargetBidList.value = []
}

// ------------------------------------------关键词定向模块------------------------------------------
const bidType = ref('customBid')
const keywordsLoading = ref(false)
const bidTypeOptions = [
  {
    value: 'suggestBid',
    label: '建议出价',
  },
  {
    value: 'customBid',
    label: '自定义出价',
  },
  {
    value: 'defaultBid',
    label: '默认出价',
  },
]

const bidInput = ref('0.75')
const keyWordsTableData = ref([]) // 关键词定向左侧表格数据
const addedKeyWordsTableData = ref([]) // 关键词定向右侧表格数据
const keyWordsTextarea = ref('')
let broadType = ref(true)
let phraseType = ref(true)
let exactType = ref(true)
const MATCH_TYPE = {
  BROAD: '广泛',
  PHRASE: '词组',
  EXACT: '精确',
}
const MATCH_TYPE_MAP = {
  广泛: 'BROAD',
  词组: 'PHRASE',
  精确: 'EXACT',
}
const successCount = ref('')
const errorCount = ref('')

watch(bidType, () => {
  if (bidType.value === 'defaultBid') {
    bidInput.value = adGroupRuleForm.defaultBidInp
  } else if (bidType.value === 'customBid') {
    bidInput.value = ''
  } else {
    bidInput.value = ''
  }
})

function addKeyWords() {
  const trimmedText = keyWordsTextarea.value.trim()
  const items = trimmedText.split(/,|\n/)

  items.forEach((item) => {
    const trimmedItem = item.trim()
    if (trimmedItem) {
      if (broadType.value) {
        addKeyWordEntry(trimmedItem, MATCH_TYPE.BROAD)
      }
      if (phraseType.value) {
        addKeyWordEntry(trimmedItem, MATCH_TYPE.PHRASE)
      }
      if (exactType.value) {
        addKeyWordEntry(trimmedItem, MATCH_TYPE.EXACT)
      }
    } else {
      ElMessage({
        message: '有空项目,未被添加到列表中',
        type: 'warning',
      })
    }
  })
  keyWordsTextarea.value = ''
}

function addKeyWordEntry(keyword, matchType) {
  let bidValue
  switch (bidType.value) {
    case 'customBid':
      bidValue = bidInput.value
      break
    case 'defaultBid':
      bidValue = adGroupRuleForm.defaultBidInp
      break
    default:
      bidValue = ''
  }

  let keyWordEntry = {
    keyword: keyword,
    matchType: matchType,
    bid: bidInput.value,
  }

  if (!addedKeyWordsTableData.value.some((n) => n.keyword === keyWordEntry.keyword && n.matchType === keyWordEntry.matchType)) {
    addedKeyWordsTableData.value.push(keyWordEntry)
  } else {
    ElMessage({
      message: `关键词 ${keyword} (${matchType}) 已存在，未被添加到列表中`,
      type: 'warning',
    })
  }
}

function delSingleKeyWord(scope) {
  const index = addedKeyWordsTableData.value.findIndex((item) => item.keyword === scope.row.keyword && item.matchType === scope.row.matchType)
  if (index !== -1) {
    addedKeyWordsTableData.value.splice(index, 1)
  } else {
    console.log('无效的索引，无法删除条目')
  }
}

function delAllKeyWords() {
  addedKeyWordsTableData.value = []
}

async function keyWordsSave() {
  keywordsLoading.value = true
  successCount.value = ''
  errorCount.value = ''
  const keywordList = addedKeyWordsTableData.value.map((kw) => ({
    keywordText: kw.keyword,
    bid: kw.bid,
    matchType: MATCH_TYPE_MAP[kw.matchType],
  }))
  const requestData = {
    profile_id: profile.value.profile_id,
    campaignId: respCampaignId.value,
    adGroupId: respAdGroupId.value,
    keywordlist: keywordList,
    state: 'PAUSED',
  }
  const filteredRequestData = Object.fromEntries(Object.entries(requestData).filter(([_, v]) => v != null))
  try {
    const resp = await request({
      url: '/api/ad_manage/sptargets/add/keywords/',
      method: 'POST',
      data: filteredRequestData,
    })
    if (resp.data.success.length !== 0) {
      ElMessage({
        message: '关键词创建成功',
        type: 'success',
      })
      successCount.value = resp.data.success.length
      errorCount.value = resp.data.error.length
      delAllKeyWords()
    } else {
      ElMessage.error('关键词创建失败!')
    }
  } catch (error) {
    console.error('请求失败：', error)
  } finally {
    keywordsLoading.value = false
  }
}

// ------------------------------------------否定词模块------------------------------------------
let negativeWordsLoading = ref(false)
let negativeList = reactive([])
let negativeWordsTextarea = ref('')
let NEGATIVE_PHRASE = ref(true)
let NEGATIVE_EXACT = ref(true)
let exactNegativeList = reactive([]) // 用于存储精确否定的数组
let phraseNegativeList = reactive([]) // 用于存储词组否定的数组

function addNegative() {
  const trimmedText = negativeWordsTextarea.value.trim()
  const items = trimmedText.split(/,|\n/)

  items.forEach((item) => {
    const trimmedItem = item.trim()
    if (trimmedItem) {
      let phraseEntry = '词组: ' + trimmedItem
      let exactEntry = '精确: ' + trimmedItem

      if (NEGATIVE_PHRASE.value && !negativeList.some((n) => n.negativeWords === phraseEntry)) {
        negativeList.push({ negativeWords: phraseEntry })
        phraseNegativeList.push(trimmedItem) // 添加到词组否定数组
      }
      if (NEGATIVE_EXACT.value && !negativeList.some((n) => n.negativeWords === exactEntry)) {
        negativeList.push({ negativeWords: exactEntry })
        exactNegativeList.push(trimmedItem) // 添加到精确否定数组
      }
    } else {
      console.log('有空项目,未被添加到列表中')
    }
  })
  negativeWordsTextarea.value = ''
}

function delAllNegative() {
  // negativeList.splice(0, negativeList.length)
  negativeList.length = 0
  exactNegativeList.length = 0
  phraseNegativeList.length = 0
}

function delSingleNegative(scope) {
  const index = negativeList.findIndex((item) => item.negativeWords === scope.row.negativeWords)
  if (index !== -1) {
    // 确定被删除的项是词组还是精确
    const isPhrase = scope.row.negativeWords.startsWith('词组: ')
    const isExact = scope.row.negativeWords.startsWith('精确: ')

    // 从 negativeList 删除
    if (negativeList.length) {
      negativeList.splice(index, 1)
      console.log(`已删除索引为 ${index} 的条目`)
    } else {
      console.log('无效的索引，无法删除条目')
    }

    // 从 exactNegativeList 或 phraseNegativeList 删除
    const trimmedItem = scope.row.negativeWords.substring(4).trim() // 从 '词组: ' 或 '精确: ' 后开始截取
    if (isPhrase) {
      const phraseIndex = phraseNegativeList.findIndex((item) => item === trimmedItem)
      if (phraseIndex !== -1) {
        phraseNegativeList.splice(phraseIndex, 1)
      }
    } else if (isExact) {
      const exactIndex = exactNegativeList.findIndex((item) => item === trimmedItem)
      if (exactIndex !== -1) {
        exactNegativeList.splice(exactIndex, 1)
      }
    }
  } else {
    console.log('无效的索引，无法删除条目')
  }
}

async function negativeWordsSave() {
  negativeWordsLoading.value = true
  console.log('negativeList', negativeList)
  try {
    const requestData = {
      profile_id: profile.value.profile_id,
      campaignId: respCampaignId.value,
      adGroupId: respAdGroupId.value,
      state: 'PAUSED',
      EkeywordList: exactNegativeList,
      PkeywordList: phraseNegativeList,
    }
    const filteredRequestData = Object.fromEntries(Object.entries(requestData).filter(([_, v]) => v != null))
    const resp = await request({
      url: '/api/ad_manage/sptargets/add/negative/keywords/',
      method: 'POST',
      data: filteredRequestData,
    })
    negativeWordsLoading.value = false
    if (resp.data.negativeKeywordsuccess.length !== 0) {
      ElMessage({
        message: '否定词创建成功',
        type: 'success',
      })
      delAllNegative()
    } else {
      ElMessage.error('否定词创建失败!')
    }
  } catch (error) {
    console.error('请求失败：', error)
  }
}

//  ------------------------------------------否定商品模块------------------------------------------
let negativeGoodsLoading = ref(false)
const tableData = negativeList
let inputAddedNegGoods = ref([])

function setNegativeTableData(asin = '') {
  negativeGoodsLoading.value = true
  return request({
    url: '/api/sellers/listings/all/',
    method: 'GET',
    params: {
      page: currentPage.value,
      limit: pageSize.value,
      profile_id: profile.value.profile_id,
      asin,
    },
  })
    .then((resp) => {
      negativeTableData.value = resp.data
      inputAddedNegGoods.value = resp.data
      negativeGoodsLoading.value = false
    })
    .catch((error) => {
      console.error('Error fetching data:', error)
      negativeGoodsLoading.value = false
    })
}

// 输入tab的textarea
function addNegativeGoods() {
  console.log('ruleForm.negativeGoodsTextarea', ruleForm.negativeGoodsTextarea)
  loading.value = true

  setNegativeTableData(ruleForm.negativeGoodsTextarea)
    .then(() => {
      addedNegetiveTableData.value = [...addedNegetiveTableData.value, ...inputAddedNegGoods.value]
    })
    .catch((error) => {
      console.error('Error fetching data:', error)
    })
    .finally(() => {
      loading.value = false
    })
}

function addSingleNegativeGoods(scope) {
  const isAlreadyAdded = addedNegetiveTableData.value.some((item) => item.asin === scope.row.asin)
  if (!isAlreadyAdded) {
    addedNegetiveTableData.value.push(scope.row)
  } else {
    console.log('Item is already added.')
  }
}

function delAllNegativeGoods() {
  addedNegetiveTableData.value = []
}

function delSingleNegativeGoods(scope) {
  const index = addedNegetiveTableData.value.findIndex((item) => item.asin === scope.row.asin)

  if (index !== -1) {
    addedNegetiveTableData.value.splice(index, 1)
    console.log('Item removed successfully.')
  } else {
    console.log('Item not found.')
  }
}

function searchNegativeGoods(e) {
  console.log(e)
  if (e === '') {
    negativeTableData.value = []
  } else {
    setNegativeTableData(e)
  }
}

function handleAddedNegGoods(selection) {
  addedSels = selection
}

function handleNegGoodsTabs(tab: TabsPaneContext, event: Event) {
  // console.log(tab, event)
}

async function negativeGoodsSave() {
  console.log(addedNegetiveTableData.value)
  const asinList = addedNegetiveTableData.value.map((item) => item.asin)
  negativeGoodsLoading.value = true
  console.log('addedNegetiveTableData', addedNegetiveTableData.value)
  try {
    const requestData = {
      profile_id: profile.value.profile_id,
      campaignId: respCampaignId.value,
      adGroupId: respAdGroupId.value,
      asinList: asinList,
      matchType: 'ASIN_SAME_AS',
      state: 'PAUSED',
    }
    const filteredRequestData = Object.fromEntries(Object.entries(requestData).filter(([_, v]) => v != null))
    const resp = await request({
      url: '/api/ad_manage/sptargets/add/negative/targets/',
      method: 'POST',
      data: filteredRequestData,
    })
    negativeGoodsLoading.value = false
    if (resp.data.success.length !== 0) {
      ElMessage({
        message: '否定商品创建成功',
        type: 'success',
      })
      delAllNegative()
    } else {
      ElMessage.error('否定商品创建失败!')
    }
  } catch (error) {
    console.error('请求失败：', error)
  }
}

// ------------------------------------------自定义校验模块------------------------------------------
function checkBid(value, callback, bidField) {
  const bid = parseFloat(value)
  const budget = parseFloat(campaignRuleForm.budget)
  // 检查值是否为最多两位小数的普通数字格式
  const isNormalNumberWithTwoDecimals = /^-?\d+(\.\d{1,2})?$/.test(value)

  if (!isNormalNumberWithTwoDecimals) {
    callback(new Error('请输入数字值（最多两位小数）'))
  } else if (isNaN(bid)) {
    callback(new Error('请输入有效的数字'))
  } else if (bid < 0.02 || bid > 1000) {
    callback(new Error('值必须在0.02到1000之间'))
  } else if (bid >= budget) {
    callback(new Error('出价必须小于预算'))
  } else {
    callback()
  }
}
// 自定义校验规则---自动定价和按目标设置出价模块
// function getValidationRules(fieldName) {
//   // 默认校验规则
//   const commonRules = [
//     { required: true, message: '此项为必填项', trigger: 'blur' },
//     { validator: (rule, value, callback) => checkBid(value, callback, fieldName), trigger: 'blur' },
//   ]

//   // 根据不同字段和状态返回特定的校验规则
//   switch (fieldName) {
//     case 'defaultBidInp':
//       if (ruleForm.autoRedirect === 'defaultBid') {
//         return commonRules
//       }
//       break
//     case 'similarProductsInp':
//       if (ruleForm.autoRedirect === 'targetBid' && ruleForm.similarProducts) {
//         return commonRules
//       } else if (ruleForm.similarProducts == false) {
//         ruleFormRef.value?.clearValidate(fieldName)
//       }
//       break
//     case 'relatedProductsInp':
//       if (ruleForm.autoRedirect === 'targetBid' && ruleForm.relatedProducts) {
//         return commonRules
//       } else if (ruleForm.relatedProducts == false) {
//         ruleFormRef.value?.clearValidate(fieldName)
//       }
//       break
//     case 'broadMatchInp':
//       if (ruleForm.autoRedirect === 'targetBid' && ruleForm.broadMatch) {
//         return commonRules
//       } else if (ruleForm.broadMatch == false) {
//         ruleFormRef.value?.clearValidate(fieldName)
//       }
//       break
//     case 'closeMatchInp':
//       // 仅当autoRedirect为'targetBid'且closeMatch开启时校验closeMatchInp
//       if (ruleForm.autoRedirect === 'targetBid' && ruleForm.closeMatch) {
//         return commonRules
//       } else if (ruleForm.closeMatch == false) {
//         ruleFormRef.value?.clearValidate(fieldName)
//       }
//       break
//     default:
//       return []
//   }
//   // 如果不满足上述条件，则无需校验
//   return []
// }
// 监听表单字段变化，根据不同字段和状态返回特定的校验规则
// watch(
//   [() => ruleForm.autoRedirect, () => ruleForm.closeMatch, () => ruleForm.broadMatch, () => ruleForm.similarProducts, () => ruleForm.relatedProducts],
//   () => {
//     // 定义需要更新校验规则的字段
//     const fields = ['defaultBidInp', 'closeMatchInp', 'broadMatchInp', 'similarProductsInp', 'relatedProductsInp']
//     fields.forEach((field) => {
//       rules.value[field] = getValidationRules(field)
//     })
//   }
// )

// 修改表头样式
const headerCellStyle = (args) => {
  if (args.rowIndex === 0) {
    return {
      backgroundColor: 'rgba(245, 245, 245, 0.9)',
    }
  }
}

function changeNegTableHeader(args) {
  if (args.rowIndex === 0) {
    return {
      color: '#505968',
    }
  }
}

function changeKeyWordsTableHeader(args) {
  if (args.rowIndex === 0) {
    return {
      color: '#505968',
      backgroundColor: 'rgba(245, 245, 245, 0.9)',
    }
  }
}

onMounted(() => {
  setTableData()
  getAdMix()
  // const myTest = route.query
  // console.log('myTest', myTest)
})

defineOptions({
  name: 'SpCreateCampaigns',
})
</script>

<style lang="scss" scoped>
:deep(.el-form--default.el-form--label-top .el-form-item .el-form-item__label) {
  font-weight: 500;
}
.column-item .el-radio-group {
  display: inline-flex;
  font-size: 0;
  flex-direction: column;
  align-items: flex-start;
}
.radio-description {
  font-size: 12px;
  color: #666;
  margin-top: -18px;
  margin-left: 22px;
}
.radio-description-2 {
  font-size: 12px;
  color: #666;
  margin-top: -10px;
}
.column-margin-bottom label.el-radio.is-bordered {
  margin-bottom: 10px;
  padding: 35px;
}
::v-deep(.column-margin-bottom label.el-radio.is-bordered span.el-radio__inner) {
  margin-top: -18px;
  margin-left: -15px;
}
.gap-items {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  margin-bottom: 20px;
}
.gap-item {
  width: 200px;
  margin-left: 30px;
  color: #0b0d0d;
}
.demo-tabs > .el-tabs__content {
  padding: 52px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
/* 广告组商品Tab栏 */
::v-deep(.el-tabs__nav-scroll) {
  overflow: hidden;
  margin-left: 20px;
}
::v-deep(.el-tabs__nav-wrap::after) {
  height: 2px !important;
}
::v-deep(.el-table__inner-wrapper::before) {
  background-color: white;
}
// 表格内容边距
div {
  & #pane-first,
  & #pane-second {
    margin: 10px;
  }
}
// 输入底部样式
::v-deep(.card-box .el-card__body) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box-card {
  width: 100%;
  // margin: 10px 0 10px 10px;
  margin-right: 10px;
}
.single-line {
  color: rgb(30, 33, 41);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  white-space: pre-wrap;
  word-break: break-word;
}
.data-color {
  color: rgb(30, 33, 41);
}
.img-box {
  width: 60px;
  height: 60px;
  margin-top: 5px;
  border: 1px solid rgb(194, 199, 207);
  border-radius: 4px;
}
.target-group-item {
  margin-top: 15px;
}
.suggested-bid-item {
  margin-left: 230px;
  margin-right: 60px;
}
.bid-input {
  width: 200px;
  margin-left: 15px;
}

::v-deep(.goods-orientation-tabs .el-tabs__nav-scroll) {
  margin-left: -20px !important;
}
::v-deep(.category-tabs .el-tabs__nav) {
  margin-left: 20px;
}
::v-deep(.goods-orientation-tabs #tab-1) {
  /* 商品定向Tab栏 */
  border-right: 0;
}
.custom-tree-node {
  /* el-tree自定义样式 */
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.dialog-head {
  /* 弹窗样式 */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>