@extends('layouts.base')
@section('title', '创建活动')
@section('content')
    <style>
        /*.hide .el-upload--picture-card {*/
        /*    display: none;*/
        /*}*/

        /*.el-upload-list--picture{*/
        /*    display:inline-flex;*/
        /*}*/
        /*.el-upload-list__item{*/
        /*   width:200px;*/
        /*}*/
        .el-scrollbar__wrap {
            overflow: scroll;
            width: 100%;
            height: 103%;
        }

        .el-upload--picture-card {
            display: none;
        }

        .el-upload--picture {
            display: none;
        }

        .invite .el-form-item__label {
            text-align: left;
        }

        .award-set .el-form-item__label {
            text-align: left;
        }

        .rightlist #app .el-breadcrumb {
            padding: 30px 0;
            font-size: 16px;
        }

        .rightlist #app {
            margin-left: 30px;
        }

        .rightlist-head-con {
            float: left;
            padding-right: 20px;
            font-size: 16px;
            color: #888;
        }

        .el-button {
            margin-right: 30px;
        }

        .attribute-label {
            display: inline-block;
            padding: 20px 20px 20px 7%;
        }

        /* .el-textarea__inner{height:400px;margin:30px 5%;width:80%;} */
        /* 上传图片 */
        .avatar-uploader .el-upload {
            margin-top: 15px;
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }

        .el-upload-tip {
            width: 178px;
            margin: 0;
            padding: 0;
            color: #999;
            text-align: center;
        }

        input[type=file] {
            display: none;
        }

        .avatar-uploader-box {
            position: relative;
            width: 200px;
        }

        .el-icon-circle-close {
            position: absolute;
            top: 10px;
            right: 0;
            color: #999;
        }

        /* 滑块选择小白点 */
        .el-switch.is-checked .el-switch__core::after {
            left: 100%;
            margin-left: -17px;
        }

        .el-switch__core::after {
            content: "";
            position: absolute;
            top: 1px;
            left: 1px;
            border-radius: 100%;
            transition: all .3s;
            width: 16px;
            height: 16px;
            background-color: #fff;
        }

        .tip {
            color: #999;
            font-size: 12px;
        }

        .add-tip {
            font-size: 14px;
            font-weight: 600;
        }

        .add-tip span {
            margin: 0 15px;
            cursor: pointer;
            color: #409EFF
        }

        .check-mobile .el-form-item__label {
            width: 25% !important;
            text-align: left;
        }

        .reawrd-all .el-form-item__label {
            width: 25% !important;
            text-align: left;
        }

        .member-time {
            margin-bottom: 0 !important;
        }

        .upload-box {
            width: 150px;
            height: 150px;
            display: flex;
            cursor: pointer;
            border: 1px dashed #dde2ee;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
        }

        .upload-boxed {
            width: 150px;
            height: 150px;
            position: relative;
            border-radius: 5px;
        }

        .upload-boxed-text {
            position: absolute;
            bottom: 0;
            line-height: 32px;
            color: #fff;
            text-align: center;
            width: 100%;
            background: #000;
            opacity: 0.7;
            border-radius: 0px 0px 5px 5px;
        }

        .upload-boxed-list {
            display: flex;
            position: relative;
            border-radius: 5px;
            flex-wrap: wrap;
        }

        .upload-boxed-list-a {
            width: 150px;
            height: 150px;
            margin: 0 10px 5px 0;
            position: relative;


        }

        .upload-boxed-list-a .el-icon-close {
            position: absolute;
            top: -5px;
            right: -5px;
            color: #fff;
            background: #333;
            border-radius: 50%;
            cursor: pointer;
        }

        .upload-boxed .el-icon-close {
            position: absolute;
            top: -5px;
            right: -5px;
            color: #fff;
            background: #333;
            border-radius: 50%;
            cursor: pointer;
        }

        .member-level-checkbox label{
            line-height: inherit;
        }

        .tip-level {
            line-height: normal;
        }
    </style>

    <div id="app-add">
        <template>
            <el-form ref="form" :model="form" :rules="rules" v-loading="loading" label-width="15%">
                <el-tabs type="card" v-model="activeName" style="padding: 20px">
                    <el-tab-pane label="基础设置"
                                 name="base_set">@include('Yunshop\Redpack::redpack.base-set')</el-tab-pane>
                    <el-tab-pane label="活动信息"
                                 name="activity_info">@include('Yunshop\Redpack::redpack.activity-info')</el-tab-pane>
                    <el-tab-pane label="分享设置"
                                 name="share_set">@include('Yunshop\Redpack::redpack.share-set')</el-tab-pane>
                </el-tabs>

                <el-form-item>
                    <a href="#">
                        <el-button type="success" @click="submitForm('form')">提交</el-button>
                    </a>
                    <a href="#">
                        <el-button @click="goBack()">返回列表</el-button>
                    </a>
                </el-form-item>
            </el-form>
            <!--弹框上传图片-->
        <!-- <el-dialog :visible.sync="centerDialogVisible" width="65%" center>
                <el-tabs v-model="activeName2" type="card">
                    <el-tab-pane label="上传图片" name="first">
                    <div
                        style="text-align: center"
                        class="submit_Img"
                        v-loading="submit_loading"
                    >
                        <el-upload
                        class="avatar-uploader"
                        action="{{ yzWebFullUrl('plugin.redpack.admin.upload.upload') }}"
                        accept="image/*"
                        :show-file-list="false"
                        :on-success="uploadSuccess"
                        :before-upload="beforeUpload"
                        >
                        <div class="avatar_box" v-if="uploadImg">
                            <img :src="uploadImg" class="avatar" />
                        </div>
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
                    </el-tab-pane>
                    <el-tab-pane label="提取网络图片" name="second">
                    <el-input
                        v-model="uploadImg"
                        placeholder="请输入网络图片地址"
                        style="width:90%"
                    ></el-input>
                    </el-tab-pane>
                    <el-tab-pane label="浏览图片" name="third">
                    <div>
                        <el-radio-group v-model="radio1" size="medium" @change="chooseYear">
                        <el-radio-button label="不限"></el-radio-button>
                        <el-radio-button label="2019">2019年</el-radio-button>
                        <el-radio-button label="2018">2018年</el-radio-button>
                        <el-radio-button label="2017">2017年</el-radio-button>
                        <el-radio-button label="2016">2016年</el-radio-button>
                        </el-radio-group>
                    </div>

                    <div style="margin-top: 10px;">
                        <el-radio-group v-model="radio2" size="small" @change="chooseMonth">
                        <el-radio-button label="不限"></el-radio-button>
                        <el-radio-button label="1">1月</el-radio-button>
                        <el-radio-button label="2">2月</el-radio-button>
                        <el-radio-button label="3">3月</el-radio-button>
                        <el-radio-button label="4">4月</el-radio-button>
                        <el-radio-button label="5">5月</el-radio-button>
                        <el-radio-button label="6">6月</el-radio-button>
                        <el-radio-button label="7">7月</el-radio-button>
                        <el-radio-button label="8">8月</el-radio-button>
                        <el-radio-button label="9">9月</el-radio-button>
                        <el-radio-button label="10">10月</el-radio-button>
                        <el-radio-button label="11">11月</el-radio-button>
                        <el-radio-button label="12">12月</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div id="upload-img" class="imgList" v-loading="submit_loading">
                        <div class="avatar-uploader-box" v-for="img in ImgList">
                        <img
                            @click="chooseTheImg(img.thumb_url)"
                            :src="img.thumb_url"
                            class="avatar"
                        />
                        <i
                            class="el-icon-circle-close"
                            @click="deleteImg(img.id)"
                            title="点击清除图片"
                        ></i>
                        </div>
                    </div>

                    <el-pagination
                        style="margin-top: 10px;text-align: right"
                        background
                        @current-change="currentChange"
                        :page-size="pageSize"
                        :current-page.sync="current_page"
                        :total="total"
                        layout="prev, pager, next"
                    >
                    </el-pagination>
                    </el-tab-pane>
                </el-tabs>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="sureImg">确 定 </el-button>
                </span>
            </el-dialog> -->
        </template>
        <upload-img :upload-show="uploadShow" :name="chooseImgName" @replace="changeProp" @sure="sureImg"></upload-img>
    </div>
    <script src="{{resource_get('static/yunshop/tinymce4.7.5/tinymce.min.js')}}"></script>
    <script src="{{resource_get('static/yunshop/tinymceTemplate.js')}}"></script>
    @include('public.admin.tinymceee')
    @include('public.admin.uploadImg')
    <script>
        var app = new Vue({
            el: '#app-add',
            delimiters: ['[[', ']]'],
            data() {
                let set = {!! $set ?: '{}' !!};
                console.log(set);
                let activity_id = {!! $id ?: '{}' !!};
                console.log('=========');
                console.log(set.countdown_time);
                if (set.countdown_time) {
                    set.countdown_time[0] = set.countdown_time[0] * 1000;
                    set.countdown_time[1] = set.countdown_time[1] * 1000;
                }
                console.log(set.countdown_time);
                set.receive_levels = set.receive_levels !== null ? set.receive_levels : [];
                return {
                    //是否显示弹框
                    centerDialogVisible: false,
                    content: '',
                    ImgList: [],
                    activeName2: "first",
                    uploadImg: "",
                    chooseImg: "",
                    uploadImg1: "",//富文本框上传图片
                    radio1: "不限", //年
                    radio2: "不限", //月
                    loading: false,
                    pageSize: 0,
                    current_page: 0,
                    total: 0,
                    submit_loading: "",
                    dialogImageUrl: [],
                    dialogVisible: false,
                    picArr: set.picArr,
                    issetGoodsIds: [],
                    table_loading: false,
                    show_goods_modal: false,
                    goods_list: [],
                    goods_total: 0,
                    goods_per_size: 0,
                    goods_current_page: 1,
                    form: {
                        'word': '',
                        'withdraw_code': 1,
                        'max_challenge_number': '',
                        'invite_people': '',
                        'verify_mobile': 1,
                        'withdraw_count': 1,
                        'max_withdraw': '',
                        'min_withdraw': '',
                        'withdraw_total': '',
                        'default_challenge_number': '',
                        'activity_name': '',
                        'bg_color': '#409EFF',
                        'is_background': 1,
                        'audio_link': '',
                        'service_qr': '', // 客服二维码
                        'service_mobile': '', // 客服电话
                        'countdown_time': [new Date().getTime(), new Date().getTime() + 7 * 24 * 3600 * 1000],
                        'thumb_url': '',
                        'top_img': '',
                        'share_title': '',
                        'share_content': '',
                        'share_thumb': '',
                        'agreement': '',
                        'exchange_tab': [],
                        'exchange_choose': [],
                        'is_open':1, //会员领取权限
                        'receive_levels':[], //会员等级权限
                        ...set,
                    },
                    search_goods: {
                        'category': '',
                        'goods_name': '',
                        'page': 1,
                        'isset_ids': ''
                    },
                    goods_page: 1,
                    options1: [{
                        value: 'PRODUCT_1',
                        label: '商品促销'

                    }, {
                        value: 'PRODUCT_2',
                        label: '抽奖'

                    }, {
                        value: 'PRODUCT_3',
                        label: '虚拟物品兑换'

                    }, {
                        value: 'PRODUCT_4',
                        label: '企业内部福利'

                    }, {
                        value: 'PRODUCT_5',
                        label: '渠道分润'

                    }, {
                        value: 'PRODUCT_6',
                        label: '保险回馈'

                    }, {
                        value: 'PRODUCT_7',
                        label: '彩票派奖'

                    }, {
                        value: 'PRODUCT_8',
                        label: '税务刮彩'

                    }, {
                        value: '',
                        label: '其他'

                    }],
                    category_list: [],
                    id: activity_id,
                    activeName: 'base_set',
                    uploadShow: false,
                    chooseImgName: '',
                    rules: {
                        activity_name: [
                            {required: true, message: '请输入活动名称', trigger: 'blur'},
                        ],
                    },
                    receiveLevels:[], //会员等级权限
                }
            },
            mounted: function () {
                window.addEventListener('beforeunload', e => {
                    window.onbeforeunload = null
                });
            },
            created() {
                this.getCategory();
                this.changeIssetGoodsIds();
                this.changeDivHeight();
                this.getMemberLevel();
            },
            methods: {
                changeDivHeight() {  //动态修改购买指定商品规则  已选商品的div高度
                    var div_height = 410;
                    if (this.picArr.length < 4) {
                        div_height = 102.5 * this.picArr.length;
                    }
                    $('#chooseGoodsDiv').attr('style', 'height:' + div_height + 'px');
                },
                checkGoodsIsset(key) { //商品列表modal，确认商品是否已选
                    if (this.issetGoodsIds.indexOf(key) == -1) {
                        return false;
                    } else {
                        return true;
                    }
                },
                changeIssetGoodsIds() { //修改商品规则的里的商品id字段
                    var idArr = [];
                    if (this.picArr.length != 0) {
                        $.each(this.picArr, function (k, v) {
                            idArr.push(v.data);
                        })
                    }
                    this.issetGoodsIds = idArr;
                    this.form.exchange_rule[this.form.exchange_tab.indexOf('goods')].exchange_num = idArr.toString();
                },
                currentChangeGoods(page) { //商品列表modal翻页
                    this.searchGoods(page);
                },
                searchGoods(page) { //商品modal获取后端商品数据
                    this.search_goods.page = page;
                    this.search_goods.isset_ids = this.form.exchange_rule[this.form.exchange_tab.indexOf('goods')].exchange_num;
                    console.log(this.search_goods.isset_ids);
                    this.$http.post("{!! yzWebFullUrl('plugin.redpack.admin.redpack.manage.get-goods') !!}", this.search_goods)
                        .then(response => {
                            console.log(response);
                            if (response.data.result === 1) {
                                this.goods_total = response.data.data.total;
                                this.goods_per_size = response.data.data.per_page;
                                this.goods_current_page = response.data.data.current_page;
                                this.goods_list = response.data.data.data;
                            } else {
                                this.$message.error(response.data.msg);
                            }
                        })
                        .catch(err => {
                            console.error(err);
                        });

                },
                getCategory() { //商品modal获取后端商品分类数据
                    this.$http.post("{!! yzWebFullUrl('plugin.redpack.admin.redpack.manage.get-category') !!}", {})
                        .then(response => {
                            console.log(response);
                            if (response.data.result === 1) {
                                this.category_list = response.data.data;
                            } else {
                                this.$message.error(response.data.msg);
                            }
                        })
                        .catch(err => {
                            console.error(err);
                        });
                },
                chooseGoods() { //选择商品---商品modal显示+初始化商品数据
                    this.searchGoods(1);
                    this.show_goods_modal = true;

                },
                choose(data) {  //选择商品---将商品列表里的商品加入规则商品
                    console.log(data);
                    let res = this.checkGoodsIsset(data.id);
                    if (res) {
                        this.$message.error('请勿重复添加商品');
                    } else {
                        this.picArr.unshift({
                            'url': data.thumb,
                            'data': data.id,
                            'name': '[' + data.id + ']' + data.title,
                        });
                        this.$message.success('添加成功');
                    }
                    this.changeIssetGoodsIds();
                },
                handleRemove(file, fileList) {  //移除已选规则列表里的商品
                    console.log(file, fileList);
                    var index_key = -1;
                    var ids = '';
                    $.each(this.picArr, function (key, value) {
                        if (value.data == file.data) {
                            index_key = key;
                        }
                    });
                    console.log(index_key);
                    this.picArr.splice(index_key, 1);
                    this.picArr.sort();
                    this.changeIssetGoodsIds();
                },
                handlePictureCardPreview(file) {

                },
                checkRuleShow(key, type) {  //判断是否显示某个兑换规则
                    var result = false;
                    if (this.form.exchange_choose.indexOf(key) != -1) {
                        if (type == 3) {
                            result = true;
                        } else if (type == 1 && key != 'goods') {
                            result = true;
                        } else if (type == 2 && key == 'goods') {
                            result = true;
                        }
                        this.changeDivHeight();
                        return result;
                    } else {
                        this.changeDivHeight();
                        return false;
                    }
                },
                currentChange(val) {
                    this.submit_loading = true;
                    this.$http.post("{!! yzWebFullUrl('plugin.redpack.admin.upload.getLocalList') !!}", {
                        page: val,
                        year: this.radio1,
                        month: this.radio2
                    })
                        .then(response => {
                            if (response.data.result === 1) {
                                this.total = response.data.data.list.total;
                                this.ImgList = response.data.data.list.data;
                                this.current_page = response.data.data.list.current_page;
                                this.pageSize = response.data.data.list.per_page;
                            } else {
                                this.$message.error(response.data.msg);
                            }
                            this.submit_loading = false;
                        })
                        .catch(err => {
                            console.error(err);
                            this.submit_loading = false;
                        });
                },
                addContent(name, index) {
                    console.log(this.$refs[name]);
                    let ref = this.$refs[name];
                    let words = "";
                    words = "(" + '会员昵称' + ")";
                    console.log(words)
                    this.insertInputTxt(name, words)
                },

                insertInputTxt(ref, words) {
                    let name = "";
                    name = this.$refs[ref].$refs.textarea;
                    var startPos = name.selectionStart;
                    console.log(startPos);
                    var endPos = name.selectionEnd;
                    if (startPos === undefined || endPos === undefined) return
                    var txt = name.value;
                    var result = txt.substring(0, startPos) + words + txt.substring(endPos)
                    name.value = result;
                    name.focus();
                    name.selectionStart = startPos + words.length;
                    name.selectionEnd = startPos + words.length;
                    console.log(name.value)
                    this.form[ref] = name.value;
                },
                // chooseTheImg(img) {
                //     this.form[this.chooseImg] = img;
                //     this.centerDialogVisible = false;
                // },
                // chooseYear(year) {
                //     this.currentChange(1);
                // },
                // chooseMonth(month) {
                //     this.currentChange(1);
                // },
                // openUpload(str) {
                //     this.chooseImg = str;
                //     console.log(this.chooseImg)
                //     this.uploadImg = "";
                //     this.centerDialogVisible = true;
                // },
                // sureImg() {
                //     this.form[this.chooseImg] = this.uploadImg;
                //     this.centerDialogVisible = false;
                // },
                // uploadSuccess(res, file) {
                //     if (res.result === 1) {
                //         this.uploadImg = res.data.thumb_url;
                //         this.$message.success("上传成功！");
                //     } else {
                //         this.$message.error(res.msg);
                //     }
                //     this.submit_loading = false;
                // },
                // 富文本上传图片
                uploadSuccess1(res, file) {
                    if (res.result === 1) {
                        this.uploadImg1 = '';
                        this.uploadImg1 = res.data.thumb_url;
                        this.$message.success("上传成功！");
                        // this.insert();
                    } else {
                        this.$message.error(res.msg);
                    }
                    this.submit_loading = false;
                },
                beforeUpload(file) {
                    this.submit_loading = true;
                    const isLt2M = file.size / 1024 / 1024 < 4;
                    if (!isLt2M) {
                        this.$message.error("上传图片大小不能超过 4MB!");
                        this.submit_loading = false;
                    }
                    return isLt2M;
                },
                openUpload(str) {
                    // console.log()
                    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_url;
                    // this.form[name+'_url'] = image_url;
                },
                clearImg(str) {
                    this.form[str] = "";
                },
                deleteImg(id) {
                    this.submit_loading = true;
                    this.$http
                        .post("{!! yzWebFullUrl('plugin.share-activity.admin.activity.delLocalImg') !!}", {id: id})
                        .then(response => {
                            if (response.data.result === 1) {
                                this.$message.success("系统删除成功");
                                this.currentChange(1);
                                this.submit_loading = false;
                            } else {
                                this.$message.error("删除出错");
                                this.submit_loading = false;
                            }
                        })
                        .catch(err => {
                            console.error(err);
                            this.submit_loading = false;
                        });
                },

                // 添加关键词
                addContent(name, index) {
                    console.log(this.$refs[name]);
                    let ref = this.$refs[name];
                    let words = "";
                    words = "(" + '会员昵称' + ")";
                    console.log(words)
                    this.insertInputTxt(name, words)
                },

                insertInputTxt(ref, words) {
                    let name = "";
                    name = this.$refs[ref].$refs.textarea;
                    var startPos = name.selectionStart;
                    console.log(startPos);
                    var endPos = name.selectionEnd;
                    if (startPos === undefined || endPos === undefined) return
                    var txt = name.value;
                    var result = txt.substring(0, startPos) + words + txt.substring(endPos)
                    name.value = result;
                    name.focus();
                    name.selectionStart = startPos + words.length;
                    name.selectionEnd = startPos + words.length;
                    console.log(name.value)
                    this.form[ref] = name.value;
                },
                goBack() {
                    history.back(-1);
                },
                submitForm(form) {
                    // console.log(this.picArr);
                    // console.log(this.form);
                    // return false;


                    if (this.form.countdown_time) {
                        this.form.countdown_time[0] = Math.round(this.form.countdown_time[0] / 1000).valueOf();
                        this.form.countdown_time[1] = Math.round(this.form.countdown_time[1] / 1000).valueOf();
                    } else {
                        this.form.countdown_time = [];
                        this.form.countdown_time.push(Math.floor(new Date().getTime() / 1000), Math.floor((new Date().getTime() + 7 * 24 * 3600 * 1000) / 1000))
                    }
                    delete (this.form.is_background)
                    delete (this.form.thumb_url)
                    delete (this.form.browse_count)
                    delete (this.form.end_time)
                    delete (this.form.browse)
                    delete (this.form.created_at)
                    delete (this.form.updated_at)
                    delete (this.form.withdraw_code_name)
                    console.log(this.form);
                    this.$refs[form].validate((valid) => {
                        if (valid) {
                            this.loading = true;
                            this.$http.post("{!! yzWebFullUrl('plugin.redpack.admin.redpack.store.index') !!}", {
                                'form': this.form,
                                'id': this.id
                            }).then(response => {
                                if (response.data.result) {
                                    this.$message({message: "操作成功", type: 'success'});
                                    window.location.href = '{!! yzWebFullUrl('plugin.redpack.admin.redpack.manage.index') !!}';
                                } else {
                                    this.$message({message: response.data.msg, type: 'error'});
                                    this.loading = false;
                                }
                            }, response => {
                                this.$message({message: response.data.msg, type: 'error'});
                                this.loading = false;
                            });
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                // 获取会员等级
                getMemberLevel() { 
                    this.$http.post("{!! yzWebFullUrl('plugin.redpack.admin.redpack.manage.get-member-level') !!}", {})
                        .then(response => {
                            if (response.data.result) {
                                this.receiveLevels =  response.data.data;
                            } else {
                                this.$message.error(response.data.msg);
                            }
                        })
                        .catch(err => {
                            console.error(err);
                        });
                },
            },
        });
    </script>
    <style>
        /*弹窗上传图片*/
        #upload-img .avatar {
            width: 100px;
            height: 100px;
            display: block;
        }

        #upload-img .avatar-uploader-box {
            position: relative;
            margin: 20px 0 0 10px;
            width: 110px;
        }

        #upload-img .el-icon-circle-close {
            position: absolute;
            top: -7px;
            right: 1px;
            color: #999;
        }

        .imgList {
            display: flex;
            flex-wrap: wrap;
            margin: 10px auto;
        }
    </style>
@endsection