@extends('layouts.base')

@section('content')
@include('public.admin.uploadMultimediaImg')
<link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}" />
<style>
    .upload-box {
        flex-direction: column;
        position: relative;
    }

    .tips {
        color: #8f8f8f;
    }
</style>
<div id="app">
    <div class="all">
        <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 style="padding: 30px 500px 100px 150px">
                <el-form ref="form" :model="form" label-width="10%">
                    <el-form-item label="分享标题">
                        <el-input v-model="form.title" placeholder="请输入"></el-input>
                        <div class="tips">不填写默认商城名称</div>
                    </el-form-item>
                    <el-form-item label="分享图标">
                        <div class="upload-box" @click="upload('1')" :style="[{backgroundImage:form.icon? `url(${form.icon})`:''},{backgroundSize: '100% 100%'}]">
                            <i class="el-icon-plus" style="font-size:32px" v-if="!form.icon"></i>
                            <i class="el-icon-error" style=" position: absolute; right: 0;top: 0px;cursor: pointer;" @click="deletePicture" v-else></i>
                            <div style="    width: 100%;
                                  text-align: center;
                                  margin-top: 0px;
                                  position: relative;
                                  background-color: #333333c2;
                                  color: #ffffff;" :style="{top: !form.icon ? '39px' : '55px' }">点击上传照片</div>
                        </div>
                    </el-form-item>
                    <el-form-item label="分享描述">
                        <el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="form.desc">
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="vue-page">
            <div class="vue-center">
                <el-button type="primary" @click.native.prevent="onSubmit">提交
                </el-button>
            </div>
        </div>
    </div>
    <upload-multimedia-img :upload-show="uploadShow" @sure="sure" :type="uploadType" @replace="replace"></upload-multimedia-img>
</div>

<script>
    var app = new Vue({
        el: '#app',
        delimiters: ['[[', ']]'],
        data() {
            return {
                form: {
                    title: '',
                    icon:'',
                    desc:''
                },
                uploadType: '',
                uploadShow: false
            }
        },
        mounted() {
        },
        methods: {
            onSubmit() {
                this.$http.post("{!! yzWebFullUrl('plugin.material-center.admin.set.save') !!}", {
                    set: {
                        ...this.form
                    }
                }).then(res => {
                    if (res.data.result) {
                        this.$message.success(res.data.msg);
                        this.getData()
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })

            },
            sure(name, uploadShow, imgUrl) {
                this.uploadShow = false
                this.form.icon = imgUrl[0].url
            },
            upload(type) {
                this.uploadType = type
                this.uploadShow = true
            },
            replace() {
                this.uploadShow = false
            },
            deletePicture(event){
                event.stopPropagation()
                this.form.icon = ''
            },
            getData(){
                this.$http.post("{!! yzWebFullUrl('plugin.material-center.admin.set.index') !!}" ,{
                    }).then(res => {
                        if (res.data.result) {
                                this.form = {...res.data.data.set}
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    })
            }
        },
        created(){
           this.getData()
        }
    });
</script>
@endsection