@extends('layouts.base')

@section('content')
@section('title', trans('活动列表'))

<style>
    .umphp {
        display:inline-block;
        color:#2093b4;
        cursor: pointer;
    }
    .qrcode-popup {
        text-align: center;
    }

    .tabar {
        display:flex;
    }
    .tabar-item {
        flex-shrink: 0;
        flex-grow:1;
        color:#999;
    }
    .tabar-item.active {
        color:#2093b4;
    }
    .tab-item {
        display:inline-block;
    }


    .dig-title{
        display: flex;
    }
    .el-dialog__header{
        padding: 25px 0 !important;
        margin:  0 25px !important;
        border-bottom: 1px solid #ccc !important;
    }
    .isChecked {
        width: 110px;
        height: 40px;
        background-color: #29BA9C;
        text-align: center;
        line-height: 40px;
        color: #fff;
        border-radius:5px;
        cursor: pointer;
    }
    .noCheck {
        width: 110px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
    }
    .QRCode {
        display: flex;
        justify-content: center;
    }
    .QRCode .code-title {
        color: #888;
        text-align: center;
        cursor: pointer;
        text-decoration: none;
    }
    .QRCode-item {
        text-align: center;
    }
    .codeImg {
        width: 100px;
        height: 100px;
        margin: 20px;
    }
    .codeImg img {
        width: 100%;
        height: 100%;
    }
    .input-item {
        display: flex;
        align-items: center;
        margin: 30px 0 10px 0;
    }
    .input-item .item-title {
        margin-right: 20px;
        flex:2;
        text-align: right;
    }
    .input-item .item-input {
        flex:5;
    }
    .input-item .copy {
        width: 50px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        margin-right: 160px;
        /* flex:3; */
        border: 1px solid #ccc;
        border-radius:5px;
        cursor: pointer;
        background-color: #fff;
    }

</style>

<link rel="stylesheet" type="text/css" href="{{static_url('css/font-awesome.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/goods.css')}}"/>
<div class="right-titpos">
    <ul class="add-snav">
        <a class='btn btn-primary' href="{{yzWebUrl('plugin.activity-apply.admin.activity-apply-activity.add')}}"
           style="margin-bottom:5px;"><i class='fa fa-plus'></i> 创建新活动</a>
    </ul>
</div>
<div class='panel panel-default'>
    <form action="" method="post" class="form-horizontal" id="form1">
        <div class="panel panel-info">
            <div class="panel-body">

                <div class="form-group col-xs-12 col-sm-3">
                    <input class="form-control" name="search[id]" type="text"
                           value="{{$search['id']}}" placeholder="活动ID">
                </div>

                <div class="form-group col-xs-12 col-sm-3">
                    <input class="form-control" name="search[title]" type="text"
                           value="{{$search['title']}}" placeholder="请输入活动名称进行搜索">
                </div>
                <div class="form-group col-xs-12 col-sm-3">
                    <input class="form-control" name="search[calssify_title]" type="text"
                           value="{{$search['calssify_title']}}" placeholder="请输入分类名称进行搜索">

                </div>


                <div class="form-group col-xs-12 col-sm-6">
                    <div class="col-sm-4">
                        <label class='radio-inline'>
                            <input type='radio' value='0' name='search[is_time]'
                                   @if($search['is_time'] == '0') checked @endif>不按时间
                        </label>
                        <label class='radio-inline'>
                            <input type='radio' value='1' name='search[is_time]'
                                   @if($search['is_time'] == '1') checked @endif>创建时间
                        </label>
                    </div>
                    {!! app\common\helpers\DateRange::tplFormFieldDateRange('search[time_range]', [
                                       'starttime'=>array_get($requestSearch,'time_range.start',0),
                                       'endtime'=>array_get($requestSearch,'time_range.end',0),
                                       'start'=>0,
                                       'end'=>0
                                       ], true)!!}
                </div>
                <div class="form-group col-xs-12 col-sm-2">
                    <input type="button" class="btn btn-success pull-right" style="width:80px" id="search" value="搜索">

                </div>

            </div>
        </div>
    </form>
</div>

<div class='panel panel-default'>
    <div class="panel-heading">活动列表：{{$total}}个</div>
    <div class='panel-body'>
        <table class="table table-hover" style="overflow:visible;">
            <thead>
            <tr>
                <th style='width:5%;'>ID</th>
                <th style='width:5%;'>商品ID</th>
                <th style='width:10%;'>活动名称</th>
                <th style='width:10%;'>分类</th>
                <th style='width:10%;'>活动费用(元)</th>
                <th style='width:10%;'>已报名人数<br/>活动名额</th>
                <th style='width:10%;'>已签到人数<br/>未签到人数</th>
                <th style='width:8%;'>启用</th>
                <th style='width:8%;'>活动数据</th>
                <th style='width:30%; text-align: center'>操作</th>
            </tr>
            </thead>
            <tbody>
            @foreach($list['data'] as $row)
                <tr>
                    <td>{{$row['id']}}</td>
                    <td>{{$row['goods_id']}}</td>
                    <td>{{$row['title']}}</td>
                    <td>
                       {{$row['has_one_calssify']['calssify_title']}}
                    </td>
                    @if($row['cash']== 0)
                    <td>0(元)</td>
                    @else
                        <td> {{$row['cash']}}(元)</td>
                    @endif

                    <td>
                        @if($row['has_many_pay_order_count'] == 0)
                           0
                        @else
                            {{$row['has_many_pay_order_count']}}
                        @endif
                            <br/>
                            {{$row['limit']}}

                    </td>
                    <td>
                        @if($row['sign'] == 0)
                            0
                        @else
                            {{$row['sign']}}
                        @endif
                        <br/>
                       {{$row['has_many_pay_order_count'] - $row['sign']}}
                    </td>
                    <td>
                        <label data='{{$row['is_open']}}'
                               class='@if($row['is_open']==1) btn btn-info @else  btn btn-default  @endif'
                               onclick="setPutaway(this, {{$row['id']}},'is_open')">
                            @if($row['is_open']==1)
                               启用
                            @else
                                禁用
                            @endif
                        </label>
                    </td>
                    <td>
                        <a href="{{yzWebUrl('plugin.activity-apply.admin.activity-apply-activity.enrol',['id' => $row['id']])}}"
                           class="btn btn-sm btn-default" title="查看数据" style="font-size: 13px;"><i
                                    class="fa fa-article"></i></a>
                    </td>

                     <td style="position:relative; overflow:visible;" width="25%;">
                        <div class="btn-group">
                                <div class="umphp" title="商品二维码"
                                   data-url="{{yzAppFullUrl('activity/' . $row['id'])}}"
                                   data-goodsid="{{$row['id']}}">
                                    <!-- <div class="img qrcode-popup" data-id="{{$row['id']}}">
                                        <ul class="tabar">
                                            <li class="tabar-item active" data-id="{{$row['id']}}" data-key="qrcode" >二维码</li>
                                            <li class="tabar-item" data-id="{{$row['id']}}" data-key="minicode">小程序码</li>
                                        </ul>
                                        <ul class="tab-content">
                                            <li class="tab-item" >
                                                <div>{!! QrCode::size(120)->generate(yzAppFullUrl('signIn/'.$row['id'])) !!}</div>
                                                <a download="{{$row['download_url']}}" href="{{$row['download_url']}}" title="下载二维码" class="js-clip">下载二维码</a>
                                            </li>
                                            <li class="tab-item" style="display:none;">
                                                <div><img src="{{$row['small_qr_url']}}" width="80px"/></div>
                                                <a download="{{$row['small_qr_url']}}" href="{{$row['small_qr_url']}}" title="下载小程序码" class="js-clip">下载小程序码</a>
                                            </li>
                                        </ul>
                                    </div> -->
                                    <!-- <span onclick="openDig('{{$row['activity_url']}}','{{$row['small_activity_url']}}','{{$row['download_url']}}','{{$row['small_qr_url']}}',
                                    '{{$row['copy_activity_url']}}','{{$row['copy_small_activity_url']}}','{{$row['copy_download_url']}}','{{$row['copy_small_qr_url']}}')">签到二维码</span> -->
                                    <span onclick="openDig('{{$row['id']}}')">签到二维码</span>
                                </div>



                            <a href="{{yzWebUrl('plugin.activity-apply.admin.activity-apply-activity.edit',['id' => $row['id']])}}"
                               class="" title="编辑">编辑</a>

                            <a href="{{yzWebUrl('plugin.activity-apply.admin.activity-apply-activity.delete',['id' => $row['id']])}}"
                               onclick="return confirm('{{$delete_msg}}');
                                       return false;" class="" title="删除">删除</a>

                                <!-- <a href="javascript:;"
                                   data-clipboard-text="{{yzAppFullUrl('enrollEnter/'.$row['id'])}}"
                                   data-url="{{yzAppFullUrl('enrollEnter/'.$row['id'])}}"
                                   title="复制连接" class="js-clip">网页链接</a>
                            <a href="javascript:;"
                               data-clipboard-text="{{'/packageC/Myshaky/enrollEnter/enrollEnter?id='.$row['id']}}"
                               data-url="{{'/packageC/Myshaky/enrollEnter/enrollEnter?id='.$row['id']}}"
                               title="复制连接" class="js-clip">小程序链接</a> -->
                        </div>
                         <div>
                             <label data='{{$row['is_recommand']}}'
                                    class='btn btn-sm @if($row['is_recommand']==1) btn-info @else btn-default @endif'
                                    onclick="setProperty(this,{{$row['id']}},'is_recommand')">推荐</label>

                             <label data='{{$row['is_discount']}}'
                                    class='btn btn-sm @if($row['is_discount']==1) btn-info @else btn-default @endif'
                                    onclick="setProperty(this,{{$row['id']}},'is_discount')">精选</label>
                             <label data='{{$row['is_hot']}}'
                                    class='btn btn-sm @if($row['is_hot']==1) btn-info @else btn-default @endif'
                                    onclick="setProperty(this,{{$row['id']}},'is_hot')">热门</label>
                         </div>

                    </td>
                </tr>

            @endforeach
            </tbody>
        </table>

        {!! $pager !!}
    </div>
</div>
<div style="width:100%;height:150px;"></div>
<div id="diglog">
    <el-dialog
        :visible.sync="dialogVisible"
        width="40%"
        @close="handleClose">
        <div slot="title" class="dig-title">
            <div :class="[showAct ? 'isChecked' : 'noCheck']" @click="handleChange(1)">活动二维码</div>
            <div :class="[showSign ? 'isChecked' : 'noCheck']" @click="handleChange(2)">签到二维码</div>
        </div>
        <!-- 活动 -->
        <div class="actCode" v-show="showAct">
            <div class="QRCode" >
                <div class="QRCode-item">

                <div class="codeImg">
                    <img :src="activity_url" alt="">

                </div>
                <a class="code-title"  :href="activity_url" :download='activity_url'>下载二维码图片</a>
                </div>

                <div class="QRCode-item" v-if="actMiniCode">
                <div class="codeImg">
                    <img :src="activity_url1" alt="">
                </div>
                <!-- <div class="code-title">下载小程序码图片</div> -->
                <a class="code-title"  :href="activity_url1" :download='activity_url1'>下载小程序码图片</a>
                </div>
            </div>
            <div class="input-item" >
                <div class="item-title">H5页面链接</div>
                <div class="item-input">
                <el-col :span="22">
                    <el-input
                    placeholder="请输入链接"
                    v-model="copy_activity_url"
                    >
                    </el-input>
                </el-col>
                </div>
                <div class="copy" @click="handleCopy(copy_activity_url)">复制</div>
            </div>
            <div class="input-item" >
                <div class="item-title">小程序页面链接</div>
                <div class="item-input">
                <el-col :span="22">
                    <el-input
                    placeholder="请输入链接"
                    v-model="copy_activity_url1"
                    >
                    </el-input>
                </el-col>
                </div>
                <div class="copy" @click="handleCopy(copy_activity_url1)">复制</div>

            </div>
        </div>
        <!-- 签到 -->
        <div class="signCode" v-show="showSign">
            <div class="QRCode" >
                    <div class="QRCode-item">
                    <div class="codeImg">
                        <img :src="download_url" alt="">
                    </div>
                    <a class="code-title"  :href="download_url" :download='download_url'>下载二维码图片</a>
                    </div>

                    <div class="QRCode-item" v-if="downMiniCode">
                    <div class="codeImg">
                        <img :src="download_url1" alt="">
                    </div>
                    <a class="code-title"  :href="download_url1" download='download_url1'>下载小程序码图片</a>
                    </div>
            </div>
            <div class="input-item" >
                <div class="item-title">H5页面链接</div>
                <div class="item-input">
                <el-col :span="22">
                    <el-input
                    placeholder="请输入链接"
                    v-model="copy_download_url"
                    >
                    </el-input>
                </el-col>
                </div>
                <div class="copy" @click="handleCopy(copy_download_url)">复制</div>
            </div>
            <div class="input-item" >
                <div class="item-title">小程序页面链接</div>
                <div class="item-input">
                <el-col :span="22">
                    <el-input
                    placeholder="请输入链接"
                    v-model="copy_small_qr_url"
                    >
                    </el-input>
                </el-col>
                </div>
                <div class="copy" @click="handleCopy(copy_small_qr_url)">复制</div>

            </div>
        </div>

    </el-dialog>
</div>
<script language='javascript'>
    //鼠标划过显示商品链接二维码
    $('.umphp').hover(function () {
            var url = $(this).attr('data-url');
            $(this).addClass("selected");
        },
        function () {
            $(this).removeClass("selected");
        });
        $(".tabar-item").hover(function(){
            const id=this.dataset.id;
            const key=this.dataset.key;
            const elSort=key=='qrcode'?1:2;
            const hideElSort=key=='qrcode'?2:1;
            console.log(elSort,hideElSort);
            $(".qrcode-popup[data-id='"+id+"'] .tab-item:nth-child("+hideElSort+")").hide();
            $(".qrcode-popup[data-id='"+id+"'] .tabar-item:nth-child("+hideElSort+")").removeClass("active");
            $(".qrcode-popup[data-id='"+id+"'] .tab-item:nth-child("+elSort+")").show();
            $(".qrcode-popup[data-id='"+id+"'] .tabar-item:nth-child("+elSort+")").addClass("active");
        })


    $(function () {
        $('#export').click(function () {
            $('#form1').attr('action', '{!! yzWebUrl('plugin.activity-apply.admin.activity-apply-activity.export') !!}');
            $('#form1').submit();
        });
        $('#search').click(function () {
            $('#form1').attr('action', '{!! yzWebUrl('plugin.activity-apply.admin.activity-apply-activity.index') !!}');
            $('#form1').submit();
        });
    });


    function setPutaway(obj, id, type) {

        $(obj).html($(obj).html() + "...");
        $.post("{!! yzWebUrl('plugin.activity-apply.admin.activity-apply-activity.setPutaway') !!}",
            {id: id, type: type, data: obj.getAttribute("data")}
            , function (d) {
                console.log(d);
                $(obj).html($(obj).html().replace("...", ""));
                $(obj).html(d.data == '1' ? '启用' : '禁用');
                $(obj).attr("data", d.data);
                if (d.result == 1) {
                    $(obj).toggleClass("btn-info btn-default");
                }
            }
            , "json"
        );
    }

    function setProperty(obj, id, type) {
        $(obj).html($(obj).html() + "...");
        $.post("{!! yzWebUrl('plugin.activity-apply.admin.activity-apply-activity.setProperty') !!}", {id: id, type: type, data: obj.getAttribute("data")}
            , function (d) {
                console.log(d);
                $(obj).html($(obj).html().replace("...", ""));
                if (type == 'type') {
                    $(obj).html(d.data == '1' ? '实体物品' : '虚拟物品');
                }
                if (type == 'status') {
                    $(obj).html(d.data == '1' ? '' : '');
                }
                $(obj).attr("data", d.data);
                if (d.result == 1) {
                    $(obj).toggleClass("btn-info btn-default");
                }
            }
            , "json"
        );
    }

    var vm = new Vue({
        el:"#diglog",
        delimiters: ['[[', ']]'],
        data() {
            return {
                dialogVisible: false,
                showAct:true,//显示活动二维码
                showSign:false,//显示签到二维码
                actMiniCode:true,
                downMiniCode:true,
                activity_url:'',//活动二维码
                activity_url1:'',//活动小程序二维码
                download_url:'',//签到二维码
                download_url1:'',//签到小程序二维码
                copy_activity_url:'',//活动H5链接
                copy_activity_url1:'',//活动小程序链接
                copy_download_url:'',//签到H5链接
                copy_small_qr_url:'',//签到小程序链接
            }
        },
        methods: {
            handleClose() {
                this.dialogVisible = false;
            },
            handleChange(item){
                if(item == 1){
                    this.showAct = true;
                    this.showSign = false;
                }
                if(item == 2){
                    this.showAct = false;
                    this.showSign = true;
                }
            },
            handleCopy(data){
                if(data == ''){
                    this.$message({
                        message: '暂无连接',
                        type: 'error'
                    });
                    return
                }
                //创建一个input元素
                let input = document.createElement('input')
                //给input的内容复制
                input.value = data
                // 在body里面插入这个元素
                document.body.appendChild(input)
                // 选中input里面内容
                input.select()
                //执行document里面的复制方法
                document.execCommand("Copy")
                // 复制之后移除这个元素
                document.body.removeChild(input);
                this.$message({
                    message: '复制成功',
                    type: 'success'
                });
            },
            async getCodes(id){
               let res = (await this.$http.post("{!! yzWebFullUrl('plugin.activity-apply.admin.activity-apply-activity.get-codes') !!}", {id:id})).body

                console.log(res);
               this.activity_url = res.data.activity_url;
                this.download_url = res.data.download_url;
               if(res.data.small_activity_url == ""){
                   this.actMiniCode = false;
               }else{
                this.activity_url1 = res.data.small_activity_url
                this.actMiniCode = true;
               }

               if(res.data.small_qr_url == ""){
                    this.downMiniCode = false;
               }else{
                    this.download_url1 = res.data.small_qr_url;
                    this.downMiniCode = true;
               }

                this.copy_activity_url = res.data.copy_activity_url;
                this.copy_activity_url1 = res.data.copy_small_activity_url;
                this.copy_download_url = res.data.copy_download_url;
                this.copy_small_qr_url = res.data.copy_small_qr_url
            }
        }
    })
    function openDig(id){
        vm.dialogVisible = true;
        vm.getCodes(id)
    }
    // function openDig(actQrCodeImg,actMiniCodeImg,signQrCodeImg,signMiniCodeImg,actH5Url,actMiniUrl,signH5Url,signMiniUrl) {
    //     vm.dialogVisible = true;
    //     //二维码
    //     //H5二维码
    //     vm.activity_url = actQrCodeImg;
    //     vm.download_url = signQrCodeImg;
    //     //小程序二维码
    //     if(actMiniCodeImg == ''){
    //         vm.actMiniCode = false;
    //     }else{
    //         vm.activity_url1 = actMiniCodeImg
    //         vm.actMiniCode = true;
    //     }
    //     if(signMiniCodeImg == ''){
    //         vm.downMiniCode = false;
    //     }else{
    //         vm.download_url1 = signMiniCodeImg;
    //         vm.downMiniCode = true;
    //     }
    //     //链接
    //     vm.copy_activity_url = actH5Url;
    //     vm.copy_activity_url1 = actMiniUrl;
    //     vm.copy_download_url = signH5Url;
    //     vm.copy_small_qr_url = signMiniUrl
    // }

</script>
<script>
    $(function () {
        $(".checkall").click(function () {
            //全选
            if ($(this).html() == '全选') {
                $(this).html('全不选');
                $('[name=check1]:checkbox').prop('checked', true);
            } else {
                $(this).html('全选');
                $('[name=check1]:checkbox').prop('checked', false);
            }
        });
        $(".checkrev").click(function () {
            //反选
            $('[name=check1]:checkbox').each(function () {
                this.checked = !this.checked;
            });
        });

        var arr = new Array();
        var url = "{!! yzWebUrl('goods.goods.batchSetProperty') !!}"

        $(".batchenable").click(function () {
            $(this).html('上架中...');
            $("[name=check1]:checkbox:checked").each(function (i) {
                arr[i] = $(this).val();
            });
            $.post(url, {ids: arr, data: 1}
                , function (d) {
                    if (d.result) {
                        $(".batchenable").html('上架成功');
                        setTimeout(location.reload(), 3000);
                    }
                }, "json"
            );
        });
        $(".batchdisable").click(function () {
            $(this).html('下架中...');
            $("[name=check1]:checkbox:checked").each(function (i) {
                arr[i] = $(this).val();
            });
            $.post(url, {ids: arr, data: 0}
                , function (d) {
                    if (d.result) {
                        $(".batchdisable").html('下架成功');
                        setTimeout(location.reload(), 3000);
                    }
                }, "json"
            );
        });

        $(".batchdel").click(function () {
            $(this).html('删除中...');
            $("input[type='checkbox']:checked").each(function (i) {
                arr[i] = $(this).val();
            });
            $.post("{!! yzWebUrl('goods.goods.batchDestroy') !!}", {ids: arr}
                , function (d) {
                    if (d.result) {
                        $(".batchdel").html('删除成功');
                        setTimeout(location.reload(), 3000);
                    }
                }, "json"
            );
        })

    });
</script>
@endsection