<template>
  <div class="setProjectDirectional">
    
    <div class="moduler">
        <div v-if="projectInfo.length>0">
         <span style="margin-right:8px"> 项目：<strong>{{projectInfo[0].name||''}}</strong></span>
         <span style="margin-right:8px"> 推广目的：<strong>{{projectInfo[0].landingType=='APP'?'应用推广':'销售线索收集'||''}}</strong></span>
         <span style="margin-right:8px"> 投放媒体：<strong>{{projectInfo[0].deliveryRange=="DEFAULT"?'默认':'穿山甲'||''}}</strong></span>
         <span style="margin-right:8px"> 投放方式：
             <strong v-if="projectInfo[0].adTarget=='CPA'">优先成本</strong>
             <strong v-if="projectInfo[0].adTarget=='COST'">优先跑量</strong>
             <strong v-if="projectInfo[0].adTarget=='PUSH'">激进抢量</strong>
        </span>
          
        </div>
    </div>
   
        <a-form :form="form">
        <div class="moduler">
            <div class="moduler-title">广告位置</div>
                <div class="ad-range">
                    <div class="row-item">
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">广告位置</div>
                        <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                        <a-form-item>
                            <a-radio-group v-model="adposition" @change="adpositionChange">
                            <a-radio-button value="smartInventorys" v-if="projectInfo.length>0&&projectInfo[0].deliveryRange=='DEFAULT'">优选广告位</a-radio-button>
                            <a-radio-button value="inventoryTypes" v-if="projectInfo.length>0&&projectInfo[0].deliveryRange=='DEFAULT'">按媒体指定位置</a-radio-button>
                            <a-radio-button :value="900000000" v-if="projectInfo.length>0&&projectInfo[0].deliveryRange=='UNION'">穿山甲</a-radio-button>
                            <!-- <a-radio-button value="sceneInventorys">按场景指定位置</a-radio-button> -->
                            </a-radio-group>
                        </a-form-item>
                        <div style="width: 400px; margin-top: 24px;" class="inventoryTypes" v-show="adposition=='inventoryTypes'">
                            <div class="inventory-tags-lists-header">
                                <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
                            </a-checkbox>
                            <div class="inventory-tags-lists-name"><strong>APP名称</strong></div>
                            </div>
                            <div class="inventory-tags-lists-container">
                                <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="onChange" />
                            </div>
                        </div>
                        <div style="width: 400px; margin-top: 24px;" v-show="adposition=='sceneInventorys'">
                            <div class="inventory-tags-lists-header">
                            <div class="inventory-tags-lists-name" style="padding-left:15px"><strong>位置选择</strong></div>
                            </div>
                            <div class="inventory-tags-lists-container">
                            <a-radio-group  v-model=sceneInventory>
                                <a-radio :style="radioStyle" value="VIDEO_SCENE">沉浸式竖版视频场景广告位</a-radio>
                                <a-radio :style="radioStyle" value="FEED_SCENE">信息流场景广告位</a-radio>
                                <a-radio :style="radioStyle" value="TAIL_SCENE">视频后贴和尾帧场景广告位</a-radio>
                            </a-radio-group>
                            </div>
                        </div>
                        </div>
                    </div>
                    <div class="row-item" v-if="projectInfo.length>0&&projectInfo[0].deliveryRange=='UNION'">
                        <div class="hint-item"></div>
                        <div class="label-item">
                        <div class="text-item">投放形式</div>
                        <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                        <a-form-item>
                            <a-radio-group v-model="unionVideoType">
                                <a-radio-button value="REWARDED_VIDEO">
                                    激励视频
                                    <a-tooltip>
                                    <template slot="title">特定场景下用户通过观看视频广告以换取游戏/应用内虚拟奖励的广告</template>
                                    <a-icon type="question-circle" />
                                    </a-tooltip>
                                </a-radio-button>
                                <a-radio-button value="ORIGINAL_VIDEO">原生</a-radio-button>
                            </a-radio-group>
                        </a-form-item>
                        
                        </div>
                    </div>
                </div>
             
        </div>
        <div class="moduler">
            <div class="moduler-title">用户定向</div>
            <div class="ad-range">
                    <div class="row-item">
                        <div class="hint-item"></div>
                            <div class="label-item">
                            <div class="text-item">地域</div>
                            <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                            <a-form-item>
                                <a-radio-group   v-model="district" @change="cityChange">
                                    <a-radio-button value="NONE">不限</a-radio-button>
                                    <a-radio-button value="CITY">按省市</a-radio-button>
                                    <a-radio-button value="COUNTY">按区县</a-radio-button>
                                    
                                </a-radio-group>
                            </a-form-item>
                            <div class="region" v-show="district!='NONE'">
                                <!-- 省市 -->
                                <div class="provincyCity" v-if="district=='CITY'">          
                                                        
                                    <linkMultiSelect title='省份' :listArr='[]' :maxLayers='2' :listUrl='regionCityListUrl' @getSelectedArr='getSelectedCityArr'/>
                                </div>
                                <!-- 区县 -->
                                <div class="district" v-else-if="district=='COUNTY'">
                                    
                                    <linkMultiSelect title='省份' :listArr='[]' :maxLayers='3' :listUrl='regionCityListUrl'  @getSelectedArr='getSelectedCountyArr'/>
                                </div>

                            </div> 
                        </div>
                    </div>
                    <div class="row-item">
                        <div class="hint-item"></div>
                            <div class="label-item">
                            <div class="text-item">性别</div>
                            <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                            <a-form-item>
                                 <a-radio-group  v-decorator="['gender', {initialValue:'NONE' }]"  >
                                    <a-radio-button value="NONE">不限</a-radio-button>
                                    <a-radio-button value="GENDER_MALE">男</a-radio-button>
                                    <a-radio-button value="GENDER_FEMALE">女</a-radio-button>
                                </a-radio-group>
                            </a-form-item>
                        </div>
                    </div>
                    <div class="row-item">
                        <div class="hint-item"></div>
                            <div class="label-item">
                            <div class="text-item">年龄</div>
                            <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                            <a-form-item>
                                 <radioCheck :checkArr='ageArr' @getSonValue='getAgeSelect'  />
                            </a-form-item>
                        </div>
                    </div>
                    <div class="row-item">
                        <div class="hint-item"></div>
                            <div class="label-item">
                            <div class="text-item">自定义人群</div>
                            <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                            <a-form-item>
                                 <a-radio-group  v-model="customCrowd"  >
                                    <a-radio-button value="NONE">不限</a-radio-button>
                                    <a-radio-button value="CUSTOMt_CROWED">自定义人群</a-radio-button>                           
                                </a-radio-group>
                            </a-form-item>
                            <div class="dingxiang_paichu" v-if="customCrowd=='CUSTOMt_CROWED'" style="width:60%">
                                    <a-tabs default-active-key="1" @change="retargetTabChange"  >
                                        <a-tab-pane key="1" tab="定向池" >
                                            <a-table
                                                :columns="retargetColumns"
                                                :row-key="record => record.key"
                                                :data-source="retargetDataAll"                                        
                                                :loading="loading"
                                                style="width:100%;margin:15px 0"
                                                :pagination='false'
                                                @change="retargetTableChange"
                                                :scroll="{ y: 250 }"
                                                :row-selection="rowSelection"
                                                bordered
                                            >
                                                <template slot="name" slot-scope="name"> {{ name }} </template>
                                            </a-table>
                                        </a-tab-pane>
                                        <a-tab-pane key="2" tab="排除池" >
                                            <a-table
                                                :columns="retargetColumns"
                                                :row-key="record => record.key"
                                                :data-source="retargetDataAll"                                        
                                                :loading="loading"
                                                style="width:100%;margin:15px 0"
                                                :pagination='false'
                                                @change="retargetTableChange"
                                                :scroll="{ y: 250 }"
                                                :row-selection="rowSelection2"
                                                bordered
                                            >
                                                <template slot="name" slot-scope="name"> {{ name }} </template>
                                            </a-table>
                                        </a-tab-pane>
                                       
                                    </a-tabs>
                                    
                                </div>  
                        </div>
                    </div>
                    <div class="row-item">
                        <div class="hint-item"></div>
                            <div class="label-item">
                            <div class="text-item">智能放量</div>
                            <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                            <a-form-item>
                                 <a-radio-group v-model="autoExtendEnabled"   >
                                    <a-radio-button :value="0">不启用</a-radio-button>
                                    <a-radio-button :value="1">启用</a-radio-button>
                                </a-radio-group>
                       
                            </a-form-item>
                             <!-- <span class="tishi"><a-icon type="exclamation-circle" class="tubiao" />智能放量不支持受众预估</span> -->
                            <div v-if="autoExtendEnabled==1" class="deviceBrand">
                                <singleLayersSelecte  title='可放开定向' :listArr='autoExtendOptions' :checked='autoExtendTargetsChecked'  @getCheckedList='getAutoExtendEnabled'/>                            
                            </div>
                        </div>
                    </div>
                    <div class="row-item" v-if="projectInfo.length>0&&projectInfo[0].deliveryRange=='UNION'">
                        <div class="hint-item"></div>
                            <div class="label-item">
                            <div class="text-item">精选流量</div>
                            <div class="required-item"></div>
                        </div>
                        <div class="input-item">
                            <a-form-item>
                                <a-radio-group   v-decorator="['superiorPopularityType', { initialValue:'NONE'}]">
                                    <a-radio-button value="NONE">不限</a-radio-button>
                                    <!-- <a-radio-button value="APP " :disabled='getFormData("deliveryRange")!="UNION"'>应用软件精选</a-radio-button> -->
                                    <a-radio-button value="GAME" >游戏精选</a-radio-button>
                                </a-radio-group>                       
                            </a-form-item>
                        </div>
                    </div>
            </div>
        </div>
        </a-form>    
            <!-- 当前账户 -->
            <div class="moduler">
                <div class="adName">
                    <span>当前账户：</span> 
                    <div class="nameList">
                        <strong v-for="item in LHKaccountInfo" :key="item.value" class="item">{{item.title+'('+item.value+')'}}</strong>
                    </div>
                </div>
            </div>
            <!-- 操作 -->
            <div class="moduler">
                <!-- <div class="moduler-title">计划名称</div> -->
                <div class="opt">
                <a-button type="default" style="margin-right:15px" @click="goBack">取消</a-button>
                
                <a-button type="primary" @click="goNext"  :loading="goNextloading">下一步</a-button>
                </div>
            </div>
        
      <!-- 投放链接 -->
    
    <div class="infoModal">
         <a-modal v-model="visible" title="提示"  @ok="handleOk" :keyboard='false' :maskClosable='false'>
            <ul>
              <li v-for="(item,index) in errorInfo" :key="index">
                  <span>账户{{LHKaccountInfo[index].title}}：</span>{{item.message || '定向设置成功'}}
              </li>
            </ul>
            <template slot="footer">
              <a-button key="back" @click="handleCancel">
                返回本页
              </a-button>
              <a-button key="submit" type="primary"  @click="handleOk">
                下一步
              </a-button>
            </template>
          </a-modal>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { getAction, postAction, downFile, downFilePost } from '@/api/manage'
import radioCheck from './radioCheck';
import linkMultiSelect from '../BatchCreate/linkMultiSelect'
import singleLayersSelecte from '../BatchCreate/singleLayerSelecte'
import qs from 'qs'
var str = ""
for (let i = 0; i < 7*48; i++) {
 str+='0'
  
}

let ageArr=[
    {
        value:'',
        title:'不限',
        checked:false,
       
    },
    {
        value:'AGE_BETWEEN_18_23',
        title:'	18-23岁',
         checked:false,
    },
    {
        value:'AGE_BETWEEN_24_30',
        title:'24-30岁',
         checked:false,
    },
    {
        value:'AGE_BETWEEN_31_40',
        title:'31-40岁',
        checked:false,
    },
    {
        value:'AGE_BETWEEN_41_49',
        title:'41-49岁',
        checked:false,
    },
    {
        value:'AGE_ABOVE_50',
        title:'大于等于50岁',
         checked:false,
    },
]

let autoExtendOptions=[
    {
        label:'地域',
        value:'REGION',
        
    },
    {
        label:'性别',
        value:'GENDER',
        
    },
    {
        label:'年龄',
        value:'AGE',
       
    },
    {
        label:'行为兴趣',
        value:'INTEREST_ACTION',
        
    },
    {
        label:'自定义人群',
        value:'CUSTOM_AUDIENCE',
       
    },
]

let retargetColumns=[
    {
        title: '人群包',
        dataIndex: 'name',
        sorter: true,
        width: '40%',
        scopedSlots: { customRender: 'name' },
    },
    {
        title: '属性',
        dataIndex: 'tag',
        // filters: [
        //     { text: '自定义', value: 'male' },
        //     { text: '系统推荐', value: 'female' },
        //     { text: '第三方', value: 'femal' },
        // ],
        width: '20%',
    },
    {
        title: '所属账号',
        dataIndex: 'accountName',
        sorter: true,
        width: '40%',
        scopedSlots: { customRender: 'accountName' },
    },
    
]

  const plainOptions = [{
      value: 1,
      label: '今日头条'
    },
    {
      value: 10001,
      label: '西瓜视频'
    },
    {
      value: 40001,
      label: '抖音'
    },
    {
      value: 30001,
      label: '抖音火山版'
    },
    {
      value: 900000000,
      label: '穿山甲'
    },
  ];

export default {
  components: {
        radioCheck,
        linkMultiSelect,
        singleLayersSelecte
  },
  data() {
    return {
        projectInfo:[],
        LHKaccountInfo:[],
        
        form: this.$form.createForm(this),
        adposition:'smartInventorys',
        unionVideoType:'REWARDED_VIDEO',
        district:'NONE',
        sceneInventory:'',
        checkedList: [],
        indeterminate: false,
        checkAll: false,
        plainOptions,
        // 定向的参数
        regionValue:'NONE',
        ageArr,//受众年龄
        city:[],
        age:[],
        regionCityListUrl:'ctop/bytedanceAreaInfo/list',
        regionCountyListUrl:'ctop/bytedanceAreaInfo/list',

        // 自定义人群
        // 自定义人群参数
        retargetColumns,
        retargetData:[],
        retargetDataAll:[],
        loading:false,
        customCrowd:'NONE',//自定义人群 选择的值
        selectedRowKeys:[],
        incluedSelectedRowKeys:[],
        incluedSelectedKeys:[],
        excludeSelectedKeys:[],
        excludeSelectedRowKeys:[],
        
        autoExtendEnabled:0,//智能放量是否开启
        autoExtendOptions,//智能投放可选定向数组
        autoExtendTargets:[],//智能放量开启后的选择数据----------需传递的参数
        autoExtendTargetsChecked:[],

        radioStyle: {
          display: 'block',
          height: '30px',
          lineHeight: '30px',
          padding: '0 15px'
        },
        

        goNextloading:false,
        goPlanShowloading:false,
        
        
        dateRange: [moment(), moment()],

        visible:false,
        errorInfo:[],
       
        validationRules: {
            url: [   
            {          
                required: true,
                validator: this.validateURL,
            },
            ],
            name:[{
            required: true,
            validator: this.validateName,
            }],
            bid:[{
            required: true,
            message:'出价信息必须填写',
            // validator: this.validateBid,
            }],
            roi:[{
            required: true,
            message:'ROI系数必须填写',
            // validator: this.validateBid,
            }],
        },

        currentConvertTypes:[],
        convertIds:[],
    }
  },
  watch: {
    
  },
  computed: {
        
        hasSelected() {
            return this.selectedRowKeys.length > 0;
        },
        rowSelection() {
            return {
                // selectedRowKeys: this.incluedSelectedRowKeys,
                onChange: (selectedRowKeys, selectedRows) => {
                    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
                    this.incluedSelectedRowKeys = selectedRowKeys;
                    this.incluedSelectedKeys=selectedRows
                },
                getCheckboxProps: record => ({
                    props: {
                        disabled: this.excludeSelectedRowKeys.indexOf(record.key)>-1,  // Column configuration not to be checked
                        name: record.name,
                    },
                }),
            };
        },
        rowSelection2() {
            return {
                // selectedRowKeys: this.excludeSelectedRowKeys,
                onChange: (selectedRowKeys, selectedRows) => {
                    // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
                    // this.selectedRowKeys = selectedRowKeys;
                    this.excludeSelectedRowKeys = selectedRowKeys;
                    this.excludeSelectedKeys=selectedRows
                },
                getCheckboxProps: record => ({
                    props: {
                        disabled: this.incluedSelectedRowKeys.indexOf(record.key)>-1, // Column configuration not to be checked
                        name: record.name,
                    },
                }),
            };
        },
    },
  methods: {
        adpositionChange(){
            if(this.adposition!='inventoryTypes'){
                this.checkedList=[];
                this.indeterminate=false;
                this.checkAll=false;
            }
        },
        cityChange(){
            this.city=[];
        },
      onChange(checkedList) {
        this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;
        this.checkAll = checkedList.length === plainOptions.length;
      },
      onCheckAllChange(e) {
        let valueOption = [];
        this.plainOptions.forEach((item) => {
          valueOption.push(item.value)
        })
        Object.assign(this, {
          checkedList: e.target.checked ? valueOption : [],
          indeterminate: false,
          checkAll: e.target.checked,
        });
      },
      // 自定义人群的--同时定向排除tab切换事件
        retargetTabChange(tabkey){
            console.log(tabkey)
            this.retargetDataAll=[];
            this.loading=true;
            
            this.LHKaccountInfo.forEach(item=>{
                getAction('/ctop/audience/list',{
                    accountId:item.value
                }).then((res)=>{
                    // console.log(res)
                    this.loading=false;
                    if(res.success){
                        res.data.forEach((ele)=>{
                            ele.key=item.value+'_'+ele.custom_audience_id      
                            ele.id= ele.custom_audience_id  
                            ele.accountName=item.title
                            ele.accountId=item.value                   
                        })
                        // this.retargetData=res.data;
                        this.retargetDataAll=[...this.retargetDataAll,...res.data];
                        
                    }
                })
            })
        },
        onSelectChange(selectedRowKeys) {
            // console.log('selectedRowKeys changed: ', selectedRowKeys);
            this.selectedRowKeys = selectedRowKeys;
        },
        // 自定义人群的改变
        retargetTableChange(pagination, filters, sorter){
            // console.log(pagination);
        },

        //获取选中的城市
        getSelectedCityArr(val){
            // console.log(val);
            this.city=[];
            this.city=val;
        },
        // 获取选中的区县
        getSelectedCountyArr(val){
            // console.log(val)
            this.city=[];
            this.city=val;
        },
        //获取选中的年龄段
        getAgeSelect(val){
            // console.log(val)
            if(val.length==1&&val[0]==""){
                this.age=[]
            }else{
                this.age=val;
            }
            
        },
        //获取智能放量定向的值
        getAutoExtendEnabled(val){
            // console.log(val)
            this.autoExtendTargets=[];
            this.autoExtendTargets.push(...val)
        },
        callback(val) {
            console.log(val);
        },

    
    
    handleOk(e) {
        this.visible=false;
        this.$router.push({path:'/LaunchHousekeeper/setProjectCreate'})
        
        
    },
    handleCancel(e) {
        this.visible = false;
    },
    // 直达链接是否启用
    useOpenUrlChange(){
      this.form.setFieldsValue({
        openUrl:''
      })
    },
    
    //获取表单的某一个属性值
    getFormData(className) {
      return this.form.getFieldValue(className)
    },
    dateChange(date, dateString) {
      // console.log(date,dateString)
      this.form.getFieldDecorator('startTime')
      this.form.getFieldDecorator('endTime')
      this.form.setFieldsValue({
        startTime: date[0].format('YYYY-MM-DD HH:mm'),
        endTime:  date[1].format('YYYY-MM-DD HH:mm'),
      })
    },
    
    
    
    
    // 验证网址
    IsURL(res) {
      //   var strRegex = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/|www\.)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+$/
      var strRegex = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\/])+(.+[A-Za-z0-9-~\/])+$/
      var re = new RegExp(strRegex)
      // console.log(re.test(res))
      if (re.test(res)) {
        return true
      } else {
        return false
      }
    },
    validateURL(rule, value, callback) {
      // console.log(rule, value, callback);

      if (this.IsURL(value)) {
        callback()
      } else if (value && !this.IsURL(value)) {
        callback('链接地址无法访问，请正确输入')
      } else {
          callback('链接必须填写')
      }
    },
    validateName(rule, value, callback){
      // console.log(rule, value, callback);

        if (value) {
          callback()
        } else {
              callback('应用包名称必须填写')
        }
    },
    validateBid(rule, value, callback){
      // console.log(rule, value, callback);
        if (value) {
          callback()
        } else {
            callback('出价必须填写')
        }
    },

   
    
    goBack() {
      this.$router.replace('/modules/LaunchHousekeeper/LaunchHousekeeperList')
      this.$bus.$emit('remove', '/LaunchHousekeeper/setProjectDirectional')
    },
    
    // 保存并新建创意
    goNext() {
      this.$nextTick(()=>{
        
          this.form.validateFields((err, values) => {
            if (!err) {

                console.log('Received values of form: ', values)
                if(this.district!='NONE'){
                  values.district=this.district
                }
                
                console.log(this.excludeSelectedKeys,this.incluedSelectedKeys)
                this.goNextloading=true;

                if(this.adposition!='inventoryTypes'){
                    this.checkedList=[];
                }
                if(this.projectInfo.length>0&&this.projectInfo[0].deliveryRange=='UNION'){
                  this.checkedList=[];
                  this.checkedList.push(900000000)
                }

                let params=[];
            

            params=this.projectInfo.map((item,index)=>{
                item.retargetingTagsExclude=[];
                item.retargetingTagsInclude=[];
                this.excludeSelectedKeys.forEach(ele=>{
                    if(ele.accountId==item.accountId){
                        item.retargetingTagsExclude.push(ele.id)
                    }
                })
                this.incluedSelectedKeys.forEach(ele=>{
                    if(ele.accountId==item.accountId){
                        item.retargetingTagsInclude.push(ele.id)
                    }
                })
                let city=this.city.map(item=>{
                    return item*1
                })
                return {
                    ...item,
                    unionVideoType:this.unionVideoType,
                    inventoryType:this.checkedList,
                    audience:{
                        age:this.age,
                        city,
                        ...values,
                        retargetingTagsExclude:item.retargetingTagsExclude,
                        retargetingTagsInclude:item.retargetingTagsInclude,
                        autoExtendEnabled:this.autoExtendEnabled,
                        autoExtendTargets:this.autoExtendTargets,
                        inventoryType:this.checkedList,
                        district:this.district=='NONE'?'':this.district,
                        
                    }

                }
            })
              console.log(params)
              postAction('/adlab/Project/setAudience', params).then((res) => {
                console.log(res)
                if (res.success) {
                  this.goNextloading=false;
                
                    if(res.result){
                        this.errorInfo=res.result;
                        this.visible=true;

                        let projectInfo=[]
                        res.result.forEach(item=>{
                            if(item.code==0){
                              projectInfo.push(item)
                            }
                        })

                        sessionStorage.setItem('projectInfo',JSON.stringify(projectInfo))
                    }
                 
                } else {
                   this.goNextloading=false;
                  this.$message.error('网络开小差了，等会再试试')
                }
              })
            }else{
              this.$message.error('请正确填写必填项目')
            }
          })
        
      })
      
    },
    

    
  },
  
  mounted() {
     this.$bus.$emit('remove', '/LaunchHousekeeper/setProjectConvert')
        let projectInfo=sessionStorage.getItem('projectInfo');
        if(projectInfo){
            this.projectInfo=JSON.parse(projectInfo)
        }
        let LHKaccountInfo=sessionStorage.getItem('LHKaccountInfo');
        if(LHKaccountInfo){
            this.LHKaccountInfo=JSON.parse(LHKaccountInfo)
        }
        
        this.LHKaccountInfo.forEach(item=>{
            getAction('/ctop/audience/list',{
                accountId:item.value
            }).then((res)=>{
                // console.log(res)
                this.loading=false;
                if(res.success){
                    res.data.forEach((ele)=>{
                        ele.key=item.value+'_'+ele.custom_audience_id      
                        ele.id= ele.custom_audience_id  
                        ele.accountName=item.title
                        ele.accountId=item.value                   
                    })
                    // this.retargetData=res.data;
                    this.retargetDataAll=[...this.retargetDataAll,...res.data];
                    
                }
            })
        })

        if(this.projectInfo.length>0&&this.projectInfo[0].deliveryRange=='UNION'){
          this.checkedList=[];
          this.checkedList.push(900000000)
          this.adposition=900000000
        }
  },
}
</script>
<style lang="scss">
.setProjectDirectional{
  .ant-btn-danger {
    background-color: #ff4d4f !important; 
  }
}


.ant-tooltip-inner,
.ant-tooltip-arrow::before {
  background-color: #fff;
  color: #333;
}
.ant-tooltip-inner {
  span {
    display: block;
  }
}
.ant-tooltip {
  max-width: 450px;
}
.setProjectDirectional {
  .ant-radio-button-wrapper {
    min-width: 80px;
    text-align: center;
  }
  .ant-form-item {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    -webkit-font-feature-settings: 'tnum';
    font-feature-settings: 'tnum';
    vertical-align: top;
  }
  .directedBody {
    .ant-form-item {
      margin-bottom: 20px;
    }
  }
  .ant-checkbox-group-item {
        display: block;
        padding: 5px 15px;
    }
    
    .inventoryTypes{
    .ant-checkbox-wrapper,
    .ant-checkbox-group-item {
        display: block;
        padding: 5px 15px;
    }

    .ant-checkbox-wrapper:first-child {
        padding: 0 15px 5px;
    }
  }
  .singleLayersSelecte .selectBox .selectBox1 .selectLists{
      padding: 5px 15px;
  }
    .singleLayersSelecte .selectBox .title{
        background-color: #F8F9FA;
        
        height: 36px;
        line-height: 33px;
        border-radius: 4px 4px 0 0;
        font-weight: bold;
        display: -webkit-box;
    }
    .singleLayersSelecte .selectBox .title .clearAllBtn[data-v-ce06bf4a] {
        position: absolute;
        top: 1px;
        right: 0;
    }
    .singleLayersSelecte .selectBox .selectRight[data-v-ce06bf4a] {
        width: 35%;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
    .singleLayersSelecte .selectBox .selectLeft[data-v-ce06bf4a] {
        width: 65%;
        margin-right: 2%;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
    .linkMultiSel[data-v-dc40dba0] {
        width: 100%;
        height: 310px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-top: 15px;
    }
}
</style>
<style lang="scss" scoped>
.setProjectDirectional {
  font-family: PingFangSC-Regular, tahoma, arial, 'Hiragino Sans GB', 'Microsoft yahei', sans-serif;
  color: #333;
  ul,
  li {
    margin: 0;
    padding: 0;
  }
  .moduler {
    background: #fff;
    margin-bottom: 16px;
    position: relative;
    padding: 32px 24px 48px 32px;
    border-radius: 4px;
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.05);
    .moduler-title {
      display: flex;
      align-items: center;
      font-size: 22px;
      margin-bottom: 20px;
    }
    .row-item {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 32px;
    }
    .row-item:last-of-type {
      margin-bottom: 0;
    }
    .row-item .hint-item {
      width: 24px;
      min-width: 24px;
      align-self: flex-start;
      line-height: 20px;
      height: 20px;
      margin-top: 9px;
    }
    .row-item .label-item {
      position: relative;
      align-items: flex-start;
      align-self: flex-start;
      line-height: 20px;
      height: 20px;
      margin-top: 10px;
      width: 80px;
      min-width: 80px;
      .text-item {
        font-size: 14px;
        width: 60px;
      }
    }
    .row-item .required-item {
      width: 4px;
      height: 4px;
      border-radius: 2px;
      background: #f45858;
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
    }
    .row-item .input-item {
      min-width: 670px;
      position: relative;
      // height: 35px;
      .tip {
        font-size: 12px;
        color: tomato;
      }
      .inventory-tags-lists-header {
          background-color: #F8F9FA;
          border: 1px solid #E4E9ED;
          height: 36px;
          line-height: 33px;
          border-radius: 4px 4px 0 0;
          font-weight: bold;
          display: flex;
        }

        .inventory-tags-lists-container {
          border: 1px solid #E4E9ED;
          margin-top: -1px;
          height: 100%;
          padding: 4px 0px;
          border-radius: 0 0 4px 4px;
        }

        .inventory-tags-lists-item {
          width: 100%;
          height: 37px;
          line-height: 37px;
          padding-left: 12px;
          padding-right: 12px;
          display: flex;
          font-size: 14px;
          color: #333;
        }
    }
    .adName{
      display: flex;
      .nameList{
        width: 90%;
      }
      .item{
        display: inline-block;
        width: 30%;
        margin-left: 15px;
        margin-bottom: 10px;
      }
    }
  }
  .opt {
    text-align: right;
  }
}
</style>