@extends('layouts.base')
@section('title', "活动管理")
@section('content')
    <link rel="stylesheet" href="{{resource_get('plugins/deposit-ladder/views/backend/index.css')}}">
    <style>
        .edit-i{display:none;}
        .el-table_1_column_2:hover .edit-i{font-weight:900;padding:0;margin:0;display:inline-block;}
        .el-tabs__item,.is-top{font-size:16px}
        .el-tabs__active-bar { height: 3px;}
    </style>
    <div class="all">
        <div id="app" v-cloak>
            <div class="vue-head">
                <div class="vue-main-title" style="margin-bottom:20px">
                    <div class="vue-main-title-left"></div>
                    <div class="vue-main-title-content">审核管理</div>
                    <div class="vue-main-title-button">
                    </div>
                </div>

                <div class="vue-search">
                    <el-form :inline="true" :model="search" class="demo-form-inline">
                        <el-form-item label="">
                            <el-input v-model="search.activity_id" placeholder="活动ID" clearable></el-input>
                        </el-form-item>

                        <el-form-item label="">
                            <el-input v-model="search.activity_name" placeholder="活动名称" clearable></el-input>
                        </el-form-item>

                        <el-form-item label="">
                            <el-input v-model="search.store_id" placeholder="门店ID" clearable></el-input>
                        </el-form-item>

                        <el-form-item label="">
                            <el-input v-model="search.store_name" placeholder="门店名称" clearable></el-input>
                        </el-form-item>

                        <el-form-item label="">
                            <el-button type="primary" @click="searchFrom">搜索</el-button>
                        </el-form-item>

                    </el-form>
                </div>
            </div>

            <div class="vue-main">
                <div class="vue-main-form">
                    <div class="vue-main-title" style="margin-bottom:20px">
                        <div class="vue-main-title-left"></div>
                        <div class="vue-main-title-content" style="flex:0 0 120px">审核列表</div>
                    </div>

                    <el-table :data="records.data" style="width: 100%">
                        <el-table-column prop="activity_id" label="活动ID" width="100%" align="center"></el-table-column>
                        <el-table-column prop="be_to_activity.activity_name" label="活动名称" align="center"></el-table-column>
                        <el-table-column prop="polymorphism_id" label="门店ID" width="100%" align="center"></el-table-column>
                        <el-table-column prop="polymorphism_name" label="门店名称" align="center"></el-table-column>
                        <el-table-column prop="be_to_activity.created_at" label="创建时间" align="center"></el-table-column>
                        <el-table-column label="详情" width="100%" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" icon="el-icon-edit" @click="editActivity(scope.row.activity_id)"></el-button>
                            </template>
                        </el-table-column>
                        <el-table-column prop="activity_id" label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button type="primary" @click="reviewActivity(scope.row.id, 1)">通过</el-button>
                                <el-button type="danger" v-if="scope.row.status == 0" @click="reviewActivity(scope.row.id, 2)">驳回</el-button>
                                <el-button type="warning" v-if="scope.row.status == 2" disabled>已驳回</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                return {
                    search: {
                        activity_id: "",
                        activity_name: "",
                        store_id: "",
                        store_name: ""
                    },
                    records: "",
                }
            },
            mounted() {
                this.getData();
            },
            methods: {
                getData() {
                    let params = {
                        search: this.search
                    }
                    this.$http.post('{!! yzWebFullUrl('plugin.deposit-ladder.backend.review.getData') !!}', params).then(function(response) {
                        if (response.data.result) {
                            this.records = response.data.data
                        } else {
                            this.$message({
                                message: response.data.msg,
                                type: 'error'
                            })
                        }
                    }, function(response) {
                        this.$message({
                            message: response.data.msg,
                            type: 'error'
                        });
                    })
                },
                searchFrom() {
                    this.getData();
                },
                editActivity(id) {
                    window.location.href = `{!! yzWebFullUrl('plugin.deposit-ladder.backend.activity.edit') !!}` + `&id=` + id;
                },
                reviewActivity(id, status){
                    this.$confirm('确认操作?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$http.post(`{!! yzWebFullUrl('plugin.deposit-ladder.backend.review.pass') !!}`, {id: id, status: status}).then(function (response) {
                            if (response.data.result) {
                                this.$message({
                                    type: 'success',
                                    message: '操作成功'
                                });
                                this.getData();
                            } else {
                                this.$message({
                                    message: response.data.msg,
                                    type: 'error'
                                })
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '操作取消'
                        });
                    });
                }
            }
        })
    </script>
@endsection