
<style>
.newDirectedPackage .ant-checkbox-group-item{
    width: 100%;
    display: block ;
    padding: 3px 0;
    margin-right: 0;
    padding: 5px 15px;
}
.newDirectedPackage .ant-checkbox-group-item:hover{
    background-color: rgba(0,0,0,.1);
}

    
</style>
<style lang="scss" scoped>
.newDirectedPackage{
    // background-color: #fff;
    .title{
        width: 100%;
        font-size: 20px;
        font-weight: 700;
        padding: 15px 0;
        text-align: center;
        border-bottom: 1px solid #eee;
        background-color: #fff;
    }
    .optBOX{
        background-color: #fff;
        padding: 15px 0;
        position: relative;
        .optItem{
            // margin-bottom: 15px;
            .typeName{
                width: 130px;
                text-align: right;
                display: inline-block;
                margin-right: 15px;
            }
            .tishi{
                display: block;
                
                color: #999;
                .tubiao{
                    color: red;
                    margin-right: 5px;
                }
            }
            #btngroup .ant-btn:hover{
                border-color: none;
            }
            .deviceBrand{
                // background: rgb(116, 76, 76);
                width: 100%;
                height: 300px;

            }
            .selectBox{
                display: flex;
                .title{
                    background: #f9f9f9;
                    font-size: 14px;
                    font-weight: 700;
                    padding:0 15px;
                    border-bottom: 1px solid #ddd;
                    text-align: left;
                    position: relative;
                    
                    .clearAllBtn{
                        position: absolute;
                        top: 3px;
                        right: 0;
                    }
                }
                .selectLeft{
                    width: 40%;
                    margin-right: 2%;
                    border: 1px solid #ddd;
                    border-radius: 5px;
                }
                .selectRight{
                    width: 20%;
                    border: 1px solid #ddd;
                    border-radius: 5px;
                }
                .selectBox1{
                    height: 250px;
                    overflow: auto;
                    
                    .selectList{                      
                        display: block;
                        width: 100%;
                        // padding: 0 15px;
                        // padding: 3px 0;
                    }
                    .selectLists{
                        display: block;
                        width: 100%;
                        padding: 0 15px;
                    }
                    .selectLists:hover{
                        background-color: rgba(0,0,0,.1);
                    }
                    .selectListitem{
                        display: block;
                        height: 25px;
                        line-height: 25px;
                        background-color: #eee;
                        border-radius: 5px;
                        padding: 0 10px;
                        margin: 8px 10px;
                        position: relative;
                        #close{
                            font-size: 12px;
                            position: absolute;
                            right: 10px;
                            top: 5px;
                            cursor: pointer;
                        }
                    }
                }

            }
            .zidingyirenqun{
                width: 60%;
            }
        }
        .rightBox{
            position: fixed;
            top: 22%;
            right: 20px;
            width: 230px;
            // height: 500px;
            max-height: 500px;
            border: 1px solid #ddd;
            border-radius: 10px;
            font-size: 12px;
            overflow: auto;
            .topBox,.bottomBox{
                padding: 10px 15px;
                background-color: #f9f9f9;
                border-bottom: 1px solid #eee;
                border-radius: 10px 10px 0 0;
                .title{
                    background-color: #f9f9f9;
                    font-size: 14px;
                    text-align: left;
                    margin: 0 0 10px;
                    padding: 5px 0;
                    font-weight: 400;
                    border-bottom: 0;
                    // border-radius: 10px;
                }
                .info p{
                    margin-bottom: 6px;
                    color: #999;
                }
                .info .num{
                    color: #000;
                    font-weight: 600;
                }
            }
            .bottomBox{
                background-color: #fff;
                border-bottom:0;
                 .title{
                    background-color: #FFF;
                }
            }
        }
        
    }

    
}
</style>

<style lang="scss">
    .actionBottom{
        ul,li{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        width: 70%;
        height: 400px;
        display:flex;     
        margin-top: 20px;
        .action_left{
            width:60% ;
            margin-right: 2%;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px 2px;
            .Taxonomic{
                padding: 0 10px;
                .Taxonomic_checkbox{
                    margin-top: 10PX;
                    height: 220px;
                    border: 1px solid #ccc;
                    border-radius: 5px;
                }
                
                .Taxonomic_relevant{
                     font-size: 12px;
                     margin-top: 10px;
                    .Taxonomic_relevant_top{
                        position: relative;
                        display: block;
                        height: 20px;
                        line-height: 20px;
                        .Taxonomic_relevant_top_more{
                            position: absolute;
                            top: 0;
                            right: 0;
                            font-size: 12px;
                            display: block;
                            height: 20px;
                            line-height: 20px;
                        }
                    }
                    .Taxonomic_relevant_bottom{
                        display: block;
                        height: 20px;
                        line-height: 20px;
                        .Taxonomic_relevant_bottom_item{
                            margin-right: 5px;
                        }
                    }
                }
            }
            .keyWords_box_title{
                font-size: 16px;
                font-weight: 600;
                color: #000;
                height: 35px;
                line-height: 35px;
                background-color: rgb(248,249,250);
            }
            .keyWords_box_list{
                height: 185px;
                overflow: auto;
                li{
                    height: 30px;
                    line-height: 30px;
                    font-size: 14px;
                    color: #333;
                    .caozuo{
                        display: none;
                        // display: inline-block;
                        width:50%;
                        text-align: right;
                        .delete{
                            margin-left: 5px;
                        }
                        .searchKeyWord{
                            margin-left: 15px;
                        }
                    }
                    .mingzi{
                        display: inline-block;
                        width: 30%;
                        
                    }
                    .renshu{
                        display: inline-block;
                        width: 15%;
                        line-height: 30px;
                        height: 30px;
                    }
                }
            }
            .keyWords_box_list li:hover .caozuo{
                display: inline-block;
            }
        }
        .action_right{
            width: 35%;
            height: 100%;
            border-radius: 5px; 
            border: 1px solid #ccc;
            .action_right_title{
                background-color: rgb(248,249,250);
                padding: 10px 10px 0;
                border-radius: 5px 5px 0 0;
                border-bottom: 1px solid #ccc;
                position: relative;
            }
            .action_right_sum{
                display: block;
                margin-bottom: 5px;
                height: 20px;
                line-height: 20px;
                font-size: 14px;
                color: #333;
            }
            .action_right_info{
                display: block;
                margin-bottom: 5px;
                height: 20px;
                line-height: 20px;
                font-size: 14px;
                color: #999;
            }
            .action_right_btn{
                position: absolute;
                top: 0px;
                right: -5px;
            }
            .action_right_bottom{
                
                .action_right_option{
                    
                    border-bottom: 1px  solid #ccc;
                }
                .ant-select-selection{
                    border: 0;
                }
                .coverPeople{
                    margin-left: 5px;
                }
                .caozuo{
                    display: none;
                    .delete{
                        margin-left: 5px;
                    }
                    .searchKeyWord{
                        margin-left: 2px;
                    }
                }
                .mingzi{
                    display: inline-block;
                    width: 70px;
                    
                }
                .renshu{
                    display: inline-block;
                    width: 40px;
                    line-height: 20px;
                    height: 20px;
                }
                .action_right_select_list{
                    padding: 5px 10px;
                    height: 250px;
                    overflow: auto;
                }
                .action_right_select_list li{
                    line-height: 20px;
                    height: 20px;
                }
                .action_right_select_list li:hover .caozuo{
                    display: inline-block;
                }

                .action_right_AISelect{
                    height: 30px;
                    line-height: 30px;
                    font-size: 14px;
                    padding: 5px 10px;
                    border-top: 1px solid #ccc;
                }
            }
        }
    }
    .ant-tooltip-inner,.ant-tooltip-arrow::before{
        background-color: #fff;
        color: #666;
        font-size: 12px;
    }
</style>

<style lang="scss">
    .region{
        width: 70%;
        margin-top: 10px;
        .region_input{
            width: 60%;
        }
        .ant-tabs-bar{
            border: 0;
        }
    }
</style>
<template>
    <div class="newDirectedPackage">
        <div class="title" v-if="!isNewPlan">
            {{title}}
        </div>
        <div class="optBOX">
            <div class="leftBox">
                <a-form :form="form">
                    <a-form-item label="定向包名称" :label-col="labelCol" :wrapper-col="wrapperCol">
                       <a-input placeholder="请输入定向包名称，至多20个字符" style="width:40%" v-decorator="['name', { rules: [{ required: true, message: '请输入定向包名称' }] }]" />
                    </a-form-item>                    
                    <a-form-item label="定向包类型" :label-col="labelCol" :wrapper-col="wrapperCol" v-if="!isNewPlan">
                        <a-radio-group  v-decorator="['landingType', { initialValue:'EXTERNAL' }]" @change='landingTypeChange' button-style="solid">
                            <a-radio-button value="EXTERNAL">落地页</a-radio-button>
                            <a-radio-button value="APP_ANDROID">应用下载-安卓</a-radio-button>
                            <a-radio-button value="APP_IOS">应用下载-IOS</a-radio-button>
                            <!-- <a-radio-button value="AWEME">抖音推广</a-radio-button> -->
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item label="投放范围" :label-col="labelCol" :wrapper-col="wrapperCol" v-if="!isNewPlan">
                        <a-radio-group  v-decorator="['deliveryRange', { initialValue:'DEFAULT' }]" @change='landingTypeChange' button-style="solid">
                            <a-radio-button value="DEFAULT">默认</a-radio-button>
                            <a-radio-button value="UNION">穿山甲
                                <a-tooltip>
                                    <template slot="title">
                                        基于4亿日活跃用户大数据积累，顶尖AI智能推荐技术，今日头条与最广泛的合作伙伴携手打造全新移动生态联盟
                                    </template>
                                    <a-icon type="question-circle" />
                                </a-tooltip>
                            </a-radio-button>
                            
                        </a-radio-group>
                    </a-form-item>
                    <div v-show="showDirectedPackage">
                    <a-form-item label="媒体" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-radio-group  v-decorator="['medialType', { initialValue:1 }]"  button-style="solid">
                            <a-radio-button :value="1">头条</a-radio-button>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item label="地域" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-radio-group  button-style="solid" v-model="regionValue">
                            <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-button value="BUSINESS_DISTRICT>按商圈</a-radio-button> -->
                        </a-radio-group>
                        <div class="region" v-show="regionValue!='NONE'">
                            <!-- 省市 -->
                            <div class="provincyCity" v-if="regionValue=='CITY'">
                                <div class="region_input">
                                    <!-- <a-input-search placeholder="输入搜索的省市" enter-button  /> -->
                                </div>
                                <div class="tabChange">
                                    <div class="tabBox">
                                        <a-tabs v-model="cityTab" @change="cityTabChange">
                                            <a-tab-pane key="geography" tab="地理划分">
                                                <linkMultiSelect title='省份' :listArr='[]' :maxLayers='2' :listUrl='regionCityListUrl' @getSelectedArr='getSelectedCityArr'/>
                                            </a-tab-pane>
                                            <!-- <a-tab-pane key="development" tab="发展划分" >
                                                <linkMultiSelect title='等级' :listArr='[]' url='' :maxLayers='3' :listUrl='regionCityListUrl'  @getSelectedArr='getSelectedCityArr'/>
                                            </a-tab-pane> -->
                                        </a-tabs>
                                    </div>
                                </div>
                            </div>
                            <!-- 区县 -->
                            <div class="district" v-else-if="regionValue=='COUNTY'">
                                <linkMultiSelect title='省份' :listArr='[]' :maxLayers='3' :listUrl='regionCityListUrl'  @getSelectedArr='getSelectedCountyArr'/>
                            </div>
                            <!-- 商圈 -->
                            <!-- <div class="businessCircle" v-else>
                                <div class="tabChange">
                                    <div class="tabBox">
                                        <a-tabs v-model="businessTab" @change="businessTabChange">
                                            <a-tab-pane key="businessCircle" tab="商圈">
                                                <a-cascader :options="businessOptionsArr" change-on-select @change="businessChange" />
                                                <linkMultiSelect :titleArr='["商圈"]' :listArr='[]' @getSelectedArr='getSelectedCityArr'/>
                                            </a-tab-pane>
                                            <a-tab-pane key="addFromMap" tab="从地图添加" >
                                                <a-input-search placeholder="请输入搜索地址"  v-model="MapselectValue" @search="MapSearch">
                                                    <a-button slot="enterButton">
                                                        搜索
                                                    </a-button>
                                                </a-input-search>
                                            </a-tab-pane>
                                        </a-tabs>
                                    </div>
                                </div>
                            </div> -->
                            <div class="region_people">
                                <a-radio-group v-model="regionPeopleValue"  v-decorator="['locationType', { initialValue:'HOME' }]" >
                                    <a-radio value="HOME">居住在该地区的用户</a-radio>
                                    <a-radio value="TRAVEL"> 到该地区旅行的用户</a-radio>
                                    <a-radio value="ALL">该地区内的所有用户</a-radio>
                                    <a-radio value="CURRENT">正在该地区的用户</a-radio>
                                </a-radio-group>
                            </div>
                        </div>                        
                    </a-form-item>
                    <a-form-item label="性别" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
                         <a-radio-group  v-decorator="['gender', {initialValue:'NONE' }]"  button-style="solid">
                            <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>
                    <a-form-item label="年龄" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <radioCheck :checkArr='ageArr' @getSonValue='getAgeSelect'  />
                    </a-form-item>
                    <a-form-item label="精选流量包" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-radio-group  button-style="solid" v-decorator="['trafficPackage', { initialValue:'NONE'}]">
                            <a-radio-button value="NONE">不限</a-radio-button>
                            <a-radio-button value="men" :disabled='getFormData("deliveryRange")!="UNION"'>应用软件精选</a-radio-button>
                            <a-radio-button value="women" :disabled='getFormData("deliveryRange")!="UNION"'>游戏精选</a-radio-button>
                        </a-radio-group>
                        <span class="tishi"><a-icon type="exclamation-circle" class="tubiao" />精选流量包仅支持穿山甲、穿山甲-精选游戏广告位</span>
                    </a-form-item>
                    <a-form-item label="自定义人群" :label-col="labelCol" :wrapper-col="wrapperCol" v-if="accountInfo.value!=undefined">
                        <a-radio-group  v-model="customCrowd" button-style="solid">
                            <a-radio-button value="NONE">不限</a-radio-button>
                            <a-radio-button value="CUSTOMt_CROWED">自定义人群</a-radio-button>                           
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item label="定向逻辑" :label-col="labelCol" :wrapper-col="wrapperCol" v-if="customCrowd=='CUSTOMt_CROWED'">
                        <a-radio-group  v-model="directLogic" button-style="solid" @change="directLogicChange">
                            <a-radio-button value="RETARGETING_INCLUDE">定向</a-radio-button>
                            <a-radio-button value="RETARGETING_EXCLUDE">排除</a-radio-button>                           
                            <a-radio-button value="ALL">同时定向排除</a-radio-button>                           
                        </a-radio-group>
                        <div class="zidingyirenqun" v-if="customCrowd=='CUSTOMt_CROWED'">                                                  
                                <!-- <a-input placeholder="请输入人群包名称或者ID" v-model="dxInputValue" v-if="directLogic!='ALL'" style="width:50%;margin:15px 0">
                                    <a-icon type="search" slot="addonAfter"/>
                                </a-input> -->
                                <div class="dingxiang" v-if="directLogic=='RETARGETING_INCLUDE'">
                                    <a-table
                                        :columns="retargetColumns"
                                        :row-key="record => record.key"
                                        :data-source="retargetData"                                       
                                        :loading="loading"
                                        style="width:60%;margin:15px 0"
                                        :pagination='false'
                                        @change="retargetTableChange"
                                        bordered
                                        :scroll="{ y: 250 }"
                                        :row-selection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                                    >
                                        <template slot="name" slot-scope="name,records"> {{ name }}({{records.key}}) </template>
                                    </a-table>
                                </div>
                                <div class="paichu" v-if="directLogic=='RETARGETING_EXCLUDE'">
                                    <a-table
                                        :columns="retargetColumns"
                                        :row-key="record => record.key"
                                        :data-source="retargetData"                                        
                                        :loading="loading"
                                        style="width:60%;margin:15px 0"
                                       :pagination='false'
                                        @change="retargetTableChange"
                                        :scroll="{ y: 250 }"
                                        :row-selection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                                        bordered
                                    >
                                        <template slot="name" slot-scope="name,records"> {{ name }}({{records.key}}) </template>
                                    </a-table>
                                </div>
                                <div class="dingxiang_paichu" v-if="directLogic=='ALL'" 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,records"> {{ name }}({{records.key}}) </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,records"> {{ name }}({{records.key}}) </template>
                                            </a-table>
                                        </a-tab-pane>
                                       
                                    </a-tabs>
                                    
                                </div>                                                        
                        </div>
                    </a-form-item>
                    
                    <a-form-item label="行为兴趣" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-radio-group v-model="interestActionMode" button-style="solid">
                            <a-radio-button value="UNLIMITED">不限</a-radio-button>
                            <a-radio-button value="RECOMMEND">
                                系统推荐
                                <a-tooltip>
                                    <template slot="title">
                                        如与自定义人群包同时使用，系统推荐不生效
                                    </template>
                                    <a-icon type="question-circle" />
                                </a-tooltip>
                            </a-radio-button>
                            <!-- <a-radio-button value="CUSTOM">自定义</a-radio-button> -->
                        </a-radio-group>
                        
                    </a-form-item>
                    <div class="interestActionMode" v-show="interestActionMode=='CUSTOM'">
                            <a-form-item label="行为" class="optItem"  :label-col="labelCol" :wrapper-col="wrapperCol">
                                <div>
                                    <span style="margin-right:5px">在</span> 
                                    <a-select
                                        mode="multiple"
                                        label-in-value
                                        style="width: 210px"
                                        placeholder="所有行为场景中"
                                        @change="actionSceneChange"
                                        :maxTagCount='1'
                                    >
                                        <a-select-option value='E-COMMERCE'> 电商互动行为</a-select-option>
                                        <a-select-option value='NEWS'> 咨询互动行为</a-select-option>
                                        <a-select-option value='APP'> APP推广行为</a-select-option>
                                    </a-select>
                                    <span>中，选择用户</span>
                                    <a-select  v-model="actionDays" style="width: 90px">
                                        <a-select-option :value='7'>7天 </a-select-option>
                                        <a-select-option :value='15'>15天 </a-select-option>
                                        <a-select-option :value='30'>30天 </a-select-option>
                                        <a-select-option :value='60'>60天 </a-select-option>
                                        <a-select-option :value='90'>90天 </a-select-option>
                                        <a-select-option :value='180'>180天 </a-select-option>
                                        <a-select-option :value='365'>365天 </a-select-option>
                                    </a-select>
                                    <span>内发生的行为：</span> 
                                </div>
                                <div class="actionBottom">
                                    <div class="action_left">
                                        <a-tabs default-active-key="1" >
                                            <a-tab-pane key="1" tab="添加类目词">
                                                <div class="Taxonomic">
                                                    <div class="Taxonomic_search">
                                                         <a-input-search placeholder="请输入行为类目词" style="width: 100%" @search="TaxonomicSearch" />
                                                    </div>
                                                    <div class="Taxonomic_checkbox">

                                                    </div>
                                                    <div class="Taxonomic_relevant">
                                                        <span class="Taxonomic_relevant_top">
                                                            <span class="Taxonomic_relevant_top_title">{{}}相关词：</span>
                                                            <a-button type='link' class="Taxonomic_relevant_top_more">更多></a-button>
                                                        </span>
                                                        
                                                        <span class="Taxonomic_relevant_bottom">
                                                            <a href="javascript:;" class="Taxonomic_relevant_bottom_item">+游戏</a>
                                                            <a href="javascript:;" class="Taxonomic_relevant_bottom_item">+手游</a>
                                                            <a href="javascript:;" class="Taxonomic_relevant_bottom_item">+王者荣耀</a>
                                                            <a href="javascript:;" class="Taxonomic_relevant_bottom_item">+吃鸡</a>
                                                        </span>
                                                    </div>
                                                </div>
                                            </a-tab-pane>
                                            <a-tab-pane key="2" tab="添加关键词" >
                                                <div class="Taxonomic keyWord">
                                                    <div class="Taxonomic_search">
                                                         <a-input-search placeholder="请输入行为类目词或关键词" style="width: 100%"  @search="keyWordSearch" />
                                                    </div>
                                                    <div class="Taxonomic_checkbox keyWords_box">
                                                        <div class="keyWords_box_title">
                                                            {{}}
                                                        </div>
                                                        <ul class="keyWords_box_list">
                                                            <li>
                                                                <span class="mingzi">游戏</span>
                                                                <span class="renshu">21亿</span>
                                                                <span class="caozuo" >
                                                                    <a href="javascript:;" class="addKeywords">添加</a>
                                                                    <a href="javascript:;" class="searchKeyWord">查关键词</a>
                                                                </span>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                    <div class="Taxonomic_relevant">
                                                        <span class="Taxonomic_relevant_top">
                                                            <a href="javascript:;" class="Taxonomic_relevant_bottom_item">添加全部“{{}}”相关词</a>
                                                        </span>
                                                    </div>
                                                </div>
                                            </a-tab-pane>                                           
                                        </a-tabs>
                                    </div>
                                    <div class="action_right">
                                        <div class="action_right_title">
                                            <span class="action_right_sum">还可以添加行为：{{}}个</span>
                                            <span class="action_right_info">
                                                <span>类目词：{{}}</span>
                                                <span>关键词：{{}}</span>
                                            </span>
                                            <a-button type='link' class="action_right_btn clearAllBtn">清空</a-button>
                                        </div>
                                        <div class="action_right_bottom">
                                            <div class="action_right_option">
                                                <a-select v-model="actOrint" style="width: 80px;"  >
                                                    <a-select-option value="all">
                                                        全部
                                                    </a-select-option>
                                                    <a-select-option value="lucy">
                                                        类目词
                                                    </a-select-option>
                                                    <a-select-option value="disabled" >
                                                        关键词
                                                    </a-select-option>
                                                </a-select>
                                                <span class="coverPeople">覆盖人数</span>
                                            </div>
                                            <div class="action_right_select_list">
                                                <ul>
                                                    <li>
                                                        <span class="mingzi">游戏</span>
                                                        <span class="renshu">21亿</span>
                                                        <span class="caozuo" >
                                                             <a href="javascript:;" class="delete">删除</a>
                                                             <a href="javascript:;" class="searchKeyWord">查关键词</a>
                                                        </span>
                                                    </li>
                                                    <li>
                                                        <span class="mingzi">游戏</span>
                                                        <span class="renshu">21亿</span>
                                                        <span class="caozuo" >
                                                             <a href="javascript:;" class="delete">删除</a>
                                                             <a href="javascript:;" class="searchKeyWord">查关键词</a>
                                                        </span>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="action_right_AISelect">
                                                <a-tooltip class="actionTooltip">
                                                    <template slot="title">
                                                        已添加的行为关键词需大于20个，才可以使用自动选词
                                                    </template>
                                                        <a-button type='link' :disabled='AIselect'>使用自动选词</a-button>
                                                        
                                                </a-tooltip>
                                                <a-tooltip class="actionTooltip">
                                                    <template slot="title">
                                                        系统根据行为定向所有已选结果，自动推荐词包
                                                    </template>
                                                        <a-icon type="question-circle" />
                                                </a-tooltip>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a-form-item>
                            <a-form-item label="兴趣" class="optItem"  :label-col="labelCol" :wrapper-col="wrapperCol">

                            </a-form-item>
                        </div>
                    <a-form-item label="平台" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <radioCheck :checkArr='platformArr' @getSonValue='getPlatForm' />
                    </a-form-item>
                    <a-form-item label="过滤已安装" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol" v-if="landingTypeValue=='APP_ANDROID'">
                        <a-radio-group  button-style="solid" v-decorator="['hideIfExists', {initialValue:0 }]" >
                            <a-radio-button :value='0'>不过滤</a-radio-button>
                            <a-radio-button :value="1">过滤</a-radio-button>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item label="安卓版本" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol" v-if="landingTypeValue=='APP_ANDROID'">
                        <a-select  style="width: 200px" v-decorator="['androidOsv', {initialValue:'0.0' }]" @change="androidOsvChange">
                            <a-select-option v-for="(item,index) in androidOsvArr" :key="index" :value='item.value'>
                               {{item.label}}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="IOS版本" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol" v-if="landingTypeValue=='APP_IOS'">
                        <a-select  style="width: 200px" v-decorator="['iosOsv', {initialValue:'0.0' }]" @change="iosOsvChange">
                            <a-select-option v-for="(item,index) in iosOsvArr" :key="index" :value='item.value'>
                               {{item.label}}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="过滤已转化用户" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
                         <a-radio-group  v-decorator="['filterConvertedUsers', {initialValue:'NO_EXCLUDE' }]"  button-style="solid">
                            <a-radio-button value="NO_EXCLUDE">不过滤</a-radio-button>
                            <a-radio-button value="AD">广告计划</a-radio-button>
                            <a-radio-button value="CAMPAIGN">广告组</a-radio-button>
                            <a-radio-button value="ADVERTISER">广告账户</a-radio-button>
                            <a-radio-button value="CUSTOMER">公司账户</a-radio-button>
                            <a-radio-button value="APP">APP</a-radio-button>
                        </a-radio-group>
                        <span class="tishi"><a-icon type="exclamation-circle" class="tubiao" />过滤已转化不支持投放目标为展示、点击计划，不支持受众预估
                        </span>
                    </a-form-item>
                    <a-form-item label="运营商" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
                       <radioCheck :checkArr='carrierArr' @getSonValue='getCarrier' />
                    </a-form-item>
                    <a-form-item label="网络" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
                       <radioCheck :checkArr='networkArr' @getSonValue='getAc' />
                    </a-form-item>
                    <a-form-item label="文章类型" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
                       <a-radio-group  button-style="solid" v-model="articleType" @change="articleTypeChange">
                            <a-radio-button value="">不限</a-radio-button>
                            <a-radio-button value="articleCategory">文章分类</a-radio-button>                          
                        </a-radio-group>
                        <div v-show="articleType=='articleCategory'" class="deviceBrand">
                            <singleLayersSelecte  title='文章类型' :checked='articleChecked'  :listArr='articleCategoryOptions'  @getCheckedList='getArticleCategory'/>
                        </div>
                    </a-form-item>
                    <a-form-item label="手机品牌" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
                       <a-radio-group  v-model="deviceBrandType" button-style="solid" @change="deviceBrandTypeChange">
                            <a-radio-button value="">不限</a-radio-button>
                            <a-radio-button value="byBrand">按品牌</a-radio-button>
                        </a-radio-group>
                        <div v-if="deviceBrandType=='byBrand'" class="deviceBrand">
                            <singleLayersSelecte  title='手机品牌' :listArr='deviceBrandOptions' :checked='brandChecked'  @getCheckedList='getDeviceBrand' />
                        </div>
                    </a-form-item>
                    <a-form-item label="手机价格"  class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
                       <a-radio-group  v-model="launchPrice" button-style="solid">
                            <a-radio-button value="">不限</a-radio-button>
                            <a-radio-button value="custom">自定义</a-radio-button>
                        </a-radio-group>
                        <span v-if="launchPrice=='custom'">
                            <a-slider range :marks="marks" v-model='launchPriceArr' :step="null"  :min='0' :max='11000'  @change="slideChange" />
                        </span>
                        <span v-else></span>
                    </a-form-item>
                    <a-form-item label="新用户" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">                      
                        <radioCheck :checkArr='newUser' @getSonValue='getNewUser' />
                    </a-form-item>
                    <a-form-item label="智能放量" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-radio-group v-model="autoExtendEnabled" button-style="solid" @change="zhinengChange" >
                            <a-radio-button :value="0">不启用</a-radio-button>
                            <a-radio-button :value="1">启用</a-radio-button>
                        </a-radio-group>
                        <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>
                    </a-form-item>
                    
                    </div>
                    <a-form-item :wrapper-col="{ span: 14, offset: 10 }" :label-col="labelCol" v-show="!isNewPlan"> 
                        
                        <a-button style="margin-right: 30px;" @click="cancel">
                            取消
                        </a-button>
                        <a-button type="primary" @click="applicatiSubmit">
                            {{title=='新建定向包'? '创建': '修改'}}
                        </a-button>
                    </a-form-item>       
                    <a-form-item :wrapper-col="{ span: 14, offset: 10 }" :label-col="labelCol" v-show="isNewPlan">                         
                        <a-button style="margin-right: 30px;" @click="tijiaozhi" type='primary'>
                           {{showDirectedPackage ?' 选择完毕，收起':'展开'}}定向包
                        </a-button>                        
                    </a-form-item>       
                       
                </a-form>           
            </div>
            <!-- <div class="rightBox">
                <div class="topBox">
                    <p class="title">预估可覆盖</p>
                    <div class="info">
                        <p>抖音视频：<span class="num">{{}}</span>万日活跃用户</p>
                        <p>西瓜视频：<span class="num">{{}}</span>万日活跃用户</p>
                        <p>火山视频：<span class="num">{{}}</span>万日活跃用户</p>
                        <p>今日头条：<span class="num">{{}}</span>万日活跃用户</p>
                    </div>
                </div>
                <div class="bottomBox">
                    <p class="title">受众信息</p>
                    <div class="info">
                        <p>性别：<span class="num">{{}}</span></p>
                        <p>年龄：<span class="num">{{}}</span></p>
                        <p>平台：<span class="num">{{}}</span></p>
                        <p>网络：<span class="num">{{}}</span></p>
                        <p>运营商：<span class="num">{{}}</span></p>
                        <p>新用户：<span class="num">{{}}</span></p>
                        <p>手机品牌：<span class="num">{{}}</span></p>
                    </div>
                </div>
            </div> -->
        </div>
    </div>
</template>
<script>
import { getAction, postAction, downFile, downFilePost } from '@/api/manage';
const plainOptions = ['Apple', 'Pear', 'Orange','44','550','9982','5525'];
const defaultCheckedList = ['Apple', 'Orange'];
import radioCheck from './radioCheck';
import linkMultiSelect from './linkMultiSelect'
import singleLayersSelecte from './singleLayerSelecte'
let newUser=[
    {
        value:'',
        title:'不限',
         checked:false,
    },
    {
        value:'WITH_IN_A_MONTH',
        title:'一月以内',
         checked:false,
    },
    {
        value:'ONE_MONTH_2_THREE_MONTH',
        title:'一月到三个月',
         checked:false,
    },
    {
        value:'THREE_MONTH_EAILIER',
        title:'三月以上',
         checked:false,
    }
]

let networkArr=[
    {
        value:'',
        title:'不限',
         checked:false,
    },
    {
        value:'WIFI',
        title:'WIFI',
         checked:false,
    },
    {
        value:'2G',
        title:'2G',
         checked:false,
    },
    {
        value:'3G',
        title:'3G',
         checked:false,
    },
    {
        value:'4G',
        title:'4G',
         checked:false,
    },
]

let carrierArr=[
    {
        value:'',
        title:'不限',
         checked:false,
    },
    {
        value:'MOBILE',
        title:'移动',
         checked:false,
    },
    {
        value:'UNICOM',
        title:'联通',
         checked:false,
    },
    {
        value:'TELCOM',
        title:'电信',
         checked:false,
    },
]
let platformArr=[
    {
        value:'',
        title:'不限',
        disabled:false
    },
    {
        value:'ANDROID',
        title:'Android',
        disabled:false
    },
    {
        value:'IOS',
        title:'iOS',
        disabled:false
    },
    
]
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 options=[
        {
          value: 'zhejiang',
          label: 'Zhejiang',
          children: [
            {
              value: 'hangzhou',
              label: 'Hangzhou',
              children: [
                {
                  value: 'xihu',
                  label: 'West Lake',
                },
              ],
            },
          ],
        },
        {
          value: 'jiangsu',
          label: 'Jiangsu',
          children: [
            {
              value: 'nanjing',
              label: 'Nanjing',
              children: [
                {
                  value: 'zhonghuamen',
                  label: 'Zhong Hua Men',
                },
              ],
            },
          ],
        },
];

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: '80%',
        scopedSlots: { customRender: 'name' },
    },
    {
        title: '属性',
        dataIndex: 'tag',
        filters: [
            { text: '自定义', value: 'male' },
            { text: '系统推荐', value: 'female' },
            { text: '第三方', value: 'femal' },
        ],
        width: '20%',
    },
    
]
export default {
    props:{
        isNewPlan:{
            default:false            
        },
        id:{
            type:Number
        }
    },
    watch: {
        id(n,o){
            // console.log(n,o)      
            if(n!=o){                      
                this.title='修改定向包';
                this.editId=this.id
                getAction('/ctop/audiencePackage/queryById',{
                    id:this.editId
                }).then((res)=>{
                    // console.log(res);
                    this.form.setFieldsValue({
                        name:res.result.name,
                        landingType:res.result.landingType,
                        deliveryRange:res.result.deliveryRange,
                        gender:res.result.gender,                       
                        filterConvertedUsers:res.result.filterConvertedUsers,
                    })
                    if(res.result.landingType=='APP_ANDROID'){
                        this
                    }
                    this.autoExtendEnabled=res.result.autoExtendEnabled,
                    this.interestActionMode=res.result.interestActionMode;
                    this.ageArr=[];
                    this.ageArr=JSON.parse(JSON.stringify(ageArr))
                    // this.platformArr=[];
                    // this.platformArr=JSON.parse(JSON.stringify(platformArr))
                    this.carrierArr=[];
                    this.carrierArr=JSON.parse(JSON.stringify(carrierArr))
                    this.newUser=[];
                    this.newUser=JSON.parse(JSON.stringify(newUser))
                    this.networkArr=[];
                    this.networkArr=JSON.parse(JSON.stringify(networkArr))
                    res.result.age.forEach((item,index)=>{                   
                        this.ageArr.forEach((ele)=>{
                            if(ele.value==item){
                                ele.checked=true;
                            }
                        })                   
                    });
                    // res.result.platform.forEach((item,index)=>{                   
                    //     this.platformArr.forEach((ele)=>{
                    //         if(ele.value==item){
                    //             ele.checked=true;
                    //         }
                    //     })                   
                    // });
                    if(res.result.landingType=='APP_ANDROID'){
                        this.platformArr.forEach((item)=>{
                            if(item.value!="ANDROID"){
                                item.disabled=true
                            }else{
                                item.disabled=false
                            }
                        })
                    }else if(res.result.landingType=='APP_IOS'){
                        this.platformArr.forEach((item)=>{
                            if(item.value!="IOS"){
                                item.disabled=true
                            }else{
                                item.disabled=false
                            }
                        })
                    }else{
                        this.platformArr.forEach((item)=>{                    
                                item.disabled=false
                            
                        })
                    } 
                    
                    res.result.carrier.forEach((item,index)=>{                   
                        this.carrierArr.forEach((ele)=>{
                            if(ele.value==item){
                                ele.checked=true;
                            }
                        })                   
                    });
                    res.result.ac.forEach((item,index)=>{                   
                        this.networkArr.forEach((ele)=>{
                            if(ele.value==item){
                                ele.checked=true;
                            }
                        })                   
                    });
                    res.result.activateType.forEach((item,index)=>{                   
                        this.newUser.forEach((ele)=>{
                            if(ele.value==item){
                                ele.checked=true;
                            }
                        })                   
                    });



                    if(res.result.articleCategory.length){
                        this.articleType='articleCategory';
                        this.articleChecked=[];
                        this.articleChecked=res.result.articleCategory

                    }else{
                        this.articleType=''
                    }

                    if(res.result.deviceBrand.length){
                        this.deviceBrandType='byBrand';
                        this.brandChecked=res.result.deviceBrand

                    }else{
                        this.deviceBrandType=''
                    }

                    if(res.result.autoExtendTargets.length>0){                  
                        this.autoExtendTargetsChecked=res.result.autoExtendTargets
                    }else{
                        this.autoExtendTargetsChecked=[];
                    }
                    
                    if(res.result.launchPrice.length>0){
                        this.launchPrice='custom';
                        this.launchPriceArr=res.result.launchPrice
                    }else{
                        this.launchPrice=''
                    }
                })               
            }
        }
    },
    name:'newDirectedPackage',
    components:{
        radioCheck,
        linkMultiSelect,
        singleLayersSelecte
    },
    data() {
        return {
            selectedRowKeys:[],
            incluedSelectedRowKeys:[],
            excludeSelectedRowKeys:[],

            accountInfo:{},//账户信息
            // 自定义人群参数
            retargetColumns,
            retargetData:[],
            retargetDataAll:[],
            loading:false,

            showDirectedPackage:true,
            title:'新建定向包',
            labelCol: { span: 6 },
            wrapperCol: { span: 14 },
            launchPrice:'',//手机价格
            launchPriceArr:[2000, 7000],
            deviceBrandType:'',
            deviceBrand:[],//手机品牌
            deviceBrandOptions:[],
            form: this.$form.createForm(this),
            
            marks: {
                0: '0',
                1000: '',
                2000: '2000元',
                2500: '',
                3000: '',
                3500: '',
                4000: '',
                4500: '',
                5000: '5000元',
                5500: '',
                6000: '',
                6500: '',
                7000: '',
                8000: '',                
                9000: '',
                10000: '10000元',                
                11000: {
                    style: {
                        color: '#f50',
                    },
                    label: <strong>11000元</strong>,
                },
            },
            //选择框
            // checkedList: defaultCheckedList,
            // indeterminate: true,
            // checkAll: false,
            // plainOptions,

            newUser,//新用户的每一项值
            networkArr,//网络
            carrierArr,//运营商
            ageArr,//受众年龄
            platformArr,//受众平台
            //地域下的人群的受众位置分类
            regionPeopleValue:'HOME',
            regionValue:'NONE',//地域的选择项
            cityTab:'geography',//省市下的tab切换
            businessTab:'businessCircle',//商圈的tab值
            businessOptionsArr:[],//商圈的联动数据
            MapselectValue:undefined,//地图的搜索地址

            //行为兴趣选择
            interestActionMode:'UNLIMITED',
            actionScene:[],//行为场景

            actionDays:30,//行为天数
            actOrint:'all',
            TaxonomicValue:undefined,//行为下的类目词
            keyWordValue:undefined,//行为下的关键词
            AIselect:true,//行为下的自动选词是否可用

            regionCityListUrl:'ctop/bytedanceAreaInfo/list',
            regionCountyListUrl:'ctop/bytedanceAreaInfo/list',
            articleType:'',//文章分类

            // flowPacket:true,//默认精选流量包不可修改 只有穿山甲是才可以修改

            autoExtendEnabled:0,//智能放量是否开启
            autoExtendOptions,//智能投放可选定向数组
            autoExtendTargets:[],//智能放量开启后的选择数据----------需传递的参数

            articleCategoryOptions:[],//文章分类
            articleCategory:[],//  文章分类选中的数据-----------传递的参数
            age:[],//选中的年龄段-------需要传递的参数
            carrier:[], //选中的受众运营商----------需要传递的参数
            ac:[], //选中的受众网络类型---------------需要传递的参数

            landingTypeValue:'',//定向包类型的值  用来判断平台的值
            androidOsvArr:[],//受众安卓版本号数组
            iosOsvArr:[],//受众ios版本号数组
            platform:[],//受众平台-------------传递参数
            activateType:[],//用户首次激活时间---------传递参数
            city:[],//选择的商圈数据

            customCrowd:'NONE',//自定义人群 选择的值
            directLogic:'RETARGETING_INCLUDE',//定向逻辑的值
            dxInputValue:undefined,//自定义人群包下面的搜索框（定向/排除）



            // 显示用值
            editId:'',
            ageSelectArr:[],
            articleChecked:[],
            brandChecked:[],
            autoExtendTargetsChecked:[],


        }
    },
    computed: {
        hasSelected() {
            return this.selectedRowKeys.length > 0;
        },
        rowSelection() {
            return {
                // selectedRowKeys: this.incluedSelectedRowKeys,
                onChange: (selectedRowKeys, selectedRows) => {
                    // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
                    this.incluedSelectedRowKeys = selectedRowKeys;
                    
                },
                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;
                },
                getCheckboxProps: record => ({
                    props: {
                        disabled: this.incluedSelectedRowKeys.indexOf(record.key)>-1, // Column configuration not to be checked
                        name: record.name,
                    },
                }),
            };
        },
    },
    methods: {
        //获取表单的某一个属性值
        getFormData(className) {
            return this.form.getFieldValue(className)
        },
        // 自定义人群的--同时定向排除tab切换事件
        retargetTabChange(tabkey){
            // console.log(tabkey)
            this.retargetDataAll=[];
            this.loading=true;
            if(this.accountInfo.value){
                getAction('/ctop/audience/list',{
                    accountId:this.accountInfo.value
                }).then((res)=>{
                    // console.log(res)
                    this.loading=false;
                    if(res.success){
                        res.data.forEach((item)=>{
                            item.key=item.custom_audience_id                           
                        })
                        // this.retargetData=res.data;
                        this.retargetDataAll=res.data;
                        
                    }
                })
            }
            // if(tabkey==1){
               
            // }
            // }else{
                
            // }
        },
        onSelectChange(selectedRowKeys) {
            // console.log('selectedRowKeys changed: ', selectedRowKeys);
            this.selectedRowKeys = selectedRowKeys;
        },
        // 自定义人群的改变
        retargetTableChange(pagination, filters, sorter){
            // console.log(pagination);
        },
          // 自定义人群下的 定向排除
        directLogicChange(val){
            this.dxInputValue=undefined;
            this.selectedRowKeys = [];
        },
        
        // 只能放量改变
        zhinengChange(e){
            // console.log(e.target.value,this.getFormData('autoExtendEnabled'));
            // this.form.setFieldsValue({
            //     autoExtendEnabled:e.target.value
            // })
        },
        //文章分类改变
        articleTypeChange(e){
            // console.log(e)
            // if(e.target.value=''){
            //     this.articleCategory=[];
            //     this.articleChecked=[];
            // }   
        },

        // 手机品牌改为不限时
        deviceBrandTypeChange(e){
            if(e.target.value=''){
                this.deviceBrand=[];
                this.brandChecked=[]
            }
        },
        //定向包类型
        landingTypeChange(e){
            // console.log(e.target.value);     
            this.landingTypeValue=e.target.value;  
            if(e.target.value=='APP_ANDROID'){
                this.platformArr.forEach((item)=>{
                    if(item.value!="ANDROID"){
                        item.disabled=true
                    }else{
                         item.disabled=false
                    }
                })
            }else if(e.target.value=='APP_IOS'){
                this.platformArr.forEach((item)=>{
                    if(item.value!="IOS"){
                        item.disabled=true
                    }else{
                         item.disabled=false
                    }
                })
            }else{
                this.platformArr.forEach((item)=>{                    
                        item.disabled=false
                    
                })
            } 
        },

        //安卓版本号
        androidOsvChange(val){
            // console.log(val);
            this.form.setFieldsValue({
                androidOsv: val 
            });
            // console.log(this.form.getFieldValue('androidOsv'))
        },
        //ios版本号
        iosOsvChange(val){
            // console.log(val);
            this.form.setFieldsValue({
                iosOsv: val 
            });
            // console.log(this.form.getFieldValue('androidOsv'))
        },
        
        //huakuai de shijian 
        slideChange(value) {
            // console.log(value)
            this.launchPriceArr=value;
        },
        btnChange(e){
            // console.log(e)
        },

        
        //获取新用户的选中值
        getNewUser(val){
            // console.log(val);
            if(val.length==1&&val[0]==""){
                this.activateType=[]
            }else{
                this.activateType=val;
            }
            
        },
        //地域选择里的搜索
        regionOnSearch(value) {
            // console.log(value);
        },

        //地域里的受众人群的位置
        regionPeopleChange(e){
            // console.log(e.target.value,this.regionPeopleValue)
        },
        //获取选中的城市
        getSelectedCityArr(val){
            // console.log(val);
            this.city=[];
            this.city=val;
        },
        // 获取选中的区县
        getSelectedCountyArr(val){
            // console.log(val)
            this.city=[];
            this.city=val;
        },
        //省市的tab切换
        cityTabChange(key){
            // console.log(key)
        },
        //商圈的tab改变
        businessTabChange(key){
            // console.log(key)
        },

        //商圈的联动改变

        businessChange(val){
            // console.log(val)
        },
        //地图的搜索事件
        MapSearch(val){
            // console.log(val)
        },

        //行为场景
        actionSceneChange(value){
            // console.log(value)
        },

        //行为下的 类目搜索框
        TaxonomicSearch(value){
            // console.log(value);
            this.TaxonomicValue=value
        },
        //行为下的 关键词搜索框
        keyWordSearch(value){
            // console.log(value);
            this.keyWordValue=value
        },
        //获取智能放量定向的值
        getAutoExtendEnabled(val){
            // console.log(val)
            this.autoExtendTargets=[];
            this.autoExtendTargets.push(...val)
        },
        //获取手机品牌的值
        getDeviceBrand(val){
            // console.log(val);
            this.deviceBrand=[];
            this.deviceBrand.push(...val)
        },
        //获取文章分类的值
        getArticleCategory(val){
            // console.log(val)
            this.articleCategory=[];
            this.articleCategory.push(...val)
        },

        //获取选中的年龄段
        getAgeSelect(val){
            // console.log(val)
            if(val.length==1&&val[0]==""){
                this.age=[]
            }else{
                this.age=val;
            }
            
        },

        //获取运行商
        getCarrier(val){
            if(val.length==1&&val[0]==""){
                this.carrier=[]
            }else{
                this.carrier=val;
            }
        },

        //获取受众网络
        getAc(val){
            if(val.length==1&&val[0]==""){
                this.ac=[]
            }else{
                this.ac=val;
            }
        },

        // 获取平台
        getPlatForm(val){
            // console.log(val)
            if(val.length==1&&val[0]==""){
                this.platform=[]
            }else{
                this.platform=val;
            }
            // console.log(this.platform)
        },

      
        tijiaozhi(){
            this.getValuehandle();
            this.showDirectedPackage=!this.showDirectedPackage;
        },
        //定向包处理事件
        getValuehandle(){
            let formData=this.form.getFieldsValue()
            // console.log(formData)
            if(this.launchPrice=='custom'){
                formData['launchPrice']=this.launchPriceArr
            }
            if(this.directLogic=='RETARGETING_INCLUDE'){
                formData['retargetingTags']=this.selectedRowKeys;
            }else if(this.directLogic=='RETARGETING_EXCLUDE'){
                formData['retargetingTagsExclude']=this.selectedRowKeys;
            }else if(this.directLogic=='ALL'){
                formData['retargetingTags']=this.incluedSelectedRowKeys;
                formData['retargetingTagsExclude']=this.excludeSelectedRowKeys;
            }
            if(!this.regionValue!='NONE'){
                // console.log('需要处理地域的值');
                formData['city']=this.city
            }
            let userinfo=localStorage.getItem('pro__Login_Userinfo')
            
            if(userinfo){
                let userId=JSON.parse(userinfo).value.id
                formData['userId']=userId
            }
            formData['activateType']=this.activateType
            formData['deviceBrand']=this.deviceBrand
            formData['autoExtendEnabled']=this.autoExtendEnabled               
            formData['autoExtendTargets']=this.autoExtendTargets         
            formData['articleCategory']=this.articleCategory
            formData['age']=this.age
            formData['carrier']=this.carrier
            formData['platform']=this.platform
            formData['ac']=this.ac
            formData['interestActionMode']=this.interestActionMode;

            this.$emit('getDirectedValue',formData)
        },

        //应用按钮
        applicatiSubmit(){
            // console.log('submit!', this.form);
            if(this.getFormData('name')){ 
                let formData=this.form.getFieldsValue()
                // console.log(formData)
                if(this.launchPrice=='custom'){
                    formData['launchPrice']=this.launchPriceArr
                }
                if(!this.regionValue!='NONE'){
                    // console.log('需要处理地域的值');
                    formData['city']=this.city
                }
                let userinfo=localStorage.getItem('pro__Login_Userinfo')
                
                if(userinfo){
                    let userId=JSON.parse(userinfo).value.id
                    formData['userId']=userId
                }
                formData['activateType']=this.activateType
                formData['deviceBrand']=this.deviceBrand
                formData['autoExtendEnabled']=this.autoExtendEnabled               
                formData['autoExtendTargets']=this.autoExtendTargets         
                formData['articleCategory']=this.articleCategory
                formData['age']=this.age
                formData['carrier']=this.carrier
                formData['platform']=this.platform
                formData['ac']=this.ac
                formData['interestActionMode']=this.interestActionMode
                // formData['filterConvertedUsers']=this.interestActionMode
                
                if(this.title=='新建定向包'){
                    postAction('/ctop/audiencePackage/add',formData).then((res)=>{
                        // console.log(res);
                        if(res.success){
                            this.$router.push('/modules/BatchCreate/directedPackage')
                        }else{
                            this.$message.error('定向包创建失败，请稍后重试')
                        }
                    })
                }else{
                    formData['id']=this.editId
                    postAction('/ctop/audiencePackage/edit',formData).then((res)=>{
                        // console.log(res);
                        if(res.success){
                            this.$router.push('/modules/BatchCreate/directedPackage')
                        }else{
                            this.$message.error('定向包修改失败，请稍后重试')
                        }
                    }) 
                }
                
            }else{
                this.$message.error('名称不能为空')
            }
            
        },
        //取消按钮
        cancel(){
            this.$router.push('/modules/BatchCreate/directedPackage')
        },
    },
    mounted() {
        //手机品牌
        getAction('sys/dictItem/list?_t=1594263117&dictId=7f907c1dab0a65ce6d115e082cd79acf&pageSize=100',{}).then((res)=>{
            // console.log(res);
            if(res.success){
                res.result.records.forEach((item)=>{
                    this.deviceBrandOptions.push({
                        label:item.itemText,
                        value:item.itemValue
                    })
                })
            }
        })
        //文章分类
        getAction('sys/dictItem/list?_t=1594263117&dictId=defad85851bf6b1751a49b33d8b13b3b&pageSize=100',{}).then((res)=>{
            // console.log(res)
            if(res.success){
                res.result.records.forEach((item)=>{
                    this.articleCategoryOptions.push({
                        label:item.itemText,
                        value:item.itemValue
                    })
                })
            }
        })
        //受众安卓版本号
        getAction('sys/dictItem/list?dictId=bba60d87ced96be177a772102b44d0f2&pageSize=100',{}).then((res)=>{
            // console.log(res)
            if(res.success){
                res.result.records.forEach((item)=>{
                    this.androidOsvArr.push({
                        label:item.itemText,
                        value:item.itemValue
                    })
                })
            }
        })
        //受众安卓版本号
        getAction('sys/dictItem/list?dictId=a989bb28cfba9f25b3711dfcd05281e7&pageSize=100',{}).then((res)=>{
            // console.log(res)
            if(res.success){
                res.result.records.forEach((item)=>{
                    this.iosOsvArr.push({
                        label:item.itemText,
                        value:item.itemValue
                    })
                })
            }
        })
        let accountInfo = localStorage.getItem('accountInfo');
        let groupInfo = localStorage.getItem('planInfo')
        // console.log(accountInfo)
        if (accountInfo!='' && groupInfo!='') {
            this.accountInfo = JSON.parse(accountInfo)
            if(this.accountInfo){
                getAction('/ctop/audience/list',{
                    accountId:this.accountInfo.value
                }).then((res)=>{
                // console.log(res)
                if(res.success){
                        res.data.forEach((item)=>{
                            item.key=item.custom_audience_id                           
                        })
                        this.retargetData=res.data;
                        this.retargetDataAll=res.data;
                        
                    }
                })
            }
        }
        // console.log(this.accountInfo)

        this.platformArr=JSON.parse(JSON.stringify(platformArr))
        // this.platformArr = [...platformArr]
        console.log(this.$route.query,this.id)

        if(this.$route.query.id||this.id){
            this.title='修改定向包';
            this.editId=this.$route.query.id || this.id
            getAction('/ctop/audiencePackage/queryById',{
                id:this.editId
            }).then((res)=>{
                // console.log(res);
                this.form.setFieldsValue({
                    name:res.result.name,
                    landingType:res.result.landingType,
                    deliveryRange:res.result.deliveryRange,
                    gender:res.result.gender,                   
                    filterConvertedUsers:res.result.filterConvertedUsers,
                })
                if(res.result.landingType=='APP_ANDROID'){
                    this
                }
                this.autoExtendEnabled=res.result.autoExtendEnabled,
                this.interestActionMode=res.result.interestActionMode;
                this.ageArr=[];
                this.ageArr=JSON.parse(JSON.stringify(ageArr))
                // this.platformArr=[];
                // this.platformArr=JSON.parse(JSON.stringify(platformArr))
                this.carrierArr=[];
                this.carrierArr=JSON.parse(JSON.stringify(carrierArr))
                this.newUser=[];
                this.newUser=JSON.parse(JSON.stringify(newUser))
                this.networkArr=[];
                this.networkArr=JSON.parse(JSON.stringify(networkArr))
                res.result.age.forEach((item,index)=>{                   
                    this.ageArr.forEach((ele)=>{
                        if(ele.value==item){
                            ele.checked=true;
                        }
                    })                   
                });
                // res.result.platform.forEach((item,index)=>{                   
                //     this.platformArr.forEach((ele)=>{
                //         if(ele.value==item){
                //             ele.checked=true;
                //         }
                //     })                   
                // });
                if(res.result.landingType=='APP_ANDROID'){
                    this.platformArr.forEach((item)=>{
                        if(item.value!="ANDROID"){
                            item.disabled=true
                        }else{
                            item.disabled=false
                        }
                    })
                }else if(res.result.landingType=='APP_IOS'){
                    this.platformArr.forEach((item)=>{
                        if(item.value!="IOS"){
                            item.disabled=true
                        }else{
                            item.disabled=false
                        }
                    })
                }else{
                    this.platformArr.forEach((item)=>{                    
                            item.disabled=false
                        
                    })
                } 
                
                res.result.carrier.forEach((item,index)=>{                   
                    this.carrierArr.forEach((ele)=>{
                        if(ele.value==item){
                            ele.checked=true;
                        }
                    })                   
                });
                res.result.ac.forEach((item,index)=>{                   
                    this.networkArr.forEach((ele)=>{
                        if(ele.value==item){
                            ele.checked=true;
                        }
                    })                   
                });
                res.result.activateType.forEach((item,index)=>{                   
                    this.newUser.forEach((ele)=>{
                        if(ele.value==item){
                            ele.checked=true;
                        }
                    })                   
                });



                if(res.result.articleCategory.length){
                    this.articleType='articleCategory';
                    this.articleChecked=[];
                    this.articleChecked=res.result.articleCategory

                }else{
                    this.articleType=''
                }

                if(res.result.deviceBrand.length){
                    this.deviceBrandType='byBrand';
                    this.brandChecked=res.result.deviceBrand

                }else{
                    this.deviceBrandType=''
                }

                if(res.result.autoExtendTargets.length>0){                  
                    this.autoExtendTargetsChecked=res.result.autoExtendTargets
                }else{
                    this.autoExtendTargetsChecked=[];
                }
                
                if(res.result.launchPrice.length>0){
                    this.launchPrice='custom';
                    this.launchPriceArr=res.result.launchPrice
                }else{
                    this.launchPrice=''
                }
            })
        }
    },
}
</script>


