@extends('layouts.base')
@section('title', "活动列表")
@section('content')
    <style>
        .rightlist #app .rightlist-head{line-height:50px;padding:15px 0;}
        .rightlist #app{margin-left:30px;}
        .el-form-item__label{padding-right:30px;}
        .tip{font-size:12px;color:#999;}
        .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;}
        [v-cloak]{
            display:none;
        }
        /* css */
        .list-title{display:flex;width:100%;background:#f9f9f9;padding:15px 10px;font-weight:900;border:1px solid #e9e9e9;}
        .list-title .list-title-1{display:flex;align-items:center;justify-content: center;}
        .list-info{display:flex;border-left:1px solid #e9e9e9;border-right:1px solid #e9e9e9;padding:15px 10px;justify-content: space-between;background:#f9f9f9;}
        .list-con{display:flex;width:100%;border:1px solid #e9e9e9;font-size:12px;font-weight:500}
        .con-img{padding:10px;border-right:1px solid #e9e9e9;float:left;height:100%}
        .con-img-title{float:left;margin-left:5px;font-size:12px;font-weight:800;width:220px}
        .list-num{flex:3;display:flex;align-items:center;border-right:1px solid #e9e9e9;justify-content: center;}
        .list-gen{display:flex;align-items:center;justify-content: center;line-height:28px;}
        .list-gen-txt{flex:1;border-right:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;align-item:center;justify-content: center;display:flex;}
        .list-opt{flex:1;display:flex;align-items:center;border-left:1px solid #e9e9e9;justify-content: center;}
        /* 弹出框 */
        .dialog-title{display:flex;font-weight:800;line-height:50px}
        .dialog-con{flex:1;display:flex;justify-content: center;border:1px #ccc solid;align-items:center;}
    </style>
    <div id="qrcode" ref="qrcode" style="display:none;"></div>
    <div class="rightlist">
        <div id="app" v-loading="all_loading" v-cloak>
            <el-form :inline="true" :model="search_form" ref="search_form" style="padding:20px 0 0 0;">
                <el-row>
                    <el-col :xs="12" :md="12" :lg="7">
                        <el-form-item label="活动编号" prop="">
                            <el-input v-model="search_form.id" placeholder="活动编号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="12" :md="12" :lg="7">
                        <el-form-item label="商品名称" prop="">
                            <el-input v-model="search_form.goods_name" placeholder="商品名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="12" :md="12" :lg="7">
                        <el-form-item label="活动名称" prop="">
                            <el-input v-model="search_form.title" placeholder="活动名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <a href="#">
                        <el-button type="success" icon="el-icon-search" @click="search()">搜索</el-button>
                    </a>
                    </el-col>
                </el-row>
            </el-form>
            <div style="padding:15px 0;">
                <a  href="{{ yzWebFullUrl('plugin.fight-groups.admin.controllers.fight-groups-store.edit') }}">
                    <el-button type="primary" icon="el-icon-plus" size="small">新增活动</el-button>
                </a>
                <el-popover class="item" placement="bottom" 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;">
                        <el-input v-model="url" ref="home" style="position:absolute;opacity:0;"></el-input>
                        <div style="padding-top:5px;">
                            <a href="#" @click="copy()"><span>复制链接</span></a>&nbsp;&nbsp;
                            <a href="#"><span>电脑上查看</span></a>
                        </div>
                    </div>
                    <el-button icon="el-icon-mobile-phone" size="small" slot="reference" @click="homeCode()">拼团首页</el-button>
                </el-popover>
            </div>
            <div>
                <el-radio-group v-model="status" style="margin-bottom: 30px;">
                    <el-radio-button label="0">全部</el-radio-button>
                    <el-radio-button label="1">未开始</el-radio-button>
                    <el-radio-button label="2">活动中</el-radio-button>
                    <el-radio-button label="3">已结束</el-radio-button>
                </el-radio-group>
            </div>
            <!-- 活动列表start -->
            <div class="list-title" style="">
                <div style="flex:0 0 320px;">活动商品</div>
                <div class="list-title-1" style="flex:3;">库存</div>
                <div class="list-title-1" style="flex:6;">活动概况</div>
                <div class="list-title-1" style="flex:1;">管理</div>
            </div>
            <div v-for="(item,index) in list">
                <div class="list-info">
                    <div >
                        <strong>编号：</strong>[[item.id]]&nbsp;&nbsp;&nbsp;
                        <strong>活动名称：</strong>[[item.title]]
                    </div>
                    <div ><span style="align-self:flex-end"><strong>开始时间:</strong>[[item.start_time]]</span></div>
                </div>
                <div class="list-con">
                    <div style="flex:0 0 320px;">
                        <div class="con-img">
                            <div style="width:60px;height:60px;float:left">
                                <img :src="item.has_one_goods&&item.has_one_goods!=null?item.has_one_goods.thumb:''" style="width:60px;height:60px;" alt="">
                            </div>
                            <div class="con-img-title">[[item.has_one_goods&&item.has_one_goods!=null?item.has_one_goods.title:'']]</div>
                            <div style="float:left;width:100%">原价:￥[[item.has_one_goods&&item.has_one_goods!=null?item.has_one_goods.price:'']]</div>
                        </div>
                    </div>
                    <div class="list-num">
                        剩余库存 :  [[item.last_stock]]&nbsp;&nbsp;<el-button size="mini" @click="stock(item.id,item.has_one_goods.has_option)">库存明细</el-button>
                    </div>
                    <div style="flex:6;">
                        <div v-for="(item1,index1) in item.has_many_level" class="list-gen">
                            <div class="list-gen-txt">
                                [[item1.member_num]]人团
                            </div>
                            <div class="list-gen-txt">
                                [[item1.expire_in]]小时
                            </div>
                            <div class="list-gen-txt">
                                已成团:[[item1.has_many_success_team_count]]
                            </div>
                            <div class="list-gen-txt">
                                已开团:[[item1.has_many_opened_team_count]]
                            </div>
                            <div class="list-gen-txt">
                                <!-- 已结束(手动) -->
                                <span v-if="item1.status==0">未开始&nbsp;&nbsp;<a @click="manualEnd(item1.id)">手动结束</a></span>
                                <span v-if="item1.status==1">已开始&nbsp;&nbsp;<a @click="manualEnd(item1.id)">手动结束</a></span>
                                <span v-if="item1.status==2">已结束</span>
                            </div>
                        </div>
                    </div>
                    <div class="list-opt">
                        <div>
                            <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(index)" type="mini">复制活动链接</el-button>
                                        <input v-model="item.url" :ref="'list'+index" style="position:absolute;opacity:0;height:1px;" />
                                    </div>
                                </div>
                                <a slot="reference" @click="listCode(index)">活动推广</a>
                            </el-popover>
                            <a v-if="is_show_arr[index]" :href="'{{ yzWebFullUrl('plugin.fight-groups.admin.controllers.fight-groups-store.edit', array('id' => '')) }}'+[[item.id]]"><div>编辑活动</div></a>
                            <a :href="'{{ yzWebFullUrl('plugin.fight-groups.admin.controllers.team-store.index', array('id' => '')) }}'+[[item.id]]"><div>开团列表</div></a>
                            <a @click="count(item.id)"><div>数据统计</div></a>
                        <!-- <a  :href="'{{ yzWebFullUrl('plugin.fight-groups.admin.controllers.order.index', array('fight_groups_id' => '')) }}'+[[item.id]]"><div>订单列表</div></a> -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- 活动列表end -->
            <!-- 分页 -->
            <el-row>
                <el-col :span="24" align="right" style="padding:15px 5% 15px 0">
                    <el-pagination layout="prev, pager, next" @current-change="currentChange" :current-page="current_page" :total="total" :page-size="per_size" background v-loading="loading"></el-pagination>
                </el-col>
            </el-row>
            <!-- 库存弹出框 -->
            <el-dialog title="库存" :visible.sync="stock_url" width="60%" v-loading="table_loading">
                <div class="dialog-title">
                    <div class="dialog-con">规格</div>
                    <div class="dialog-con">剩余库存</div>
                    <div class="dialog-con">成团销量</div>
                </div>
                <div style="display:flex;font-weight:800;line-height:50px" v-for="(item,index) in stock_list" :key="index">
                    <div class="dialog-con">[[item.option_title]]</div>
                    <div class="dialog-con">[[item.last_stock]]</div>
                    <div class="dialog-con">[[item.num]]</div>
                    <!-- <div class="dialog-con">[[stock_list.data[0].option_title]]</div>
                    <div class="dialog-con">[[stock_list.last_stock]]</div>
                    <div class="dialog-con">[[stock_list.data[0].num]]</div> -->
                </div>

                <span slot="footer" class="dialog-footer">
                <el-button @click="stock_url = false">关 闭</el-button>
                    <!-- <el-button type="primary" @click="img_text_url = false">确 定</el-button> -->
            </span>
            </el-dialog>
            <!-- 统计弹出框 -->
            <el-dialog title="数据统计" :visible.sync="count_url" width="60%" v-loading="table_loading">
                <div class="dialog-title">
                    <div class="dialog-con">规格名称</div>
                    <div class="dialog-con">成团销量</div>
                    <div class="dialog-con">销量明细</div>
                </div>
                <div class="dialog-title" v-for="(item,index) in count_list">
                    <div class="dialog-con">[[item.option_title]]</div>
                    <div class="dialog-con">[[item.stock - item.last_stock]]</div>
                    <div class="dialog-con" style="flex-wrap: wrap;">
                        <div v-for="(item1,index1) in item.level" >
                            [[item1.member_num]]人团  系统成团:[[item1.purchase_quantity_system]]  虚拟成团:[[item1.purchase_quantity_virtual]]
                        </div>
                    </div>
                </div>

                <span slot="footer" class="dialog-footer">
                <el-button @click="count_url = false">关 闭</el-button>
                    <!-- <el-button type="primary" @click="img_text_url = false">确 定</el-button> -->
            </span>
            </el-dialog>
        </div>
        <script src="{{resource_get('plugins/fight-groups/views/admin/qrcode.min.js')}}"></script>
        <script>
            var app = new Vue({
                el:"#app",
                delimiters: ['[[', ']]'],
                data() {
                    let data = {!! $data?:'{}' !!};
                    console.log(data);
                    return{
                        tab:"all",
                        stock_url:false,//库存弹出框
                        count_url:false,//统计弹出框
                        status:0,
                        url:"",//首页链接
                        search_form:{
                            goods_name:"",
                            id:"",
                            title:""
                        },
                        search_goods:{},
                        img:"",
                        list:[],
                        is_show_arr:[],//是否显示'编辑'按钮
                        stock_list:{
                            data:[{option_title:""}],
                        },//库存信息
                        count_list:{},
                        loading:false,
                        dialog_loading:false,
                        all_loading:false,
                        table_loading:false,

                        //商品分页
                        total:0,
                        per_size:0,
                        current_page:0,
                        //门店名称
                        store_name:'',
                        store_id:0,
                        rules:{},
                    }
                },
                watch: {
                    status() {
                        var that = this;
                        let json = {id:that.search_form.id,goods_name:that.search_form.goods_name,status:that.status,title:that.search_form.title};
                        console.log(json)
                        that.getData(json);
                    }
                },
                created() {
                    this.getData('{}');
                },
                methods: {
                    getData(json) {
                        var that = this;
                        that.all_loading = true;
                        that.$http.post("{!! yzWebFullUrl('plugin.fight-groups.admin.controllers.fight-groups-store.search') !!}",json).then(response => {
                            console.log(response);
                        if(response.data.result==1){
                            that.list = response.data.data.data;
                            let arr = [];
                            // 列表时间处理及'编辑'按钮控制开关
                            that.list.forEach((item,index) => {

                            if(!item.has_one_goods){
                                this.$set(item,'has_one_goods',{})
                                let title = this.escapeHTML(item.has_one_goods ? item.has_one_goods.title : '')
                                this.$set(item.has_one_goods,'title',title)
                                console.log(item.has_one_goods.title,1)
                            }else{
                                console.log(item.has_one_goods,2)
                                item.has_one_goods.title = this.escapeHTML(item.has_one_goods.title)
                            }

                            item.start_time = that.timeStyle(item.start_time)
                            for(let i=0;i<item.has_many_level.length;i++) {
                                if(item.has_many_level[i].status==0 || item.has_many_level[i].status==1) {
                                    arr.push(1);
                                    break;
                                }
                            }
                            if(arr.length-1<index){
                                arr.push(0);
                            }
                        });
                            this.is_show_arr = arr;
                            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;
                        };
                    },
                    // 查看库存
                    stock(id,option) {
                        console.log(id)
                        console.log(option)
                        let data = {
                            id:id,
                            option:option
                        }
                        var that = this;
                        that.table_loading = true;
                        that.stock_url = true;
                        that.$http.post("{!! yzWebFullUrl('plugin.fight-groups.admin.controllers.fight-groups-store.stock-detail') !!}",{data:data}).then(response => {
                            if(response.data.result==1){
                            that.stock_list = response.data.data;
                            console.log(that.stock_list)
                        }
                    else{
                            that.$message.error(response.data.msg);
                        }
                        that.table_loading = false;
                    }),function(res){
                            console.log(res);
                            that.table_loading = false;
                        };
                    },
                    // 统计
                    count(id) {
                        console.log(id)
                        var that = this;
                        that.table_loading = true;
                        that.count_url = true;
                        that.$http.post("{!! yzWebFullUrl('plugin.fight-groups.admin.controllers.fight-groups-store.data-statistics') !!}",{id:id}).then(response => {
                            if(response.data.result==1){
                            that.count_list = response.data.data;
                            console.log(that.count_list)
                        }
                    else{
                            that.$message.error(response.data.msg);
                        }
                        that.table_loading = false;
                    }),function(res){
                            console.log(res);
                            that.table_loading = false;
                        };
                    },
                    // 手动结束
                    manualEnd(id) {
                        console.log("12312313")
                        var that = this;
                        that.table_loading = true;
                        that.$http.post("{!! yzWebFullUrl('plugin.fight-groups.admin.controllers.fight-groups-store.close-level') !!}",{id:id}).then(response => {
                            if(response.data.result==1){
                            that.$message.success(response.data.msg);
                            this.getData('{}');
                        }
                    else{
                            that.$message.error(response.data.msg);
                        }
                        that.table_loading = false;
                    }),function(res){
                            console.log(res);
                            that.table_loading = false;
                        };
                    },
                    // 搜索
                    search() {
                        var that = this;
                        let json = {id:that.search_form.id,goods_name:that.search_form.goods_name,status:that.status,title:that.search_form.title,}
                        that.getData(json);
                    },
                    // 分页
                    currentChange(page) {
                        var that = this;
                        let json = {id:that.search_form.id,goods_name:that.search_form.goods_name,status:that.status,title:that.search_form.title,page:page}
                        that.getData(json);
                    },
                    qrcodeScan (url) {//生成二维码
                        let qrcode = new QRCode('qrcode', {
                            width: 100,  // 二维码宽度
                            height: 100, // 二维码高度
                            render: 'image',
                            text: url
                        });
                        console.log($("canvas"))
                        var data = $("canvas")[$("canvas").length-1].toDataURL().replace("image/png", "image/octet-stream;");
                        console.log(url)
                        // this.$set(this.img,data);
                        this.img = data;
                        console.log(this.img)
                    },
                    // 首页二维码
                    homeCode() {
                        this.qrcodeScan(this.url);
                        console.log("asdasd")
                    },
                    // 复制首页链接
                    copy() {
                        that = this;
                        let Url = that.$refs['home'];
                        Url.select(); // 选择对象
                        document.execCommand("Copy",false);
                        that.$message({message:"复制成功！",type:"success"});
                    },
                    // 活动二维码
                    listCode(index) {
                        console.log(index)
                        this.qrcodeScan(this.list[index].url);
                    },
                    // 复制活动链接
                    copyList(index) {
                        that = this;
                        let Url = that.$refs['list'+index];
                        Url[0].select(); // 选择对象
                        document.execCommand("Copy",false);
                        that.$message({message:"复制成功！",type:"success"});
                    },
                    submit(){
                        var that = this;
                        console.log(this.data);
                        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);
                        }
                    }),function(res){
                            console.log(res);
                        };
                    },
                    escapeHTML(a) {
                        a = "" + a;
                        return a.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, "\"").replace(/&apos;/g, "'");;
                    },
                    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