<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.campaignName }} </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>{{ dynStatusEnum[adGroupInfo.tactic] }}</span>
        <!-- <span>默认竞价：{{ profile.currency_symbol + adGroupInfo.defaultBid }}</span> -->
        <span class="head-span">投放日期: </span> <span>{{ adGroupInfo.startDate }} ~ {{ adGroupInfo.endDate ?? '无结束日期' }}</span>
        <span class="head-span">针对转化率: </span> <span>{{ dynStatusEnum[adGroupInfo.tactic] ? '待加入' : '--' }}</span>
      </div>
    </div>
    <el-tabs type="border-card" class="asj-detail-tabs" v-model="tabActiveName">
      <el-tab-pane label="推广商品" name="ads">
        <PromoteProducts v-if="tabActiveName==='ads'" :adGroupId="route.query.adGroupId"></PromoteProducts>
      </el-tab-pane>
      <template v-if="adGroupInfo.tactic ==='T00030'">
        <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">
          <Target v-if="tabActiveName === 'tab2'" :ad-group-id="route.query.adGroupId">关键词</Target>
        </el-tab-pane>
        <el-tab-pane label="分类" name="tab3">
          <Classification v-if="tabActiveName === 'tab3'" :ad-group-id="route.query.adGroupId">否定词</Classification>
        </el-tab-pane>
        <el-tab-pane label="否定投放" name="searchTerm">
          <NegTarget 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 PromoteProducts from './ads/index.vue'
import SearchTerm from './searchTerm/index.vue'
import Target from './target/index.vue'
import AutoTarget from './autoTarget/index.vue'
import ManualTarget from './manualTarget/index.vue'
import NegProduct from './negProduct/index.vue'
import Classification from './classification/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, route.query.campaignId)
  adGroupInfo.value = resp.data[0]
})

</script>

<style scoped>
.head-span {
  color: rgb(177, 177, 177);
  margin-left: 40px;
}
:deep(.el-tabs--border-card) {
  border: none;
}
/* 表格表头样式 */
::v-deep(.el-table .el-table__header-wrapper .cell) {
  border-right: 1px solid rgb(218, 221, 223);
}
::v-deep(.el-table__header-wrapper .el-table__header tr th) {
  border-right: none;
}
::v-deep(th.el-table_1_column_1.el-table-fixed-column--left.is-last-column.is-leaf.el-table__cell) {
  border-right: none;
}
</style>
