@extends('layouts.base')
@section('title', '活动管理')
@section('content')

    <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;}

    </style>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_913727_zrmdutznqpd.css">
    <div id="app-share-activity">
        <template>
            <el-container>
                <el-header height="auto">
                    <div class="">
                        <h4 class="card-title">活动管理</h4>
                        <el-button type="primary" icon="el-icon-plus" @click="addActivity()">创建活动</el-button>
                        <div style="padding-top: 24px">
                            <el-form v-loading="loading" ref="form" :model="form" :inline="true">
                                <el-form-item label="活动ID">
                                    <el-input v-model="searchParams.id" placeholder="活动ID"></el-input>
                                </el-form-item>
                                <el-form-item label="活动名称">
                                    <el-input v-model="searchParams.name" placeholder="请输入活动名称"></el-input>
                                </el-form-item>
                                <el-form-item label="创建时间">
                                    <template>
                                        <div class="block">
                                            <span class="demonstration"></span>
                                            <el-date-picker
                                                    v-model="searchParams.create_time"
                                                    type="datetimerange"
                                                    range-separator="至"
                                                    start-placeholder="开始日期"
                                                    end-placeholder="结束日期"
                                                    align="right">
                                            </el-date-picker>
                                        </div>
                                    </template>
                                </el-form-item>
                                <el-button type="primary" icon="el-icon-search" @click="searchData()">搜索</el-button>
                            </el-form>
                        </div>
                    </div>
                </el-header>
                {{--表格start--}}
                <el-main>
                    <template>
                        <el-table :data="list">
                            <el-table-column align="center" align="center" prop="id" label="ID" width="auto"></el-table-column>
                            <el-table-column align="center" prop="start_time" label="创建时间" width="auto"></el-table-column>
                            <el-table-column
                                    align="center"
                                    prop="end_time"
                                    label="结束时间">
                            </el-table-column>
                            <el-table-column align="center" prop="name" label="活动名称" width="auto"></el-table-column>
                            <el-table-column align="center" label="创建者" width="auto">
                                <template slot-scope="scope">
                                    <span v-if="!scope.row.has_one_store_activity">
                                        平台
                                    </span>
                                    <span v-else-if="scope.row.has_one_store_activity.has_one_store">
                                        [[scope.row.has_one_store_activity.has_one_store.store_name]]<br>
                                        ID：[[scope.row.has_one_store_activity.has_one_store.id]]
                                    </span>
                                    <span v-else>
                                        无门店信息ID:[[scope.row.has_one_store_activity.store_id ? scope.row.has_one_store_activity.store_id : 0]]
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column label="状态">
                                <template slot-scope="scope">
                                    <el-tooltip :content="scope.row.status?'启用':'禁用'" placement="top">
                                        <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="statusChange(scope.$index,scope.row,scope.row.id)"></el-switch>
                                    </el-tooltip>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    prop="browse_count"
                                    label="浏览人数">
                            </el-table-column>
                            <el-table-column align="center" label="操作">
                                <template slot-scope="scope">
                                    <a v-bind:href="'{{ yzWebUrl('plugin.share-activity.admin.activity.add', array('id' => '')) }}'+[[scope.row.id]]" title="编辑">
                                        <i class="el-icon-edit" style="font-size:28px;color:#606266"></i>
                                    </a>
                                    <a href="#" title="删除">
                                        <i class="el-icon-delete" style="font-size:28px;color:#606266" @click="del(scope.row.id)"></i>
                                    </a>
                                    <a href="#">
                                        <el-tooltip placement="top">
                                            <div slot="content">
                                                <img :src="scope.row.qr_code" alt="" style="max-width:100px;">
                                            </div>
                                            <i class="iconfont icon-erweima1" style="font-size:28px;color:#606266"></i>
                                        </el-tooltip>
                                    </a>
                                    <a href="#">
                                        <i class="el-icon-share" style="font-size:28px;color:#606266" title="点击复制链接" @click="copy(scope.row,scope.$index)"></i>
                                        <el-input v-model="scope.row.activity_url" :ref="'copy'+scope.$index" style="height: 1px;position: absolute;opacity:0;z-index:-2"></el-input>
                                    </a>
                                    <a href="#">
                                        <i class="el-icon-help" style="font-size:28px;color:#606266" title="点击复制小程序链接" @click="copyMini(scope.row,scope.$index)"></i>
                                        <el-input v-model="scope.row.mini_url" :ref="'copyMini'+scope.$index" style="height: 1px;;position: absolute;opacity:0;z-index:-2"></el-input>
                                    </a>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-main>
                {{--表格end--}}
                <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>

    <script>
        var app = new Vue({
            el: '#app-share-activity',
            delimiters: ['[[', ']]'],
            data() {
                let pageList = {!! $pageList ?: '{}'!!};
                return {
                    form : {},
                    loading : false,
                    searchParams: {
                        'id' : '',
                        'name' : '',
                        'create_time' : '',
                    },
                    real_search_form: {
                        'id' : '',
                        'name' : '',
                        'create_time' : '',
                    },
                    list : pageList.data,
                    current_page : pageList.current_page,
                    page_total : pageList.total,
                    page_size : pageList.per_page,
                }
            },
            methods: {
                statusChange(index,row,id) {
                    this.loading = true;
                    this.$http.post('{!! yzWebFullUrl('plugin.share-activity.admin.activity.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.share-activity.admin.activity.del') !!}',{id:id}).then(function (response) {
                            if (response.data.result) {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                window.open("{!! yzWebUrl('plugin.share-activity.admin.activity.index') !!}", '_self');
                            }
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
                searchData() {
                    this.loading = true;
                    if(this.searchParams.create_time){
                        this.searchParams.create_time[0] = Math.round(this.searchParams.create_time[0]/1000).valueOf();
                        this.searchParams.create_time[1] = Math.round(this.searchParams.create_time[1]/1000).valueOf();
                    }
                    this.$http.post('{!! yzWebFullUrl('plugin.share-activity.admin.activity.search') !!}',{search:this.searchParams}
                    ).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;
                                this.real_search_form = this.searchParams;
                            }
                            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'});
                        }
                    );
                },
                addActivity(){
                    window.open("{!! yzWebUrl('plugin.share-activity.admin.activity.add') !!}", '_self');
                },
                copy(row,index) {
                    that = this;
                    let Url = that.$refs['copy'+index];
                    Url.select(); // 选择对象
                    document.execCommand("Copy",false);
                    that.$message({message:"复制成功！",type:"success"});
                },
                copyMini(row,index) {
                    let that = this;
                    let Url = that.$refs['copyMini'+index];
                    Url.select(); // 选择对象
                    document.execCommand("Copy",false);
                    that.$message({message:"复制成功！",type:"success"});
                },
                currentChange(val) {
                    this.loading = true;
                    this.$http.post('{!! yzWebFullUrl('plugin.share-activity.admin.activity.search') !!}',{page:val,search:this.real_search_form}).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;
                            }
                            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'});
                        }
                    );
                }
            },
        });
    </script>
@endsection