
<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;
                    
                    .clear{
                        position: absolute;
                        top: 5px;
                        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;
                        }
                    }
                }

            }
        }
        .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,.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">
            新建定向包
        </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">
                        <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">
                        <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>
                    <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="">不限</a-radio-button>
                            <a-radio-button value="REGION_LEVEL_PROVINCE">按省市</a-radio-button>
                            <a-radio-button value="REGION_LEVEL_DISTRICT">按区县</a-radio-button>
                            <a-radio-button value="REGION_LEVEL_BUSINESS_DISTRICT">按商圈</a-radio-button>
                        </a-radio-group>
                        <div class="region" v-show="regionValue!=''">
                            <!-- 省市 -->
                            <div class="provincyCity" v-if="regionValue=='REGION_LEVEL_PROVINCE'">
                                <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=='REGION_LEVEL_DISTRICT'">
                                <linkMultiSelect title='省份' :listArr='[]' :maxLayers='3' :listUrl='regionCityListUrl'  @getSelectedArr='getSelectedCityArr'/>
                            </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" @change="regionPeopleChange">
                                    <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="['medialType', { initialValue:''}]">
                            <a-radio-button value="">不限</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">
                        <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>
                    </a-form-item>
                    <div class="zidingyirenqun" v-if="customCrowd=='CUSTOMt_CROWED'">
                      
                        <a-form-item  class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
                            <a-input placeholder="请输入人群包名称或者ID" v-model="dxInputValue" v-if="directLogic!='ALL'" style="width:50%">
                                <a-icon type="search" slot="addonAfter"/>
                            </a-input>
                            <div class="dingxiang" v-if="directLogic=='RETARGETING_INCLUDE'">

                            </div>
                            <div class="paichu" v-if="directLogic=='RETARGETING_EXCLUDE'">

                            </div>
                            <div class="dingxiang_paichu" v-if="directLogic=='ALL'">

                            </div>
                        </a-form-item>                                   
                    </div>
                    <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">清空</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-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">
                            <a-radio-button value="">不限</a-radio-button>
                            <a-radio-button value="articleCategory">文章分类</a-radio-button>                          
                        </a-radio-group>
                        <div v-if="articleType=='articleCategory'" class="deviceBrand">
                            <!-- <div class="selectBox">
                                <div class="selectLeft">
                                    <div class="title">文章分类</div>
                                    <div class="selectBox1">
                                        <span class="selectLists"><a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange" > 全选 </a-checkbox></span> 
                                        <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="checkGroupChange" class="selectList" ></a-checkbox-group>
                                    </div>
                                </div>
                                <div class="selectRight">
                                    <div class="title">已选<a-button class="clear" type="link" @click="clearAll">清空</a-button></div>
                                    <div class="selectBox1">
                                        <span class="selectListitem" v-for="(item,index) in checkedList" :key='index'>{{item}}<a-icon type="close" id="close" @click="deleteItem(item)" /></span>
                                    </div>
                                </div>
                            </div> -->
                            <singleLayersSelecte  title='文章类型'  :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">
                            <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">
                            <!-- <div class="selectBox">
                                <div class="selectLeft">
                                    <div class="title">手机品牌</div>
                                    <div class="selectBox1">
                                        <span class="selectLists"><a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange" > 全选 </a-checkbox></span> 
                                        <a-checkbox-group v-model="checkedList" :options="plainOptions" @change="checkGroupChange" class="selectList" ></a-checkbox-group>
                                    </div>
                                </div>
                                <div class="selectRight">
                                    <div class="title">已选<a-button class="clear" type="link" @click="clearAll">清空</a-button></div>
                                    <div class="selectBox1">
                                        <span class="selectListitem" v-for="(item,index) in checkedList" :key='index'>{{item}}<a-icon type="close" id="close" @click="deleteItem(item)" /></span>
                                    </div>
                                </div>
                            </div> -->
                            <singleLayersSelecte  title='手机品牌' :listArr='deviceBrandOptions'  @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" :default-value="[2000, 7000]" :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-decorator="['autoExtendEnabled', { initialValue:0 }]" button-style="solid">
                            <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="getFormData('autoExtendEnabled')==1" class="deviceBrand">
                            <singleLayersSelecte  title='可放开定向' :listArr='autoExtendOptions'  @getCheckedList='getAutoExtendEnabled'/>                            
                        </div>
                    </a-form-item>
                    <a-form-item label="保存为模板" class="optItem" :label-col="labelCol" :wrapper-col="wrapperCol">
                        <a-radio-group default-value="no" button-style="solid">
                            <a-radio value="yes">是</a-radio>
                            <a-radio value="no">否</a-radio>
                        </a-radio-group>
                    </a-form-item>
                    <a-form-item :wrapper-col="{ span: 14, offset: 10 }" :label-col="labelCol"> 
                        
                        <a-button style="margin-right: 30px;" @click="cancel">
                            取消
                        </a-button>
                        <a-button type="primary" @click="applicatiSubmit">
                            应用
                        </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:'不限'
    },
    {
        value:'oneMonth',
        title:'一月以内'
    },
    {
        value:'twoMonth',
        title:'一月到三个月'
    },
    {
        value:'treeMonth',
        title:'三月以上'
    }
]

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

let carrierArr=[
    {
        value:'',
        title:'不限'
    },
    {
        value:'MOBILE',
        title:'移动'
    },
    {
        value:'UNICOM',
        title:'联通'
    },
    {
        value:'TELCOM',
        title:'电信'
    },
]
let platformArr=[
    {
        value:'',
        title:'不限',
        disabled:false
    },
    {
        value:'ANDROID',
        title:'Android',
        disabled:false
    },
    {
        value:'IOS',
        title:'iOS',
        disabled:false
    },
    
]
let ageArr=[
    {
        value:'',
        title:'不限'
    },
    {
        value:'AGE_BETWEEN_18_23',
        title:'	18-23岁'
    },
    {
        value:'AGE_BETWEEN_24_30',
        title:'24-30岁'
    },
    {
        value:'AGE_BETWEEN_31_40',
        title:'31-40岁'
    },
    {
        value:'AGE_BETWEEN_41_49',
        title:'41-49岁'
    },
    {
        value:'AGE_ABOVE_50',
        title:'大于等于50岁'
    },
]

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'
    },
]

export default {
    components:{
        radioCheck,
        linkMultiSelect,
        singleLayersSelecte
    },
    data() {
        return {
            labelCol: { span: 4 },
            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:'',//地域的选择项
            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:[],//用户首次激活时间---------传递参数

            customCrowd:'NONE',//自定义人群 选择的值
            directLogic:'RETARGETING_INCLUDE',//定向逻辑的值
            dxInputValue:undefined,//自定义人群包下面的搜索框（定向/排除）
        }
    },
    methods: {
        //获取表单的某一个属性值
        getFormData(className) {
            return this.form.getFieldValue(className)
        },
        //定向包类型
        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'))
        },
        //应用按钮
        applicatiSubmit(){
            console.log('submit!', this.form);
            let formData=this.form.getFieldsValue()
            console.log(formData)
            if(this.launchPrice=='custom'){
                formData['launchPrice']=this.launchPriceArr
            }
            if(!this.regionValue==''){
                console.log('需要处理地域的值')
            }
            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['ac']=this.ac
            formData['interestActionMode']=this.interestActionMode
            

            postAction('/ctop/audiencePackage/add',formData).then((res)=>{
                console.log(res)
            })
            // formData['launchPrice']=this.
            // this.$router.push('/modules/BatchCreate/directionalPackage')
        },
        //取消按钮
        cancel(){
            this.$router.push('/modules/BatchCreate/directionalPackage')
        },
        //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)
        },
        //省市的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;
            }
            
        },

        // 自定义人群下的 定向排除
        directLogicChange(val){
            this.dxInputValue=undefined
        },
    },
    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
                    })
                })
            }
        })
    },
}
</script>


