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" />
          </el-form-item>
          <el-form-item label="广告组合" prop="adMix">
            <el-select v-model="campaignRuleForm.adMix" placeholder="请选择">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </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: 350px">
            <el-input v-model="campaignRuleForm.budget" maxlength="7" oninput="value=value.indexOf('.') > -1?value.slice(0, value.indexOf('.') + 3):value" />
          </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;">
            <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" />
              </el-form-item>
              <el-form-item required label="默认竞价" prop="defaultBidInp">
                <el-input v-model="adGroupRuleForm.defaultBidInp" 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="campaignSave">保存</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%;">
            <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-row :gutter="12" style="margin-top: 50px">
                      <el-col :span="12">
                        <el-card class="card-box" shadow="never" style="border: none; background-color: #e3f0de; height: 50px">
                          <div style="line-height: 15px">成功添加:</div>
                          <div style="line-height: 15px">
                            <el-icon style="color: #8fc47d; font-size: 25px"><SuccessFilled /></el-icon>
                          </div>
                        </el-card>
                      </el-col>
                      <el-col :span="12">
                        <el-card class="card-box" shadow="never" style="border: none; background-color: #fbe6e3; height: 50px">
                          <div style="line-height: 15px">未成功添加:</div>
                          <div style="line-height: 15px">
                            <el-icon style="color: #e3918d; font-size: 25px"><CircleCloseFilled /></el-icon>
                          </div>
                        </el-card>
                      </el-col>
                    </el-row> -->
                  </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">已添加: {{ addedData.length }}</span>
                      <el-button class="button" text bg @click="delAllGoods">全部删除</el-button>
                    </div>
                  </template>
                  <!-- <div v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</div> -->
                  <div class="card-body"></div>
                  <!-- <template #footer>Footer content</template> -->
                </el-card>
                <div style="padding: 0 10px 0 10px; margin-top: -12px">
                  <el-table
                    :data="addedData"
                    height="520"
                    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>
            </div>
          </el-form-item>
          <!-- 按目标组设置出价 -->
          <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">
            <div>
              <div style="color: #8e9095">
                <span>目标群体</span>
                <span class="suggested-bid-item">建议竞价</span>
                <span>竞价</span>
              </div>
              <div style="display: flex">
                <el-switch v-model="ruleForm.closeMatch" size="small" active-text="紧密匹配" />
                <span class="suggested-bid-item">--</span>
                <el-form-item prop="closeMatchInp">
                  <el-input :disabled="!ruleForm.closeMatch" v-model="ruleForm.closeMatchInp" placeholder="Please input" class="bid-input">
                    <template #prepend>$</template>
                  </el-input>
                </el-form-item>
              </div>
              <div>
                <div style="display: flex">
                  <el-switch v-model="ruleForm.broadMatch" size="small" active-text="广泛匹配" />
                  <span class="suggested-bid-item">--</span>
                  <el-form-item prop="broadMatchInp">
                    <el-input :disabled="!ruleForm.broadMatch" v-model="ruleForm.broadMatchInp" placeholder="Please input" class="bid-input">
                      <template #prepend>$</template>
                    </el-input>
                  </el-form-item>
                </div>
              </div>
              <div>
                <div style="display: flex">
                  <el-switch v-model="ruleForm.similarProducts" size="small" active-text="同类商品" />
                  <span class="suggested-bid-item">--</span>
                  <el-form-item prop="similarProductsInp">
                    <el-input
                      :disabled="!ruleForm.similarProducts"
                      v-model="ruleForm.similarProductsInp"
                      placeholder="Please input"
                      class="bid-input">
                      <template #prepend>$</template>
                    </el-input>
                  </el-form-item>
                </div>
              </div>
              <div>
                <div style="display: flex">
                  <el-switch v-model="ruleForm.relatedProducts" size="small" active-text="关联商品" />
                  <span class="suggested-bid-item">--</span>
                  <el-form-item prop="relatedProductsInp">
                    <el-input
                      :disabled="!ruleForm.relatedProducts"
                      v-model="ruleForm.relatedProductsInp"
                      placeholder="Please input"
                      class="bid-input">
                      <template #prepend>$</template>
                    </el-input>
                  </el-form-item>
                </div>
              </div>
            </div>
          </el-card>
            
          </div>
          

          <!-- 投放类型 -->
          <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: 520px; display: flex; border: 1px solid #c2c7cf; border-radius: 6px">
              <div style="width: 50%; border-right: 1px solid #c2c7cf">
                <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" 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="widelyType" label="广泛" />
                      <el-checkbox v-model="phraseType" label="词组" />
                      <el-checkbox v-model="exactType" label="精确" />
                    </div>
                  </div>
                  <el-tab-pane label="建议" name="first">
                    <el-table
                      height="345"
                      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" placeholder="未完成" style="padding-left: 5px" />
                    <el-button type="primary" size="small" text bg @click="addKeyWords">添加</el-button>
                  </el-tab-pane>
                </el-tabs>
              </div>
              <div style="width: 50%">
                <el-card class="box-card" shadow="never">
                  <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="delAllKeyWords">全部删除</el-button>
                    </div>
                  </template>
                  <div class="card-body">
                    <el-table
                      :data="addedKeyWordsTableData"
                      style="width: 100%"
                      :header-row-style="changeKeyWordsTableHeader"
                      :header-cell-style="headerCellStyle">
                      <el-table-column prop="keyword" label="关键词" width="auto" />
                      <el-table-column prop="bid" label="出价" />
                      <el-table-column prop="suggestBid" label="建议出价" />
                      <el-table-column prop="operate" label="操作" width="60" align="right" />
                    </el-table>
                  </div>
                </el-card>
                <div style="padding: 0 10px 0 10px; margin-top: -12px"></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">
              <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="ruleForm.phraseNegation" label="词组否定" />
                  <el-checkbox v-model="ruleForm.preciseNegation" label="精确否定" />
                </div>
                <el-input
                  v-model="ruleForm.negativeTextarea"
                  :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%" :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="padding: 0 10px 0 10px; margin-top: -12px"></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: 520px; display: flex; border: 1px solid #c2c7cf; border-radius: 6px"
              v-loading="productOrientationLoading">
              <div style="width: 50%; border-right: 1px solid #c2c7cf">
                <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" 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="categoryBidInput" placeholder="Please input" 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="342">
                          <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="309px">
                          <el-tree :data="searchClassifyTableData" :props="defaultProps">
                            <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" placeholder="请选择" v-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'"
                        placeholder="Please input"
                        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 placeholder="按ASIN搜索"></el-input>
                        <el-table :data="proposalTableData" style="width: 100%" height="309">
                          <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>
                      <!-- 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">
                  <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
                      :data="productOrientationTableData"
                      style="width: 100%"
                      :header-row-style="changeKeyWordsTableHeader"
                      :header-cell-style="headerCellStyle">
                      <el-table-column prop="cna" label="分类 & 商品" width="300">
                        <template #default="scope"> 分类: {{ scope.row.cna }} </template>
                      </el-table-column>
                      <el-table-column prop="type" label="类型">
                        <template #default="scope">
                          {{ scope.row.type ? 'scope.row.type' : '--' }}
                        </template>
                      </el-table-column>
                      <el-table-column prop="bid" label="竞价">
                        <template #default="scope">
                          <el-input-number v-model="scope.row.bid" :min="0" :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="padding: 0 10px 0 10px; margin-top: -12px"></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: 520px; display: flex; border: 1px solid #e5e7ec; border-radius: 6px">
              <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="415"
                      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: -12px">
                  <el-table
                    :data="addedNegetiveTableData"
                    height="415"
                    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>
            </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'
import { number } from 'echarts'


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 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('')
let widelyType = ref(true)
let phraseType = ref(true)
let exactType = ref(true)

// 表单相关数据
const campaignLoading = ref(false)
const formSize = ref('default')
const labelPosition = ref('top')
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: 'aitest02campaign_wxc',
  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' }],
}))

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?\d{1,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()
    }
  }
}




const ruleFormRef = ref<FormInstance>()
interface RuleForm {

  autoRedirect: string

  closeMatch: boolean
  broadMatch: boolean
  similarProducts: boolean
  relatedProducts: boolean
  closeMatchInp: string
  broadMatchInp: string
  similarProductsInp: string
  relatedProductsInp: string
  phraseNegation: boolean
  preciseNegation: boolean
  negativeTextarea: string
  negativeGoodsTextarea: string
  targetType: string
}
const ruleForm = reactive<RuleForm>({
  autoRedirect: 'defaultBid',
  closeMatch: true,
  broadMatch: true,
  similarProducts: true,
  relatedProducts: true,
  closeMatchInp: '666',
  broadMatchInp: '666',
  similarProductsInp: '666',
  relatedProductsInp: '666',
  phraseNegation: true,
  preciseNegation: 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()
}

function dialogFormSubmit() {
  dialogFormRef.value.validate((valid) => {
    if (valid) {
      console.log('表单提交')
      visible.value = false
    } else {
      console.log('验证失败')
    }
  })
}

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') {
    singleGoodsBidInput.value = ''
  }
}

function refine(data) {
  console.log('🚀 ~ refine ~ data-->>', data)
  commodityCount.value = []
  dialogTitle.value = data.cna
  categoryId.value = data.cid
  visible.value = true
  dialogSelectLoading.value = true
  setDialogOption()
}

function orientate(node, data) {
  console.log('🚀 ~ orientate ~ data-->>', data)
  const exists = productOrientationTableData.value.some((item) => item.cid === data.cid)

  if (!exists) {
    productOrientationTableData.value.push(data)
  }
}

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

const bidInput = ref('0.75')
const keyWordsTableData = ref([]) // 关键词定向左侧表格数据
const addedKeyWordsTableData = ref([]) // 关键词定向右侧表格数据
const keyWordsTextarea = ref('')

function delAllKeyWords() {
  // 删除已经添加的关键词
  addedKeyWordsTableData.value = []
}

function addKeyWords() {
  // 添加关键词
  if (keyWordsTextarea.value) {
    addedKeyWordsTableData.value.push({
      keyWords: keyWordsTextarea.value,
    })
    keyWordsTextarea.value = ''
  }
}

// ------------------------------------------广告组商品表格模块------------------------------------------
const goodsTextarea = ref('')

function setTableData(asin = '', sku = '') {
  return request({
    url: '/api/sellers/listings/',
    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 = addedData.value.some((item) => item.sku === scope.row.sku)
  if (!isAlreadyAdded) {
    addedData.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) => {
          // 假设你的数据是在 response.data 中
          console.log(`Data for ASIN ${asin}:`, response) // 更新这里来正确地访问数据
        })
        .catch((error) => {
          console.error(`Error fetching data for ASIN ${asin}:`, error)
        })
    }
  })
}

function delSingleGoods(scope) {
  const index = addedData.value.findIndex((item) => item.sku === scope.row.sku)

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

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

// 删除第二个table中已经选中的项
function delSelectedGoods() {
  addedData.value = addedData.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) => !addedData.value.some((added) => added.sku === sel.sku) // 使用sku作为唯一标识
  )
  // 如果有新的不重复项，加入到addedData.value中
  if (newSelections.length > 0) {
    addedData.value.push(...newSelections)
  }
}
// 点击Tab
const handleGoodsTabs = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

// ------------------------------------------否定词模块------------------------------------------
function addNegative() {
  // 删除 negativeTextarea 前后的空格
  const trimmedText = ruleForm.negativeTextarea.trim()
  // 使用逗号和换行符分割文本
  const items = trimmedText.split(/,|\n/)

  // 遍历分割后的每个项目
  items.forEach((item) => {
    const trimmedItem = item.trim() // 删除每个项目前后的空格
    if (trimmedItem) {
      // 如果两者都是 true，则为每个创建两个条目
      if (ruleForm.phraseNegation && ruleForm.preciseNegation) {
        negativeList.push({ negativeWords: '词组: ' + trimmedItem })
        negativeList.push({ negativeWords: '精确: ' + trimmedItem })
      } else if (ruleForm.phraseNegation) {
        negativeList.push({ negativeWords: '词组: ' + trimmedItem })
      } else if (ruleForm.preciseNegation) {
        negativeList.push({ negativeWords: '精确: ' + trimmedItem })
      }
    } else {
      console.log('有空项目,未被添加到列表中')
    }
  })
  // 清空输入框
  ruleForm.negativeTextarea = ''
  console.log(negativeList)
}

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

function delSingleNegative(scope) {
  const index = negativeList.findIndex((item) => item.negativeWords === scope.row.negativeWords)
  if (negativeList.length) {
    negativeList.splice(index, 1)
    console.log(`已删除索引为 ${index} 的条目`)
  } else {
    console.log('无效的索引，无法删除条目')
  }
}

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

function setNegativeTableData(asin = '') {
  return request({
    url: '/api/sellers/listings/',
    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
      loading.value = false
    })
    .catch((error) => {
      console.error('Error fetching data:', error)
      loading.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) {
  console.log('scope', scope.row)

  const isAlreadyAdded = addedNegetiveTableData.value.some((item) => item.sku === scope.row.sku)
  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.sku === scope.row.sku)

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

// ------------------------------------------自定义校验模块------------------------------------------
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)
    })
  }
)

// ------------------------------------------表单提交------------------------------------------
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()
}


let respCampaignId = ref('')
let campaignSave = ref(true)
async function createCampaigns() {
  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,
    }

    // 过滤掉 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,
    })
    console.log('🚀 ~ createCampaigns ~ resp-->>', resp)
    respCampaignId.value = resp.data.campaignId
    if (respCampaignId.value) {
      campaignSave.value = false
      campaignLoading.value = false
    } else {
      campaignLoading.value = false
      ElMessage.error('广告活动创建失败!')
    }
  } catch (error) {
    console.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 createGroups() {
  try {
    // 构建请求数据
    const requestData = {
      profile_id: profile.value.profile_id,
      campaignId: respCampaignId,
      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,
    })
    console.log('🚀 ~ createCampaigns ~ resp-->>', resp)

  } catch (error) {
    console.error('请求失败：', error)
  }
}

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


// 修改表头样式
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()
  // const myTest = route.query
  // console.log('myTest', myTest)
})

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

<style lang="scss" scoped>
::v-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>