@extends('layouts.base')
@section('title', '画册管理')
@section('content')
    <link rel="stylesheet" href="{{static_url('css/public-number.css')}}">
    <link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}"/>
    {{--图片预览引用--}}
    <link rel="stylesheet" href="//at.alicdn.com/t/font_432132_fyuwx7v2noa.css" />
    <link rel="stylesheet" href="{{static_url('css/viewer.min.css')}}">
    <script type="text/javascript" src="{{static_url('js/viewer.min.js')}}"></script>
    {{--图片预览引用--}}
    <style xmlns:v-bind="http://www.w3.org/1999/xhtml">
        .rightlist #app .rightlist-head{padding:15px 0;line-height:50px;}
        .rightlist #app{margin-left:30px;}
        .rightlist-head-con{float:left;padding-right:20px;font-size:16px;color:#888;}
        .el-form-item__label{padding-right:30px;}
        .mouse-active{cursor:pointer;border:1px dotted #409EFF;border-radius: 4px;}
        /* 滑块选择小白点 */
        .el-switch.is-checked .el-switch__core::after {left: 100%;margin-left: -17px;}
        .el-switch__core::after {content: "";position: absolute;top: 1px;left: 1px;border-radius: 100%;transition: all .3s;width: 16px;height: 16px;background-color: #fff;}
        .draw-picture{width:60px;height:66px;}
        .draw-goods{width:60px;height:60px;float:left;}
        .draw-goods-wrap{display:flex;align-items: center;}
        .el-icon-edit{font-size:16px;padding:0 15px;color:#409EFF;cursor: pointer;}
        .edit-i{display:none;}
        .el-table_1_column_1:hover .edit-i{font-weight:900;padding:0;margin:0;display:inline-block;}

        .el-form-item {
            margin-bottom: 0 !important;
        }
    </style>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_913727_zrmdutznqpd.css">
    <div id="app" v-loading="all_loading" >
        <template>
            <el-container>
                <el-header height="auto">
                    <div class="">
                        <h4 class="card-title">画册管理--图片管理</h4>
                        <div style="font-weight:600;padding-left:30px;">
                            <div>画册名称：[[picture.picture_name]]</div>
                            <div>创建时间：[[picture.created_at]]</div>
                            <div>画册图片数量：[[picture.count]]</div>
                            <el-button type="primary" icon="el-icon-plus" @click="openUpload('thumb_more','1','more')">添加图片</el-button>
                            <el-button type="primary" icon="el-icon-plus" @click="batchSave()">保存设置</el-button>
                        </div>
                </el-header>
                {{--表格start--}}
                <el-main>
                    <template>
                        <el-table :data="list">
                            <el-table-column label="排序" align="center">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.ranking"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="画册图片名称" align="center">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.picture_name"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column label="画册图片" align="center">
                                <template slot-scope="scope">
                                    <div id="tp_name_0">
                                        <image style="width: 70px; height: 70px" v-if="scope.row.change_image" :src="scope.row.change_image"></image>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="图片商品" align="center">
                                <template slot-scope="scope">
                                    <el-form ref="form" :model="form" v-loading="loading">
                                        <el-form-item prop="goods_id">
                                            <div @click="openGoods(scope)" v-if="!scope.row.has_one_goods.thumb">
                                                <i class="el-icon-plus" style="font-size:20px"></i>
                                            </div>
                                            <div style="text-align:center;" v-if="scope.row.has_one_goods" :id=`pic_show_${scope.$index}`>
                                                <div style="position: relative">
                                                    <image style="width: 60px; height: 60px" :src="scope.row.has_one_goods.thumb" v-if="scope.row.has_one_goods.thumb" @click="openGoods(scope)"></image>
                                                    <a href="#" title="删除" v-if="scope.row.has_one_goods&&scope.row.has_one_goods.thumb" style="position: absolute;top: -14px;"><i class="el-icon-close" @click="clearGoods(scope)"></i></a>
                                                </div>
                                                <div style="font-size: 13px;line-height: 17px;font-weight: 500;">[[scope.row.has_one_goods.title]]</div>
                                            </div>
                                        </el-form-item>
                                    </el-form>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" align="center">
                                <template slot-scope="scope">
                                    <i class="el-icon-edit" title="编辑" style="font-size:28px;color:#606266" @click="editActivity(scope)"></i>
                                    <i class="el-icon-delete" title="删除" style="font-size:28px;color:#606266;cursor: pointer;" @click="del(scope.row.id)"></i>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-main>
                <upload-multimedia-img :upload-show="uploadShow" :type="type" :name="chooseImgName" :sel-Num="selNum" @replace="changeProp" @sure="sureImg"></upload-multimedia-img>
                {{--表格end--}}
                <!--弹框选择-->
                <el-dialog :visible.sync="goods_show" width="60%" center title="选择商品">
                    <div>
                        <div style="display: flex">
                            <el-input v-model="search_goods.title" placeholder="商品标题" style="width: 300px"></el-input>
                            <el-button type="primary" @click="searchGoods(1)">搜索</el-button>
                        </div>
                        <el-table :data="goods_list" style="width: 100%;height:500px;overflow:auto" id="goods-list">
                            <el-table-column label="商品ID" align="center" width="auto">
                                <template slot-scope="scope">
                                    [[ scope.row.id ]]
                                </template>
                            </el-table-column>
                            <el-table-column label="商品" width="auto">
                                <template slot-scope="scope">
                                    <div style="display:flex;align-items: center">
                                        <div style="margin-right:10px">
                                            <el-image :src="scope.row.thumb" style="width:50px;height:50px"></el-image>
                                            <div style="color:#333;font-weight:500">[[scope.row.title]]</div>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="商品" width="auto">
                                <template slot-scope="scope">
                                    <el-button type="primary" icon="el-icon-plus" @click="selectSure(scope)">选择</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- 分页 -->
                        <div v-show="goods_total>1">
                            <el-row>
                                <el-col align="right">
                                    <el-pagination
                                            layout="prev, pager, next,jumper"
                                            @current-change="searchGoods"
                                            :total="goods_total"
                                            :page-size="goods_per_page"
                                            :current-page="goods_current_page"
                                            background
                                            v-loading="loading">
                                    </el-pagination>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="cancelDialog">取 消</el-button>
                    </span>
                </el-dialog>
                <el-footer>
                    <el-pagination
                            layout="prev, pager, next"
                            @current-change="currentChange"
                            :current-page.sync="current_page"
                            :total="page_total"
                            :page-size="page_size"
                            background v-loading="loading">
                    </el-pagination>
                </el-footer>
            </el-container>
        </template>
    </div>
    @include('public.admin.pop')
    @include('public.admin.program')
    @include('public.admin.uploadMultimediaImg')
    <script>
        var app = new Vue({
            el: '#app',
            delimiters: ['[[', ']]'],
            data() {
                let pageList = {!! $pageList ?: '{}'!!};
                let id = {!! $id ?: '{}'!!};
                let picture = {!! $picture ?: '{}'!!};
                return {
                    id:id,
                    picture:picture,
                    form : {},
                    change_ranking:'',
                    loading : false,
                    all_loading:false,
                    searchParams: {
                        'id' : '',
                        'name' : '',
                        'create_time' : '',
                    },
                    list : pageList.data,
                    current_page : pageList.current_page,
                    page_total : pageList.total,
                    page_size : pageList.per_page,
                    uploadShow:false,
                    type:'',
                    selNum:'',
                    chooseImgName:'',
                    goods_show: false,
                    search_goods:{},
                    goods_list: [],
                    select_id_list: [],
                    select_goods_list: [],
                    sure_select_list: [],
                    goods_current_page:1,
                    goods_total:1,
                    goods_per_page:1,
                    line_index:'',
                }
            },
            mounted () {
                this.$nextTick(() => {
                    let tp_name_0 = new Viewer(document.getElementById('tp_name_0'), {
                        url: 'src'
                    });
                });
            },
            methods: {
                statusChange(index,row,id) {
                    this.loading = true;
                    this.$http.post('{!! yzWebFullUrl('plugin.picture-album.admin.controllers.activity-whell.change-status') !!}',{id:id,status:row.status}).then(function (response) {
                        if (response.data.result){
                            if(row.status){
                                this.$message({message: '开启成功',type: 'success'});
                            }
                            else {
                                this.$message({message: '关闭成功',type: 'success'});
                            }
                        } else {
                            this.$message({message: response.data.msg,type: 'error'});
                            if (this.list[index].status==1){
                                this.list[index].status = 0;
                            }
                            else{
                                this.list[index].status = 1;
                            }
                        }
                        this.loading = false;
                    },function (response) {
                        this.$message({message: response.data.msg,type: 'error'});
                        if (this.list[index].status==1){
                            this.list[index].status = 0;
                        } else{
                            this.list[index].status = 1;
                        }
                        this.loading = false;
                    });
                },
                del(id) {
                    this.$confirm('是否删除', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$http.post('{!! yzWebFullUrl('plugin.picture-album.admin.controllers.activity-wheel.del') !!}',{id:id}).then(function (response) {
                            if (response.data.result) {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                this.currentChange(1);
                            }
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
                addActivity(){
                    window.location.href = "{!! yzWebUrl('plugin.picture-album.admin.controllers.activity-wheel.save-wheel' ,['id' => $id ]) !!}";
                },
                editActivity(scope){
                    url = "{!! yzWebUrl('plugin.picture-album.admin.controllers.activity-wheel.add-wheel') !!}";
                    url += "&pic_id="+scope.row.id+"&p_id="+scope.row.p_id;
                    window.location.href = url;
                },
                copy(row,index) {
                    that = this;
                    let Url = that.$refs['copy'+index];
                    Url.select(); // 选择对象
                    document.execCommand("Copy",false);
                    that.$message({message:"复制成功！",type:"success"});
                },
                // 编辑排序
                editRanking(index, type) {
                    let that = this;
                    that.change_ranking = '';
                    that.change_ranking = that.list[index].ranking;
                },
                // 确认修改
                confirmChange(id, type) {
                    let that = this;
                    let value = '';
                    if (type == 'ranking') {
                        value = that.change_ranking;
                        if (!(/^\d+$/.test(that.change_ranking))) {
                            that.$message.error('请输入正确数字');
                            return false;
                        }
                    }
                    let json = {
                        id: id,
                        ranking:that.change_ranking
                    };
                    that.all_loading = true;
                    that.$http.post("{!! yzWebFullUrl('plugin.picture-album.admin.controllers.activity-wheel.ranking') !!}", json).then(response => {
                        if (response.data.result == 1) {
                            that.$message.success('操作成功！');
                            if (document.all) {
                                document.getElementById('app').click();
                            } else {// 其它浏览器
                                var e = document.createEvent('MouseEvents')
                                e.initEvent('click', true, true)
                                document.getElementById('app').dispatchEvent(e)
                            }
                            that.all_loading = false;
                            that.currentChange(1);
                        } else {
                            that.$message.error(response.data.msg);
                        }
                        that.all_loading = false;
                    }), function (res) {
                        console.log(res);
                        that.all_loading = false;
                    };
                },
                currentChange(val) {
                    let that = this;
                    this.loading = true;
                    this.$http.post('{!! yzWebFullUrl('plugin.picture-album.admin.controllers.activity-wheel.search') !!}',{id:that.id,page:val}).then(function (response) {
                            if (response.data.result){
                                let datas = response.data.data;
                                this.page_total = datas.total;
                                this.list = datas.data;
                                this.page_size = datas.per_page;
                                this.current_page = datas.current_page;
                                window.scrollTo({
                                    top: 0,
                                    behavior: "smooth"
                                });
                            }
                            else {
                                this.$message({message: response.data.msg,type: 'error'});
                            }
                            this.loading = false;
                        },function (response) {
                            this.loading = false;
                            this.$message({message: response.data.msg,type: 'error'});
                        }
                    );
                },
                openUpload(str,type,sel) {
                    this.chooseImgName = str;
                    this.uploadShow = true;
                    this.type = type;
                    this.selNum = sel
                },
                changeProp(val) {
                    if (val == true) {
                        this.uploadShow = false;
                    } else {
                        this.uploadShow = true;
                    }
                },
                sureImg(name,uploadShow,fileList) {
                    if (fileList.length <= 0) {
                        return;
                    }
                    let json = {
                       id : this.id,
                       list : fileList,
                    };
                    this.$http.post('{!! yzWebFullUrl('plugin.picture-album.admin.controllers.activity-wheel.savePic') !!}',json).then(function (response) {
                            if (response.data.result){
                                location.reload();
                            } else {
                                this.$message({message: response.data.msg,type: 'error'});
                            }
                            this.loading = false;
                        },function (response) {
                            this.loading = false;
                            this.$message({message: response.data.msg,type: 'error'});
                        }
                    );
                },
                batchSave() {
                    let json = {
                        list : this.list,
                    };
                    this.$http.post('{!! yzWebFullUrl('plugin.picture-album.admin.controllers.activity-wheel.batchSave') !!}',json).then(function (response) {
                            if (response.data.result){
                                this.$message({message: response.data.msg,type: 'success'});
                                location.reload();
                            } else {
                                this.$message({message: response.data.msg,type: 'error'});
                            }
                            this.loading = false;
                        },function (response) {
                            this.loading = false;
                            this.$message({message: response.data.msg,type: 'error'});
                        }
                    );
                },
                openGoods(scope) {
                    this.line_index = scope.$index;
                    this.goods_show = true;
                },
                clearGoods(scope) {
                    let id = 'pic_show_'+scope.$index;
                    document.getElementById(id).style.display='none';
                    this.list[scope.$index].goods_id = 0;
                    this.list[scope.$index].has_one_goods.thumb = '';
                    this.list[scope.$index].has_one_goods.title = ''
                },
                cancelDialog() {
                    this.goods_show = false;
                },
                searchGoods(val) {
                    let json = {
                        kwd:this.search_goods.title,
                        page:val
                    };
                    let loading = this.$loading({target:document.querySelector("#goods-list"),background: 'rgba(0, 0, 0, 0)'});
                    this.$http.post("{!! yzWebUrl('plugin.picture-album.admin.controllers.activity-wheel.getGoods') !!}",json).then(response => {
                        if (response.data.result) {
                            let list = response.data.data.list;
                            this.goods_list = list.data;
                            this.goods_current_page = list.current_page;
                            this.goods_per_page = list.per_page;
                            this.goods_total = list.total;
                            this.loading = false;
                        }
                        else {
                            this.$message.error(response.data.msg)
                        }
                        loading.close();
                    }, response => {
                        console.log(response);
                        loading.close();
                    });
                },
                selectSure(scope) {
                    console.log(scope)
                    let id = 'pic_show_'+this.line_index;
                    document.getElementById(id).style.display='block';
                    this.list[this.line_index].goods_id = scope.row.id;
                    this.list[this.line_index].has_one_goods.thumb = scope.row.thumb;
                    this.list[this.line_index].has_one_goods.title = scope.row.title;
                    this.goods_show = false;
                },
            },
        });
    </script>
@endsection