@extends('layouts.base')
@section('title', "开团列表")
@section('content')
    <style>
        .rightlist #app .rightlist-head{line-height:50px;padding:15px 0;}
        .rightlist #app{margin-left:30px;}
        .rightlist #app .el-breadcrumb{padding:30px 0;font-size:16px;}
        /* .el-form-item__label{padding-right:30px;} */
        .tip{font-size:12px;color:#999;font-weight:500}
        .rightlist-head-con{padding-right:20px;font-size:16px;color:#888;}
        /* .rightlist-head-con{float:left;padding-right:20px;font-size:16px;color:#888;} */
        .el-tag{font-weight:700;font-size:15px;margin-bottom:30px;}
        .el-icon-edit{font-size:16px;padding:0 15px;color:#409EFF;cursor: pointer;}
        /* 滑块选择小白点 */
        .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;}
        .tip1{font-size:12px;color:red;font-weight:500}
        [v-cloak]{
            display:none;
        }
    </style>
    <div id="qrcode" ref="qrcode" style="display:none;"></div>
    <div class="rightlist">
        <div id="app"  v-cloak v-loading="all_loading">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item><a href="{{ yzWebFullUrl('plugin.fight-groups.admin.controllers.fight-groups-store.index') }}">活动列表</a></el-breadcrumb-item>
                <el-breadcrumb-item>开团列表</el-breadcrumb-item>
            </el-breadcrumb>
            <template>
                <el-form :inline="true" :model="search_form" ref="search_form" style="padding:20px 0 0 0;">
                    <el-row>
                        <el-form-item label="团长昵称" prop="leader_name">
                            <el-input v-model="search_form.leader_name" placeholder="请输入团长昵称"></el-input>
                        </el-form-item>
                        <el-form-item label="时间范围" prop="pay_way">
                            <el-date-picker v-model="search_form.times" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="几人团" prop="number">
                            <el-select v-model="search_form.member_num" placeholder="请选择" clearable>
                                <el-option v-for="item in level_list" :key="item.id" :label="item.member_num1" :value="item.member_num"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="拼团状态" prop="">
                            <el-select v-model="search_form.status" placeholder="请选择拼团状态" clearable>
                                <el-option v-for="item in pay_list" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <!-- <el-form-item label="订单编号" prop="order_sn">
                            <el-input v-model="search_form.order_sn" placeholder="请输入订单编号"></el-input>
                        </el-form-item> -->
                        <a href="#">
                            <el-button type="success" icon="el-icon-search" @click="search()">搜索</el-button>
                        </a>
                        </el-col>
                    </el-row>
                </el-form>
                <template>
                    <!-- 表格start -->
                    <el-table :data="list" style="width: 100%"  v-loading="table_loading">
                        <el-table-column prop="id" label="编号" align="center"></el-table-column>
                        <el-table-column prop="member_name" label="团长" align="center">
                            <template slot-scope="scope">
                                <img :src="scope.row.avatar" style="width:50px;height:50px">
                                <div>[[scope.row.nickname]]</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="total" label="起止时间" min-width="150" align="center">
                            <template slot-scope="scope">
                                [[scope.row.start_time]]至[[scope.row.end_time1]]
                            </template>
                        </el-table-column>
                        <el-table-column prop="down_time" label="剩余时间" align="center">
                            <template slot-scope="scope">
                                [[scope.row.down_time ?scope.row.down_time: '-']]
                            </template>
                        </el-table-column>
                        <el-table-column prop="member_num" label="几人团" align="center"></el-table-column>
                        <el-table-column label="还差几人" align="center">
                            <template slot-scope="scope">
                                [[scope.row.member_num - scope.row.has_many_success_member_count >=0 ? scope.row.member_num - scope.row.has_many_success_member_count : '0']]
                            </template>
                        </el-table-column>
                        <el-table-column label="拼团状态" prop="status_message" align="center"></el-table-column>
                        <el-table-column label="管理" min-width="80" align="center">
                            <template slot-scope="scope">
                            <!-- <a :href="'{{ yzWebFullUrl('plugin.fight-groups.admin.controllers.fight-groups.create', array('id' => '')) }}'+[[scope.row.id]]">
                                拼团链接
                            </a><br> -->
                                <el-popover class="item" placement="left" effect="light">
                                    <div style="text-align:center;">
                                        <div style="padding:5px 0;text-align:left;">活动推广二维码：</div>
                                        <img :src="img" alt="" style="width:100px;height:100px;">
                                        <div style="padding-top:5px;">
                                            <el-button @click="copyList(scope.row.id)" type="mini">复制活动链接</el-button>
                                            <input v-model="scope.row.url" :ref="'list'+scope.row.id" style="position:absolute;opacity:0;height:1px;" />
                                        </div>
                                    </div>
                                    <a slot="reference" @click="listCode(scope.$index)">拼团链接</a>
                                </el-popover><br>
                                <el-popover class="item" placement="left" effect="light">
                                    <div style="text-align:center;">
                                        <div style="padding:5px 0;text-align:left;">修改时间：</div>
                                        <el-date-picker v-model="change_time" type="datetime" format="yyyy-MM-dd HH:mm:ss"
                                                        value-format="timestamp" placeholder="选择修改时间" :clearable="false" style="width:90%" @change="changed(scope.row)">
                                        </el-date-picker>
                                    </div>
                                    <a slot="reference" v-if="scope.row.status==1" @click="changeTime(scope.row)">修改时间</a>
                                </el-popover><br v-if="scope.row.status==1">
                                <a v-if="scope.row.status==1" @click="virtual(scope.row.id)">
                                    虚拟成团<br>
                                </a>
                                <a :href="'{{ yzWebFullUrl('plugin.fight-groups.admin.controllers.team-store.details', array('id' => '')) }}'+[[scope.row.id]]">
                                    查看详情
                                </a><br>

                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 表格end -->
                </template>
                <!-- 分页 -->
                <el-row>
                    <el-col :span="24" align="right" style="padding:15px 5% 15px 0">
                        <el-pagination layout="prev, pager, next" @current-change="currentChange" :total="total" :page-size="per_size" :current-page="current_page" background v-loading="loading"></el-pagination>
                    </el-col>
                </el-row>
            </template>

        </div>
        <script src="{{resource_get('plugins/fight-groups/views/admin/qrcode.min.js')}}"></script>
        <script>
            var app = new Vue({
                el:"#app",
                delimiters: ['[[', ']]'],
                data() {
                    return{
                        id:"",
                        img:"",//二维码
                        search_form:{},
                        form:{},
                        level_list:[],
                        pay_list:[
                            {id:0,name:"提交"},
                            {id:1,name:"拼团中"},
                            {id:2,name:"成功"},
                            {id:3,name:"失败"}
                        ],
                        change_time:1544444444444,
                        list:[],
                        loading:false,
                        dialog_loading:false,
                        table_loading:false,
                        rules:{},
                        //分页
                        total:0,
                        per_size:0,
                        current_page:0,
                        rules:{},
                    }
                },
                created() {
                    var that = this;
                    //获得url传过来的id
                    var url = window.location.href;
                    var url_arr = url.split("=");
                    this.id = url_arr[url_arr.length-1];
                    let new_url = "";
                    for(let i=0;i<url_arr.length;i++) {
                        if(this.id.charAt(i)!="#") {
                            new_url = new_url+this.id.charAt(i);
                        }
                    }
                    this.id = new_url;
                    let json = {id:this.id}
                    //获取层级信息
                    this.getLevel();
                    this.getData(json);
                },
                methods: {
                    getLevel() {
                        var that = this;
                        that.all_loading = true;
                        that.$http.post("{!! yzWebFullUrl('plugin.fight-groups.admin.controllers.team-store.get-levels') !!}",{id:that.id}).then(response => {
                            if(response.data.result==1){
                            console.log(response)
                            that.level_list = response.data.data;
                            that.level_list.forEach((item,index) => {
                                item.member_num = item.member_num;
                            item.member_num1 = item.member_num+'人团'
                        });
                            console.log(that.level_list)
                        }
                    else{
                            that.$message.error(response.data);
                        }
                        that.all_loading = false;
                    }),function(res){
                            that.all_loading = false;
                        };
                    },
                    getData(json) {
                        var that = this;
                        that.all_loading = true;
                        that.$http.post("{!! yzWebFullUrl('plugin.fight-groups.admin.controllers.team-store.search') !!}",json).then(response => {
                            if(response.data.result==1){
                            console.log(response)
                            that.list = response.data.data.data;
                            that.list.forEach((item,index) => {
                                item.start_time = that.timeStyle(item.start_time)
                            item.end_time1 = that.timeStyle(item.end_time)
                            item.end_time = item.end_time*1000;
                            that.timing(item.end_time - new Date().getTime(),index);//倒计时
                        });

                            that.total = response.data.data.total;
                            that.per_size = response.data.data.per_page;
                            that.current_page = response.data.data.current_page;
                            that.url = response.data.data.url;
                        }
                    else{
                            that.$message.error(response.data);
                        }
                        console.log(this.list)
                        that.all_loading = false;
                    }),function(res){
                            console.log(res);
                            that.all_loading = false;
                        };
                    },
                    // 分页
                    currentChange(page) {
                        var that = this;
                        let time1="";
                        let time2="";
                        if(that.search_form.times){
                            time1 = that.search_form.times[0]/1000;
                            time2 = that.search_form.times[1]/1000;
                        }
                        let json = {page:page,id:that.id,leader_name:that.search_form.leader_name,start_time:time1,end_time:time2,
                            member_num:that.search_form.member_num,status:that.search_form.status};
                        that.getData(json);
                    },
                    // 搜索
                    search() {
                        var that = this;
                        console.log(that.search_form)
                        let time1="";
                        let time2="";
                        if(that.search_form.times){
                            time1 = that.search_form.times[0]/1000;
                            time2 = that.search_form.times[1]/1000;
                        }
                        let json = {page:1,id:that.id,leader_name:that.search_form.leader_name,start_time:time1,end_time:time2,
                            member_num:that.search_form.member_num,status:that.search_form.status};
                        that.getData(json);
                    },
                    // 虚拟成团
                    virtual(id) {
                        var that = this;
                        that.all_loading = true;
                        that.$http.post("{!! yzWebFullUrl('plugin.fight-groups.admin.controllers.team-store.virtual-team') !!}",{team_id:id}).then(response => {
                            console.log(response);
                        if(response.data.result==1){
                            that.$message.success(response.data.msg);
                            window.location.reload();
                            // window.location.href='{!! yzWebFullUrl('plugin.wechat.admin.reply.controller.default-reply.index') !!}';
                        }
                        else{
                            that.$message.error(response.data);
                        }
                        that.all_loading = false;
                    }),function(res){
                            console.log(res);
                            that.all_loading = false;
                        };
                    },
                    qrcodeScan (url) {//生成二维码
                        let qrcode = new QRCode('qrcode', {
                            width: 100,  // 二维码宽度
                            height: 100, // 二维码高度
                            render: 'image',
                            text: url
                        });
                        var data = $("canvas")[0].toDataURL().replace("image/png", "image/octet-stream;");
                        console.log(url)
                        this.img = data;
                    },
                    // 活动二维码
                    listCode(index) {
                        this.qrcodeScan(this.list[index].url);
                    },
                    // 复制活动链接
                    copyList(index) {
                        that = this;
                        let Url = that.$refs['list'+index];
                        console.log(Url)
                        Url.select(); // 选择对象
                        document.execCommand("Copy",false);
                        that.$message({message:"复制成功！",type:"success"});
                    },
                    // 修改时间
                    changeTime(row) {
                        console.log(row);
                        this.change_time = "";
                        this.change_time = row.end_time;
                        console.log(this.change_time)
                    },
                    changed(row) {
                        var that = this;
                        this.$confirm('确定修改吗', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {
                            that.$http.post("{!! yzWebFullUrl('plugin.fight-groups.admin.controllers.team-store.change-end-time') !!}",{team_id:row.id,end_time:that.change_time/1000}).then(response => {
                            console.log(response);
                        if(response.data.result==1){
                            that.$message.success("修改成功！");
                            let json = {id:this.id}
                            that.getData(json);
                        }
                        else{
                            that.$message.error(response.data.msg);
                            let json = {id:this.id}
                            that.getData(json);
                        }
                        that.all_loading = false;
                    }),function(res){
                            console.log(res);
                            that.all_loading = false;
                        };
                    }).catch(() => {
                            this.cart_list[index].num++;
                        this.$message({type: 'info',message: '已取消修改'});
                    });
                    },
                    submitForm() {
                        var that = this;
                        that.all_loading = true;
                        that.$http.post("{!! yzWebFullUrl('plugin.wechat.admin.reply.controller.default-reply.add') !!}",{keywords_id:that.data.id}).then(response => {
                            console.log(response);
                        if(response.data.result==1){
                            that.keyword_list = response.data.data;
                            that.$message.success("保存成功！");
                            window.location.href='{!! yzWebFullUrl('plugin.wechat.admin.reply.controller.default-reply.index') !!}';
                        }
                        else{
                            that.$message.error(response.data);
                        }
                        that.all_loading = false;
                    }),function(res){
                            console.log(res);
                            that.all_loading = false;
                        };
                    },
                    // 定时器
                    timing(down_time,index) {
                        var that = this;
                        setTimeout(() => {
                            if(down_time<0) {
                            that.list[index].down_time = '-'
                            return false;
                        }
                        down_time = down_time - 1000;
                        var d=Math.floor(down_time/1000/60/60/24);
                        var hour=Math.floor(down_time/1000/60/60%24);
                        var min=Math.floor(down_time/1000/60%60);
                        var sec=Math.floor(down_time/1000%60);
                        let tt = d+'天'+hour+'时'+min+'分'+sec+'秒';
                        this.$set(that.list[index],'down_time',tt)
                        this.timing(down_time,index)
                    }, 1000);
                    },

                    add0(m) {
                        return m<10?'0'+m:m
                    },
                    timeStyle(time) {
                        let time1 = new Date(time*1000);
                        let y = time1.getFullYear();
                        let m = time1.getMonth()+1;
                        let d = time1.getDate();
                        let h = time1.getHours();
                        let mm = time1.getMinutes();
                        let s = time1.getSeconds();
                        return y+'-'+this.add0(m)+'-'+this.add0(d)+' '+this.add0(h)+':'+this.add0(mm)+':'+this.add0(s);
                    },
                },
            })

        </script>
@endsection