@extends('layouts.base')
@section('title', '团购')
@section('content')
    <style>
        .content {
            background: #eff3f6;
            padding: 10px !important;
        }

        .con {
            padding-bottom: 20px;
            position: relative;
            min-height: 100vh;
            background-color: #fff;
            border-radius: 8px;
        }

        .con .setting .block {
            padding: 10px;
            background-color: #fff;
            border-radius: 8px;
        }

        .con .setting .block .title {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        .confirm-btn {
            width: calc(100% - 266px);
            position: fixed;
            bottom: 0;
            right: 0;
            margin-right: 10px;
            line-height: 63px;
            background-color: #ffffff;
            box-shadow: 0px 8px 23px 1px rgba(51, 51, 51, 0.3);
            background-color: #fff;
            text-align: center;
        }

        b {
            font-size: 14px;
        }

        .vue-crumbs a {
            color: #333;
        }

        .vue-crumbs a:hover {
            color: #29ba9c;
        }

        .vue-crumbs {
            margin: 0 20px;
            font-size: 14px;
            color: #333;
            font-weight: 400;
            padding-bottom: 10px;
            line-height: 32px;
        }

        .panel {
            margin-bottom: 10px !important;
            padding-left: 20px;
            border-radius: 10px;
        }

        .panel .active a {
            background-color: #29ba9c !important;
            border-radius: 18px !important;
            color: #fff;
        }

        .panel a {
            border: none !important;
            background-color: #fff !important;
        }

        .content {
            background: #eff3f6;
            padding: 10px !important;
        }

        .con {
            padding-bottom: 20px;
            border-radius: 8px;
            position: relative;
            min-height: 100vh;
            background-color: #fff;
        }

        .con .setting .block {
            padding: 10px;
            background-color: #fff;
            border-radius: 8px;
            margin-bottom: 10px;
        }

        .con .setting .block .title {
            font-size: 18px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .confirm-btn {
            width: calc(100% - 266px);
            position: fixed;
            bottom: 0;
            right: 0;
            margin-right: 10px;
            line-height: 63px;
            background-color: #ffffff;
            box-shadow: 0px 8px 23px 1px rgba(51, 51, 51, 0.3);
            background-color: #fff;
            text-align: center;
        }

        b {
            font-size: 14px;
        }

        .add-goods {
            width: 120px;
            height: 120px;
            border: dashed 1px #dde2ee;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    </style>
    <link rel="stylesheet" href="{{resource_get('plugins/package-deliver/views/index.css')}}">
    <!-- <script src="{{resource_get('app/common/components/ueditor/dialogs/map/getscript.js?v=1.1&ak=&services=true&t=20130716024058')}}"></script>  -->
    <!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=QXSZyPZk26shrYzAXjTkDLx5LbRCHECz"></script> -->
    <!-- app\common\components\ueditor\dialogs\map\getscript.js -->
    <div class="all">
        <div id="app" v-cloak>

            <el-form ref="form" :model="form" :rules="rules" label-width="15%">
                <div class="vue-main">
                    <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="title">
                            <el-input v-model="form.title" style="width:70%;"></el-input>
                        </el-form-item>
                        <el-form-item label="颜色" prop="color">
                            <el-color-picker v-model="form.color"></el-color-picker>
                        </el-form-item>

                        <el-form-item label="分享图片" prop="share_img">
                            <div class="upload-box" @click="openUpload('share_img')" v-if="!form.share_img">
                                <i class="el-icon-plus" style="font-size:32px"></i>
                            </div>
                            <div @click="openUpload('share_img')" class="upload-boxed" v-if="form.share_img">
                                <img :src="form.share_img_url" alt=""
                                     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-date-picker
                                    v-model="times"
                                    type="datetimerange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    align="right">
                            </el-date-picker>
                        </el-form-item>

                        <el-form-item label="自提点范围" prop="is_all_area">
                            <el-radio-group v-model="form.is_all_area" style="margin-top:10px">
                                <el-radio :label="1">全部自提点</el-radio>
                                <el-radio :label="0">指定地区自提点</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="自提范围">

                            <template slot-scope="scope">
                                <el-button @click="openVisible()" type="primary">选择区域</el-button>
                                <div style="text-align:left;margin-top:20px;">
                                        <span class="item" v-for="(item,index) in form.areas">
                                                                    [[item.areaname]],
                                                                  </span>

                                </div>
                            </template>

                        </el-form-item>
                        <el-form-item label="注：">
                            指定地区自提点,至少选择一个自提点
                            活动开始以后不支持修改自提点范围
                        </el-form-item>
                        <el-form-item label="活动商品">
                            <div style="display:flex;flex-wrap: wrap;">
                                <div class="good" v-for="(item,index,key) in thumbList"
                                     style="width:120px;display:flex;margin-right:20px;flex-direction: column">
                                    <div class="img" style="position:relative;">
                                        <a style="color:#333;">
                                            <div style="width: 20px;height: 20px;background-color: #dde2ee;display:flex;align-items:center;justify-content:center; #999999;position:absolute;right:-10px;top:-10px;border-radius:50%;"
                                                 @click="delGoods(item)">X
                                            </div>
                                        </a>
                                        <img :src="item.thumb" style="width:120px;height:120px;">
                                    </div>
                                    <div style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;font-size:12px;">
                                        [[item.title]][ID:[[item.id]]]
                                    </div>
                                </div>
                                <div class="add-goods" @click="openGoods()">
                                    <a style="font-size:32px;color: #999999;"><i class="el-icon-plus"></i></a>
                                    <div style="color: #999999;">选择商品</div>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item label="注：">
                            只能选择平台自营、租赁、供应商、聚合供应链商品!其中,如果一个活动包含租赁商品，则其余商品也必须为租赁商品！
                        </el-form-item>


                    </div>
                </div>
                <div class="vue-head" style="margin-top:20px">
                    <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="desc"> -->
                        <div style="width:85%;margin:0 auto">
                            <tinymceee v-model="form.description"></tinymceee>
                        </div>
                        <!-- </el-form-item> -->
                    </div>
                </div>
                <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>
                <el-dialog title="请选择地区" :visible.sync="centerDialogVisible" center v-if="showVisible"
                           :before-close="beforeClose">
                    <el-tree
                            v-loading="loading"
                            :props="defaultProps"
                            node-key="id"
                            :default-checked-keys="chooseItem.areaIds"
                            :default-expanded-keys="chooseItem.expend_ids"
                            show-checkbox
                            lazy
                            @check-change="checkAreas"
                            ref="addressTree"
                            :data="treeData"
                            :load="loadNode"
                            style="height:500px;overflow:auto"
                    >
                    </el-tree>

                    <span slot="footer" class="dialog-footer">
                        <el-button @click="beforeClose">取 消</el-button>
                        <el-button type="primary" @click="saveAreas">确 定</el-button>
                    </span>

                </el-dialog>
                <el-dialog :visible.sync="goodsShow" width="60%" center title="选择商品">
                    <div>
                        <div style="text-align: center">
                            <el-input v-model="search_form.keyword" style="width:80%"></el-input>
                            <el-button type="primary" @click="searchGoods()" style="margin-left:20px;">搜索</el-button>
                        </div>
                        <el-table :data="goods_list" style="width: 100%;height:500px;overflow:auto">
                            <el-table-column label="ID" prop="id" align="center"></el-table-column>
                            <el-table-column label="商品信息" align="center">
                                <template slot-scope="scope">
                                    <div v-if="scope.row"
                                         style="display:flex;align-items: center;justify-content:center;">
                                        <img v-if="scope.row.thumb" :src="scope.row.thumb"
                                             style="width:50px;height:50px"></img>
                                        <div style="margin-left:10px">[[scope.row.title]]</div>
                                    </div>
                                </template>
                            </el-table-column>

                            <el-table-column prop="refund_time" label="操作" align="center">
                                <template slot-scope="scope">
                                    <el-button @click="sureGoods(scope.row)">
                                        选择
                                    </el-button>

                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <el-row>
                        <el-col :span="24" align="right" migra style="padding:15px 5% 15px 0" v-loading="loading">
                            <el-pagination background layout="prev, pager, next" @current-change="currentChange"
                                           :total="page_total"
                                           :page-size="page_size" :current-page="current_page"></el-pagination>
                        </el-col>
                    </el-row>
                </el-dialog>

            </el-form>

            <upload-img :upload-show="uploadShow" :name="chooseImgName" @replace="changeProp"
                        @sure="sureImg"></upload-img>
            <upload-img-list :upload-list-show="uploadListShow" :name="chooseImgListName" @replace="changeListProp"
                             @sure="sureImgList"></upload-img-list>
        </div>
    </div>
    <script src="{{resource_get('static/yunshop/tinymce4.7.5/tinymce.min.js')}}"></script>
    <!-- <script src="{{resource_get('static/yunshop/tinymceTemplate.js')}}"></script> -->

    @include('public.admin.tinymceee')
    @include('public.admin.uploadImg')
    @include('public.admin.uploadImgList')


    <script>
        // var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
        // var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
        // var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮
        /*缩放控件type有四种类型:
        BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/
        var app = new Vue({
            el: "#app",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                let id = {!! $id?:0 !!};
                console.log(id);
                return {
                    id: id,
                    form: {
                        title: '',
                        color: '',
                        is_all_area: '',
                        description: '',
                        goods: [],
                        areaData: {},
                    },
                    uploadShow: false,
                    chooseImgName: '',
                    submit_url: '',
                    times: [],
                    uploadListShow: false,
                    chooseImgListName: '',
                    list: [],
                    dialogVisible: false,
                    thumbList: [],
                    goodsShow: false,
                    goods_list: [],
                    page_total: 0,
                    page_size: 0,
                    current_page: 0,
                    search_form: {
                        keyword: '',
                    },
                    selectGoods: [],
                    areas: {
                        ids: []
                    },
                    chooseItem: {
                        areaIds: [],
                        expend_ids: []
                    },
                    centerDialogVisible: false,
                    showVisible: false,
                    defaultProps: {
                        label: 'areaname',
                        children: 'children',
                        isLeaf: 'isLeaf'
                    },
                    loading: false,
                    treeData: [],
                    street: [],
                    rules: {
                        store_name: {required: true, message: '请输入门店名称'},
                        thumb: {required: true, message: '请选择门店logo'},
                        banner_thumb: {required: true, message: '请选择门店banner图'},
                        category_id: {required: true, message: '请选择分类'},
                        province_id: {required: true, message: '请选择地址'},
                        address: {required: true, message: '请输入详细地址'},
                    },

                }
            },
            created() {

            },
            mounted() {
                // this.initMap();
                this.id = this.getParam("groupId");
                this.submit_url = `{!! yzWebFullUrl('plugin.package-deliver.admin.communityGroups.editPost') !!}`;
                if (this.id) {
                    this.getData();
                }
            },
            methods: {
                openVisible() {
                    this.centerDialogVisible = true;
                    this.showVisible = true;
                    this.chooseItem.areaIds = this.areas.ids;

                },
                loadNode(node, resolve) {
                    this.loading = true;
                    this.$http.get("{!! yzWebUrl('area.list', ['parent_id'=> '']) !!}" + node.data.id).then(response => {

                        response.data.data.forEach(function (city) {
                            city.isLeaf = false;
                            if (city.level == 3) {
                                city.isLeaf = true;
                            }

                        })
                        resolve(response.data.data);
                        // 载入数据后,刷新已选中
                        this.loading = false;
                    }, response => {
                        console.log(response);
                    });

                },
                checkAreas(node, checked, children) {

                    if (checked && node.level < 3) {

                        if (this.chooseItem.expend_ids.indexOf(node.id) == -1) {
                            this.chooseItem.expend_ids.push(node.id)
                        }
                        //子集也展开
                        if (node.level == 1) {

                            this.$http.get("{!! yzWebUrl('area.list', ['parent_id'=> '']) !!}" + node.id).then(response => {
                                if (response.data.data.length > 0) {
                                    for (var i = 0; i < response.data.data.length; i++) {
                                        if (this.chooseItem.expend_ids.indexOf(response.data.data[i].id) == -1) {
                                            this.chooseItem.expend_ids.push(response.data.data[i].id)
                                        }
                                    }
                                }
                            }, response => {
                                console.log(response);
                            });
                        }

                    }
                },
                saveAreas() {
                    var data = [];
                    var ids = [];
                    var eids = [];

                    this.$refs.addressTree.getCheckedNodes().forEach(function (node) {
                        data.push({'area_id': node.id, 'level': node.level, 'areaname': node.areaname});
                        ids.push(node.id);
                        if (node.level != 3) {
                            eids.push(node.id);
                        }
                    });
                    this.$refs.addressTree.getHalfCheckedNodes().forEach(function (node) {
                        data.push({'area_id': node.id, 'level': node.level, 'areaname': node.areaname});
                        // ids.push(node.id);
                        if (node.level != 3) {
                            eids.push(node.id);
                        }
                    });
                    this.areas.ids = ids;
                    this.chooseItem.areaSaveData = data;
                    this.chooseItem.expend_ids = eids;
                    this.form.areas = data;
                    console.log(this.chooseItem);
                    this.centerDialogVisible = false
                    this.showVisible = false;


                },
                beforeClose() {
                    this.centerDialogVisible = false;
                    this.showVisible = false;
                },
                getData() {
                    let loading = this.$loading({
                        target: document.querySelector(".content"),
                        background: 'rgba(0, 0, 0, 0)'
                    });
                    this.$http.post('{!! yzWebFullUrl('plugin.package-deliver.admin.communityGroups.getGroupOne') !!}', {id: this.id}).then(function (response) {
                            if (response.data.result) {
                                this.form = {
                                    ...response.data.data,
                                };
                                this.form.share_img_url = this.form.share_img || ''
                                this.times = [new Date(response.data.data.start_time), new Date(response.data.data.end_time)];
                                this.form.goods = []
                                if (response.data.data.goods) {
                                    this.selectGoods = response.data.data.goods

                                    this.selectGoods.forEach((item, index, key) => {
                                        this.thumbList.push(item)
                                        this.form.goods.push(item.id);
                                    })
                                }

                                if (response.data.data.has_many_area) {
                                    var areas = response.data.data.has_many_area;
                                    this.form.areas = [];
                                    areas.forEach((item, index) => {
                                        if(!item.belongs_to_area){
                                            return
                                        }
                                        if (item.level != 3) {
                                            this.chooseItem.expend_ids.push(item.area_id);
                                        } else {
                                            this.areas.ids.push(item.area_id);
                                        }
                                        var data = {
                                            'area_id': item.area_id,
                                            'level': item.level,
                                            'areaname': item.belongs_to_area.areaname,
                                            checked: true
                                        };
                                        this.form.areas.push(data);

                                    })

                                    console.log(this.chooseItem);
                                }
                            } else {
                                this.$message({message: response.data.msg, type: 'error'});
                            }
                            loading.close();
                        }, function (response) {
                            this.$message({message: response.data.msg, type: 'error'});
                            loading.close();
                        }
                    );
                },
                goParent() {
                    window.location.href = `{!! yzWebFullUrl('plugin.package-deliver.admin.communityGroups.manage') !!}`;
                },
                submitForm(formName) {
                    // console.log(this.form)
                    // console.log(this.$refs);
                    let that = this;
                    let json = {
                        title: this.form.title,
                        color: this.form.color,
                        description: this.form.description,
                        share_img: this.form.share_img,
                        // start_time:this.form.start_time,
                        // end_time:this.form.end_time,
                        // province_id:this.form.province_id,
                        // city_id:this.form.city_id,
                        // district_id:this.form.district_id,
                        // street_id:this.form.street_id,
                        // min_people_count:this.form.min_people_count,
                        // min_order_count:this.form.min_order_count,
                        // min_total_amount:this.form.min_total_amount,
                        is_all_area: this.form.is_all_area,
                        // group_condition_status:this.form.group_condition_status,
                        goods: this.form.goods,
                        areas: this.chooseItem.areaSaveData,
                    };

                    if (this.times && this.times.length > 0) {
                        json.start_time = (new Date(this.times[0]).getTime()) / 1000;
                        json.end_time = (new Date(this.times[1]).getTime()) / 1000;
                    }

                    // console.log(json);
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            let loading = this.$loading({
                                target: document.querySelector(".content"),
                                background: 'rgba(0, 0, 0, 0)'
                            });
                            this.$http.post(this.submit_url, {group: json, id: this.id}).then(response => {
                                if (response.data.result) {
                                    this.$message({type: 'success', message: '操作成功!'});
                                    this.goParent();
                                } else {
                                    let msg = '';
                                    let tips = '';
                                    try {
                                        msg = JSON.parse(response.data.msg);
                                    } catch (e) {
                                        tips = response.data.msg;
                                    }
                                    if (msg instanceof Object) {
                                        for (let key in msg) {
                                            tips += msg[key];
                                        }
                                    }
                                    this.$message({message: tips ? tips : response.data.msg, type: 'error'});
                                }
                                loading.close();
                            }, response => {
                                loading.close();
                            });
                        } else {
                            // console.log('error submit!!');
                            return false;
                        }
                    });
                },

                goBack() {
                    history.go(-1)
                },
                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;
                    this.form[name + '_url'] = image_url;
                },
                clearImg(str, type, index) {
                    if (!type) {
                        this.form[str] = "";
                        this.form[str + '_url'] = "";
                    } else {
                        this.form[str].splice(index, 1);
                        this.form[str + '_url'].splice(index, 1);
                    }
                    this.$forceUpdate();
                },

                openListUpload(str) {
                    this.chooseImgListName = str;
                    this.uploadListShow = true;
                },
                changeListProp(val) {
                    if (val == true) {
                        this.uploadListShow = false;
                    } else {
                        this.uploadListShow = true;
                    }
                },
                sureImgList(name, image, image_url) {
                    // console.log(name)
                    // console.log(image)
                    // console.log(image_url)
                    if (!this.form[name] || !this.form[name + '_url']) {
                        this.form[name] = [];
                        this.form[name + '_url'] = [];
                    }
                    image.forEach((item, index) => {
                        this.form[name].push(item);
                        this.form[name + '_url'].push(image_url[index]);
                    })
                    // console.log(this.form)
                },
                getParam(name) {
                    return location.href.match(new RegExp("[?#&]" + name + "=([^?#&]+)", "i"))
                        ? RegExp.$1
                        : "";
                },
                gotoDelivery() {
                    let link = `{!! yzWebFullUrl('plugin.store-cashier.admin.delivery.index') !!}` + `&store_id=` + this.id;
                    window.location.href = link;
                },
                openGoods() {
                    this.goodsShow = true;
                },
                delGoods(item) {
                    this.thumbList.forEach((list, index) => {
                        if (list.id == item.id) {
                            this.thumbList.splice(index, 1)
                            this.form.goods.splice(index, 1)
                        }
                    })

                },
                currentChange(val) {
                    this.loading = true;
                    this.$http.post('{!! yzWebFullUrl('plugin.package-deliver.admin.communityGroups.getSearchGoodsJson') !!}', {
                        page: val,
                        search: this.search_form.keyword
                    }).then(function (response) {
                            let datas = response.data.data.goods;
                            this.page_total = datas.total;
                            this.goods_list = datas.data;
                            this.page_size = datas.per_page;
                            this.current_page = datas.current_page;
                            this.loading = false;
                        }, function (response) {
                            // console.log(response);
                            this.loading = false;
                        }
                    );
                },
                searchGoods() {
                    let that = this;
                    this.$http.post('{!! yzWebFullUrl('plugin.package-deliver.admin.communityGroups.getSearchGoodsJson') !!}', {search: this.search_form.keyword}).then(response => {
                        if (response.data.result) {
                            let data = response.data.data.goods;
                            this.page_total = data.total;
                            this.goods_list = data.data;
                            this.page_size = data.per_page;
                            this.current_page = data.current_page;
                        } else {
                            this.$message({message: response.data.msg, type: 'error'});
                        }

                    }, response => {
                        this.$message({message: response.data.msg, type: 'error'});
                    });
                },
                sureGoods(item) {
                    var status = 0;
                    // console.log(this.form.goods);
                    if (this.form.goods.length > 0) {
                        this.form.goods.some((list, index, key) => {
                            if (list == item.id) {
                                status = 1
                                this.$message({message: '该商品已被选中', type: 'error'});
                                return true
                            }
                        })
                    }
                    if (status == 1) {
                        return false
                    }

                    this.thumbList.push(item)
                    this.form.goods.push(item.id)
                },
            },
        })

    </script>
@endsection