@extends('layouts.base')

@section('content')
@section('title', trans('会务列表'))
<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')}}"/>
<style>
    .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;
    }
</style>
<div class="right-titpos">
    <ul class="add-snav">
        {{--<li class="active"><a href="#">会务列表</a></li>--}}
        <a class='btn btn-primary' href="{{yzWebUrl('plugin.conference.admin.conference.add-activity')}}"
           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-4">
                    <input class="form-control" name="search[id]" type="text"
                           value="{{$search['id']}}" placeholder="活动ID">
                </div>

                <div class="form-group col-xs-12 col-sm-4">
                    <input class="form-control" name="search[title]" type="text"
                           value="{{$search['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]', ['starttime'=>$search['time']['start'],
                         'endtime'=>$search['time']['end'],
                         'start'=>$search['time']['start'],
                         'end'=>$search['time']['end']
                         ], true) !!}
                </div>


                <div class="form-group col-xs-12 col-sm-2">
                    <input type="button" class="btn btn-success" id="export" style="width:80px" value="导出">

                    <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:10%;'>ID</th>
                <th style='width:20%;'>活动名称</th>
                <th style='width:20%;'>已签到/未签到/总报名人数</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            @foreach($list['data'] as $row)
                <tr>
                    <td>{{$row['id']}}</td>
                    <td>{{$row['title']}}</td>

                    <td  click="getQr1()">{{$row['sign']}}/{{$row['no_sign']}}/{{$row['total']}}(人)</td>

                    <td style="position: relative;overflow: visible;">
                        {{--<a class="btn btn-sm btn-default umphp" title="活动二维码"--}}
                        {{--data-url="{{yzAppFullUrl('cashier_pay/')}}"--}}
                        {{--data-goodsid="{{$row->id}}">--}}
                        {{--<div class="img">--}}
                        {{--{!! QrCode::size(120)->generate(yzAppFullUrl('goods/'.$row['id'])) !!}--}}
                        {{--</div>--}}
                        {{--<i class="fa fa-qrcode"></i>--}}
                        {{--</a>--}}
                        <a class="btn btn-sm btn-default umphp" onclick="openDig('{{$row['id']}}')"  title="活动二维码"
                           data-url="{{yzAppFullUrl('cashier_pay/' . $row['id'])}}"
                           data-goodsid="{{$row['id']}}">
                            <!-- <div class="img">
                                <img style="width: 120px;high:120px;" src="{{$row['download_url']}}">
                            </div> -->
                            <i class="fa fa-qrcode"></i>
                        </a>
                        @if($row['download_url1']  != '')
                        {{--                        新增小程序码--}}
                        <!-- <a class="btn btn-sm btn-default umphp" title="活动小程序码"
                           data-goodsid="{{$row['id']}}"  style="z-index: 999">
                            <div class="img">
                                <img style="width: 120px;high:120px;" src="{{$row['download_url1']}}">
                            </div>
                            <i class="iconfont icon-ht_smallprogramcode"></i>
                        </a> -->
                        @endif
                        <!-- <a download="{{$row['download_url']}}" href="{{$row['download_url']}}" title="下载二维码"
                           class="btn btn-default btn-sm js-clip">下载二维码</a> -->
                        {{--                        新增下载小程序码--}}
                        @if($row['download_url1']  != '')
                        <!-- <a download="{{$row['download_url1']}}" href="{{$row['download_url1']}}" title="下载太阳码"
                           class="btn btn-default btn-sm js-clip">下载小程序码</a> -->
                        @endif
                        <a href="{{yzUrl('plugin.conference.admin.conference-enrol.enrol-data',['id'=>$row['id']])}}"
                           class="btn btn-sm btn-default" title="会务报名数据" style="font-size: 13px;"><i
                                    class="fa fa-article"></i></a>

                        <a href="{{yzUrl('plugin.conference.admin.conference.edit-activity',['id'=>$row['id']])}}"
                           class="btn btn-sm btn-default" title="编辑"><i class="fa fa-edit"></i></a>

                        <a href="{{yzUrl('plugin.conference.admin.conference.del-activity',['id'=>$row['id']])}}"
                           onclick="return confirm('是否确认删除？');
                                   return false;" class="btn btn-default  btn-sm" title="删除"><i
                                    class="fa fa-trash"></i></a>
                    </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_download_url1"
                    >
                    </el-input>
                </el-col>
                </div>
                <div class="copy" @click="handleCopy(copy_download_url1)">复制</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");
        });

    $(function () {
        $('#export').click(function () {
            $('#form1').attr('action', '{!! yzWebUrl('plugin.conference.admin.conference.export') !!}');
            $('#form1').submit();
        });
        $('#search').click(function () {
            $('#form1').attr('action', '{!! yzWebUrl('plugin.conference.admin.conference.manage') !!}');
            $('#form1').submit();
        });
    });

    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_download_url1:'',//活动小程序链接
            }
        },
        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){
        console.log(id);

               let res = (await this.$http.post("{!! yzWebFullUrl('plugin.conference.admin.conference.get-codes') !!}", {id:id})).body

               this.activity_url = res.data.activity_url;
                this.download_url = res.data.download_url;

               if(res.data.activity_url1 == ""){
                   this.actMiniCode = false;
               }else{
                this.activity_url1 = res.data.activity_url1
                this.actMiniCode = true;
               }

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

                this.copy_activity_url = res.data.copy_activity_url;
                this.copy_activity_url1 = res.data.copy_activity_url1;
                this.copy_download_url = res.data.copy_download_url;
                this.copy_download_url1 = res.data.copy_download_url1

            }
        }
    })
    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;
    //     }
    //     //链接
    //     //H5链接
    //     vm.copy_activity_url = actH5Url;
    //     vm.copy_activity_url1 = actMiniUrl
    //     vm.copy_download_url = signH5Url;
    //     vm.copy_download_url1 = signMiniUrl
    // }
    
    

</script>
@endsection