@extends('layouts.base')
@section('title', '订单管理')
@section('content')
    <link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}"/>
    <link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-ohter.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;
        }

        .input-with-select .el-input-group__prepend {
            background-color: #fff;
        }

    </style>
    <div class="all">
        <div id="app" v-cloak>
            <div class="vue-head">
                <div class="vue-search">
                    <el-form :inline="true" :model="search_form" class="demo-form-inline">
                        <el-row :gutter="15">

                            <el-col :span="8" style="margin-top: 10px">
                                <el-input placeholder="会员昵称/姓名/手机号/ID" v-model="search_input_value2"
                                          class="input-with-select">
                                    <el-select style="width: 150px" class="search_input_select"
                                               v-model="search_input_key2" slot="prepend" placeholder="请选择">
                                        <el-option label="会员昵称" value="nickname">会员昵称
                                        </el-option>
                                        <el-option label="会员姓名" value="realname">会员姓名
                                        </el-option>
                                        <el-option label="会员手机" value="mobile">会员手机
                                        </el-option>
                                        <el-option label="会员ID" value="uid">会员ID
                                        </el-option>
                                    </el-select>
                                </el-input>
                            </el-col>


                            <el-col :span="8" style="margin-top: 10px">
                                <el-input placeholder="订单ID/订单号/第三方订单号" v-model="search_input_value4"
                                          class="input-with-select">
                                    <el-select style="width: 130px" class="search_input_select"
                                               v-model="search_input_key4" slot="prepend" placeholder="请选择">
                                        <el-option label="订单号" value="order_sn">订单号
                                        </el-option>
                                        <el-option label="订单ID" value="order_id">订单ID
                                        </el-option>
                                        <el-option label="第三方订单号" value="bird_order_sn">第三方订单号
                                        </el-option>
                                        <el-option label="芸信订单号" value="yun_order">芸信订单号
                                        </el-option>
                                    </el-select>
                                </el-input>
                            </el-col>

                            <el-col :span="5" style="margin-top: 10px">
                                <el-select v-model="search_form.state" clearable placeholder="订单状态">
                                    <el-option
                                            v-for="(item,index) in state_arr"
                                            :key="index"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>

                        </el-row>


                        <el-row :gutter="5">
                            <el-col :span="3" style="margin-top: 10px">
                                <el-select v-model="search_form.time_field" clearable placeholder="搜索时间">
                                    <el-option
                                            v-for="(item,index) in ts_arr"
                                            :key="index"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-col>

                            <el-col :span="6" style="margin-top: 10px">
                                <div class="block">
                                    <span class="demonstration"></span>
                                    <el-date-picker
                                            v-model="search_form.time_arr"
                                            type="datetimerange"
                                            :picker-options="pickerOptions"
                                            range-separator="至"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期"
                                            value-format="timestamp"
                                            align="right">
                                    </el-date-picker>
                                </div>
                            </el-col>


                            <el-col :span="4" style="margin-top: 10px">
                                <el-button-group>
                                    <el-button type="primary" @click="changeForm()">搜索</el-button>
                                    <el-button type="success" @click="refresh_modal.show=true">刷新</el-button>
                                </el-button-group>
                            </el-col>
                        </el-row>

                    </el-form>
                </div>
            </div>
            <div class="vue-main">
                <div class="vue-main-form">
                    <div class="vue-main-title" style="margin-top:-10px">
                        <div class="title"><span
                                    style="width: 4px;height: 18px;background-color: #29ba9c;margin-right:15px;display:inline-block;"></span><b>订单管理</b>
                        </div>
                    </div>
                </div>
                <div style="margin-bottom:20px">
                    <div style="margin-bottom:20px">
                    </div>
                    <el-table :data="list" style="width: 100%;" align="center" :fit="true">

                        <el-table-column min-width="12.5%" prop="" label="订单号/第三方订单号/芸信订单号" align="center">
                            <template slot-scope="scope">
                                [[scope.row.order_sn]]<template v-if="!scope.row.order_sn"> /</template><br>
                                [[scope.row.bird_order_sn]]<template v-if="!scope.row.bird_order_sn"> /</template><br>
                                [[scope.row.yun_order]]<template v-if="!scope.row.yun_order"> /</template>
                            </template>
                        </el-table-column>

                        <el-table-column min-width="12.5%" prop="" label="会员信息" align="center">
                            <template slot-scope="scope">
                                <div class="block" v-if="scope.row.has_one_member">
                                    <el-link type="info" class="title"
                                             @click="memberDetail(scope.row.has_one_member.uid)" target="_blank">
                                        <el-avatar shape="circle" :size="40"
                                                   :src="scope.row.has_one_member.avatar_image"></el-avatar>
                                        <br>
                                        ([[scope.row.has_one_member.uid]])[[scope.row.has_one_member.username]]
                                    </el-link>
                                </div>
                            </template>
                        </el-table-column>

                        <el-table-column min-width="8%" prop="bird_type_name" label="第三方平台" align="center">
                        </el-table-column>

                        <el-table-column min-width="12.5%" prop="" label="状态" align="center">
                            <template slot-scope="scope">
                                <el-tag type="primary" v-if="scope.row.state==0">待结算</el-tag>
                                <el-tag type="success" v-if="scope.row.state==1">已结算</el-tag>
                                <el-tag type="danger" v-if="scope.row.state==-1">已失效</el-tag>
                            </template>
                        </el-table-column>

                        <el-table-column min-width="12.5%" label="订单金额" align="center">
                            <template slot-scope="scope">
                                [[scope.row.amount]]元
                            </template>
                        </el-table-column>

                        <el-table-column min-width="17%" label="时间" align="center">
                            <template slot-scope="scope">
                                <el-tag type="info">创建时间:[[scope.row.create_time]]</el-tag>
                                <p></p>
                                <template v-if="scope.row.close_time">
                                    <el-tag type="danger">关闭时间:[[scope.row.close_time]]</el-tag>
                                    <p></p>
                                </template>
                                <template v-if="scope.row.finish_time">
                                    <el-tag type="primary">结算时间:[[scope.row.finish_time]]</el-tag>
                                    <p></p>
                                </template>
                            </template>
                        </el-table-column>


                        <el-table-column min-width="12.5%" prop="" label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" v-if="scope.row.state==0"
                                           @click="refreshOrder(scope.row)">刷新订单
                                </el-button>
                            </template>
                        </el-table-column>

                    </el-table>
                </div>


                <el-dialog title="订单刷新" :visible.sync="refresh_modal.show" width="50%">

                    <el-row :gutter="3"></el-row>
                    <el-col :span="3"><span style="float: right;margin-top: 6px;margin-right: 2px">更新时间</span></el-col>
                    <el-col :span="5">
                        <div class="block">
                            <span class="demonstration"></span>
                            <el-date-picker
                                    v-model="refresh_modal.time_arr"
                                    type="datetimerange"
                                    :picker-options="pickerOptions"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    value-format="timestamp"
                                    align="right">
                            </el-date-picker>
                        </div>
                    </el-col>

                    <span slot="footer" class="dialog-footer">
                         <el-button :loading="refresh_modal.refresh_button_loading" type="primary"
                                    @click="refreshManyOrder()">刷新</el-button>
                    <el-button @click="refresh_modal.show = false">取 消</el-button>
                </span>

                </el-dialog>


                <div class="vue-page" v-if="total > 0">
                    <el-row>
                        <el-col align="right">
                            <el-pagination layout="prev, pager, next,jumper" @current-change="getData" :total="total"
                                           :page-size="per_page" :current-page="current_page" background
                            ></el-pagination>
                        </el-col>
                    </el-row>
                </div>


            </div>
            <!-- 分页 -->

        </div>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                var uid = "{!! $_GET['uid'] !!}";
                if (uid === undefined || uid === 0 || uid === '0') {
                    uid = '';
                }
                return {
                    refresh_modal: {
                        'show': false,
                        'time_arr': [new Date().getTime() - 86400 * 1000, new Date().getTime()],
                        'refresh_button_loading': false,
                    },
                    list: [],
                    total: 1,
                    per_page: 1,
                    current_page: 1,
                    search_form: {
                        'state': '',
                        'create_notice': '',
                        'finish_notice': '',
                        'time_field': '',
                        'time_arr': [new Date().getTime(), new Date().getTime()]
                    },
                    search_input_key2: 'nickname',
                    search_input_value2: '',
                    search_input_key4: 'order_sn',
                    search_input_value4: '',
                    search_data: {},
                    state_arr: [
                        {value: '0', label: '待结算'},
                        {value: '1', label: '已结算'},
                        {value: '-1', label: '已失效'},
                    ],
                    ts_arr: [
                        {value: 'create_time', label: '创建时间'},
                        {value: 'finish_time', label: '结算时间'},
                        {value: 'close_time', label: '失效时间'},
                    ],
                    pickerOptions: {
                        shortcuts: [
                            {
                                text: '一天内',
                                onClick(picker) {
                                    const end = new Date();
                                    const start = new Date();
                                    start.setTime(start.getTime() - 3600 * 1000 * 24);
                                    picker.$emit('pick', [start, end]);
                                }
                            },
                            {
                                text: '三天内',
                                onClick(picker) {
                                    const end = new Date();
                                    const start = new Date();
                                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
                                    picker.$emit('pick', [start, end]);
                                }
                            }, {
                                text: '一周内',
                                onClick(picker) {
                                    const end = new Date();
                                    const start = new Date();
                                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                    picker.$emit('pick', [start, end]);
                                }
                            }, {
                                text: '一月内',
                                onClick(picker) {
                                    const end = new Date();
                                    const start = new Date();
                                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                    picker.$emit('pick', [start, end]);
                                }
                            },
                        ]
                    },
                }
            },
            created() {

            },
            mounted() {
                this.changeForm();
            },
            methods: {
                memberDetail: function (id) {
                    window.open("{!!  yzWebFullUrl('member.member.detail') !!}" + '&id=' + id);
                },
                refreshManyOrder: function () {
                    this.refresh_modal.refresh_button_loading = true;
                    this.$http.post('{!! yzWebFullUrl('plugin.cps-sub-platform.admin.order.refreshManyOrder') !!}', {
                        'start_time': this.refresh_modal.time_arr[0],
                        'end_time': this.refresh_modal.time_arr[1],
                    }).then(function (response) {
                        console.log(response);
                        if (response.data.result) {
                            this.$message({message: response.data.msg, type: 'success'});
                            this.search();
                            this.refresh_modal.show = false;
                        } else {
                            this.$message({message: response.data.msg, type: 'error'});
                        }
                        this.refresh_modal.refresh_button_loading = false
                    }, function (response) {
                        this.$message({message: response.data.msg, type: 'error'});
                        this.refresh_modal.refresh_button_loading = false
                    })
                },
                refreshOrder: function (scope) {
                    this.$http.post('{!! yzWebFullUrl('plugin.cps-sub-platform.admin.order.refreshOrder') !!}', {
                        'order_id': scope.order_id,
                    }).then(function (response) {
                        console.log(response);
                        if (response.data.result) {
                            this.$message({message: response.data.msg, type: 'success'});
                            this.search();
                        } else {
                            this.$message({message: response.data.msg, type: 'error'});
                        }
                    }, function (response) {
                        this.$message({message: response.data.msg, type: 'error'});
                    })
                },
                search: function () {
                    this.$http.post('{!! yzWebFullUrl('plugin.cps-sub-platform.admin.order.index') !!}', {
                        'page': this.current_page,
                        'is_json': 1,
                        'search_data': this.search_data,
                    }).then(function (response) {
                        console.log(response);
                        if (response.data.result) {
                            let this_data = response.data.data.list;
                            this.current_page = this_data.current_page;
                            this.list = this_data.data;
                            this.total = this_data.total;
                            this.per_page = this_data.per_page;
                        } else {
                            this.$message({message: response.data.msg, type: 'error'});
                        }
                    }, function (response) {
                        this.$message({message: response.data.msg, type: 'error'});
                    })

                },
                getData: function (val) {
                    this.current_page = val;
                    this.search();
                },
                changeForm: function () {

                    this.search_data.realname = '';
                    this.search_data.mobile = '';
                    this.search_data.uid = 0;
                    this.search_data.nickname = '';

                    this.search_data.order_sn = 0;
                    this.search_data.order_sn = '';
                    this.search_data.bird_order_sn = '';
                    this.search_data.yun_order = '';

                    this.search_data = this.search_form;
                    this.search_data[this.search_input_key2] = this.search_input_value2;
                    this.search_data[this.search_input_key4] = this.search_input_value4;

                    this.current_page = 1;
                    this.search();
                }
            },
        })
    </script>
@endsection