<template>
  <div class="page-container">
    <AdCampaign @send-campaign="getCampaign" @send-targetType="getTargetType"></AdCampaign>
    <AdGroup @send-groupId="getGroupId"></AdGroup>
    <component :is="currentComponent"></component>
    <Creativity v-if="product.length !== 0"></Creativity>
  </div>
</template>

<script lang="ts" setup>
import { computed, provide, ref, onUnmounted } from 'vue'
import AdCampaign from './component/AdCampaign.vue'
import AdGroup from './component/AdGroup.vue'
import ContentTarget from './component/ContentTarget.vue'
import CustomTarget from './component/CustomTarget.vue'
import Creativity from './component/Creativity.vue'
import emitter from '/@/utils/emitter'


const respCampaignId = ref('')
const respCampaignName = ref('')
const respAdGroupId = ref('')

provide('respCampaignId', respCampaignId)
provide('respCampaignName', respCampaignName)
provide('respAdGroupId', respAdGroupId)

function getCampaign(data) {
  respCampaignId.value = data.id
  respCampaignName.value = data.name
}

// 获取targetType的值渲染自定义定向
const targetType = ref('T00030')

function getTargetType(data) {
  targetType.value = data.type
}

// 动态组件
const currentComponent = computed(() => {
  switch (targetType.value) {
    case 'T00030':
      return CustomTarget
    case 'T00020':
      return ContentTarget
  }
})

function getGroupId(data) {
  respAdGroupId.value = data.adGroupId
}

// 若有商品被添加显示创意
const product = ref([])
emitter.on('send-tableData', (value: any) => {
  product.value = value
})

onUnmounted(() => {
  emitter.all.clear()
})

</script>

<style scoped>
.page-container {
  padding: 12px;
  background-color: #fafafa;
}
::v-deep(.el-form--default.el-form--label-top .el-form-item .el-form-item__label) {
  font-weight: 500;
  color: #505968;
}
</style>
