@extends('layouts.base')
@section('title', '榜单管理')
@section('content')
    <link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-ohter.css')}}"/>
    <link rel="stylesheet" href="{{static_url('css/public-number.css')}}">
    <link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}"/>
    <style>
        .main-panel {
            margin-top: 50px;
        }

        .add-goods {
            width: 120px;
            height: 120px;
            border: dashed 1px #dde2ee;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .num {
            width: 60px;
            height: 40px;

        }

        .num .el-input__inner {
            width: 60px;
            height: 40px;
        }

    </style>
    <div id='re_content'>
        <div class="vue-crumbs">
            <a @click="goback">榜单列表</a> > 添加榜单
        </div>
        <div class="con">
            <div class="setting">
                <div class="block">
                    <el-form label-width="15%">
                        <div class="title" style="justify-content: space-between;">
                            <div style="display:flex;align-items:center;"><span
                                        style="width: 4px;height: 18px;background-color: #29ba9c;margin-right:15px;display:inline-block;"></span><b>添加榜单</b>
                            </div>
                        </div>
                        <el-form-item label="榜单名称">
                            <el-input v-model="form.name" type="text" style="width:50%;"></el-input>
                        </el-form-item>
                        <el-form-item label="榜单分类">
                            <el-select v-model="form.category_id" placeholder="榜单分类"
                                       style="margin-right:16px;width:12%;" clearable>
                                <el-option
                                        v-for="item in category"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="榜单显示商品数量">
                            <el-input v-model="form.show_count" type="text" style="width:20%;"></el-input>
                        </el-form-item>
                        <el-form-item label="排行周期">
                            <el-select v-model="form.rank_type" placeholder="排行周期"
                                       style="margin-right:16px;width:12%;">
                                <el-option
                                        v-for="item in options"
                                        :key="item.id"
                                        :label="item.label"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="榜单商品" prop="goods_id">
                            <span>指定商品</span>
                            <div style="display:flex;flex-wrap: wrap;width:70%;">
                                <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="榜单商品" prop="catetory_id">
                            <span>指定分类商品</span>
                            <div class="form-group">
                                <label class="col-xs-12 col-sm-3 col-md-2 control-label"></label>
                                <div class="col-sm-8 col-xs-12 category-container">
                                    {!!$catetory_menus!!}
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-xs-12 col-sm-3 col-md-2 control-label"></label>
                                <div class="btn btn-info col-sm-2 col-xs-2 @if (isset($type) && $type == 'edit') editCategory @else plusCategory @endif">
                                    添加分类
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item label="榜单商品" prop="filtering_id">
                            <span>指定标签商品</span>
                            @foreach ($filtering as $parent)
                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-3 col-md-1 control-label"></label>
                                    <div class="col-xs-12 chks">
                                        <label class="checkbox-inline">
                                            <input type="checkbox" onclick="quang(this)"
                                                   value="{{$parent['id']}}"
                                                   @if ( in_array( $parent['id'],$filtering_ids)) checked="true" @endif /> {{$parent['name']}}
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-xs-12 col-sm-3 col-md-2 control-label"></label>
                                    <div id="{{$parent['id']}}" class="col-sm-9 col-xs-12 chks">
                                        @foreach ($parent['value'] as $son)
                                            <label class="checkbox-inline">
                                                <input type="checkbox" class='duo' name="widgets[filtering][]"
                                                       value="{{$son['id']}}"
                                                       @if ( in_array( $son['id'],$filtering_ids)) checked="true" @endif /> {{$son['name']}}
                                            </label>
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach
                        </el-form-item>
                        <upload-img :upload-show="uploadShow" :name="chooseImgName" @replace="changeProp"
                                    @sure="sureImg"></upload-img>
                        <el-form-item label="榜单banner" prop="head_img_url">
                            <div class="upload-box" @click="openUpload('banner')"
                                 v-if="!form.banner_url">
                                <i class="el-icon-plus" style="font-size:32px"></i>
                            </div>
                            <div @click="openUpload('banner')" class="upload-boxed"
                                 v-if="form.banner">
                                <img :src="form.banner_url" alt=""
                                     style="width:150px;height:150px;border-radius: 5px;cursor: pointer;">
                                <div class="upload-boxed-text">点击重新上传</div>
                            </div>
                            <div class="tip">建议尺寸:750*1334 , 为长方形图片</div>
                        </el-form-item>
                    </el-form>
                    <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)" v-if="!scope.row.checked">
                                            选择
                                        </el-button>
                                        <el-button disabled v-if="scope.row.checked">
                                            选择
                                        </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>
                    <div class="confirm-btn">
                        <el-button @click="submit" type="primary">提交</el-button>
                    </div>
                </div>
                </template>
            </div>
        </div>
    </div>
    @include('public.admin.uploadImg')
    {!!$catetory_script!!}
    <script>
        const custom = `{!! resource_get('plugins/pack-fixed-price/assets/image/custom.png') !!}`;
        const normal = `{!! resource_get('plugins/pack-fixed-price/assets/image/normal.png') !!}`;
        var vm = new Vue({
            el: "#re_content",
            delimiters: ['[[', ']]'],
            data() {
                let info =
                {!!json_encode($data?:'{}') !!}
                    return {
                    dialogVisible: false,
                    custom: custom,
                    normal: normal,
                    info: info,
                    id: info.id ? info.id : '',
                    loading: false,
                    page_total: 0,
                    page_size: 0,
                    current_page: 0,
                    goodsShow: false,
                    goods_list: [],
                    uploadShow: false,
                    chooseImgName: '',
                    uploadListShow: false,
                    chooseImgListName: '',
                    thumbList: [],
                    area_ids: [],
                    province_ids: [],
                    areas: '',
                    areaIds: '',
                    provinceIds: '',
                    chooseAreas: [],
                    chooseAreaIds: [],
                    chooseProvinceIds: [],
                    centerDialogVisible: false,
                    showVisible: false,
                    treeData: [],
                    props: {
                        label: 'areaname',
                        children: 'children',
                        isLeaf: 'isLeaf'
                    },
                    category: [],
                    options: [
                        {
                            id: 1,
                            label: '天'
                        },
                        {
                            id: 2,
                            label: '周'
                        },
                        {
                            id: 3,
                            label: '月'
                        },
                        {
                            id: 4,
                            label: '季度'
                        },
                    ],
                    search_form: {},
                    form: {
                        name: info.name ? info.name : '',
                        rank_type: info.rank_type ? info.rank_type : '',
                        category_id: info.category_id ? info.category_id : '',
                        show_count: info.show_count ? info.show_count : '',
                        goods_count: info.goods_count ? info.goods_count : '',
                        rule: info.hasOwnProperty('rule') ? String(info.rule) : '0',
                        banner: info.banner ? info.banner : '',
                        banner_url: info.banner_url ? info.banner_url : '',
                        goods_id: [],
                        catetory_id: '',
                        filtering_id: '',
                    },
                }
            },
            mounted() {
                $(".img").removeAttr("style");
                if (this.info.hasOwnProperty('goods')) {
                    this.info.goods.forEach((item, index) => {
                        this.thumbList.push(item)
                        this.form.goods_id.push(item.id)
                    })
                }
                this.$http.post('{!! yzWebFullUrl('plugin.goods-ranking.admin.category.category-list') !!}')
                    .then(function (response) {
                            this.category = response.data.data.data;
                        }
                    );
            },
            methods: {
                goback() {
                    window.history.go(-1)
                },
                openDia() {
                    this.dialogVisible = true
                },
                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;

                },
                openGoods() {
                    this.goodsShow = true;
                },
                currentChange(val) {
                    this.loading = true;
                    this.$http.post('{!! yzWebFullUrl('plugin.goods-ranking.admin.goods.get-list') !!}', {
                        page: val,
                        search: this.search_form.keyword,
                        rank_id: this.id,
                    }).then(function (response) {
                            let datas = response.data.data;
                            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;
                            this.goods_list.forEach((item, index) => {
                                if (this.form.goods_id == item.id) {
                                    item.checked = true
                                } else {
                                    item.checked = false
                                }
                            })
                            this.goods_list.push({})
                            this.goods_list.splice(this.goods_list.length - 1, 1)
                        }, function (response) {
                            console.log(response);
                            this.loading = false;
                        }
                    );
                },
                delGoods(item) {
                    this.thumbList.forEach((list, index) => {
                        if (list.id == item.id) {
                            this.goods_list.forEach((obj, index) => {
                                if (obj.id == item.id) {
                                    obj.checked = false
                                }
                            })
                            this.thumbList.splice(index, 1)
                            this.form.goods_id.splice(index, 1)
                        }
                    })
                    this.goods_list.push({})
                    this.goods_list.splice(this.goods_list.length - 1, 1)
                },
                searchGoods() {
                    if (!this.search_form.keyword) {
                        this.$message({message: '请输入关键词搜索', type: 'error'});
                        return
                    }
                    let that = this;
                    this.$http.post('{!! yzWebFullUrl('plugin.goods-ranking.admin.goods.get-list') !!}', {
                        search: this.search_form.keyword,
                        rank_id: this.id
                    }).then(response => {
                        if (response.data.result) {
                            let data = response.data.data;
                            this.page_total = data.total;
                            this.goods_list = data.data;
                            this.page_size = data.per_page;
                            this.current_page = data.current_page;
                            this.goods_list.forEach((item, index) => {
                                if (this.form.goods_id.includes(item.id)) {
                                    item.checked = true
                                } else {
                                    item.checked = false
                                }
                            })
                            this.$forceUpdate()
                        } else {
                            this.$message({message: response.data.msg, type: 'error'});
                        }

                    }, response => {
                        this.$message({message: response.data.msg, type: 'error'});
                    });
                },
                sureGoods(item) {
                    if (item.status == 1) {
                        this.$message({message: '商品已关联其他榜单', type: 'error'});
                        return
                    } else {
                        item.checked = true
                        this.thumbList.push(item)
                        this.form.goods_id.push(item.id)
                        this.goods_list.push({})
                        this.goods_list.splice(this.goods_list.length - 1, 1)
                        this.goods_list.forEach((item, index) => {
                            if (this.form.goods_id.includes(item.id)) {
                                item.checked = true
                            } else {
                                item.checked = false
                            }
                        })
                        this.goods_list.push({})
                        this.goods_list.splice(this.goods_list.length - 1, 1)
                        this.goodsShow = false
                    }
                },
                submit() {
                    {{--if ($(':input[name="category[parentid][]"]').val() != 0 && $(':input[name="category[childid][]"]').val() == 0) {--}}
                    {{--    $('#myTab a[href="#tab_basic"]').tab('show');--}}
                    {{--    Tip.focus(':input[name="category[childid][]"]', "请选择二级分类!");--}}
                    {{--    return false;--}}
                    {{--}--}}
                    {{--@if($shopset['cat_level'] == 3)--}}
                    {{--if ($(':input[name="category[childid][]"]').val() != 0 && $(':input[name="category[thirdid][]"]').val() == 0) {--}}
                    {{--    $('#myTab a[href="#tab_basic"]').tab('show');--}}
                    {{--    Tip.focus(':input[name="category[thirdid][]"]', "请选择三级分类!");--}}
                    {{--    return false;--}}
                    {{--}--}}
                    {{--        @endif--}}
                    var parent_status = 0;
                    $(':input[name="category[parentid][]"]').each(function (i) {
                        if ($(this).val() == 0) {
                            parent_status = 1;
                        }
                    });
                    // if (parent_status != 0) {
                    //     Tip.focus(':input[name="category[parentid][]"]', "请选择一级分类!");
                    //     return false;
                    // }
                    var child_status = 0;
                    $(':input[name="category[childid][]"]').each(function (i) {
                        if ($(this).val() == 0) {
                            child_status = 1;
                        }
                    });
                    // if (child_status != 0) {
                    //     Tip.focus(':input[name="category[childid][]"]', "请选择二级分类!");
                    //     return false;
                    // }
                    this.form.goods_ids = this.form.goods_id.join(',');
                    var catetory_id = '';
                    @if($shopset['cat_level'] == 2 || is_null($shopset['cat_level']))
                    $(':input[name="category[childid][]"]').each(function (i) {
                        if (0 == i) {
                            catetory_id = $(this).val();
                        } else {
                            catetory_id += ("," + $(this).val());
                        }
                    });
                            @elseif($shopset['cat_level'] == 3)
                    var third_status = 0;
                    $(':input[name="category[thirdid][]"]').each(function (i) {
                        if ($(this).val() == 0) {
                            third_status = 1;
                        }
                        if (0 == i) {
                            catetory_id = $(this).val();
                        } else {
                            catetory_id += ("," + $(this).val());
                        }
                    });
                    // if (third_status != 0) {
                    //     Tip.focus(':input[name="category[thirdid][]"]', "请选择三级分类!");
                    //     return false;
                    // }
                    @endif
                        this.form.goods_category_ids = catetory_id;
                    var filtering_id = '';
                    $("input:checkbox:checked").each(function (i) {
                        if (0 == i) {
                            filtering_id = $(this).val();
                        } else {
                            filtering_id += ("," + $(this).val());
                        }
                    });
                    this.form.goods_filtering_ids = filtering_id;
                    let json = Object.assign({}, this.form)
                    json.start_at = String(json.start_at).slice(0, 10)
                    json.end_at = String(json.end_at).slice(0, 10)
                    let ajaxurl = '{!! yzWebFullUrl('plugin.goods-ranking.admin.rank.add') !!}';
                    if (this.id != '') {
                        ajaxurl = '{!! yzWebFullUrl('plugin.goods-ranking.admin.rank.edit') !!}';
                    }
                    this.$http.post(ajaxurl, {
                        'data': json,
                        'id': this.id
                    }).then(function (response) {
                        if (response.data.result) {
                            this.$message({message: response.data.msg, type: 'success'});
                            window.location.href = '{!! yzWebFullUrl('plugin.goods-ranking.admin.rank.index') !!}'
                        } else {
                            this.$message({message: response.data.msg, type: 'error'});
                        }
                    }, function (response) {
                        this.$message({message: response.data.msg, type: 'error'});

                    })
                },
            },
        });
    </script>
    <script type="text/javascript">
        $('#brand').select2();

        $('.plusCategory').click(function () {
            appendHtml = $(this).parents().find('.tpl-category-container').html();

            $(this).parents().find('.category-container').append('<div class="row row-fix tpl-category-container">' + appendHtml + '<div>');
        });

        $('.editCategory').click(function () {
            appendHtml = $(this).parents().find('.tpl-category-container').html();

            $(this).parents().find('.category-container').append('<div class="row row-fix tpl-category-container">' + appendHtml + '<div>');
            $('.category-container').children(':last').children().children('select').find("option[value='0']").attr("selected", true)
            var seconde_category = $('.category-container').children(':last').children().children('select:eq(1)');
            var third_category = $('.category-container').children(':last').children().children('select:eq(2)');

            if (seconde_category.length > 0) {
                seconde_category.children(':gt(0)').remove();
            }
            if (third_category.length > 0) {
                third_category.children(':gt(0)').remove();
            }
        });

        $(document).on('click', '.delCategory', function () {
            var count = $(this).parents('.tpl-category-container').siblings('.tpl-category-container').length;

            if (count >= 1) {
                $(this).parents('.tpl-category-container').remove();
            } else {
                alert('商品分类必选');
            }
        });

        function quang(obj) {
            var parent_id = $(obj).val();
            var xuan = $("#" + parent_id).find('.duo');

            if ($(obj).prop('checked')) {
                for (var i = 0; i < xuan.length; i++) {
                    $(xuan[i]).prop('checked', true);
                }
            } else {
                for (var i = 0; i < xuan.length; i++) {
                    $(xuan[i]).prop('checked', false);
                }
            }
        }
    </script>
@endsection