<template>
  <div class="asj-container">
    <div class="asj-detail-header">
      <span style="font-size: x-large; font-weight: bold; color: #0f1111;margin: 5px;">
        <span> {{ adGroupInfo.adGroupName }} </span>
      </span>
      <div class="asj-detail-info">
        <div>
          <span class="label">状态：</span>
          <span class="value">{{ adGroupInfo.state }}</span>
        </div>
        <div>
          <span class="label">投放类型：</span>
          <span class="value">{{ adGroupInfo.targetingType }}</span>
        </div>
        <div>
          <span class="label">默认竞价：</span>
          <span class="value">{{ profile.currency_symbol + adGroupInfo.defaultBid }}</span>
        </div>
        <div>
          <span class="label">投放日期：</span>
          <span class="value">{{ adGroupInfo.startDate }} ~ {{ adGroupInfo.endDate ?? '无结束日期' }}</span>
        </div>
      </div>
    </div>
    <el-tabs type="border-card" class="asj-detail-tabs" v-model="tabActiveName">
      <el-tab-pane label="推广商品" name="adProducts">
        <AdProducts v-if="tabActiveName==='adProducts'" :adGroupId="route.query.adGroupId"></AdProducts>
      </el-tab-pane>
      <template v-if="route.query.targetingType === 'automatic'">
        <el-tab-pane label="定向" name="tab2">
          <AutoTarget v-if="tabActiveName === 'tab2'" :adGroupId="route.query.adGroupId">定向</AutoTarget>
        </el-tab-pane>
        <el-tab-pane label="否定投放" name="tab3">
          <NegTarget v-if="tabActiveName === 'tab3'" :adGroupId="route.query.adGroupId">否定投放</NegTarget>
        </el-tab-pane>
      </template>
      <template v-else-if="route.query.targetingType ==='product'">
        <el-tab-pane label="商品投放" name="tab2">
          <ManualTarget v-if="tabActiveName === 'tab2'" :adGroupId="route.query.adGroupId">商品投放</ManualTarget>
        </el-tab-pane>
        <el-tab-pane label="否定商品" name="tab3">
          <NegProduct v-if="tabActiveName === 'tab3'" :adGroupId="route.query.adGroupId">否定商品</NegProduct>
        </el-tab-pane>
        <el-tab-pane label="ASIN跑词" name="asinWord">
          <AsinWord v-if="tabActiveName === 'asinWord'" :adGroupId="route.query.adGroupId" />
        </el-tab-pane>
        <el-tab-pane label="ASIN跑词(词组)" name="asinWordGroup">
          <AsinWordGroup v-if="tabActiveName === 'asinWordGroup'" :adGroupId="route.query.adGroupId" />
        </el-tab-pane>
      </template>
      <template v-else>
        <el-tab-pane label="关键词" name="tab2">
          <Keyword v-if="tabActiveName === 'tab2'" :ad-group-id="route.query.adGroupId">关键词</Keyword>
        </el-tab-pane>
        <el-tab-pane label="否定词" name="tab3">
          <NegKeyword v-if="tabActiveName === 'tab3'" :ad-group-id="route.query.adGroupId">否定词</NegKeyword>
        </el-tab-pane>
      </template>
      <el-tab-pane label="搜索关键词" name="searchTerm">
        <SearchTerm v-if="tabActiveName === 'searchTerm'" :adGroupId="route.query.adGroupId" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import { Ref, ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { GetObj } from './api'
import { useShopInfo } from '/@/stores/shopInfo'
// import { usePublicData } from '/@/stores/publicData'
import { storeToRefs } from 'pinia'
import AdProducts from '/@/views/adManage/sp/campaigns/campaignDetail/adGroups/adGroupDetail/adProducts/index.vue'
import SearchTerm from './searchTerm/index.vue'
import Keyword from './keyword/index.vue'
import AutoTarget from './autoTarget/index.vue'
import ManualTarget from './manualTarget/index.vue'
import NegProduct from './negProduct/index.vue'
import NegKeyword from './negKeyword/index.vue'
import NegTarget from './negTarget/index.vue'
import AsinWord from './asinWord/index.vue'
import AsinWordGroup from './asinWordGroup/index.vue'

const tabActiveName = ref('adProducts')
const shopInfo = useShopInfo()
const { profile } = storeToRefs(shopInfo)
const route = useRoute()
const adGroupInfo: Ref<SpAdGroup> = ref({})

onMounted(async () => {
  const resp = await GetObj(route.query.adGroupId)
  console.log("(index.vue: 89)=> resp", resp);
  adGroupInfo.value = resp.data
})

</script>

<style scoped>

</style>
