@extends('layouts.base')
@section('title', '新建消息')
@section('content')
<link href="{{ static_url('yunshop/element-ui/2.10.1/css/index.css') }}" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}"/>
<link rel="stylesheet" href="{{static_url('css/public-number.css')}}">
<style>
    .vue-main-title-content a{color:#333}
    .vue-main-title-content a:hover{color:#29ba9c;}
    .steps{
        margin-left:10px;
        margin-bottom:20px;
        margin-right:10px;
        background-color:#fff;
        height: 64px;
        border-radius: 10px;
        display:flex;
        align-items:center;
        justify-content:center;
    }
    .active{
        color: #29ba9c;
    }
   .add_meb textarea{
       height:100%;
   }
   .dialog-cover{
       z-index:1000!important;
   }
</style>
    <div class="all">
        <div id="app" v-cloak>
        <div class="steps">
            <div style="width:347px;display:flex;justify-content:space-between;">
                <div class="active"><i class="el-icon-setting" style="margin-right:10px;"></i><span>内容设置</span></div>
                <div style="font-size:24px;color:#c8cede;">></div>
                <div :class="[active==2?'active':'']"><i class="el-icon-s-promotion" style="margin-right:10px;"></i><span>发送内容</span></div>
            </div>
       </div>
            <div class="vue-main">  
                <div class="vue-main-form" v-if="active==1">
                    
                    <el-form ref="form" :model="form"  label-width="15%">
                        <el-form-item label="标题" prop="title">
                            <el-input v-model="form.title" style="width:70%;"></el-input>
                        </el-form-item>
                        <el-form-item label="幻灯片图片" prop="head_img_url">
                            <div class="upload-box" @click="openUpload('msg_img')" v-if="!form.msg_img_url">
                                <i class="el-icon-plus" style="font-size:32px"></i>
                            </div>
                            <div @click="openUpload('msg_img')" class="upload-boxed" v-if="form.msg_img_url" style="height:150px;">
                                <img :src="form.msg_img_url" alt="" style="width:150px;height:150px;border-radius: 5px;cursor: pointer;">
                                <div class="upload-boxed-text">点击重新上传</div>
                            </div>
                            <div class="tip">建议尺寸:640 * 350 , 请将所有幻灯片图片尺寸保持一致</div>
                        </el-form-item>
                        <el-form-item label="描述" prop="desc">
                            <el-input v-model="form.desc" style="width:70%;" ></el-input>
                        </el-form-item>

                        <el-form-item label="详情" prop="explain">
                            <tinymceee v-model="form.content" style="width:70%"></tinymceee>
                        </el-form-item>

                        <el-form-item label="链接" prop="url">
                            <el-input v-model="form.url" style="width:70%;" placeholder=" 请选择链接"></el-input>
                            <el-button   @click="show=true" type="primary" style="margin-left:10px;">选择链接</el-button>
                        </el-form-item>

                        <el-form-item label="小程序链接" prop="mini_url">
                            <el-input v-model="form.mini_url" style="width:70%;" placeholder=" 请选择链接"></el-input>
                            <el-button   @click="pro=true" type="primary" style="margin-left:10px;">选择小程序链接</el-button>
                        </el-form-item>


                        <el-form-item label="类型" prop="type_id">
                            <el-select v-model="form.type_id" style="width:70%;" placeholder="请选择类型" >
                                <!-- <el-option label="无" value=""></el-option> -->
                                <el-option v-for="(item,index) in msgType" :key="index" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                  
                    </el-form>
                </div>
                <div> 
                    <div class="vue-main-form" v-if="active==2">
                    <el-form ref="form" :model="form"  label-width="15%">
                        <el-form-item label="发送对象" >
                            <el-radio-group v-model="send_obj" style="margin-top:4px;">
                                <el-radio v-for="(item,index) in sendObj" :key="item.id" :label="item.id">[[item.name]]</el-radio>
                                {{--<el-radio label="0">全部会员</el-radio>--}}
                                {{--<el-radio label="1">指定会员</el-radio>--}}
                                {{--<el-radio label="2">会员等级</el-radio>--}}
                                {{--<el-radio label="3">推客</el-radio>--}}
                                {{--<el-radio label="4">经销商</el-radio>--}}
                                {{--<el-radio label="5">门店店长/店员</el-radio>--}}
                                {{--<el-radio label="6">酒店店长/店员</el-radio>--}}
                                {{--<el-radio label="7">供应商</el-radio>--}}
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="会员ID" v-if="send_obj=='1'">
                            <el-input v-model="member_str" placeholder="请用半角逗号隔开会员ID, 比如 1,2,3,注意不能有空格"  type="textarea"  style="height:200px;" class="add_meb"></el-input>
                        </el-form-item>
                        <el-form-item label="会员等级" v-if="send_obj=='2'">
                        <template>
                                <el-checkbox-group v-model="member_check" style="margin-top:4px;">
                                <template v-for="(item,index,key) in member_arr">
                                    <el-checkbox :label="item.id">[[item.level_name]]</el-checkbox>
                                </template>
                                </el-checkbox-group>
                            </template>
                        </el-form-item>
                        <el-form-item label="推客等级" v-if="send_obj=='3'">
                        <template>
                                <el-checkbox-group v-model="pub_check" style="margin-top:4px;">
                                <template v-for="(item,index,key) in pub_arr">
                                    <el-checkbox :label="item.id">[[item.name]]</el-checkbox>
                                </template>
                                </el-checkbox-group>
                            </template>
                        </el-form-item>
                        <el-form-item label="经销商等级" v-if="send_obj=='4'">
                        <template>
                                <el-checkbox-group v-model="sale_check" style="margin-top:4px;">
                                <template v-for="(item,index,key) in sale_arr">
                                    <el-checkbox :label="item.id">[[item.level_name]]</el-checkbox>
                                </template>
                                </el-checkbox-group>
                            </template>
                        </el-form-item>
                    </el-form>
                    </div>
                </div>
            </div>
            <!-- 分页 -->
            <div class="vue-page" v-if="active==1">
                <div class="vue-center">
                    <el-button type="primary" @click="next">下一步</el-button>
                    <el-button @click="goBack">返回</el-button>
                </div>
            </div>
            <div class="vue-page" v-if="active==2">
                <div class="vue-center">
                    <el-button type="primary" @click="submit()">发送</el-button>
                    <el-button @click="toLast">上一步</el-button>
                </div>
            </div>
            <upload-img :upload-show="uploadShow" :name="chooseImgName" @replace="changeProp" @sure="sureImg"></upload-img>
            <pop :show="show" @replace="changeProp1" @add="parHref"></pop>
            <program :pro="pro" @replacepro="changeprogram" @addpro="parpro"></program>
            <!--end-->
        </div>
    </div>
    <script src="{{resource_get('static/yunshop/tinymce4.7.5/tinymce.min.js')}}"></script> 
    @include('public.admin.uploadImg')
    @include('public.admin.tinymceee')
    @include('public.admin.pop')
    @include('public.admin.program')
    <script>
        let sendObj = {!! json_encode($sendObj)?:'{}' !!};
        var app = new Vue({
            el:"#app",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                return{
                    member_arr:[],
                    pub_arr:[],
                    sale_arr:[],
                    member_check:[],
                    pub_check:[],
                    sale_check:[],
                    member_str:'',
                    active:1,
                    msgType:[ 
                        {id:6,name:"服务通知"},
                        {id:8,name:"活动优惠"},
                    ],
                    id:'',
                    send_obj:'0',
                    sendObj:sendObj,
                    show:false,//是否开启公众号弹窗
                    pro:false ,//是否开启小程序弹窗
                    uploadShow:false,
                    chooseImgName:'',
                    form:{
                        title:'',
                        desc:'',
                        type_id:'',
                        msg_img:'',
                        content:'',
                        url:'',
                        mini_url:'',
                        msg_img_url:'',
                    },
                    loading: false,
                    uploadImg1:'',
                }
            },
            created() {
                this.getLevel();
                this.getPub();
                this.dividend();
            },
            mounted() {
            },
            methods: {
                next(){
                    this.active=2
                },
                submit(){
                    let send_data
                    if(this.send_obj=='1'){
                        send_data=this.member_str
                    }
                    if(this.send_obj=='2'){
                        send_data=this.member_check
                    }
                    if(this.send_obj=='3'){
                        send_data=this.pub_check
                    }
                    if(this.send_obj=='4'){
                        send_data=this.sale_check
                    }
                    let json = {
                            title:this.form.title,
                            msg_img:this.form.msg_img,
                            desc:this.form.desc,
                            content:this.form.content,
                            url:this.form.url,
                            mini_url:this.form.mini_url,
                            type_id:this.form.type_id, 
                            send_obj:this.send_obj,
                            send_data:send_data
                    };
                            this.$http.post('{!! yzWebFullUrl('plugin.instation-message.admin.message.create1') !!}',{'message':json}).then(response => {
                                if (response.data.result) {
                                    this.$message({message: response.data.msg,type: 'success'});
                                    window.location.href = '{!! yzWebFullUrl('plugin.instation-message.admin.message.index') !!}';
                                } else {
                                    this.$message({message: response.data.msg,type: 'error'});
                                }
                               
                            },response => {
                            });
                    
                },
                getLevel(){
                    this.$http.post('{!! yzWebFullUrl('plugin.instation-message.admin.message.get-member-level') !!}').then(response => {
                                if (response.data.result) {
                                        this.member_arr=response.data.data.levels;
                                        if(response.data.data.set){
                                            this.member_arr.unshift({id:0,level_name:response.data.data.set})
                                        }
                                } else {
                                    this.$message({message: response.data.msg,type: 'error'});
                                }
                               
                            },response => {
                            });
                },
                getPub(){
                    this.$http.post('{!! yzWebFullUrl('plugin.instation-message.admin.message.get-agent-level') !!}').then(response => {
                                if (response.data.result) {
                                    this.pub_arr=response.data.data.agentLevels;
                                        if(response.data.data.defaultLevelName){
                                            this.pub_arr.unshift({id:0,name:response.data.data.defaultLevelName})
                                        }
                                } else {
                                    this.$message({message: response.data.msg,type: 'error'});
                                }
                               
                            },response => {
                            });
                },
                dividend(){
                    this.$http.post('{!! yzWebFullUrl('plugin.instation-message.admin.message.get-team-dividend-level') !!}').then(response => {
                                if (response.data.result) {
                                    this.sale_arr=response.data.data.level;
                                } else {
                                    this.$message({message: response.data.msg,type: 'error'});
                                }
                               
                            },response => {
                            });
                },
                toLast(){
                    this.active=1
                },
                openUpload(str) {
                   
                   this.chooseImgName = str;
                   this.uploadShow = true;
                },
                changeProp(val) {
                            if(val == true) {
                                this.uploadShow = false;
                            }
                            else {
                                this.uploadShow = true;
                            }
                        },
                sureImg(name,image,image_url) {
                            this.form[name] = image;
                            this.form[name+'_url'] = image_url;
                            console.log(this.form.msg_img_url)
                },
                  //弹窗显示与隐藏的控制
                changeProp1(item){
                        this.show=item;
                },
                    //当前链接的增加
                parHref(child,confirm){
                        this.show=confirm;
                        this.form.url=child;

                },
                changeprogram(item){
                        this.pro=item;
                },
                parpro(child,confirm){
                        this.pro=confirm;
                        this.form.mini_url=child;
                },
                goBack() {
                    window.location.href = '{!! yzWebFullUrl('plugin.instation-message.admin.message.index') !!}';
                },
            },
        })

    </script>
@endsection