<template>
    <div class="newDirectedPackage">
        <div class="title">
            新建定向包
        </div>
        <div class="optBOX">
            <div class="leftBox">
                <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-form-model-item label="定向包名称">
                       <a-input placeholder="请输入定向包名称，至多20个字符" style="width:40%" />
                    </a-form-model-item>
                    <a-form-model-item label="媒体：">
                        <a-radio-group default-value="toutiao" v-model="form.medialType" button-style="solid">
                            <a-radio-button :value="1">头条</a-radio-button>
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item label="地域：" class="optItem">
                        <a-radio-group default-value="" button-style="solid">
                            <a-radio-button value="">不限</a-radio-button>
                            <a-radio-button value="b">按省市</a-radio-button>
                            <a-radio-button value="c">按区县</a-radio-button>
                        </a-radio-group>
                        <span class=""></span>
                    </a-form-model-item>
                    <a-form-model-item label="性别：" class="optItem">
                         <a-radio-group default-value="" v-model="form.sex" button-style="solid">
                            <a-radio-button value="">不限</a-radio-button>
                            <a-radio-button value="men">男</a-radio-button>
                            <a-radio-button value="women">女</a-radio-button>
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item label="年龄：" class="optItem">
                        <a-radio-group default-value="" button-style="solid">
                            <a-radio-button value="">不限</a-radio-button>
                            <a-radio-button value="men">18-23</a-radio-button>
                            <a-radio-button value="women">24-30</a-radio-button>
                            <a-radio-button value="women">31-40</a-radio-button>
                            <a-radio-button value="women">41-49</a-radio-button>
                            <a-radio-button value="women">50+</a-radio-button>
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item label="精选流量包：" class="optItem">
                        <a-radio-group default-value="" button-style="solid">
                            <a-radio-button value="">不限</a-radio-button>
                            <a-radio-button value="men">应用软件精选</a-radio-button>
                            <a-radio-button value="women">游戏精选</a-radio-button>
                        </a-radio-group>
                        <span class="tishi"><a-icon type="exclamation-circle" class="tubiao" />精选流量包仅支持穿山甲、穿山甲-精选游戏广告位</span>
                    </a-form-model-item>
                    <a-form-model-item label="行为兴趣：" class="optItem">
                        <a-radio-group default-value="" button-style="solid">
                            <a-radio-button value="">不限</a-radio-button>
                            <a-radio-button value="men">系统推荐</a-radio-button>
                            <a-radio-button value="women">自定义</a-radio-button>
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item label="平台：" class="optItem">
                        <a-radio-group default-value="" button-style="solid">
                            <a-radio-button value="">不限</a-radio-button>
                            <a-radio-button value="IOS">IOS</a-radio-button>
                            <a-radio-button value="Android">Android</a-radio-button>
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item label="过滤已安装：" class="optItem">
                        <a-radio-group default-value="" button-style="solid">
                            <a-radio-button value="">不过滤</a-radio-button>
                            <a-radio-button value="filter">过滤</a-radio-button>
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item label="运营商：" class="optItem">
                       <radioCheck :checkArr='carrierArr' @getSonValue='getNewUser' />
                    </a-form-model-item>
                    <a-form-model-item label="网络：" class="optItem">
                       <radioCheck :checkArr='networkArr' @getSonValue='getNewUser' />
                    </a-form-model-item>
                    <a-form-model-item label="设备类型：" class="optItem">
                       <a-radio-group default-value="" button-style="solid">
                            <a-radio-button value="">不限</a-radio-button>
                            <a-radio-button value="wifi">智能手机</a-radio-button>
                            <a-radio-button value="2G">平板</a-radio-button>
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item label="手机品牌：" class="optItem">
                       <a-radio-group default-value="" v-model="deviceBrand" button-style="solid">
                            <a-radio-button value="">不限</a-radio-button>
                            <a-radio-button value="byBrand">按品牌</a-radio-button>
                        </a-radio-group>
                        <div v-if="deviceBrand=='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>
                            
                        </div>
                    </a-form-model-item>
                    <a-form-model-item label="手机价格："  class="optItem">
                       <a-radio-group default-value="" 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-model-item>
                    <a-form-model-item label="新用户：" class="optItem">                      
                        <radioCheck :checkArr='newUser' @getSonValue='getNewUser' />
                    </a-form-model-item>
                    <a-form-model-item label="智能放量：" class="optItem">
                        <a-radio-group default-value="" button-style="solid">
                            <a-radio-button value="">不启用</a-radio-button>
                            <a-radio-button value="open">启用</a-radio-button>
                        </a-radio-group>
                    </a-form-model-item>
                    <a-form-model-item label="保存为模板：" class="optItem">
                        <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-model-item>
                    <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
                        <a-button type="primary" @click="applicatiSubmit">
                            应用
                        </a-button>
                        <a-button style="margin-left: 10px;" @click="cancel">
                            取消
                        </a-button>
                    </a-form-model-item>       
                </a-form-model>           
            </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>
const plainOptions = ['Apple', 'Pear', 'Orange','44','550','9982','5525'];
const defaultCheckedList = ['Apple', 'Orange'];
import radioCheck from './radioCheck';

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:'不限'
    },
    {
        value:'MOBILE',
        title:'移动'
    },
    {
        value:'UNICOM',
        title:'联通'
    },
    {
        value:'TELCOM',
        title:'电信'
    },
]

export default {
    components:{
        radioCheck,
    },
    data() {
        return {
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
            launchPrice:'',//手机价格
            deviceBrand:'',//手机品牌
            form:{
                medialType:1,
                sex:'',
                launchPrice:[],//手机价格
            },
            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,//运营商

        }
    },
    methods: {
        //应用按钮
        applicatiSubmit(){
            console.log('submit!', this.form);
            this.$router.push('/modules/BatchCreate/directionalPackage')
        },
        //取消按钮
        cancel(){
            this.$router.push('/modules/BatchCreate/directionalPackage')
        },
        //huakuai de shijian 
        slideChange(value) {
            this.form.launchPrice=value;
        },
        btnChange(e){
            console.log(e)
        },

        //多选的事件
        checkGroupChange(checkedList) {
            this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;
            this.checkAll = checkedList.length === plainOptions.length;
        },
        onCheckAllChange(e) {
            Object.assign(this, {
                checkedList: e.target.checked ? plainOptions : [],
                indeterminate: false,
                checkAll: e.target.checked,
            });
        },

        deleteItem(item){
            console.log(item);
            this.checkedList=this.checkedList.filter((element,index) => {
                return element!=item
            });
            if(this.checkedList.length==0){
                this.indeterminate=false
                this.checkAll=false
            }
        },
        clearAll(){
            this.checkedList=[];
            this.indeterminate=false;
            this.checkAll=false
        },
        //获取新用户的选中值
        getNewUser(val){
            console.log(val);

        },
    },
}
</script>
<style lang="scss">

    .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: 450px;
            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>