@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')}}">
    <link rel="stylesheet" href="{{static_url('../resources/views/goods/assets/css/common.css?time='.time())}}">

    <style>
        .vue-head{
            max-width: 900px!important;
        }
        .form-item_tips {
            margin-top:8px;
            line-height:26px;
            color: #b5b5b5;
            font-size: 13px;
        }
        .el-autocomplete{
            display: block;
        }
    </style>
    <div class="all" id="app">
        <el-form :model="set" label-width="170px">
            <div class="vue-head">
                <el-tabs v-model="activeName">
                    <el-tab-pane label="基本设置" name="set_base">
                        <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-select v-model="set.poster_id" placeholder="请选择">
                                    <el-option v-for="(item,index) in poster_list" :key="index" :label="item.title" :value="item.id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="任务视频">
                                <el-row>
                                    <el-col :span="6">
                                        <div class="upload-boxed">
                                            <div class="el-icon-plus" v-show="!set.task_video_link"  @click="displaySelectMaterialPopup('video',3)"></div>
                                            <div>
                                                <video v-if="set.task_video_link" style="width: 150px;height:119px;object-fit: cover;" controls="controls" class="" :src="set.task_video_link"></video>
                                                <i class="goods-images_remove el-icon-close" style="top:-6px" v-if="set.task_video_link"  @click="removeVideo()"></i>
                                            </div>
                                            <div class="upload-boxed-text"  @click="displaySelectMaterialPopup('video',3)">点击重新上传视频</div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="贡献值设置" name="set_contribution">
                        <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="是否开启奖励" prop="is_give_contribution">
                                <div style="line-height:40px">
                                    <el-radio v-model.number="set.is_give_contribution" :label="0">不开启</el-radio>
                                    <el-radio v-model.number="set.is_give_contribution" :label="1">开启</el-radio>
                                </div>
                            </el-form-item>
                            <div v-if="set.is_give_contribution == 1">
                                <el-form-item label="奖励比例" prop="contribution_ratio">
                                    <el-input type="number" placeholder="贡献值奖励比例" v-model.number="set.contribution_ratio" step="0.01">
                                        <template slot="append">%</template>
                                    </el-input>
                                    <div class="form-item_tips">订单实际支付的N%奖励给用户及直推上级，作为贡献值。0或者空则无贡献值奖励</div>
                                </el-form-item>
                                <el-form-item label="分红总额比例" prop="contribution_bonus_ratio">
                                    <el-input type="number" placeholder="贡献分享分红总额比例" v-model.number="set.contribution_bonus_ratio" step="0.01">
                                        <template slot="append">%</template>
                                    </el-input>
                                    <div class="form-item_tips">周期销售额的N%用作分红总金额，根据每个人当前贡献值比例进行分红；0或者空则无贡献值奖励</div>
                                </el-form-item>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="基金设置" name="set_fund">
                        <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="开启基金" prop="is_fund_open">
                                <div style="line-height:40px">
                                    <el-radio v-model.number="set.is_fund_open" :label="0">不开启</el-radio>
                                    <el-radio v-model.number="set.is_fund_open" :label="1">开启</el-radio>
                                </div>
                                <div class="form-item_tips">基金池能力</div>
                            </el-form-item>
                            <div v-if="set.is_fund_open == 1">
                                <el-form-item label="基金入账比例" prop="order_fund_ratio">
                                    <el-input type="number" placeholder="基金池基金成交入账比例" v-model.number="set.order_fund_ratio" step="30">
                                        <template slot="append">%</template>
                                    </el-input>
                                    <div class="form-item_tips">基金池基金用户订单成交订单金额比例纳入基金池</div>
                                </el-form-item>
                                <el-form-item label="起始价格" prop="fund_start_price">
                                    <el-input type="number" placeholder="起始价格" v-model.number="set.fund_start_price" step="0.5">
                                        <template slot="append">元</template>
                                    </el-input>
                                    <div class="form-item_tips">用户订单成交第一笔订单计算价格</div>
                                </el-form-item>
                                <el-form-item label="文创豆赠送比例" prop="user_fund_ratio">
                                    <el-input type="number" placeholder="收益比例" v-model.number="set.user_fund_ratio" step="10">
                                        <template slot="append">%</template>
                                    </el-input>
                                    <div class="form-item_tips">用户购买商品活动赠送文创豆数量比例 《消费额度ⅹ赠送10%÷价格》</div>
                                </el-form-item>
                                <el-form-item label="最小赠送" prop="min_number">
                                    <el-input type="number" placeholder="赠送最小个数" v-model.number="set.min_number" step="8">
                                        <template slot="append">个</template>
                                    </el-input>
                                    <div class="form-item_tips">当系统赠送积分小于当前数量时,系统将自动增值比例</div>
                                </el-form-item>
                                <el-form-item label="增加倍数" prop="fund_multiple">
                                    <el-input type="number" placeholder="增加倍数" v-model.number="set.fund_multiple" step="10">
                                        <template slot="append">倍</template>
                                    </el-input>
                                    <div class="form-item_tips">当系统赠送积分小于指定数量,用户全局增长总量倍数</div>
                                </el-form-item>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="文创豆易出设置" name="set_legumes">
                        <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 type="number" placeholder="基金池比例" v-model.number="set.legumes_fund_ratio" step="0.01">
                                    <template slot="append">%</template>
                                </el-input>
                                <div class="form-item_tips">文创豆易出时，该比例部分将用于基金池；剩余部分文创豆为易出部分</div>
                            </el-form-item>
                            <el-form-item label="购物部分比例">
                                <el-input type="number" placeholder="购物部分比例" v-model.number="set.legumes_buy_goods_ratio" step="0.01">
                                    <template slot="append">%</template>
                                </el-input>
                                <div class="form-item_tips">文创豆易出时，易出部分中该比例的文创豆只能用于购物抵扣；剩余部分则直接易出</div>
                            </el-form-item>
                            <el-form-item label="易出手续费">
                                <el-input type="number" placeholder="易出手续费" v-model.number="set.legumes_withdrawal_commission" step="0.01">
                                    <template slot="append">%</template>
                                </el-input>
                                <div class="form-item_tips">文创豆易出时，直接易出部分的易出手续费</div>
                            </el-form-item>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="分享设置" name="set_share">
                        <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="分享标题" prop="order_fund_ratio">
                                <el-input type="text" placeholder="请输入分享标题" v-model="set.shopping_share_title" maxlength="10"></el-input>
                                <div class="form-item_tips">标题长度不超过10个字符；默认为商城名称</div>
                            </el-form-item>
                            <el-form-item label="分享描述" prop="order_fund_ratio">
                                <el-input type="text" placeholder="请输入描述信息" v-model="set.shopping_share_description" maxlength="30"></el-input>
                                <div class="form-item_tips">描述信息长度不超过30个字符，默认为空</div>
                            </el-form-item>
                            <el-form-item label="入口地址" prop="order_fund_ratio">
                                <el-autocomplete type="text"
                                          placeholder="请选择入口地址"
                                          v-model="set.shopping_share_link_title"
                                          :fetch-suggestions="querySearch"
                                          @select="handleSelect"
                                ></el-autocomplete>
                                <div class="form-item_tips">用户分享给其他人后，点击进入的页面。默认为首页</div>
                            </el-form-item>
                            <el-form-item label="分享图片">
                                <el-row>
                                    <el-col :span="6">
                                        <div class="upload-boxed">
                                            <div class="el-icon-plus" v-show="!set.shopping_share_image"  @click="displaySelectMaterialPopup('shopping_share_image')"></div>
                                            <div>
                                                <img v-if="set.shopping_share_image" :src="set.shopping_share_image" />
                                                <i class="goods-images_remove el-icon-close" style="top:-6px" v-if="set.shopping_share_image"  @click="removeVideo('shopping_share_image')"></i>
                                            </div>
                                            <div class="upload-boxed-text"  @click="displaySelectMaterialPopup('shopping_share_image')">点击重新上传图片</div>
                                        </div>
                                    </el-col>
                                </el-row>
                                <div class="form-item_tips">推荐图片比例为：200*200；默认为商城LOGO</div>
                            </el-form-item>
                        </div>
                    </el-tab-pane>


                </el-tabs>
                {{--保存按钮--}}
                <el-form-item>
                    <el-button type="primary" size="small" @click="onSubmit">保存</el-button>
                </el-form-item>
            </div>
        </el-form>

        {{--商品图片选择器--}}
        <upload-multimedia-img
                :upload-show="showSelectMaterialPopup"
                :type="materialType"
                :name="formFieldName"
                :selNum="selNum"
                :select="select"
                @replace="showSelectMaterialPopup = !showSelectMaterialPopup"
                @sure="selectedMaterial"
        ></upload-multimedia-img>
        {{--入口地址选择器--}}
    </div>
    @include('public.admin.uploadMultimediaImg')
    <script>
        var app = new Vue({
            el:"#app",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                return{
                    activeName: 'set_base',
                    set: JSON.parse('{!! json_encode($set) !!}') || {
                        is_give_contribution: 0,
                        is_open_contribution_bonus: 0,
                    },
                    poster_list: JSON.parse('{!! json_encode($poster_list) !!}') || {},
                    home_link_list: [
                        { value: '商城首页', path: 'home'},
                        { value: '分类导航', path: 'category'},
                        { value: '全部商品', path: 'search'},
                        { value: '会员中心', path: 'member'},
                        { value: '文创豆商城', path: 'member/legumes/shopping'},
                        { value: '我的典藏', path: 'member/collection_room'},
                    ],
                    showSelectMaterialPopup: false,
                    materialType: "",
                    formFieldName: "",
                    selNum: "one",
                    select:"open",
                }
            },
            created() {},
            mounted() {},
            methods: {
                // 提交
                onSubmit() {
                    let _this = this;
                    _this.$http.post('{!! yzWebFullUrl('plugin.cultural-space.admin.index.set') !!}', {
                        cultural_space_set: _this.set
                    }).then(function (response) {
                        let res = response.body;
                        _this.$message({
                            message: res.msg,
                            type:  res.result == 1 ? 'success' : 'error'
                        });
                    });
                },
                // 视频选择
                displaySelectMaterialPopup(fieldName = "thumb", type = 1) {
                    this.formFieldName = fieldName;
                    this.showSelectMaterialPopup = !this.showSelectMaterialPopup;
                    this.materialType = String(type);
                },
                // 视频删除
                removeVideo(fieldName = ''){
                    if(fieldName === 'shopping_share_image') this.set.shopping_share_image = '';
                    else this.set.task_video_link = '';
                    this.$forceUpdate()
                },
                // 选中
                selectedMaterial(name, image, imageUrl) {
                    let originalImageUrl = JSON.parse(JSON.stringify(imageUrl))
                    // 链接获取
                    let url = '';
                    if(typeof imageUrl == 'string') url = originalImageUrl;
                    url = originalImageUrl[0].url
                    // 改变值
                    if(name === 'shopping_share_image') this.set.shopping_share_image = url;
                    else this.set.task_video_link = url;
                },
                // 分享入库选择
                querySearch(queryString, cb){
                    let results = this.home_link_list;
                    // results = queryString ? results.filter(this.createFilter(queryString)) : results;
                    // 调用 callback 返回建议列表的数据
                    cb(results);
                },
                createFilter(queryString) {
                    return (restaurant) => {
                        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                    };
                },
                handleSelect(item){
                    this.set.shopping_share_link = item.path;
                    this.set.shopping_share_link_title = item.value;
                }



            },
        })
    </script>
@endsection