<script lang="ts" setup>
import { provide, ref, onMounted, onUnmounted} from 'vue'
import AdCampaign from './component/AdCampaign.vue'
import AdGroup from './component/AdGroup.vue'
import AdFormat from './component/AdFormat.vue'
import DeliveryType from './component/DeliveryType.vue'
import VideoCreativity1 from './component/VideoCreativity1.vue'
import VideoCreativity2 from './component/VideoCreativity2.vue'
import ProductSetCreativity1 from './component/ProductSetCreativity1.vue'
import ProductSetCreativity2 from './component/ProductSetCreativity2.vue'
import FocusCreativity from './component/FocusCreativity.vue'
import emitter from '/@/utils/emitter'

const respCampaignId = ref('')
const respCampaignName = ref('')
const respAdGroupId = ref('')
const adFormatRadioValue = ref('')
const arrivalsRadioValue = ref('')
const flagshipStoreShopValue = ref('')
const pageOptionsValue = ref('')
const addedTableDataForVc2 = ref('')
const focusShop = ref('')
const focusShopLabel = ref('')
const brandEntityId = ref('')
const setBrandName = ref('')

provide('respCampaignId', respCampaignId)
provide('respCampaignName', respCampaignName)
provide('respAdGroupId', respAdGroupId)
provide('pageOptionsValue', pageOptionsValue)
provide('addedTableDataForVc2', addedTableDataForVc2)
provide('focusShop', focusShop)
provide('focusShopLabel', focusShopLabel)
provide('brandEntityId', brandEntityId)
provide('setBrandName', setBrandName)

const handleCampaignUpdate = (data) => {
  respCampaignId.value = data.id
  respCampaignName.value = data.name
}
const handleGroupIdUpdate = (data) => {
  respAdGroupId.value = data.id
}
const handleAdFormatRadioChange = (newValue) => {
  adFormatRadioValue.value = newValue // 更新 adFormatRadioValue
}
const handleArrivalsRadioChange = (newValue) => {
  arrivalsRadioValue.value = newValue
}
const handleFlagshipStoreShopChange = (newValue) => {
  flagshipStoreShopValue.value = newValue
}
const handlePageOptionsChange = (newValue) => {
  pageOptionsValue.value = newValue
}

function handleUpdateAddedData(data) {
  addedTableDataForVc2.value = data
}

function handleFocusShopSelectChange(newValue) {
  focusShop.value = newValue
  focusShopLabel.value = 'ZOSI'
}

onMounted(()=>{
  emitter.on('brandEntityId',(value: any)=>{
    brandEntityId.value = value[0].brandEntityId
    setBrandName.value = value[0].brandRegistryName
  })
})
</script>

<template>
  <div class="page-container">
    <AdCampaign @update-campaign="handleCampaignUpdate"></AdCampaign>
    <AdGroup @update-group-id="handleGroupIdUpdate"></AdGroup>
    <AdFormat
      @update:adFormatRadio="handleAdFormatRadioChange"
      @update:arrivalsRadio="handleArrivalsRadioChange"
      @update:flagshipStoreShop="handleFlagshipStoreShopChange"
      @update:pageOptions="handlePageOptionsChange"
      @update:addedTableData="handleUpdateAddedData"
      @update:focusShopSelect="handleFocusShopSelectChange"></AdFormat>
    
    <ProductSetCreativity1 v-if="adFormatRadioValue === 'productSet' && arrivalsRadioValue === 'flagshipStore' && flagshipStoreShopValue === 'ZOSI'">
    </ProductSetCreativity1>
    <FocusCreativity v-if="adFormatRadioValue === 'focus' && focusShop === 'ENTITY2NJKG6JSUTTPB'"></FocusCreativity>
    <VideoCreativity1 v-if="adFormatRadioValue === 'video' && arrivalsRadioValue === 'flagshipStore' && flagshipStoreShopValue === 'ZOSI'">
    </VideoCreativity1>
    <VideoCreativity2 v-if="adFormatRadioValue === 'video' && arrivalsRadioValue === 'productDetailsPage'"></VideoCreativity2>
    <ProductSetCreativity2 v-if="adFormatRadioValue === 'productSet' && arrivalsRadioValue === 'newArrivals'"></ProductSetCreativity2>
    <DeliveryType></DeliveryType>
  </div>
</template>

<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>
