@extends('layouts.base')
@section('title', '基本设置')
@section('content')
    <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></style>
    <div class="all">
        <div id="app">
            <el-form :model="set" 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="字画名称">
                            <el-input placeholder="请输入字画名称" v-model="set.title"></el-input>
                        </el-form-item>
                        <el-form-item label="典藏室顶部图片" prop="top_thumb">
                            <div class="upload-box" @click="openUpload('top_thumb')" v-if="!set.top_thumb">
                                <i class="el-icon-plus" style="font-size:32px"></i>
                            </div>
                            <div @click="openUpload('top_thumb')" class="upload-boxed" v-if="set.top_thumb">
                                <img :src="set.top_thumb" alt="" style="width:150px;height:150px;border-radius: 5px;cursor: pointer;">
                                <i class="el-icon-close" @click.stop="clearImg('top_thumb')" title="点击清除图片"></i>
                                <div class="upload-boxed-text">点击重新上传</div>
                            </div>
                        </el-form-item>
                        <el-form-item label="高仿画图片" prop="imitation">
                            <div class="upload-box" @click="openUpload('imitation')" v-if="!set.imitation">
                                <i class="el-icon-plus" style="font-size:32px"></i>
                            </div>
                            <div @click="openUpload('imitation')" class="upload-boxed" v-if="set.imitation">
                                <img :src="set.imitation" alt="" style="width:150px;height:150px;border-radius: 5px;cursor: pointer;">
                                <i class="el-icon-close" @click.stop="clearImg('imitation')" title="点击清除图片"></i>
                                <div class="upload-boxed-text">点击重新上传</div>
                            </div>
                        </el-form-item>
                        <el-form-item label="数藏画图片" prop="collection">
                            <div class="upload-box" @click="openUpload('collection')" v-if="!set.collection">
                                <i class="el-icon-plus" style="font-size:32px"></i>
                            </div>
                            <div @click="openUpload('collection')" class="upload-boxed" v-if="set.collection">
                                <img :src="set.collection" alt="" style="width:150px;height:150px;border-radius: 5px;cursor: pointer;">
                                <i class="el-icon-close" @click.stop="clearImg('collection')" title="点击清除图片"></i>
                                <div class="upload-boxed-text">点击重新上传</div>
                            </div>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" size="small" @click="onSubmit">保存</el-button>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
            <upload-img :upload-show="uploadShow" :name="chooseImgName" @replace="changeProp" @sure="sureImg"></upload-img>
        </div>
    </div>
    @include('public.admin.uploadImg')
    <script>
        var app = new Vue({
            el:"#app",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                return{
                    // 图片上传
                    uploadShow:false,
                    chooseImgName:'',
                    chooseIndex:-1,
                    type:0,
                    // 设置信息
                    set:{
                        title: "{{ $set['title'] ?? '' }}",
                        top_thumb: "{{ $set['top_thumb'] ?? '' }}",
                        imitation: "{{ $set['imitation'] ?? '' }}",
                        collection: "{{ $set['collection'] ?? '' }}",
                    },
                }
            },
            created() {},
            mounted() {},
            methods: {
                // 点击选择图片
                openUpload(str,index,type) {
                    this.chooseImgName = str;
                    this.uploadShow = true;
                    this.chooseIndex = index;
                    this.type = '2';
                },
                // 图片弹框显示隐藏改变
                changeProp(val) {
                    if(val == true) this.uploadShow = false;
                    else this.uploadShow = true;
                },
                // 图片选中
                sureImg(name,image,img_url) {
                    this.set[name] = img_url;
                },
                // 删除图片
                clearImg(name) {
                    this.set[name] = '';
                    this.$forceUpdate();
                },
                // 提交
                onSubmit() {
                    let _this = this;
                    _this.$http.post('{!! yzWebFullUrl('plugin.collection-room.admin.index.set') !!}', {
                        collection_room: _this.set
                    }).then(function (response) {
                        let res = response.body;
                        _this.$message({
                            message: res.msg,
                            type:  res.result == 1 ? 'success' : 'error'
                        });
                    });
                },


            },
        })
    </script>
@endsection