@extends('layouts.base')
@section('title', '添加活动')
@section('content')
<link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}"/>
<style>
#re_content{
    padding-top:15px;
}
</style>

<div class="all">
    <div id='re_content' v-cloak>
        <el-form ref="form" :model="form" :rules="rules" label-width="15%">
            <div>
                <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-switch
                            v-model="form.is_open"
                            active-color="#13ce66"
                            inactive-color="#999999"
                            :active-value='1'
                            :inactive-value='0'>
                          </el-switch>
                          <p style="font-family:SourceHanSansSC; font-weight:400; font-size:10px; color:rgba(156, 158, 164, 1); font-style:normal; letter-spacing:0px; line-height:15px; text-decoration:none;">开启后，用户前端购物车页面显示分享好物按钮，可以选择购物车商品生成购物单进行分享！</p>
                        </el-form-item>

                        <el-form-item label="选择图片">
                            <div class="upload-box" @click="openUpload('img')" v-if="!form.img">
                                <i class="el-icon-plus" style="font-size:32px"></i>
                            </div>
                            <span>建议尺寸：750*260px，或长方形图片</span>
                            <div @click="openUpload('img')" class="upload-boxed" v-if="form.img">
                                    <img :src="form.img" alt="" id='img' style="width:150px;height:150px;border-radius: 5px;cursor: pointer;">
                            <div class="upload-boxed-text">点击重新上传</div>
                            </div>
                        </el-form-item>

                        <el-form-item label="优惠券">
                            <el-row v-for="(item, index) in selectCoupons" :key="item.id" style="margin-bottom: 10px;">
                                <el-col :span="8">
                                    <el-input placeholder="请输入优惠券名称" :disabled="true" v-model="item.name">
                                        <template slot="prepend">优惠券名称：</template>
                                    </el-input>
                                </el-col>
                                <el-col :span="8">
                                    <el-input placeholder="请输入赠送数量" v-model="item.amount" type="number">
                                        <template slot="prepend">赠送：</template>
                                        <template slot="append">张</template>
                                    </el-input>
                                </el-col>
                                <el-col :span="4">
                                    <span>已领[[item.receive_count]]</span>
                                    <el-button type="danger" icon="el-icon-close" @click="handleDelCoupon(index)"></el-button>
                                </el-col>
                            </el-row>
                             <el-button @click="getCoupon()">选择优惠券</el-button>
                        </el-form-item>

                        <el-form-item label="转赠优惠券" >
                          <el-switch
                            v-model="form.is_gift_coupon"
                            active-color="#13ce66"
                            inactive-color="#999999"
                            :active-value='1'
                            :inactive-value='0'>
                          </el-switch>
                          <p style="font-family:SourceHanSansSC; font-weight:400; font-size:10px; color:rgba(156, 158, 164, 1); font-style:normal; letter-spacing:0px; line-height:15px; text-decoration:none;">开启后，用户在分享购物车可以选择自己的优惠券、张数、进行转赠优惠券</p>
                        </el-form-item>

                        <el-form-item label="主题">
                            <el-input style="width:50%;" v-model="form.title" placeholder="" clearable></el-input>
                            <p>
                                <span style="color:#67BA9C">分享者昵称</span>[[form.title]]
                            </p>
                        </el-form-item>
                       
                    </div>
                    
                </div>
            </div>
        </el-form>

        <!-- 分页 -->
        <div class="vue-page">
            <div class="vue-center">
                <el-button type="primary" @click="submitForm('form')">提交</el-button>
                <el-button @click="goBack">返回</el-button>
            </div>
        </div>
    <upload-img :upload-show="uploadShow" :name="chooseImgName" @replace="changeProp" @sure="sureImg"></upload-img>

    <el-dialog title="选择优惠劵" :visible.sync="dialogTableVisible" :lock-scroll="true">

        <el-row :gutter="10">
            <el-col :span="18">
                <el-input placeholder="请输入标题" v-model="keyword" clearable></el-input>
            </el-col>
            <el-col :span="6">
                <el-button type="success" @click="getCoupon">搜索</el-button>
            </el-col>
        </el-row>
        <el-table :data="gridData" style="margin-top: 10px;">
            <el-table-column property="id" label="ID"></el-table-column>
            <el-table-column property="name" label="优惠券名称"></el-table-column>
            <el-table-column property="created_at" label="操作">
                <template slot-scope="scope">
                    <el-button size="small" @click="handleAddCoupon(scope.row)">选择</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            layout="prev, pager, next"
            :current-page="tableParams.page"
            :page-size="tableParams.per_page"
            :total="tableParams.total"
            @current-change="changePagination"
            style="margin-top:20px;text-align:right"
        >
        </el-pagination>
    </el-dialog>
    </div>
</div>
<script src="{{resource_get('static/yunshop/tinymce4.7.5/tinymce.min.js')}}"></script> 
@include('public.admin.uploadImg') 
@include('public.admin.tinymceee')
<script>
    
    let data = ({!!json_encode($data) !!})
    console.log(data)
    if(!data) {
        data = {}
    }

    var vm = new Vue({
        el: "#re_content",
        delimiters: ['[[', ']]'],
        data() {
            return {
                data:data,
                uploadShow:false,
                chooseImgName:'',
                form:{
                    is_open:data.is_open?data.is_open:0,
                    is_gift_coupon:data.is_gift_coupon?data.is_gift_coupon:0,
                    title:data.title?data.title:'',
                    img:data.img?data.img:'',
                    coupon: [],
                },
                rules:{

                },
                gridData: [],
                tableParams: {
                    page: 1,
                    per_page: 12,
                    total: 0
                },
                selectCoupons: data.coupon ? data.coupon : [],
                keyword: "",
                dialogTableVisible: false,
            }
        },
        mounted () {
        
        },
        methods: { 
            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) {
                        this.form[name] = image_url;
                        this.form[name+'_url'] = image_url;
                        console.log(this.form);
            },
            clearImg(str) {
                        this.form[str] = "";
                        this.form[str+'_url'] = "";
                        this.$forceUpdate();
            },
            getCoupon() {
                    let json = {
                        page: this.tableParams.page,
                        title: this.keyword,
                    }
                    this.$http.post('{!! yzWebFullUrl('plugin.cart-sharing.admin.set.get-coupon') !!}', json).then((response)=>{
                        let res = response.data;
                        
                        if (res.result && res.data) {
                           this.gridData = this.tableParams.page > 1 ? this.gridData.concat(res.data.data) : res.data.data;
                           this.tableParams.page = res.data.current_page;
                           this.tableParams.per_page = res.data.per_page;
                           this.tableParams.total = res.data.total;
                           this.dialogTableVisible = true;
                        } else {
                          this.$message.error(res.msg)
                        }
                })
            },
            // 加载更多优惠劵
            changePagination (page=this.tableParams.page) {
                this.tableParams.page = page;
                this.getCoupon();
            },
            
            // 添加优惠券
            handleAddCoupon (addItem) {
                // 不能重复添加优惠劵
                let isRepeat = this.selectCoupons.find(item => (item.id == addItem.id))
                if (isRepeat) {
                    return this.$message.error("已经添加过该优惠券了，请重新选择");
                } else {
                    this.selectCoupons.push(addItem);
                    this.dialogTableVisible = false;
                }
            },
            // 删除优惠券
            handleDelCoupon (index) {
                this.selectCoupons.splice(index, 1);
            },

            // 过滤优惠劵数据
            filterMap () {
                this.form.coupon = this.selectCoupons.map(item => {
                    return {
                        id: item.id,
                        amount: item.amount
                    }
                })
            },

            submitForm() {
                    this.filterMap();
                    let json=Object.assign({},this.form)

                    this.$http.post('{!! yzWebFullUrl('plugin.cart-sharing.admin.set.save-set') !!}',{data:json}).then((response)=>{
                        if (response.data.result) {
                            this.$message({message: response.data.msg,type: 'success'});
                        } else {
                            this.$message({message: response.data.msg,type: 'error'});
                    }
                })
            },
            goBack() {
                history.go(-1);
            }
        },
    });
</script>
@endsection