@extends('layouts.base')

@section('content')
@section('title', trans('编辑'))
<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>
    .dialog-cover{z-index:2001}
    .dialog-content{z-index:2002}
    .all{background:#eff3f6}
    .btn_shili{color: #FFAD56;margin-left: 20px}
    .el-input-group__append, .el-input-group__prepend {
        padding: 0 8px;
    }
    .el-form-item__content .el-input-group {
        vertical-align: baseline
    }
</style>
<div class="all">
    <div id="app" v-cloak>
        <el-form ref="form_data" :model="form_data" label-width="15%">

            <div class="vue-head">
                <div class="vue-main-title">
                    <div class="vue-main-title-left"></div>
                    <div class="vue-main-title-content">编辑</div>
                </div>
                <div class="vue-main-form">
                    <el-form-item label="标签ID">
                        <div style="font-size: 16px">[[form_data.label_id]]</div>
                    </el-form-item>
                    <el-form-item label="标签名称">
                        <el-input v-model="form_data.name" placeholder="请输入标签名称"></el-input>
                        <div style="font-size:12px;">标签名称和标签图标在商品详情页显示！</div>
                    </el-form-item>
                    <el-form-item label="标签说明">
                        <el-input v-model="form_data.desc" type="textarea"
                                  maxlength="300" show-word-limit >
                        </el-input>
                        <div style="font-size:12px;">标签说明在点击商品详情页服务标签后弹窗中显示！</div>
                    </el-form-item>
                    <el-form-item label="标签图标" prop="pic">
                        <div class="upload-box" @click="openUpload('pic')" v-if="!form_data.pic">
                            <i class="el-icon-plus" style="font-size:32px"></i>
                        </div>
                        <div @click="openUpload('pic')" class="upload-boxed" v-if="form_data.pic">
                            <img :src="form_data.pic" alt="" style="width:150px;height:150px;border-radius: 5px;cursor: pointer;">
                            <div class="upload-boxed-text">点击重新上传</div>
                            <i class="el-icon-close" @click.stop="clearImg('pic')" title="点击清除图片"></i>
                        </div>
                        <div class="tip">建议尺寸: 96*96，或正方型图片</div>
                    </el-form-item>
                    <el-form-item label="跳转链接" prop="link">
                        <el-input v-model="form_data.link" style="width:70%;" placeholder=" 请选择链接"></el-input>
                        <el-button @click="showLink('link','link')">选择链接</el-button>
                    </el-form-item>
                    <el-form-item label="小程序跳转链接" prop="min_link">
                        <el-input v-model="form_data.min_link" style="width:70%;"
                                  placeholder=" 请选择链接"></el-input>
                        <el-button @click="showLink('min','min_link')">选择小程序链接</el-button>
                    </el-form-item>
                </div>
            </div>
        </el-form>

        <upload-img :upload-show="uploadShow" :name="chooseImgName" @replace="changeProp" @sure="sureImg"></upload-img>
        <pop :show="show" @replace="changeLink" @add="parHref"></pop>
        <program :pro="pro" @replacepro="changeprogram" @addpro="parpro"></program>

        <div class="vue-page">
            <div class="vue-center">
                <el-button type="primary" @click="submitForm()">保存设置</el-button>
                {{--<el-button @click="goBack">返回</el-button>--}}
            </div>
        </div>
    </div>
</div>
@include('public.admin.uploadImg')
@include('public.admin.pop')
@include('public.admin.program')
<script>
    var app = new Vue({
        el:"#app",
        delimiters: ['[[', ']]'],
        name: 'test',
        data() {
            return{
                form_data:{},

                uploadShow:false,
                chooseImgName:'',

                show:false,//是否开启公众号弹窗
                pro:false ,//是否开启小程序弹窗
                chooseLink:'',
                chooseMiniLink:'',
            }
        },
        created() {

        },
        mounted() {
            let result = this.viewReturn();
            this.__initial(result);
            // this.getData();
        },
        methods: {
            //视图返回数据
            viewReturn() {
                return {!! $data?:'{}' !!};
            },
            //初始化页面数据，请求链接
            __initial(data) {

                if (data) {
                    this.form_data = data;
                }
                console.log(data);
            },
            submitForm() {
                console.log(this.form_data);
                this.$http.post('{!! yzWebFullUrl('plugin.label.admin.set.store') !!}',{data:this.form_data}).then(function (response) {

                    if (response.data.result) {
                        this.$message({type: 'success',message: '设置成功！'});
                    } else{
                        this.$message({type: 'error',message: response.data.msg});
                    }
                    location.reload();
                },function (response) {
                    this.$message({type: 'error',message: response.data.msg});
                })

            },
            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) {
                console.log(name)
                console.log(image)
                console.log(image_url)
                this.form_data[name] = image_url;
                // this.form_data[name+'_img'] = image_url;
            },
            clearImg(str) {
                this.form_data[str] = "";
                this.$forceUpdate();
            },
            //弹窗显示与隐藏的控制
            changeLink(item){
                this.show=item;
            },
            //当前链接的增加
            parHref(child,confirm){
                this.show=confirm;
                // this.form.link=child;
                this.form_data[this.chooseLink] = child;
            },
            changeprogram(item){
                this.pro=item;
            },
            parpro(child,confirm){
                this.pro=confirm;
                // this.form.prolink=child;
                this.form_data[this.chooseMiniLink] = child;

            },
            showLink(type,name) {
                if(type=="link") {
                    this.chooseLink = name;
                    this.show = true;
                }
                else {
                    this.chooseMiniLink = name;
                    this.pro = true;
                }
            },
            copyLink(type) {
                this.$refs[type].select();
                document.execCommand("Copy")
                this.$message.success("复制成功!");
            },
        },
    })

</script>
@endsection