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

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

// 表单相关数据
const campaignLoading = ref(false);
const formSize = ref('default');
const labelPosition = ref('top');
// ------------------------------------------广告活动------------------------------------------
let respCampaignId = ref('');
let adGroupSave = ref(true);
const campaignFormRef = ref<FormInstance>();

interface CampaignForm {
  name: string;
  adMix: string;
  count: string;
  startDate: string;
  date2: string;
  budget: string;
  delivery: boolean;
  type: string;
  bidStrategy: string;
  placeBid: string;
  firstPage: string;
  other: string;
}

const campaignRuleForm = reactive<CampaignForm>({
  name: '',
  adMix: '',
  count: '',
  startDate: '',
  date2: '',
  budget: '',
  delivery: false,
  type: 'AUTO',
  bidStrategy: 'LEGACY_FOR_SALES',
  placeBid: '',
  firstPage: '',
  other: '',
});
const campaignRules = computed(() => ({
  name: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }],
  adMix: [{ required: false, message: 'Please select Activity zone', trigger: 'change' }],
  count: [{ required: true, message: 'Please select Activity count', trigger: 'change' }],
  startDate: [{ required: true, type: 'date', message: 'Please pick a date', trigger: 'change' }],
  date2: [{ required: false, type: 'date', message: 'Please pick a time', trigger: 'change' }],
  budget: [
    { required: true, message: '请输入预算', trigger: 'blur' },
    {
      pattern: /^(?:[1-9]\d{0,5}|1000000)(?:\.\d{1,2})?$/,
      message: '预算必须是1到1000000之间的数字，小数点后最多两位',
      trigger: 'blur',
    },
  ],
  type: [{ required: false, trigger: 'change' }],
  bidStrategy: [{ required: true, message: 'Please select activity resource', trigger: 'change' }],
  placeBid: [{ required: false, pattern: /^[0-9]{1,3}$/, message: '必须是0~900之间的整数百分比', trigger: 'change' }],
  firstPage: [{ required: false, pattern: /^[0-9]{1,3}$/, message: '必须是0~900之间的整数百分比', trigger: 'change' }],
  other: [{ required: false, pattern: /^[0-9]{1,3}$/, message: '必须是0~900之间的整数百分比', trigger: 'change' }],
}));

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

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

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

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

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

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

const adMixOptions = ref([]);

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

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

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

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

// ------------------------------------------------------广告组------------------------------------------------------
const adGroupRuleFormRef = ref<FormInstance>();

interface AdGroupForm {
  adGroupName: string;
  defaultBidInp: string;
}

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

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

let respAdGroupId = ref('');
let adsSave = ref(true);

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

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

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

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

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

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

function addSingleGoods(scope) {
  // console.log('scope', scope.row)
  const isAlreadyAdded = adsTableData.value.some((item) => item.sku === scope.row.sku);
  if (!isAlreadyAdded) {
    adsTableData.value.push(scope.row);
  } else {
    ElMessage({
      message: '已添加',
      type: 'warning',
    });
  }
}

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

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

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

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

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

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

function selChange(e) {
  // console.log('e', e)
  const value = e;
  if (select.value === 'asin' && searchInp.value) {
    loading.value = true;
    setTableData(value);
  } else if (select.value === 'sku' && searchInp.value) {
    loading.value = true;
    setTableData('', value);
  }
}

// 点击表格选项触发事件
function handleSelectionChange(selection) {
  selections = selection;
}

// 获取addedTable中已选中的项
function handleAddedGoodsChange(selection) {
  addedSels = selection;
}

// 添加已选中的项
function handleGoodsAdd() {
  // 过滤掉已经存在于addedData.value中的项
  const newSelections = selections.filter(
    (sel) => !adsTableData.value.some((added) => added.sku === sel.sku) // 使用sku作为唯一标识
  );
  // 如果有新的不重复项，加入到addedData.value中
  if (newSelections.length > 0) {
    adsTableData.value.push(...newSelections);
  }
}

// 点击Tab
const handleGoodsTabs = (tab: TabsPaneContext, event: Event) => {
  // console.log(tab, event)
};

function isItemInList(item, list) {
  return list.some((listItem) => listItem.sku === item.sku && listItem.asin === item.asin);
}

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

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

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

// ------------------------------------------目标组设置出价------------------------------------------
let targetGroupBidSave = ref(true);
let targetGroupLoading = ref(false);
const targetGroupFormRef = ref<FormInstance>();

interface TargetGroupForm {
  closeMatch: boolean;
  broadMatch: boolean;
  similarProducts: boolean;
  relatedProducts: boolean;
  closeMatchInp: string;
  broadMatchInp: string;
  similarProductsInp: string;
  relatedProductsInp: string;
}

const targetGroupRuleForm = reactive<TargetGroupForm>({
  closeMatch: true,
  broadMatch: true,
  similarProducts: true,
  relatedProducts: true,
  closeMatchInp: '1',
  broadMatchInp: '1',
  similarProductsInp: '1',
  relatedProductsInp: '1',
});
const targetGroupRules = computed(() => ({
  closeMatchInp: [
    { required: true, message: '请输入默认出价', trigger: 'blur' },
    { validator: validateDefaultBidInp, trigger: 'blur' },
  ],
  broadMatchInp: [
    { required: true, message: '请输入默认出价', trigger: 'blur' },
    { validator: validateDefaultBidInp, trigger: 'blur' },
  ],
  similarProductsInp: [
    { required: true, message: '请输入默认出价', trigger: 'blur' },
    { validator: validateDefaultBidInp, trigger: 'blur' },
  ],
  relatedProductsInp: [
    { required: true, message: '请输入默认出价', trigger: 'blur' },
    { validator: validateDefaultBidInp, trigger: 'blur' },
  ],
}));

function closeMatchChange() {
  if (targetGroupRuleForm.closeMatch == false) {
    targetGroupRuleForm.closeMatchInp = '';
    targetGroupFormRef.value.clearValidate('closeMatchInp');
  } else {
    targetGroupRuleForm.closeMatchInp = '1';
    // targetGroupFormRef.value.validateField('closeMatchInp')
  }
}

function broadMatchChange() {
  if (targetGroupRuleForm.broadMatch == false) {
    targetGroupRuleForm.broadMatchInp = '';
    targetGroupFormRef.value.clearValidate('broadMatchInp');
  } else {
    targetGroupRuleForm.broadMatchInp = '1';
    // targetGroupFormRef.value.validateField('broadMatchInp')
  }
}

function similarProductsChange() {
  if (targetGroupRuleForm.similarProducts == false) {
    targetGroupRuleForm.similarProductsInp = '';
    targetGroupFormRef.value.clearValidate('similarProductsInp');
  } else {
    targetGroupRuleForm.similarProductsInp = '1';
    // targetGroupFormRef.value.validateField('similarProductsInp')
  }
}

function relatedProductsChange() {
  if (targetGroupRuleForm.relatedProducts == false) {
    targetGroupRuleForm.relatedProductsInp = '';
    targetGroupFormRef.value.clearValidate('relatedProductsInp');
  } else {
    targetGroupRuleForm.relatedProductsInp = '1';
    // targetGroupFormRef.value.validateField('relatedProductsInp')
  }
}

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

function submitTargetGroupForm() {
  targetGroupLoading.value = true;
  createTargetGroup();
}

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

const ruleFormRef = ref<FormInstance>();

interface RuleForm {
  autoRedirect: string;
  // NEGATIVE_PHRASE: boolean
  // NEGATIVE_EXACT: boolean
  negativeTextarea: string;
  negativeGoodsTextarea: string;
  targetType: string;
}

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

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

// 当单选按钮变化时更新showCard状态
function changeBid() {
  showCard.value = ruleForm.autoRedirect === 'targetBid';
}

// 切换投放类型
function changeType() {}

// 处理分页器当前页变化
function handleCurrentChange(newPage) {
  currentPage.value = newPage;
  loading.value = true;
  setTableData();
}

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

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

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

interface Mark {
  style: CSSProperties;
  label: string;
}

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

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

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

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

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

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

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

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

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

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

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

let singleGoodsSearchInp = ref('');
let searchTableData = ref([]);

function setSearchTableData(asin = '', sku = '') {
  return request({
    url: '/api/sellers/listings/our/',
    method: 'GET',
    params: {
      profile_id: profile.value.profile_id,
      asin,
      sku,
    },
  })
    .then((resp) => {
      searchTableData.value = resp.data;
      productOrientationLoading.value = false;
    })
    .catch((error) => {
      console.error('Error fetching data:', error);
      productOrientationLoading.value = false;
    });
}

function singleGoodsSearchChaneged() {
  productOrientationLoading.value = true;
  setSearchTableData();
}

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

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

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

    if (!isAlreadyAdded) {
      const newData = {
        type: 'p',
        asin: scope.row.asin,
        sku: scope.row.sku,
        productType: productType,
        productTypeText: productTypeMap[productType],
        bid: bidValue, // 添加 bid 值
      };
      productOrientationTableData.value.push(newData);
    } else {
      ElMessage({
        message: `${productType} 已添加`,
        type: 'warning',
      });
    }
  });
}

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

let refineItem = ref([]);

// 细化按钮功能
function refine(data) {
  commodityCount.value = [];
  dialogTitle.value = data.cna;
  categoryId.value = data.cid;
  refineItem.value.push(data);
  visible.value = true;
  dialogSelectLoading.value = true;
  setDialogOption();
}

// 弹框提交功能
function dialogFormSubmit() {
  dialogFormRef.value.validate((valid) => {
    if (valid) {
      visible.value = false;
      const dialogClassification = dialogTitle.value;
      const dialogPrices_low = dialogForm.prices.lowest;
      const dialogPrices_high = dialogForm.prices.highest;
      const dialogStartRating = dialogForm.starRating;
      const ratingLow = dialogStartRating[0];
      const ratingHigh = dialogStartRating[1];
      const dialogDelivery = dialogForm.delivery;
      const deliveryMap = {
        all: '所有',
        eligible: '具备Prime资格',
        diseligible: '不具备Prime资格',
      };

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

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

// 定向按钮功能
function orientate(node, data) {
  const exists = productOrientationTableData.value.some((item) => item.cid === data.cid);

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

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

let productTargetBidList = ref([]);

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

    productOrientationLoading.value = false;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// 输入tab的textarea
function addNegativeGoods() {
  loading.value = true;

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

function addSingleNegativeGoods(scope) {
  const isAlreadyAdded = addedNegetiveTableData.value.some((item) => item.asin === scope.row.asin);
  if (!isAlreadyAdded) {
    addedNegetiveTableData.value.push(scope.row);
  } else {
    ElMessage({
      message: '已存在',
      type: 'warning',
    });
  }
}

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

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

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

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

function handleAddedNegGoods(selection) {
  addedSels = selection;
}

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

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

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

  if (!isNormalNumberWithTwoDecimals) {
    callback(new Error('请输入数字值（最多两位小数）'));
  } else if (isNaN(bid)) {
    callback(new Error('请输入有效的数字'));
  } else if (bid < 0.02 || bid > 1000) {
    callback(new Error('值必须在0.02到1000之间'));
  } else if (bid >= budget) {
    callback(new Error('出价必须小于预算'));
  } else {
    callback();
  }
}

// 自定义校验规则---自动定价和按目标设置出价模块
// function getValidationRules(fieldName) {
//   // 默认校验规则
//   const commonRules = [
//     { required: true, message: '此项为必填项', trigger: 'blur' },
//     { validator: (rule, value, callback) => checkBid(value, callback, fieldName), trigger: 'blur' },
//   ]

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

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

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

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

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

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

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

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

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

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

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

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

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

<style lang="scss" scoped>
:deep(.el-form--default.el-form--label-top .el-form-item .el-form-item__label) {
  font-weight: 500;
}

.column-item .el-radio-group {
  display: inline-flex;
  font-size: 0;
  flex-direction: column;
  align-items: flex-start;
}

.radio-description {
  font-size: 12px;
  color: #666;
  margin-top: -18px;
  margin-left: 22px;
}

.radio-description-2 {
  font-size: 12px;
  color: #666;
  margin-top: -10px;
}

.column-margin-bottom label.el-radio.is-bordered {
  margin-bottom: 10px;
  padding: 35px;
}

::v-deep(.column-margin-bottom label.el-radio.is-bordered span.el-radio__inner) {
  margin-top: -18px;
  margin-left: -15px;
}

.gap-items {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  margin-bottom: 20px;
}

.gap-item {
  width: 200px;
  margin-left: 30px;
  color: #0b0d0d;
}

.demo-tabs > .el-tabs__content {
  padding: 52px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

/* 广告组商品Tab栏 */
::v-deep(.el-tabs__nav-scroll) {
  overflow: hidden;
  margin-left: 20px;
}

::v-deep(.el-tabs__nav-wrap::after) {
  height: 2px !important;
}

::v-deep(.el-table__inner-wrapper::before) {
  background-color: white;
}

// 表格内容边距
div {
  & #pane-first,
  & #pane-second {
    margin: 10px;
  }
}

// 输入底部样式
::v-deep(.card-box .el-card__body) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card {
  width: 100%;
  // margin: 10px 0 10px 10px;
  margin-right: 10px;
}

.single-line {
  color: rgb(30, 33, 41);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  //white-space: pre-wrap;
  word-break: break-word;
}

.data-color {
  color: rgb(30, 33, 41);
}

.img-box {
  width: 60px;
  height: 60px;
  margin-top: 5px;
  border: 1px solid rgb(194, 199, 207);
  border-radius: 4px;
}

.target-group-item {
  margin-top: 15px;
}

.suggested-bid-item {
  margin-left: 230px;
  margin-right: 60px;
}

.bid-input {
  width: 200px;
  margin-left: 15px;
}

::v-deep(.goods-orientation-tabs .el-tabs__nav-scroll) {
  margin-left: -20px !important;
}

::v-deep(.category-tabs .el-tabs__nav) {
  margin-left: 20px;
}

::v-deep(.goods-orientation-tabs #tab-1) {
  /* 商品定向Tab栏 */
  border-right: 0;
}

.custom-tree-node {
  /* el-tree自定义样式 */
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.dialog-head {
  /* 弹窗样式 */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
