@extends('layouts.base')
@section('title', '创建链接')
@section('content')
    <style>
        .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-form-item__label{padding-right:30px;}
        .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}
        .upload-box:hover {
            border-color: #29ba9c;
            color: #29ba9c;
        }
        .upload-box {
            width: 150px;
            height: 150px;
            display: flex;
            cursor: pointer;
            border: 1px dashed #dde2ee;
            justify-content: center;
            align-items: center;
            border-radius: 5px;
            flex-direction: column;
        }
        .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;
        }
    </style>

    <div id="app-add">
        <template>
            <el-form ref="form" :model="form" 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\LinkTool::link.base-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>
        </template>
    </div>
    <script src="{{resource_get('static/yunshop/tinymce4.7.5/tinymce.min.js')}}"></script> 
    <script src="{{resource_get('static/yunshop/tinymceTemplate.js')}}"></script>
    <script>
        var app = new Vue({
            el: '#app-add',
            delimiters: ['[[', ']]'],
            data() {
                let set = {!! $set ?: '{}' !!};
                let id = {!! $id ?: '{}' !!};
                console.log(set);
                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);
                return {
                    cuttentTime:'',
                    content:'',
                    ImgList: [],
                    activeName2: "first",
                    radio1: "不限", //年
                    radio2: "不限", //月
                    loading : false,
                    pageSize: 0,
                    current_page: 0,
                    total: 0,
                    submit_loading:"",
                    form : {
                        'app_id':'',
                        'path' : '',
                        'params' : '',
                        'remark' : '',
                        'validity' : 0,
                        'countdown_time' : [new Date().getTime(), new Date().getTime() + 7 * 24 * 3600 * 1000],
                        ...set
                    },
                    id : id,
                    activeName : 'base_set',

                    pickerOptions: {
                        onPick: ({ maxDate, minDate }) => {
                            this.cuttentTime = minDate.getTime()
                            if (maxDate) {
                                this.cuttentTime = ''
                            }
                        },
                        disabledDate: (time) => {
                            if (this.cuttentTime !== '') {
                                const one = 30 * 24 * 3600 * 1000
                                const minTime = this.cuttentTime - one
                                const maxTime = this.cuttentTime + one
                                return time.getTime() < minTime || time.getTime() > maxTime;
                            }
                        }
                    }
                }
            },
            mounted: function () {
                window.addEventListener('beforeunload', e => {
                    window.onbeforeunload =null
                });
            },
            created(){
                // this.currentChange(1);
            },
            methods:{
                goBack() {
                    history.back(-1);
                },
                submitForm(form) {
                        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(new Date().getTime()/1000,(new Date().getTime() + 7 * 24 * 3600 * 1000)/1000)
                        }
                        delete(this.form.goods)
                        delete(this.form.browse_count)
                        delete(this.form.end_time)
                        delete(this.form.diy_form)
                        delete(this.form.browse)
                        delete(this.form.diyform_title)
                        delete(this.form.goods_thumb)
                        delete(this.form.goods_title)
                        delete(this.form.created_at)
                        delete(this.form.updated_at)
                        delete(this.form.has_one_good)
                        console.log(this.form);
                        this.$refs[form].validate((valid) => {
                            if (valid) {
                                this.loading = true;
                                this.$http.post("{!! yzWebFullUrl('plugin.link-tool.admin.link.add.index') !!}",{'form':this.form, 'id':this.id}).then(response => {
                                    if (response.data.result) {
                                    this.$message({message: "操作成功",type: 'success'});
                                    window.location.href='{!! yzWebFullUrl('plugin.link-tool.admin.link.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;
                    }
                    });
                },
                // 字符转义
                escapeHTML(a) {
                    a = "" + a;
                    return a.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, "\"").replace(/&apos;/g, "'");;
                },
            },
        });
    </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