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

<template>
  <div>
    <el-card>
      <div style="padding-left: 5px">
        <!-- 广告活动 -->
        <div style="font-size: 20px; font-weight: bold">广告活动</div>
        <hr />
        <br />
        <el-form
          :label-position="labelPosition"
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          :size="formSize"
          status-icon>
          <el-form-item label="广告活动名称" prop="name" style="width: 350px">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item label="广告组合" prop="adMix">
            <el-select v-model="ruleForm.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="date1" label="开始日期" style="width: 350px">
            <el-date-picker v-model="ruleForm.date1" type="date" label="开始日期" placeholder="开始日期" style="width: 100%" />
          </el-form-item>
          <el-form-item prop="date2" label="结束日期" style="width: 350px">
            <el-date-picker v-model="ruleForm.date2" label="结束日期" placeholder="结束日期" style="width: 100%" />
          </el-form-item>
          <el-form-item prop="budget" label="每日预算" style="width: 350px">
            <el-input v-model="ruleForm.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="ruleForm.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="ruleForm.bidStrategy">
              <div>
                <el-radio label="dynamicBid_Low" border>
                  动态竞价-仅降低
                  <div class="radio-description-2">当您的广告不太可能带来销售时，我们将实时降低您的竞价</div>
                </el-radio>
              </div>
              <div>
                <el-radio label="dynamicBid_HighAndLow" border>
                  动态竞价-提高和降低
                  <div class="radio-description-2">
                    当您的广告很有可能带来销售时，我们将实时提高您的竞价（最高可达 100%），并在您的广告不太可能带来销售时降低您的竞价
                  </div>
                </el-radio>
              </div>
              <el-radio label="staticBid" 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="ruleForm.placeBid" class="gap-item">
                <template #append>%</template>
              </el-input>
            </div>
            <div class="gap-items">
              <div class="gap-item">商品首页</div>
              <el-input v-model="ruleForm.firstPage" class="gap-item">
                <template #append>%</template>
              </el-input>
            </div>
            <div class="gap-items">
              <div class="gap-item">搜索结果的其余位置</div>
              <el-input v-model="ruleForm.other" class="gap-item">
                <template #append>%</template>
              </el-input>
            </div>
          </el-form-item>
          <!-- 广告组 -->
          <div style="font-size: 20px; font-weight: bold; margin-top: 30px">广告组</div>
          <hr />
          <el-form-item label="广告组名称" prop="adGroupName" style="width: 350px; margin-top: 20px">
            <el-input v-model="ruleForm.adGroupName" />
          </el-form-item>
          <!-- 广告组商品表格 -->
          <el-form-item label="商品" prop="commodity" style="width: 100%; margin-top: 20px">
            <div style="width: 100%; height: 620px; display: flex; border: 1px solid #c2c7cf; border-radius: 6px">
              <div style="width: 50%; border-right: 1px solid #c2c7cf">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleGoodsTabs">
                  <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="textarea"
                      :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>{{ 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">
                  <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">
            <p style="color: #606266; font-weight: 450"><span style="color: #e47470">*</span> 自动定向</p>
            <el-radio-group v-model="ruleForm.autoRedirect" @change="changeBid">
              <div style="display: flex">
                <el-radio label="defaultBid">设置默认出价</el-radio>
                <el-form-item prop="defaultBidInp">
                  <el-input v-model="ruleForm.defaultBidInp" label="ruleForm.defaultBidInp" style="width: 200px">
                    <template #prepend>$</template>
                  </el-input>
                </el-form-item>
              </div>
              <div>
                <el-radio label="targetBid">按目标组设置出价</el-radio>
              </div>
            </el-radio-group>
          </div>
          <!-- 自动定向---按目标组设置出价 -->
          <el-card v-if="showCard" 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>

          <el-form-item label="手动" v-if="ruleForm.type === 'manual'">
            <el-card>1233</el-card>
          </el-form-item>

          <div style="font-size: 20px; font-weight: bold; margin-top: 30px">否定词</div>
          <hr />
          <!-- 否定词表格 -->
          <el-form-item prop="matchType" style="width: 100%; margin-top: 20px">
            <div style="width: 100%; height: 520px; display: flex; border: 1px solid #c2c7cf; border-radius: 6px">
              <div style="width: 50%; border-right: 1px solid #c2c7cf">
                <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">
                  <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">否定商品</div>
          <hr />          
          <!-- 否定商品表格 -->
          <el-form-item prop="matchType" style="width: 100%; margin-top: 20px">
            <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="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="请输入关键词，多个关键词使用逗号或者换行符分隔。(最多添加1000个关键词)"
                      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">
                  <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 type="negativeGoods" @click="submitForm(ruleFormRef)">Create</el-button>
            <el-button @click="resetForm(ruleFormRef)">Reset</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 { useRoute } from 'vue-router'
import type { FormInstance, FormRules, TabsPaneContext } 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 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 searchInp = ref('')
const select = ref('name')
const select2 = ref('latest')
const textarea = ref('')
const buttons = [{ type: 'primary', text: '添加' }] as const
const negativeInput = ref('')

// 表单相关数据
const formSize = ref('default')
const labelPosition = ref('top')
const ruleFormRef = ref<FormInstance>()
interface RuleForm {
  name: string
  adMix: string
  count: string
  date1: string
  date2: string
  budget: string
  delivery: boolean
  type: string
  bidStrategy: string
  placeBid: string
  firstPage: string
  other: string
  adGroupName: string
  autoRedirect: string
  defaultBidInp: 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
}
const ruleForm = reactive<RuleForm>({
  name: 'Hello',
  adMix: '',
  count: '',
  date1: '',
  date2: '',
  budget: '',
  delivery: false,
  type: 'auto',
  bidStrategy: 'dynamicBid_Low',
  placeBid: '',
  firstPage: '',
  other: '',
  adGroupName: '',
  autoRedirect: 'defaultBid',
  defaultBidInp: '',
  closeMatch: true,
  broadMatch: true,
  similarProducts: true,
  relatedProducts: true,
  closeMatchInp: '666',
  broadMatchInp: '666',
  similarProductsInp: '666',
  relatedProductsInp: '666',
  phraseNegation: true,
  preciseNegation: true,
  negativeTextarea: '',
  negativeGoodsTextarea: '',
})
const rules = 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' }],
  date1: [{ 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' }],
  adGroupName: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }],
  autoRedirect: [{ required: true, trigger: 'change' }],
  defaultBidInp: getValidationRules('defaultBidInp'),
  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 // 重置到第一页
}


// ---------------------广告组商品表格模块---------------------
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 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(ruleForm.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!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

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


// 修改表头样式
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',
    }
  }
}

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;
  border: none;
}

.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;
}
</style>