<template>
  <div class="asj-container">
    <div class="asj-detail-header">
      <span style="font-size: x-large; font-weight: bold; color: #0f1111;margin: 5px;">
        <span> {{ campaignInfo.campaignName }}</span>
      </span>
      <div class="asj-detail-info">
        <div>
          <span class="label">状态: </span>
          <el-tag :type="getTagType(campaignInfo.state)">
            {{ dynStatusEnum[campaignInfo.state] }}
          </el-tag>
        </div>
        <div>
          <span class="label">预算: </span>
          <span class="value"> {{ profile.currency_symbol + campaignInfo.budget }} | {{dynStatusEnum[campaignInfo.budgetType] }}</span>
        </div>
        <div>
          <span class="label">投放类型：</span>
          <span class="value">{{ targetTypeEnum[campaignInfo.tactic] }}</span>
        </div>
        <div>
          <span class="label">投放日期: </span>
          <span class="value">{{ campaignInfo.startDate }} ~ {{ campaignInfo.endDate ?? '无结束日期' }}</span>
        </div>
        <div>
          <span class="label">广告组合: </span>
          <span class="value">{{ campaignInfo?.portfolio_name ? campaignInfo.portfolio_name : '--' }}</span>
        </div>
        <div>
          <span class="label">成本类型: </span>
          <span class="value">{{ campaignInfo.costType }}</span>
        </div>
      </div>
    </div>
    <el-tabs v-model="tabActiveName" class="asj-detail-tabs" type="border-card">
      <el-tab-pane label="广告组" name="adGroup">
        <AdGroups v-if="tabActiveName==='adGroup'" :campaignId="route.query.campaignId"></AdGroups>
      </el-tab-pane>
      <!-- <el-tab-pane label="预算" name="budget">
        <Budget :campaignId="route.query.campaignId" v-if="tabActiveName==='budget'"></Budget>
      </el-tab-pane> -->
      <el-tab-pane label="自动化" name="automation">
        <Automation v-if="tabActiveName==='automation'" :campaignId="campaignId"
                    :profileId="profile.profile_id"></Automation>
      </el-tab-pane>
      <!-- <el-tab-pane label="广告位" name="placement">
        <Placement :campaignId="route.query.campaignId" v-if="tabActiveName==='placement'"/>
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, Ref } from 'vue';
import { useRoute } from 'vue-router';
import AdGroups from './adGroups/index.vue';
import { getTagType } from '/@/views/adManage/utils/tools.js';
import { dynStatusEnum, targetTypeEnum } from '/@/views/adManage/utils/enum.js';
import { useShopInfo } from '/@/stores/shopInfo';
// import { usePublicData } from '/@/stores/publicData'
import { storeToRefs } from 'pinia';

import { GetObj } from './api';
import Automation from '/@/views/adManage/sd/campaigns/campaignDetail/automation/index.vue';


const x = 't20';
const shopInfo = useShopInfo();
const { profile } = storeToRefs(shopInfo);
const route = useRoute();
const campaignInfo: Ref<SpCampaign> = ref({});
const tabActiveName = ref('adGroup');

onMounted(async () => {
  const resp = await GetObj(route.query.campaignId);
  campaignInfo.value = resp.data[0];
});

</script>

<style lang="scss" 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;
}
</style>
