<template>
  <div class="customize-container">
    <el-card body-style="padding: 20px 80px 0 80px;">
      <div class="custom-card-title">
        <span class="custom-card-icon">|</span>
        <span class="custom-card-Text">自定义定向</span>
      </div>
      <div class="main-container" v-loading="loading">
        <div class="left-container">
          <el-tabs v-model="topTabName" class="demo-tabs" @tab-click="handleClick">
            <div class="tab-container-fixed-top">
              <span class="tab-top-label">添加定向时的竞价设置: </span>
              <el-select v-model="bidType">
                <el-option v-for="item in bidTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
              <el-input v-model="bid" :disabled="bidType == '1'" style="width: 200px">
                <template #prepend>$</template>
              </el-input>
            </div>
            <el-tab-pane label="亚马逊受众" name="audience">
              <div>
                <div style="display: flex">
                  <el-select v-model="audienceType" @change="handleSearchChange" style="width: 140px; margin-right: 10px">
                    <el-option v-for="item in audienceTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                  <el-input v-model="keywordInput" @change="handleSearchChange" placeholder="请输入关键词进行过滤"></el-input>
                </div>
                <hr style="margin-top: 5px" />
                <el-table
                  :data="searchData"
                  :row-key="(item) => item.audienceId"
                  :show-header="false"
                  v-loading="searchLoading"
                  height="550"
                  style="width: 100%">
                  <el-table-column prop="date" label="Date">
                    <template #default="{ row }">
                      <div style="font-weight: 500; color: #000">{{ row.category }}</div>
                      <div style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden">{{ row.audienceName }}</div>
                      <div style="color: rgba(0, 0, 0, 0.45)">预估人数: {{ row.lowerBoundInclusive }} - {{ row.upperBoundExclusive }}</div>
                    </template>
                  </el-table-column>
                  <el-table-column prop="opotion" label="option" width="80">
                    <template #default="{ row }">
                      <el-button type="primary" size="small" link @click="handleAddButtonClick(row)">添加</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
            <el-tab-pane label="浏览再营销" name="views">
              <div class="tab-title">触达浏览过您推广的商品或其他类似商品、商品品类、品牌以及其他商品功能的顾客</div>
              <el-tabs v-model="viewsTabName" type="border-card">
                <div class="el-row align-center-bottom">
                  <span class="select-label">回溯期: </span>
                  <el-select v-model="viewsLookBack">
                    <el-option v-for="item in viewsLookBackOptions" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
                <el-tab-pane label="建议" name="advice">
                  <div style="height: 450px">
                    <div>动态细分</div>
                    <hr style="margin: 5px 0" />
                    <div>
                      <div style="display: flex; justify-content: space-between">
                        <div>推广的商品</div>
                        <el-button type="primary" size="small" link @click="addPromoteProduct" style="color: #3569d6;">添加</el-button>
                      </div>
                      <div style="display: flex; justify-content: space-between">
                        <div>与推广商品类似的商品</div>
                        <el-button type="primary" size="small" link @click="addPromoteSimilar" style="color: #3569d6;">添加</el-button>
                      </div>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="搜索" name="search">
                  <BrowseSearch @add-to-table="browseOrientation" @form-submitted="browseRefine"></BrowseSearch>
                </el-tab-pane>
              </el-tabs>
            </el-tab-pane>
            <el-tab-pane label="购买再营销" name="purchases">
              <div class="tab-title">向购买过广告商品或其他相关商品、商品类别、品牌及其他商品功能的购买者传递信息</div>
              <el-tabs v-model="purchasesTabName" type="border-card">
                <div class="el-row align-center-bottom">
                  <span class="select-label">回溯期: </span>
                  <el-select v-model="purchasesLookBack">
                    <el-option v-for="item in purchasesLookBackOptions" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </div>
                <el-tab-pane label="建议" name="advice">
                  <div style="height: 450px">
                    <div>动态细分</div>
                    <hr style="margin: 5px 0" />
                    <div>
                      <div style="display: flex; justify-content: space-between">
                        <div>推广的商品</div>
                        <el-button type="primary" size="small" link @click="addPromoteProduct" style="color: #3569d6;">添加</el-button>
                      </div>
                      <div style="display: flex; justify-content: space-between">
                        <div>与推广的商品相关</div>
                        <el-button type="primary" size="small" link @click="addPromoteSimilar" style="color: #3569d6;">添加</el-button>
                      </div>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="搜索" name="search">
                  <BuySearch @add-to-table="buyOrientation" @form-submitted="buyRefine"></BuySearch>
                </el-tab-pane>
              </el-tabs>
            </el-tab-pane>
          </el-tabs>
        </div>
        <!-- 右侧内容区 -->
        <div class="right-container">
          <div class="right-container-top">
            <el-text class="mx-1" style="padding-left: 15px">已添加: {{ addedTableData.length }}</el-text>
            <el-text class="mx-1" type="success">成功: {{ successCount }}</el-text>
            <el-text class="mx-1" type="danger">失败: {{ failureCount }}</el-text>
            <el-button link type="danger" @click="handleDeleteAll" style="margin-right: 15px">删除所有</el-button>
          </div>
          <el-table :data="addedTableData" :header-cell-style="changeTableHeader" height="600" style="width: 100%">
            <el-table-column prop="date" label="商品">
              <template #default="{ row }">
                <div v-if="row.currentTitle" style="color: black; font-weight: 450">{{ row.currentTitle }}</div>
                <div v-if="row.productType">
                  商品类型: <span style="color: black">{{ productTypeDict[row.productType] }}</span>
                </div>
                <div v-if="row.cna || row.dialogTitle">
                  分类: <span style="color: black">{{ row.cna ? row.cna : row.dialogTitle }}</span>
                </div>
                <div v-if="row.brand">
                  品牌: <span style="color: black">{{ row.brand ? row.brand : '--' }}</span>
                </div>
                <div v-if="row.low_prices || row.high_prices">
                  商品价格: <span style="color: black">${{ row.low_prices ? row.low_prices : '--' }}</span>
                  <span> -</span>
                  <span style="color: black"> ${{ row.high_prices ? row.high_prices : '--' }}</span>
                </div>
                <div v-if="row.delivery">
                  配送:
                  <span style="color: black">{{ row.delivery ? deliveryMap[row.delivery] : '--' }}</span>
                </div>
                <div v-if="row.lookback">
                  回溯期: <span style="color: black">{{ row.lookback ? row.lookback : '--' }}</span>
                </div>
                <div v-if="row.audienceName">
                  <div style="font-weight: 500; color: #000">{{ row.category }}</div>
                  <el-tooltip class="box-item" effect="dark" :content="row.audienceName" placement="top">
                    <div style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden">{{ row.audienceName }}</div>
                  </el-tooltip>
                  <div style="color: rgba(0, 0, 0, 0.45)">预估人数: {{ row.lowerBoundInclusive }} - {{ row.upperBoundExclusive }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="竞价" width="160">
              <template #default="{ row }">
                <el-input v-model.number="row.bid">
                  <template #prepend>$</template>
                </el-input>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="当前建议竞价" width="160">
              <!-- TODO: 后续加入建议竞价 -->
              <template #default="{ row }">
                <div>$</div>
                <div>$</div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="60">
              <template #default="{ row }">
                <el-button link type="danger" size="small" @click="singleDelete(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="display: flex; justify-content: space-around; padding-top: 15px">
            <el-button type="primary" plain :disabled="!addedTableData.length" @click="handleSave">保存</el-button>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, type TabsPaneContext } from 'element-plus'
import { storeToRefs } from 'pinia'
import { Ref, inject, onMounted, onUnmounted, ref, watch } from 'vue'
import { getAudiencesList, postCustomOperation } from '../api/index'
import BrowseSearch from './BrowseSearch.vue'
import BuySearch from './BuySearch.vue'
import { useShopInfo } from '/@/stores/shopInfo'
import emitter from '/@/utils/emitter'


const respCampaignId = inject<Ref>('respCampaignId')
const respAdGroupId = ref('')
const shopInfo = useShopInfo()
const { profile } = storeToRefs(shopInfo)

// tab栏
const topTabName = ref('audience')

function handleClick(tab: TabsPaneContext, event: Event) {
  if (tab.props.label == '购买再营销') {
    emitter.emit('tree-node-data')
  }
}

// tab栏顶部固定部分功能
const bidType = ref('2')
const bidTypeOptions = [
  {
    value: '1',
    label: '建议竞价',
  },
  {
    value: '2',
    label: '自定义竞价',
  },
]
const bid = ref('0.75')

watch(
  bidType,
  () => {
    if (bidType.value == '1') {
      bid.value = ''
    } else {
      bid.value = '0.75'
    }
  },
  { immediate: true }
)

// 亚马逊受众tab的 下拉框和输入框
const audienceType = ref('')
const audienceTypeOptions = [
  {
    value: '',
    label: '所有受众',
  },
  {
    value: 'Lifestyle',
    label: '生活方式',
  },
  {
    value: 'Interest',
    label: '兴趣',
  },
  {
    value: 'Life event',
    label: '生活事件',
  },
  {
    value: 'In-market',
    label: '场内客群',
  },
]

const keywordInput = ref('') // 关键词过滤输入框

// 浏览再营销下的tab栏
const viewsTabName = ref('advice')
const viewsLookBack = ref('7')
const viewsLookBackOptions = [
  {
    value: '7',
    label: '7天',
  },
  {
    value: '14',
    label: '14天',
  },
  {
    value: '30',
    label: '30天',
  },
  {
    value: '60',
    label: '60天',
  },
  {
    value: '90',
    label: '90天',
  },
]

// 购买再营销下的tab栏
const purchasesTabName = ref('advice')
const purchasesLookBack = ref('7')
const purchasesLookBackOptions = [
  {
    value: '7',
    label: '7天',
  },
  {
    value: '14',
    label: '14天',
  },
  {
    value: '30',
    label: '30天',
  },
  {
    value: '60',
    label: '60天',
  },
  {
    value: '90',
    label: '90天',
  },
]

// 已添加的表格数据
const addedTableData = ref([])

function browseOrientation(data) {

  // const exists = addedTableData.value.some((item) => item.classificationId === data.cid)
  // if (!exists) {
    const tableRow = {
      currentTitle: '浏览再营销',
      type: 'c',
      tactictype: 'views',
      cna: data.cna,
      lookback: viewsLookBack.value,
      bid: bid.value,
      classificationId: data.cid,
    }
    addedTableData.value.push(tableRow)
  // } else {
  //   ElMessage({
  //     message: '请勿重复添加',
  //     type: 'warning',
  //   })
  // }
}

function buyOrientation(data) {
  // const exists = addedTableData.value.some((item) => item.cid === data.cid)
  // if (!exists) {
    const dataWithLookback = {
      currentTitle: '购买再营销',
      type: 'c',
      tactictype: 'purchases',
      cna: data.cna,
      lookback: viewsLookBack.value,
      bid: bid.value,
      classificationId: data.cid,
    }
    addedTableData.value.push(dataWithLookback)
  // } else {
  //   ElMessage({
  //     message: '请勿重复添加',
  //     type: 'warning',
  //   })
  // }
}

// 点击细化后弹窗确认触发
const deliveryMap = {
  eligible: '具备Prime资格',
  diseligible: '不具备Prime资格',
  all: '所有',
}

function browseRefine(data) {
  // const exists = addedTableData.value.some((item) => item.classificationId === data.cid)

  // if (!exists) {
    const tableRow = {
      currentTitle: '浏览再营销',
      type: 'c',
      tactictype: 'views',
      lookback: viewsLookBack.value,
      bid: bid.value,
      brandId: data.selectedBrands,
      classificationId: data.cid,
      delivery: data.delivery,
      dialogTitle: data.dialogTitle, // 分类名称
      brand: data.selectedLabels,
      low_prices: data.prices.lowest,
      high_prices: data.prices.highest,
      low_rating: data.starRating[0],
      high_rating: data.starRating[1],
    }
    addedTableData.value.push(tableRow) // 添加到表格数据
  // } else {
  //   ElMessage({
  //     message: '请勿重复添加',
  //     type: 'warning',
  //   })
  // }
}

function buyRefine(data) {
  // const exists = addedTableData.value.some((item) => item.classificationId === data.cid)
  // if (!exists) {
    const tableRow = {
      currentTitle: '购买再营销',
      type: 'c',
      tactictype: 'purchases',
      lookback: viewsLookBack.value,
      bid: bid.value,
      brandId: data.selectedBrands,
      classificationId: data.cid,
      delivery: data.delivery,
      dialogTitle: data.dialogTitle, // 分类名称
      brand: data.selectedLabels,
      low_prices: data.prices.lowest,
      high_prices: data.prices.highest,
      low_rating: data.starRating[0],
      high_rating: data.starRating[1],
    }
    addedTableData.value.push(tableRow) // 添加到表格数据
  // } else {
  //   ElMessage({
  //     message: '请勿重复添加',
  //     type: 'warning',
  //   })
  // }
}

// 获取搜索的数据
const searchLoading = ref(false)
const searchData = ref([])
const categoryMap = {
  Lifestyle: '生活方式',
  'In-market': '场内客群',
  Interest: '兴趣',
  'Life event': '生活事件',
}

function handleSearchChange() {
  getCustomData()
}

async function getCustomData() {
  searchLoading.value = true
  const query = {
    profile_id: profile.value.profile_id,
    categoryvalues: audienceType.value,
    values: keywordInput.value,
  }
  try {
    const response = await getAudiencesList(query)
    searchData.value = response.data.audiences.map((audience) => ({
      ...audience,
      category: categoryMap[audience.category] || audience.category,
    }))
  } catch (error) {
    console.error('error: ', error)
  } finally {
    searchLoading.value = false
  }
}

function handleAddButtonClick(row) {
  const exists = addedTableData.value.some((item) => item.audienceId === row.audienceId)
  if (!exists) {
    const dataWithLookback = {
      ...row,
      tactictype:"audience",
      audiencevalue: row.audienceId,
      bid: bid.value,
    }
    addedTableData.value.push(dataWithLookback)
  } else {
    ElMessage({
      message: `选项 ${row.audienceName} 已经添加，不能重复添加`,
      type: 'warning',
    })
  }
}

// 删除所有Table数据
function handleDeleteAll() {
  addedTableData.value = []
}

// 单独删除功能
function singleDelete(row) {
  addedTableData.value = addedTableData.value.filter((item) => item !== row)
}

const promoteGoodsAsin = ref('')
const productTypeDict = {
  exactProduct: '推广商品',
  relatedProduct: '与推广的商品相关',
  similarProduct: '与推广商品类似的商品',
}

function addPromoteProduct() {
  // 通过tab判断
  if (topTabName.value == 'views') {
    const newProduct = {
      currentTitle: '浏览再营销',
      type: 'p',
      tactictype: 'views',
      lookback: viewsLookBack.value,
      asin: promoteGoodsAsin.value,
      bid: 0.2,
      productType: 'exactProduct',
    }
    const exists = addedTableData.value.some(
      (item) => item.type === newProduct.type && item.tactictype === newProduct.tactictype && item.productType === newProduct.productType
    )

    if (!exists) {
      addedTableData.value.push(newProduct)
    } else {
      ElMessage({
        message: '已经添加了相关商品，不能重复添加',
        type: 'warning',
      })
    }
  } else if (topTabName.value == 'purchases') {
    const newProduct = {
      currentTitle: '购买再营销',
      type: 'p',
      tactictype: 'purchases',
      lookback: viewsLookBack.value,
      asin: promoteGoodsAsin.value,
      bid: 0.2,
      productType: 'exactProduct',
    }
    const exists = addedTableData.value.some(
      (item) => item.type === newProduct.type && item.tactictype === newProduct.tactictype && item.productType === newProduct.productType
    )

    if (!exists) {
      addedTableData.value.push(newProduct)
    } else {
      ElMessage({
        message: '已经添加了相关商品，不能重复添加',
        type: 'warning',
      })
    }
  }
}

function addPromoteSimilar() {
  if (topTabName.value == 'views') {
    const newProduct = {
      currentTitle: '浏览再营销',
      type: 'p',
      tactictype: 'views',
      lookback: viewsLookBack.value,
      asin: promoteGoodsAsin.value,
      bid: 0.2,
      productType: 'similarProduct',
    }
    const exists = addedTableData.value.some(
      (item) => item.type === newProduct.type && item.tactictype === newProduct.tactictype && item.productType === newProduct.productType
    )

    if (!exists) {
      addedTableData.value.push(newProduct)
    } else {
      ElMessage({
        message: '已经添加了相关商品，不能重复添加',
        type: 'warning',
      })
    }
  } else if (topTabName.value == 'purchases') {
    const newProduct = {
      currentTitle: '购买再营销',
      type: 'p',
      tactictype: 'purchases',
      lookback: viewsLookBack.value,
      asin: promoteGoodsAsin.value,
      bid: 0.2,
      productType: 'relatedProduct',
    }
    const exists = addedTableData.value.some(
      (item) => item.type === newProduct.type && item.tactictype === newProduct.tactictype && item.productType === newProduct.productType
    )

    if (!exists) {
      addedTableData.value.push(newProduct)
    } else {
      ElMessage({
        message: '已经添加了相关商品，不能重复添加',
        type: 'warning',
      })
    }
  }
}

// TODO: 测试state的值是paused, 上线后需要修改
const loading = ref(false)
const successCount = ref('')
const failureCount = ref('')

async function handleSave() {
  const body = {
    profile_id: profile.value.profile_id,
    campaignId: respCampaignId.value,
    adGroupId: respAdGroupId.value,
    tactic: 'T00030',
    expressionType: 'manual',
    expressionList: addedTableData.value,
    state: 'paused',
  }
  try {
    loading.value = true
    const response = await postCustomOperation(body)
    successCount.value = response.data.success.length
    failureCount.value = response.data.error.length
    if (response.data.error.length == 0) {
      addedTableData.value = []
      ElMessage({
        message: '创建成功',
        type: 'success',
      })
    } else {
      ElMessage({
        message: '创建失败',
        type: 'error',
      })
    }
  } catch (error) {
    console.log('error:', error)
  } finally {
    loading.value = false
  }
}

function changeTableHeader(row) {
  if (row) {
    return {
      background: '#f5f7fa',
    }
  }
}

onMounted(() => {
  emitter.on('send-firstAsin', (value: any) => {
    promoteGoodsAsin.value = value
  })
  emitter.on('respAdGroupId', (value: any) => {
    respAdGroupId.value = value
  })
})

onUnmounted(() => {
  emitter.all.clear()
})
</script>

<style scoped>
.customize-container {
  margin-top: 10px;
}
.custom-card-title {
  font-weight: 700;
  padding-bottom: 18px;
}
.custom-card-Text {
  font-size: 18px;
  padding-left: 5px;
}
.custom-card-icon {
  color: #306cd7;
  font-size: 26px;
}
.main-container {
  display: flex;
  border: 1px solid #e5e7eb;
  height: 700px;
  margin-bottom: 20px;
  border-radius: 6px;
}
.left-container {
  width: 50%;
  height: 699px;
  border-right: 1px solid #e5e7eb;
}
.right-container {
  width: 50%;
  height: 699px;
  border-bottom: 0;
}
.right-container-top {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.demo-tabs {
  padding: 0 10px;
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
/* 选中时的字体颜色 */
::v-deep(.demo-tabs .el-tabs__item.is-top.is-active) {
  color: #3569d6;
}
/* 选中时的下划线颜色 */
::v-deep(.demo-tabs .el-tabs__active-bar.is-top) {
  background-color: #3569d6;
}
.tab-container-fixed-top {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  gap: 8px;
  font-size: 13px;
  margin: 10px 0;
}
.tab-top-label {
  color: #4e5969;
  font-weight: 700;
  margin-right: 10px;
}
.align-center-bottom {
  align-items: center;
  margin-bottom: 12px;
}
.tab-title {
  line-height: 20px;
  padding-bottom: 10px;
  color: #8e9095;
}
.select-label {
  padding-right: 5px;
  color: #606266;
}
/* 修改隐藏table底部border */
::v-deep(.el-table__inner-wrapper::before) {
  background-color: #ffffff;
}
</style>
