<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">
        <span style="color: rgb(177, 177, 177);">状态: </span>
        <span>
          <el-button class="no-hover-effect" type="success" size="small" round plain>{{ dynStatusEnum[adGroupInfo.state] }}</el-button>
        </span>
        <span class="head-span">投放类型: </span> <span>{{ targetTypeEnum[adGroupInfo.creative_type] }}</span>
        <!-- <span>默认竞价：{{ profile.currency_symbol + adGroupInfo.defaultBid }}</span> -->
        <span class="head-span">投放日期: </span> <span>{{ adGroupInfo.startDate }} ~ {{ adGroupInfo.endDate ?? '无结束日期' }}</span>
      </div>
    </div>
    <el-tabs type="border-card" class="asj-detail-tabs" v-model="tabActiveName">
      <el-tab-pane label="广告" name="ads">
        <Ads v-if="tabActiveName==='ads'" :adGroupId="route.query.adGroupId"></Ads>
      </el-tab-pane>
      <template v-if="route.query.targetingType ==='target'">
        <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>-->
      </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>
        <el-tab-pane label="搜索关键词" name="searchTerm">
          <SearchTerm v-if="tabActiveName === 'searchTerm'" :adGroupId="route.query.adGroupId" />
        </el-tab-pane>
      </template>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, ref, Ref} from 'vue'
import {useRoute} from 'vue-router'
import {GetObj} from './api'
import {useShopInfo} from '/@/stores/shopInfo'
import {storeToRefs} from 'pinia'
import Ads from './ads/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 {dynStatusEnum, targetTypeEnum} from '/@/views/adManage/utils/enum'
// import { usePublicData } from '/@/stores/publicData'


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

onMounted(async () => {
  const resp = await GetObj(route.query.adGroupId)
  adGroupInfo.value = resp.data
  console.log(111, route.query)
})

</script>

<style scoped>
.head-span {
  color: rgb(177, 177, 177);
  margin-left: 40px;
}
:deep(.el-tabs--border-card) {
  border: none;
}
</style>
