@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 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.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="order_sn">
                        <el-input v-model="search_form.order_sn" placeholder="请输入订单编号"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称" prop="member_name">
                        <el-input v-model="search_form.member_name" placeholder="请输入昵称"></el-input>
                    </el-form-item>
                    <a href="#">
                        <el-button type="success" icon="el-icon-search" @click="search()">搜索</el-button>
                    </a>
                </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">
                        <template slot-scope="scope">
                            <img :src="scope.row.avatar" style="width:50px;height:50px">
                            <div>【[[scope.row.member_id]]】[[scope.row.nickname]]</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="规格和数量" align="center">
                        <template slot-scope="scope">
                            <div>[[scope.row.option_title?scope.row.option_title:'单规格']]*[[scope.row.purchase_quantity]]</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="price" label="拼团单价" align="center"></el-table-column>
                    <el-table-column prop="total_price" label="拼团总价" align="center"></el-table-column>
                    <el-table-column prop="total" label="拼团时间" min-width="150" align="center">
                        <template slot-scope="scope">
                            [[scope.row.created_at]]
                        </template>
                    </el-table-column>
                    <el-table-column prop="total" label="支付时间" min-width="150" align="center">
                        <template slot-scope="scope">
                            <span v-if="!scope.row.join_time">---:---</span>
                            <span v-else>[[scope.row.join_time]]</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="order_sn" label="订单编号" align="center"></el-table-column>
                    <el-table-column prop="status_message" label="参团状态" align="center"></el-table-column>
                    <el-table-column label="管理" min-width="80" align="center">
                        <template slot-scope="scope">
                            <a target="_blank" :href="'{{ yzWebFullUrl('plugin.fight-groups.admin.controllers.order-store.detail', array('id' => '')) }}'+[[scope.row.order_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>
    var app = new Vue({
        el:"#app",     
        delimiters: ['[[', ']]'],
        data() {
            return{
                id:"",
                search_form:{},
                form:{},
                list:[],
                loading:false,
                dialog_loading:false,
                table_loading:false,
                rules:{},
                 //分页
                total:0,
                per_size:0,
                current_page:0,
                rules:{},
            }
        },
        created() {
            //获得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 = {team_id:this.id}
            this.getData(json);
        },
        methods: {
            getData(json) {
                var that = this;
                that.all_loading = true;
                that.$http.post("{!! yzWebFullUrl('plugin.fight-groups.admin.controllers.team-store.search-details') !!}",json).then(response => {
                    if(response.data.result==1){
                        console.log(response)
                        that.list = response.data.data.data;
                        that.list.forEach((item,index) => {
                            if(item.join_time){
                                item.join_time = that.timeStyle(item.join_time)
                            }

                            // if(item.refund_time){
                            //     item.refund_time = that.timeStyle(item.refund_time)
                            // }
                        });
                        that.total = response.data.data.total;
                        that.per_size = response.data.data.per_page;
                        that.current_page = response.data.data.current_page;
                    }
                    else{
                        that.$message.error(response.data.msg);
                    }
                    console.log(this.list)
                    that.all_loading = false;
                }),function(res){
                    console.log(res);
                    that.all_loading = false;
                };
            },
            // 分页
            currentChange(page) {
                var that = this;
                let json = {page:page,team_id:that.id,member_name:that.search_form.member_name,order_sn:that.search_form.order_sn};
                that.getData(json);
            },
            // 搜索
            search() {
                var that = this;
                console.log(that.search_form)
                let json = {page:1,team_id:that.id,member_name:that.search_form.member_name,order_sn:that.search_form.order_sn};
                that.getData(json);
            },
            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