advertSystem/src/components/businessMoudle/batchGdt/configArea/index.vue

<template>
  <div class="flex titleBox">
    <span>程序化批量/广点通</span>
  </div>
  <div class="areaBox" style="margin-top:10px;">
    <div class="areaTitle">
      配置区
      <el-button class="lMar20" type="primary" @click="openStrategyGroups">选择策略组</el-button>
      <span class="smallTitle lMarauto">预览广告数 : <span class="c-theme">{{NumberHandle(pageInfo.num_total.adNum)||0}}</span></span>
    </div>
    <div class="areaCon">
      <div class="screenArea">
        <Select ref="accRef"
                :clearFlag="true"
                :isMultiple="true"
                title="媒体账户"
                selectWidth="160px"
                @clearEvent="accClearEvent"
                @changeEvent="accEvent"
                @visibleEvent="accVisibleEvent"
                :optObj="{k:'account_id',la:'account_id',val:'account_id'}"
                :options="pageInfo.accountList"/>
        <Select ref="targetRef"
                :clearFlag="false"
                title="推广目标"
                selectWidth="160px"
                :optObj="{k:'name',la:'desc',val:'name'}"
                @changeEvent="targetChange"
                :options="pageInfo.targetList"/>
        <el-button type="primary" class="lMarauto" @click="openRuleConfig">规则配置</el-button>
      </div>

      <div class="configArea">
        <div v-for="item in pageInfo.adTitleList" :key="item.id"
             :style=" {width:item.name == '广告' ? 'calc((100vw - 40px - 32px) / 6 * 2)' : 'calc((100vw - 40px - 32px) / 6 * 4)'}">
          <div class="bigTitle" :class="item.name == '广告创意' ? 'no_left_boder' : ''">{{item.name}}</div>
          <div class="flex">
            <div class="blockBox" v-for="sub in item.subList" :key="sub.id" :class="sub.name == '广告基本信息' ? '' : 'no_left_boder'">
              <div class="smallTitle">
                {{sub.name}}
                <span class="chooseCss" v-if="sub.haveChooseNum">已选： {{NumberHandle(sub.chooseNum) || 0}}</span>
              </div>
              <div class="showInfoArea">
                <template v-if="sub.name == '创意文案'">
                  <Copywriter ref="CopywriterRef" :num_total="pageInfo.num_total" :basicInfoData="basicInfoData.fillBack" :adTemplateItem="originalityBasicInfoData?.apiResult?.adTemplateItem || {}" @writerCallBack="writerCallBack"></Copywriter>
                </template>
                <template v-if="sub.name == '落地页'">
                  <LandPage ref="LandPageRef" :accIdsList="pageInfo.accIdsList" :page_type="originalityBasicInfoData?.receiveForm?.landingPageExample?.page_type" @landPage="landPageEvent"></LandPage>
                </template>
                <div class="noData" v-if="!sub.haveContent">暂无数据 </div>
                <!-- 定向包展示 -->
                <template v-if="sub.name == '定向包'">
                  <DirectPacketExhibition :showFlag="sub.haveContent" ref="DirectPacketExhibitionRef" @updateHaveContent="updateHaveContent"></DirectPacketExhibition>
                </template>
                <div v-if="sub.name == '广告基本信息'">
                  <template v-for="(item) in basicInfoData.copywriting">
                    <div class="bMar8 lH16 c-515a6e" v-if="item?.indexOf('投放日期：') != -1">{{ item }}{{Number(pageInfo.RuleConfigObj?.start_day) > 0 ? `- 规则配置已设置自动延后 ${pageInfo.RuleConfigObj?.start_day} 天，实际开始日期为：${AddDays(basicInfoData?.fillBack?.begin_date, Number(pageInfo?.RuleConfigObj?.start_day))}` : ''}}</div>
                    <div class="bMar8 lH16 c-515a6e" v-else>{{ item }}</div>
                  </template>
                </div>
                <div v-if="sub.name == '创意基本信息'">
                  <template v-for="(main_item, main_index) in originalityBasicInfoData.receiveForm">
                    <template v-if="String(main_index) == 'profiles' || String(main_index) == 'brand'">
                      <div class="bMar8 lH16 c-515a6e">{{ `${String(main_index) == 'brand' ? '品牌名称' : '昵称'}：` }}{{ main_item.api_value.name }}</div>
                      <div class="bMar8 lH16 c-515a6e">{{ `${String(main_index) == 'brand' ? '品牌标识图' : '头像'}：` }}
                        <img :src="main_item.api_value.oss_url" class="oss_url_img" alt="">
                      </div>
                    </template>
                    <template v-if="main_item.copywriting && main_item.copywriting.length > 0">
                      <template v-for="item in main_item.copywriting">
                        <div class="bMar8 lH16 c-515a6e">{{ item }}</div>
                      </template>
                    </template>
                  </template>
                </div>
                <div v-if="sub.name == '创意素材'">
                  <template  v-for="cItem in cMaterial.list" :key="cItem.id">
                    <div class="flex bMar8">
                      <template v-for="cSub in cItem.list" :key="cItem.id+cSub.subId">
                        <div class="flex" style="width: 100%;justify-content: center"
                             v-if="cMaterial.haveCoverOrVideo == 2 || cMaterial.haveCoverOrVideo == 1">
                          <video :src="cSub.videoUrl" height="50"></video>
                        </div>
                        <div style="width: 100%;justify-content: center" class="lMar10 flex" v-if="cMaterial.haveCoverOrVideo == 3 || cMaterial.haveCoverOrVideo == 1">
                          <img :src="cSub.picUrl" height="50"/>
                        </div>
                      </template>
                    </div>
                  </template>
                </div>
              </div>
              <div class="btn" @click="openDialogEvent(sub)">{{sub.haveContent ? '编辑' : '添加'}}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="btnArea">
        <span class="" v-if="pageInfo.accIdsList && pageInfo.accIdsList.length>0">
          <template v-for="(item,index) in basicInfoData.outerConfig">
            <el-button plain class="rMar10 outerButton" v-if="item.enabled" @click="basicOuterClick(index)">
              <el-icon :class="['outerIcon', !item.isComplete || 'outerIconActive']"><CircleCheck v-if="!item.isComplete" /><SuccessFilled v-else/></el-icon>
              {{item.name}}
            </el-button>
          </template>
        </span>
        <span class="lMarauto">
          <el-button type="primary" @click="openPreAreaEvent" v-loading.fullscreen.lock="openPreAreaLoading">批量预览广告</el-button>
          <el-button type="primary" @click="openSaveStrategyGroups" v-loading.fullscreen.lock="openPreAreaLoading">保存策略组</el-button>
        </span>
      </div>
    </div>
  </div>
  <!--  预览区-->
  <PreviewArea ref="PreviewAreaRef" @continueCreate="continueCreate"></PreviewArea>

  <!--规则配置-->
  <RuleConfig ref="RuleConfigRef" @ExposeEvent="val=>pageInfo.RuleConfigObj = val"></RuleConfig>
  <!--  创意素材-->
  <!-- :max_creative_num="pageInfo.RuleConfigObj?.adcreative_max || 0" -->

  <CreativeMaterial ref="CreativeMaterialRef"
                    :haveCoverOrVideo="cMaterial.haveCoverOrVideo"
                    :haveShowVideoObj = "cMaterial.haveShowVideoObj"
                    :video_tips="cMaterial.video_tips"
                    :image_tips="cMaterial.image_tips"
                    @closeLoading="close_reuse_loading"
                    :maxNum_imageList="cMaterial.array_property?.max_number || 1"
                    @assignEvent="assignEvent_CreativeMaterial"></CreativeMaterial>


  <!-- 创意基本信息 -->
  <OriginalityBasic ref="originalityBasicRef" :visible="originalityBasicInfoData.visible" :key="originalityBasicInfoData.positionKey"
                    :adBasicInfo="basicInfoData.fillBack" :accIdsList="pageInfo.accIdsList"
                    :promoted_object_type="pageInfo.targetValue" @close="originalityBasicClose"
                    @submitIsOver="switch_complate_flag_creaBasicInfo"
  ></OriginalityBasic>
  <!-- 广告基本信息 -->
  <BasicInfo :visible="basicInfoData.visible"
             :dataFillBack="basicInfoData.fillBack"
             :promoted_object_type="pageInfo.targetValue"
             :ruleConfigObj="pageInfo.RuleConfigObj"
             @close="basicInfoClose"></BasicInfo>
  <!-- 扩量种子人群 -->
  <ExpandPopulation :visible="basicInfoData.outerConfig.expandPopulation.visible" :accIdsList="pageInfo.accIdsList" :fillback="basicInfoData.outerConfig['expandPopulation'].value" @close="(obj)=>{basicOuterClose({val: obj?.val || null, type: obj?.type || null, key:'expandPopulation'})}" title="扩量种子人群"></ExpandPopulation>
  <!-- 一方数据助攻 - 智能定向 -->
  <ExpandPopulation :visible="basicInfoData.outerConfig.targetingPartyData.visible" :accIdsList="pageInfo.accIdsList" :fillback="basicInfoData.outerConfig['targetingPartyData'].value" @close="(obj)=>{basicOuterClose({val: obj?.val || null, type: obj?.type || null, key:'targetingPartyData'})}" title="一方数据助攻"></ExpandPopulation>
  <!-- 精准匹配归因 -->
  <AttributionOuter :visible="basicInfoData.outerConfig.attributionOuter.visible" :accIdsList="pageInfo.accIdsList" :fillback="basicInfoData.outerConfig['attributionOuter'].value" @close="(obj)=>{basicOuterClose({val: obj?.val || null, type: obj?.type || null , key:'attributionOuter'})}"></AttributionOuter>
  <!-- 配置视频号 -->
  <WeChatVideoAccount :visible="basicInfoData.outerConfig.weChatVideoAccount.visible" :accIdsList="pageInfo.accIdsList" :fillback="basicInfoData.outerConfig['weChatVideoAccount']" :acc_plan_ad_count="pageInfo.acc_plan_ad_count" @close="(obj: IOuterConfigRule)=>{basicOuterClose({ ...obj, key:'weChatVideoAccount'})}"></WeChatVideoAccount>
  <!-- 优量汇流量包 -->
  <UnionPosition :visible="basicInfoData.outerConfig.unionPosition.visible" :accIdsList="pageInfo.accIdsList" :infoSelect="basicInfoData.outerConfig.unionPosition.infoSelect" :fillback="basicInfoData.outerConfig['unionPosition'].value"  @close="(obj)=>{basicOuterClose({val: obj?.val || null, type: obj?.type || null , key:'unionPosition'})}"></UnionPosition>
  <!-- 复用配置 -->
  <ResuseConfig ref="ResuseConfigRef" @aNewConfig="aNewConfigEvent" @reuse="reuseEvent"></ResuseConfig>
  <!-- 策略组列表 -->
  <StrategyGroupsList ref="StrategyGroupsListRef"></StrategyGroupsList>
  <!-- 保存策略组弹框 -->
  <StrategyGroupsDialog ref="StrategyGroupsDialogRef"></StrategyGroupsDialog>
</template>
<script setup lang="ts">
import {getCurrentInstance, nextTick, onMounted, reactive, ref, provide, computed,toRef,watch} from "vue";
import {adqParam, reactiveTableAndAny} from "@/api/ApiModel";
import Select from '@/components/capsulationMoudle/_select.vue'
import DirectPacketExhibition from '@/components/businessMoudle/batchGdt/configArea/directPacket/echoIndex.vue'
import RuleConfig from '@/components/businessMoudle/batchGdt/configArea/ruleConfig/index.vue'
import CreativeMaterial from '@/components/businessMoudle/batchGdt/configArea/creativeMaterial/index.vue'
import ResuseConfig from '@/components/businessMoudle/batchGdt/configArea/resuseConfig/index.vue'
import PreviewArea from '@/components/businessMoudle/batchGdt/previewArea/index.vue'
import {Api} from "@/api/api";
import {ElMessage} from "element-plus";
import BasicInfo from "./basicInfo/index.vue";
import ExpandPopulation from './basicInfo/expandPopulation.vue'
import AttributionOuter from './basicInfo/attributionOuter.vue'
import WeChatVideoAccount from './basicInfo/weChatVideoAccount.vue'
import UnionPosition from './basicInfo/unionPosition.vue'
import OriginalityBasic from './originalityBasic/index.vue'
import Copywriter from './copywriter/index.vue'
import LandPage from "./landPage/index.vue";
import { getPromotedObjectType } from './basicInfo/ts/basicApi'
import _ from "lodash";
import { previewCompute } from './ts/preview'
import { submitPreview } from './ts/submitPreview'
import { materialDeclare, handleMultiple } from './ts/material'
import { IOuterConfigRule, basicInfoDeclare, handleAdBasic} from './ts/adBasic'
import { resuseConfigEvent} from './ts/resuseConfigTs'
import handleJudge from './ts/judgeEvent'
import { mockEvent } from './ts/mock'
import { AddDays } from "@/common/common";
import StrategyGroupsList from './strategyGroups/list.vue'
import StrategyGroupsDialog from './strategyGroups/saveDialog.vue'
import { strategyGroupsEvent } from './ts/strategyGroups'

const { proxy } = getCurrentInstance() as any;
// 全局方法定义
const NumberHandle = proxy.$NumberHandle

// S 参数声明
const {
  basicInfoData
} = basicInfoDeclare()
const {
  CreativeMaterialRef,
  cMaterial
} = materialDeclare()
// E 参数声明

const targetRef = ref<{value:any}>()
const originalityBasicRef = ref()

const pageInfo = reactive<reactiveTableAndAny>({
  last_ad_show_list:[],//最终需要的数组
  num_total: {
    accNum:0,//账号数
    planNum:0,//计划数
    adNum:0,//预览广告数
  },
  targetValue: '',
  targetList:[],
  adTitleList:[
    {id:1,name:'广告',subList:[
        { id:2,name:'广告基本信息',haveContent:false },
        { id:3,name:'定向包',chooseNum:0,haveChooseNum:true,haveContent:false },
      ]},
    {id:4,name:'广告创意',subList:[
        { id:5,name:'创意基本信息',haveContent:false },
        { id:6,name:'创意素材',chooseNum:0,haveChooseNum:true,haveContent:false },
        { id:7,name:'创意文案',chooseNum:0,haveChooseNum:true,haveContent:false },
        { id:8,name:'落地页',chooseNum:0,haveChooseNum:true,haveContent:false },
      ]},
  ],
  accountList:[],
  accIdsList:[],//选中的格式化后的账户列表
  accIdsList_copy_last:[],//选中的格式化后的账户列表
  directObj:{},//定向包展示的数据
  RuleConfigObj:{},//规则配置的值
  copywriterInfoData: {//创意文案
    data: [],
    allocation_type: '',//分配形式 1自动分配 2程序化相乘分配
  },
  copyLandPageInfoData: {//落地页
    data: [],
    allocation_type: '',//分配形式 1自动分配 2程序化相乘分配
    loadPageRule: 0, //0 全部相同 //1 按账户分配 //2 分配到计划 // 3分配到广告
  },
  acc_plan_ad_count: {}, //各账户对应的计划数、广告数；用于微信视频号的配置
})

//创意基本信息
const originalityBasicInfoData = reactive<any>({
  positionKey: 0,//广告基本信息版位变化+1
  receiveForm: {},//自己操作的form
  apiResult: {},//接口返回的数据
  params: [],//接口需要的数据
})
//创意文案
const CopywriterRef = ref()
const LandPageRef = ref()

//获取账号列表
const get_account_list = async () => {
  const paramsModel = reactive<adqParam>({
    page:1,
    page_size:10000,
  })
  let res:any = await proxy.$http.get(Api.adq_list,paramsModel)
  if(res&&res.errNo=='0'){
    pageInfo.accountList = res.rst.data
  }else{
    ElMessage.error(res.errMsg)
  }
}

//创意基本信息是否上传完成
const resuse_complate_flag_creaBasicInfo=ref<boolean>(false)
const switch_complate_flag_creaBasicInfo = (val:any)=>{
  resuse_complate_flag_creaBasicInfo.value = val
}
watch(()=>resuse_complate_flag_creaBasicInfo.value,async (val)=>{
   if(val){
     // 创意素材 - 修改或者新增
     await CreativeMaterialRef.value?.deleAcEvent(pageInfo.accIdsList,false)
     CreativeMaterialRef.value?.creatice_reuseEvent()
   }
})

//创意素材清空
const CreativeMaterial_clear = () => {
  nextTick(()=> {
    CreativeMaterialRef.value?.clearAllEvent()
    updateHaveContent(6, 0, false, true)
  })
}

//推广目标
const targetChange = () => {
  pageInfo.targetValue = targetRef.value?.value
}

//打开规则配置
const RuleConfigRef = ref<{switchShow:(val:boolean)=>void}>()
const openRuleConfig = () => {
  nextTick(()=>{
    RuleConfigRef.value?.switchShow(true)
  })
}
// 得到规则配置的值
const get_ruleConfig_info = async () => {
  let res:any = await proxy.$http.get(Api.ruleConfig_get)
  if(res&&res.errNo=='0'){
    let resNew:any = res.rst
    pageInfo.RuleConfigObj = resNew
  }else{
    ElMessage.error(res.errMsg)
  }
}

//监听创意素材点击了确定
watch(()=>cMaterial.key,()=>{
  cMaterial.list = _.cloneDeep(cMaterial.list_copy)
  let num = cMaterial.list&&cMaterial.list.length
  updateHaveContent(6,num)
})

// 定向包
const DirectPacketExhibitionRef = ref<{get_echoAcId:()=>void,
  showDirectPacket:()=>void,
  clearDirectContent:()=>void,
  AcChangeEvent:(arr:any)=>void
  // addAcEvent:(arr:any)=>void,deleAcEvent:(arr:any)=>void
}>()

// 打开添加 / 编辑
const openDialogEvent = async (sub:any) => {
  if( !judgeEvent( sub.id ) ) return; // 判断是否完成前一模块
  if(sub.name == '定向包'){
    nextTick(()=>{
      if(DirectPacketExhibitionRef.value) { DirectPacketExhibitionRef.value[0]?.showDirectPacket() }
      if(sub.haveContent){
        if(DirectPacketExhibitionRef.value) { DirectPacketExhibitionRef.value[0]?.get_echoAcId() }
      }
    })
  }
  if(sub.name == '广告基本信息'){
    basicInfoData.visible = true;
  }
  if(sub.name == '创意基本信息'){
    if (basicInfoData.fillBack?.automatic_site && basicInfoData.fillBack?.automatic_site != ''){
      originalityBasicRef.value?.switchShow(true, {
        'fillback': originalityBasicInfoData.receiveForm,
        'apiResult': originalityBasicInfoData.apiResult,
      })
    } else {
      ElMessage.error('请完善广告基本信息!')
    }
  }

  if(sub.name == '创意素材'){
    await get_cover_info()
    console.log('cMaterial', cMaterial)
    console.log('打开之前CreativeMaterialRef',cMaterial.list);
    CreativeMaterialRef.value?.switchShow(true,sub.haveContent,cMaterial.list,cMaterial.testNew_text)
    console.log(cMaterial.array_property);
  }
  if(sub.name == '创意文案' && CopywriterRef.value){
    CopywriterRef.value[0]?.initFun(true)
  }
  if(sub.name == '落地页' && LandPageRef.value){
    LandPageRef.value[0]?.initFun(true, pageInfo.num_total, pageInfo.last_ad_show_list)
  }
}

//更新数值,判断是否有内容
const updateHaveContent = (id:number,chooseNum?:number,minusFlag?:boolean,clearFlag?:boolean) => {
  nextTick(()=>{
    // id : adTitleList的id  chooseNum: 选中的个数  minusFlag:是否需要减少
    if(clearFlag){ //清空
      pageInfo.adTitleList.forEach(i=>{
        i.subList.forEach(s=>{
          if(s.id == id){
            s.haveContent = false
            s.chooseNum = 0
          }
        })
      })
    }else{
      if(id == 3){
        if(DirectPacketExhibitionRef.value){
          pageInfo.directObj = DirectPacketExhibitionRef.value[0]?.getObjValue()
        }
        //清空落地页
        if(LandPageRef.value){
          LandPageRef.value[0]?.clearEvent()
        }
        updateHaveContent(8,0,false,true)
        computeCount()
      }
      pageInfo.adTitleList.forEach(i=>{
        i.subList.forEach(s=>{
          if(s.id == id){
            s.haveContent = true
            if(Number(chooseNum)>0){
              s.chooseNum = chooseNum
            }
            if(minusFlag){//减法开关
              s.chooseNum -= 1
            }
            if(s.chooseNum==0){
              s.haveContent = false
              if(id == 3 && DirectPacketExhibitionRef.value) {
                DirectPacketExhibitionRef.value[0]?.clearDirectContent()
              }
            }
          }
        })
      })
    }
  })
}
/**计算广告数、计划数、账号数 并获取计划列表信息 */
const computeCount = (cb?) => {
  if(isMock.value){
    let { pageInfo_mock, cMaterial_mock, basicInfoData_mock }  = mockEvent()
    for(let key in pageInfo_mock) {
      pageInfo[key] = pageInfo_mock[key]
    }
    for(let key in cMaterial_mock) {
      cMaterial[key] = cMaterial_mock[key]
    }
    for(let key in basicInfoData_mock) {
      basicInfoData[key] = basicInfoData_mock[key]
    }
  }else{
    if( !judgeEvent(7, true) ) return; // 创意文案之前未填写，则不进行下面逻辑
  }
  previewCompute(pageInfo, cMaterial, basicInfoData).then((res:any)=>{
    pageInfo.num_total.accNum = res.num_total.accNum;
    pageInfo.num_total.planNum = res.num_total.planNum;
    pageInfo.num_total.adNum = res.num_total.adNum;
    pageInfo.last_ad_show_list = res.last_ad_show_list;
    pageInfo.acc_plan_ad_count = res.acc_plan_ad_count;
    cb ? cb() : ''
  })
}

/**创意文案回调 */
const writerCallBack = (obj) => {
  pageInfo.copywriterInfoData.data = obj.writer;
  pageInfo.copywriterInfoData.allocation_type = obj.allocation_type;
  if(obj.writer && Array.isArray(obj.writer)){
    updateHaveContent(7,pageInfo.copywriterInfoData.data?.length)
  }else{
    updateHaveContent(7,0)
  }
  computeCount()
}
/**落地页回调 */
const landPageEvent = (obj) => {
  let length = 0;
  for(let i in obj.landPage){
    length += obj.landPage[i].length
  }
  pageInfo.copyLandPageInfoData.data = obj.landPage;
  pageInfo.copyLandPageInfoData.allocation_type = obj.allocation_type;
  pageInfo.copyLandPageInfoData.loadPageRule = obj.loadPageRule;
  if(obj.landPage && JSON.stringify(obj.landPage) != '{}') {
    updateHaveContent(8,length)
  }else{
    updateHaveContent(8,0)
  }
  computeCount()
}
/**创意基本信息回调 */
const originalityBasicClose = (obj) => {
  originalityBasicRef.value?.switchShow(false)
  if(obj){
    if(originalityBasicInfoData.apiResult?.templateCurr?.adcreative_template_id != obj.apiResult?.templateCurr?.adcreative_template_id){
      //清空创意素材、文案、落地页
      CreativeMaterial_clear()
      if(LandPageRef.value){
        LandPageRef.value[0]?.clearEvent()
      }
      updateHaveContent(7,0,false,true)
      if(CopywriterRef.value) {
        CopywriterRef.value[0]?.clearEvent()
      }
      updateHaveContent(8,0,false,true)
    }
    originalityBasicInfoData.params = _.cloneDeep(obj.apiFormList)
    originalityBasicInfoData.receiveForm = _.cloneDeep(obj.form)
    originalityBasicInfoData.apiResult = _.cloneDeep(obj.apiResult)
    updateHaveContent(5,1)
  }
}
/**清空创意基本信息 */
const clearOriginalityInfo = () => {
  originalityBasicInfoData.positionKey += 1;
  originalityBasicInfoData.receiveForm = {}
  originalityBasicInfoData.params = []
  originalityBasicInfoData.apiResult = {}
}


onMounted(()=>{
  nextTick(async ()=>{
    await get_ruleConfig_info() //规则配置获取
    //获取推广目标类型
    await getPromotedObjectType().then((res)=>{
      pageInfo.targetList = res
      if(targetRef.value){
        targetRef.value.value = pageInfo.targetList[0].name
      }
      pageInfo.targetValue = targetRef.value?.value
    })
    get_account_list()
    getAdPresetsInfo(); // 广告预存信息获取
  })
})


// S 每个模块判断是否可添加编辑
const {
  judgeEvent
 } = handleJudge({
  pageInfo,
  basicInfoData,
  originalityBasicInfoData,
  cMaterial,
})
// E 每个模块判断是否可添加编辑

// S 广告基本信息 及 外部配置
const {
  basicInfoClose,
  getAdPresetsInfo,
  basicOuterClick,
  basicOuterClose,
  getCommonValue,
  isCompleteEvent
} = handleAdBasic({
  CreativeMaterialRef,
  CopywriterRef,
  LandPageRef,
  targetRef,
  pageInfo,
  basicInfoData,
  clearOriginalityInfo,
  updateHaveContent,
  judgeEvent,
  CreativeMaterial_clear
})
// E 广告基本信息 及 外部配置

/**S 复用 */
const {
  accRef,
  ResuseConfigRef,
  accVisibleEvent,
  accEvent,
  aNewConfigEvent,
  reuseEvent,
  close_reuse_loading,
  accClearEvent,
} = resuseConfigEvent({
  originalityBasicRef,
  CopywriterRef,
  LandPageRef,
  CreativeMaterialRef,
  DirectPacketExhibitionRef,
  pageInfo,
  basicInfoData,
  originalityBasicInfoData,
  updateHaveContent,
  isCompleteEvent,
  getCommonValue,
  clearOriginalityInfo,
  CreativeMaterial_clear
})
/**E 复用 */

// S 创意素材
const {
  assignEvent_CreativeMaterial,
  get_cover_info,
} = handleMultiple({
  originalityBasicInfoData,
  ResuseConfigRef,
  computeCount,
  cMaterial,
  close_reuse_loading,
  // updateHaveContent
})
// E 创意素材

/**S 提交预览 */
const {
  isMock,
  openPreAreaLoading,
  PreviewAreaRef,
  openPreAreaEvent,
  continueCreate,
} = submitPreview({
  pageInfo,
  basicInfoData,
  judgeEvent,
  computeCount,
  aNewConfigEvent
})
/**E 提交预览 */

/**S 策略组 */
const {
  StrategyGroupsDialogRef,
  StrategyGroupsListRef,
  openStrategyGroups,
  openSaveStrategyGroups
} = strategyGroupsEvent({
  cMaterial,
  basicInfoData,
  pageInfo,
  isMock,
  judgeEvent
})
/**E 策略组 */

//传值
provide('accountIds',toRef(pageInfo,'accIdsList'))

</script>
<style lang="scss" scoped>
@import "src/assets/style/batchGdt.scss";
.titleBox{
  font-size: 14px;
  font-weight: 700;
  line-height: 48px;
  color: #515a6e;
  background-color: #fff;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.08);
  padding: 0 30px 0 32px;
}
.areaCon{
  .screenArea{
    display: flex;
    align-items: center;
  }
  .configArea{
    margin-top: 20px;
    display: flex;
    .bigTitle{
      font-size: 14px;
      border: 1px solid #F2F2F2;
      padding: 20px 12px;
      font-weight: 600;
    }
    .blockBox{
      width: calc((100vw - 40px - 32px) / 6);
      border: 1px solid #F2F2F2;
      border-top: none;
      border-bottom: none;
    }
    .no_left_boder{
      border-left: none!important;
    }
    .smallTitle{
      font-size: 13px;
      padding: 17px 12px;
      font-weight: 600;
      display: flex;
      align-items: center;
      .chooseCss{
        font-size: 12px;
        margin-left: auto;
        color: #999999;
        font-weight: 400;
      }
    }
    .showInfoArea{
      height: 250px;
      font-size: 12px;
      overflow-y: auto;
      padding: 8px 12px;
      scrollbar-color: transparent transparent;
      &::-webkit-scrollbar{
        width: 2px;
      }
      &:hover{
        box-shadow: 0 2px 4px 0 rgba(0,0,0,.08);
      }
      .noData{
        margin: 20px auto;
        font-size: 13px;
        color: #999999;
        text-align: center;
      }

    }
    .btn{
      border: 1px solid #F2F2F2;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border-left: none;
      border-right: none;
      &:hover{
        box-shadow: 0 2px 4px 0 rgba(0,0,0,.08);
      }
    }
  }
  .btnArea{
    margin-top: 20px;
    display: flex;
    align-items: center;
  }
}
.lH16{
  line-height: 16px;
}
.c-515a6e{
  color: #515a6e;
}
.outerButton{
  &:hover{
    .outerIcon{
      color: #3173FF
    }
    .outerIconActive{
      color: #00b697;
    }
  }

}
.outerIcon{
  color: #888;
  margin: 0 10px;
  font-size: 16px;
}
.outerIconActive{
  color: #00b697;
}
.oss_url_img{
  width:60px;
  height: 60px;
  border-radius: 6px;
}
</style>