@extends('layouts.base')
@section('title', "发货信息管理")
@section('content')
    <link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}"/>
    <style>

        .p-text {
            font-family: SourceHanSansCN-Regular;
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            /*color: #333333;*/
            /* border:1px solid red; */
            text-align: center;
        }
        .active-colors {
            background: #FFF !important;
            border-color: #DCDFE6 !important;
            color: #666 !important;
        }

    </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">
                    <div>
                        <el-form :inline="true" :model="search_form" class="demo-form-inline">
                            <el-form-item label="">
                                <el-input v-model="search_form.pay_sn" placeholder="商户订单号"></el-input>
                            </el-form-item>
                            <el-form-item label="">
                                <el-input v-model="search_form.member_id" placeholder="登录过小程序的会员ID"></el-input>
                            </el-form-item>
                            <el-form-item label="">
                                <el-input style="width: 270px"  placeholder="昵称/姓名/手机号" v-model="search_form.member_info">
                                    <el-select placeholder="选择按" style="width:90px;" v-model="search_form.member_type" clearable slot="prepend">
                                        <el-option label="昵称" value="1"></el-option>
                                        <el-option label="姓名" value="2"></el-option>
                                        <el-option label="手机号" value="3"></el-option>
                                    </el-select>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="">
                                <el-select v-model="search_form.status" clearable placeholder="微信订单状态" style="width:150px">
                                    <el-option v-for="(v,k) in order_state" :key="k" :label="v" :value="k"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="">
                                <el-select v-model="search_form.auto_status" clearable placeholder="推送状态" style="width:110px">
                                    <el-option  label="成功" value="1"></el-option>
                                    <el-option  label="失败" value="-1"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="支付时间">
                                <el-date-picker
                                        v-model="times"
                                        type="datetimerange"
                                        value-format="yyyy-MM-dd HH:mm:ss"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        style="margin-left:5px;"
                                        align="right">
                                </el-date-picker>
                            </el-form-item>

                            <el-form-item label="">
                                <el-button type="primary" icon="el-icon-search" @click="search(1)">搜索
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
            <div class="vue-main">
                <div class="vue-main-title" style="">
                    <div class="vue-main-title-left"></div>
                    <div class="vue-main-title-content">
                        订单发货信息列表
                        <span style="text-align:left;font-size:14px;color:#999">
                            <span style="color: red">提示：同步发货后需用户在微信确认收货否则10天后才会自动确认收货；确认收货后资金才解冻</span>&nbsp;&nbsp;&nbsp;
                        </span>
                    </div>
                    <div class="vue-main-title-button">
                        <el-button @click="batchPushSend()" size="mini" type="success">一键推送可发货订单</el-button>
                        <el-button @click="showSynchronizeWhere()" size="mini" type="success">同步订单</el-button>

                    </div>
                </div>
                <div class="vue-main-title" style="margin-bottom:20px">
                    <el-table v-loading="loading" :data="list" style="width: 100%">
                        <el-table-column align="center" min-width="140">
                            <template slot="header" slot-scope="scope">
                                <p>交易创建时间</p>
                                <p>支付时间</p>
                            </template>
                            <template slot-scope="scope">
                                <p class="p-text">[[scope.row.create_time]]</p>
                                <p class="p-text">[[scope.row.pay_time]]</p>
                            </template>
                        </el-table-column>
                        <el-table-column label="支付单号" align="center" min-width="160">
                            <template slot="header" slot-scope="scope">
                                <p>商户订单号</p>
                                <p>微信订单号</p>
                            </template>
                            <template slot-scope="scope">
                                <p class="p-text">[[scope.row.merchant_trade_no]]</p>
                                <p class="p-text">[[scope.row.transaction_id]]</p>
                            </template>
                        </el-table-column>
                        <el-table-column  align="center" label="会员">
                            <template slot-scope="scope">
                                <div class="p-text" style="padding-left: 6px;">
                                    <template v-if="scope.row.has_one_member !== null">
                                        <p @click="gotoMember(scope.row.has_one_member.uid)" style="line-height:32px;color:#29BA9C;cursor: pointer;">
                                            [[scope.row.has_one_member.nickname]]
                                        </p>
                                        <p>[[scope.row.has_one_member.mobile]]</p>
                                    </template>
                                    <template v-else>
                                        <p >无匹配</p>
                                    </template>

                                </div>
                            </template>
                        </el-table-column>

                        <el-table-column label="金额" align="center">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">[[scope.row.paid_amount]]</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="推送状态" align="center">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">[[scope.row.auto_status_name]]</span>
                                <div v-if="scope.row.auto_status == -1 && scope.row.auto_error">
                                    <el-tooltip class="item" effect="dark" :content="scope.row.auto_error" placement="bottom">
                                        <el-link type="warning" :underline='false'>
                                            <span class="">提示信息</span>
                                        </el-link>
                                    </el-tooltip>
                                </div>

                            </template>
                        </el-table-column>

                        <el-table-column label="订单状态" align="center">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">[[scope.row.status_name]]</span>
                                <el-link v-if="scope.row.orders != undefined && scope.row.orders != null && scope.row.orders.length > 0"  type="success" :underline='false'>
                                    <span @click="shopOrders(scope.row.orders)" class="pass-set-sty">商城订单</span>
                                </el-link>
                            </template>
                        </el-table-column>

                        <el-table-column label="是否存在纠纷" align="center">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px;color: red">[[scope.row.in_complaint ? '是' : '否']]</span>
                            </template>
                        </el-table-column>

                        <el-table-column prop="" label="操作" align="center" width="170px">
                            <template slot-scope="scope">
                                <div class="list-con-member-info vue-ellipsis" style="text-align:center;min-width: 80px;border-right:0">
                                    <div v-if="scope.row.order_state == 1">
                                        <el-button style="margin:0 auto;margin-bottom:5px;" @click="showSend(scope.row)" :disabled="isLock" size="mini" type="primary">
                                            发货
                                        </el-button>
                                    </div>
                                    <div v-if="false">
                                        <el-button style="margin:0 auto;margin-bottom:5px;" @click="showOrder(scope.row.id)" size="mini" type="warning">
                                            详细
                                        </el-button>
                                    </div>
                                    <div >
                                        <el-button style="margin:0 auto;margin-bottom:5px;" @click="syncUpload(scope.row.id)" size="mini">
                                           拉取更新
                                        </el-button>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>

                    </el-table>
                </div>
            </div>

            <!-- 分页 -->
            <div class="vue-page" v-if="total>0">
                <el-row>
                    <el-col align="right">
                        <el-pagination layout="prev, pager, next,jumper" @current-change="search" :total="total"
                                       :page-size="per_size" :current-page="current_page" background
                        ></el-pagination>
                    </el-col>
                    {{--<el-col align="right">--}}
                        {{--<div class="el-pagination">--}}
                            {{--<button type="button" class="btn-prev" :disabled="current_page < 2" @click="search(current_page - 1)">--}}
                                {{--<span>上一页</span>--}}
                            {{--</button>--}}
                            {{--<ul class="el-pager">--}}
                                {{--<li class="number active" style="background-color: #29BA9C;color: #FFF">[[current_page]]</li>--}}
                            {{--</ul>--}}
                            {{--<button type="button" class="btn-next" :disabled="has_more" @click="search(current_page + 1)">--}}
                                {{--<span>下一页</span>--}}
                            {{--</button>--}}
                        {{--</div>--}}
                    {{--</el-col>--}}
                </el-row>
            </div>

            <el-dialog :visible.sync="send_show" width="750px"  title="发货信息推送">
                <div style="height:380px;overflow:auto" >
                    <div style="text-align: center;margin-bottom: 10px;color: red">
                        注意：每笔商户订单号只能发货一次，请根据订单类型选择发货方式
                    </div>
                    <el-form ref="send_info" :model="send_info" label-width="15%">
                        <el-form-item label="信息">
                            <div>商户订单号: [[send_order.merchant_trade_no]]</div>
                        </el-form-item>
                        <el-form-item label="发货方式">
                            <el-radio-group v-model="send_info.logistics_type"  style="margin-top:5px">
                                <el-radio  v-for="(v,k) in logistics_type_list" :key="k" :label="v.value">[[v.name]]</el-radio>
                            </el-radio-group>
                            <div>物流快递必须填快递信息，其他发货方式可不填</div>
                        </el-form-item>
                        <div v-show="send_info.logistics_type == 1 || send_info.logistics_type == 2">
                            <el-form-item label="快递公司">
                                <el-select v-model="send_info.express_company" clearable filterable placeholder="快递公司"  style="width:70%;">
                                    <el-option label="请选择物流公司" value=""></el-option>
                                    <el-option v-for="(item,index) in express_companys" :key="index" :label="item.delivery_name" :value="item.delivery_id"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="快递单号" prop="">
                                <el-input v-model="send_info.tracking_no" style="width:70%;"></el-input>
                            </el-form-item>
                        </div>
                    </el-form>

                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="send_show = false;send_order = {}">取 消</el-button>
                    <el-button type="primary" @click="sendUpload()">确认 </el-button>
                </span>
            </el-dialog>

            <el-dialog title="商城订单" :visible.sync="shopOrdersVisible" width="50%">
                <el-form>
                    <div class="table-list">
                        {{--<div class="vue-main-title">--}}
                            {{--<div class="vue-main-title-left"></div>--}}
                            {{--<div class="vue-main-title-content"></div>--}}
                        {{--</div>--}}
                        <el-table :data="currentOrders" height="350" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
                            <el-table-column prop="order_sn" label="订单号">
                            </el-table-column>
                            <el-table-column prop="status_name" label="订单状态">
                            </el-table-column>
                        </el-table>
                    </div>
                </el-form>
            </el-dialog>
            <el-dialog :visible.sync="synchronize_order" width="650px" center title="同步订单"
                       v-loading="synchronize_loading"
                       element-loading-text="同步拉取中..."
                       element-loading-spinner="el-icon-loading"
                       element-loading-background="rgba(0, 0, 0, 0.8)">
                <div style="height:200px;overflow:auto" >
                    <el-form :model="synchronize_where" ref="synchronize_where" label-width="20%">
                        <el-form-item>
                            <div>选择同步时间段内订单，为空同步全部订单</div>
                        </el-form-item>
                        <el-form-item>
                            <el-date-picker
                                    v-model="synchronize_times"
                                    value-format="timestamp"
                                    type="datetimerange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="">
                            <el-button @click="switchSearchTime(6)" type="success" plain :class="timeType == 6 ? 'button-color' : 'active-colors'">全部</el-button>
                            {{--<el-button @click="switchSearchTime(1)" type="success" plain :class="timeType == 1 ? 'button-color' : 'active-colors'">今</el-button>--}}
                            <el-button @click="switchSearchTime(2)" type="success" plain :class="timeType == 2 ? 'button-color' : 'active-colors'">昨</el-button>
                            <el-button @click="switchSearchTime(3)" type="success" plain :class="timeType == 3 ? 'button-color' : 'active-colors'">近7天</el-button>
                            <el-button @click="switchSearchTime(4)" type="success" plain :class="timeType == 4 ? 'button-color' : 'active-colors'">近30天</el-button>
                            <el-button @click="switchSearchTime(5)" type="success" plain :class="timeType == 5 ? 'button-color' : 'active-colors'">近1年</el-button>
                        </el-form-item>

                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="synchronize_order = false">关 闭</el-button>
                     <el-button type="primary" @click="syncOrder()">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {

                return {

                    order_state:[],
                    times:[],
                    search_form:{},

                    synchronize_times:[],
                    timeType:0,
                    days_of_last_year:"365",
                    synchronize_loading:false,
                    synchronize_order:false,
                    synchronize_where:{

                    },

                    shopOrdersVisible:false,
                    currentOrders:[],

                    express_companys:[],
                    logistics_type_list:[],
                    isLock:false,
                    send_show:false,
                    send_order:{},
                    send_info:{
                        logistics_type:0,
                        express_company:'',
                        tracking_no:'',
                    },

                    list: [],
                    //页码数
                    current_page: 1,
                    //一页显示数据
                    per_size: 1,
                    //总页数
                    total: 1,
                    //加载
                    loading: false,

                    operationType:'',
                    operationOrder:{},
                    dialog_show:0,

                }
            },
            created() {
                let result = this.viewReturn();
                this.__initial(result);
                this.search(1);
            },
            mounted() {
                // console.log(this.search_form);
            },
            methods: {
                //视图返回数据
                viewReturn() {
                    return {!! $data?:'{}' !!};
                },
                //初始化页面数据，请求链接
                __initial(data) {
                    this.order_state = data.order_state;

                    this.logistics_type_list = data.logistics_type_list;

                    if (data.express_companys) {
                        this.express_companys = data.express_companys;
                    }

                    console.log(data);
                },

                search(page) {
                    let that = this;

                    if(this.times && this.times.length>0) {
                        this.$set(this.search_form,'start_time',this.times[0]);
                        this.$set(this.search_form,'end_time',this.times[1]);
                    } else {
                        this.$set(this.search_form,'start_time','');
                        this.$set(this.search_form,'end_time','');
                    }

                    that.loading = true;
                    that.$http.post("{!!yzWebFullUrl('plugin.min-app.Backend.Controllers.send-manage.get-list')!!}", {
                        page: page,
                        search: that.search_form,
                    }).then(response => {
                        console.log(response);
                        if (response.data.result == 1) {

                            that.list = response.data.data.data;
                            that.total = response.data.data.total;
                            that.current_page = response.data.data.current_page;
                            that.per_size = response.data.data.per_page;
                        } else {
                            that.$message.error(response.data.msg);
                        }
                        that.loading = false;
                    }), function (res) {
                        console.log(res);
                        that.loading = false;
                    };
                },

                showSend(row) {
                    this.send_order = row;
                    this.send_show = true;

                    if (this.express_companys == undefined || this.express_companys == null ||
                        this.express_companys.length <= 0) {
                        this.wxDelivery();
                    }
                },
                wxDelivery() {
                    this.$http.post("{!!yzWebFullUrl('plugin.min-app.Backend.Controllers.send-manage.wx-delivery')!!}", {
                    }).then(res => {
                        if (res.data.result === 1) {
                            this.express_companys = res.data.data;
                        } else {
                            this.$message.error(res.data.msg)
                        }
                    }), function (res) {
                        console.log(res);
                    };
                },

                sendUpload() {

                    if(!this.send_info.logistics_type) {
                        this.$message.error("必须选择发货方式");
                        return;
                    }

                    if (this.send_info.logistics_type  == 1) {

                        if (this.send_info.express_company == "") {
                            this.$message.error("快递公司不能为空！");
                            return;
                        }

                        if (this.send_info.tracking_no == "") {
                            this.$message.error("快递单号不能为空！");
                            return;
                        }
                    }
                    this.isLock = true;
                    //点击确定的操作(调用接口)
                    this.$http.post("{!!yzWebFullUrl('plugin.min-app.Backend.Controllers.send-manage.send-upload')!!}", {
                        id:this.send_order.id,
                        send_info: this.send_info,
                    }).then(res => {
                        if (res.data.result == 1) {
                            this.$message.success(res.data.msg);
                            this.search(this.currentPage);
                            this.send_order ={};
                            this.send_show = false;
                        } else {
                            this.$message.error(res.data.msg)
                        }

                        this.isLock = false;
                    }), function (res) {
                        console.log(res);
                        this.isLock = false;
                    };
                },

                batchPushSend() {
                    this.$confirm('手动批量推送商城可发送订单到微信?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //点击确定的操作(调用接口)
                        this.loading = true;
                        this.$http.post("{!!yzWebFullUrl('plugin.min-app.Backend.Controllers.send-manage.batch-push-send')!!}", {}).then(res => {
                            if (res.data.result === 1) {

                                this.$message.success("推送完成");
                            } else {
                                this.$message.error("推送失败")
                            }
                            this.loading = false;
                        })
                    })
                },

                //请求小程序接口同步订单
                syncOrder() {
                    let json = {};

                    if(this.synchronize_times && this.synchronize_times.length>0) {
                        json.start_time = parseInt(this.synchronize_times[0] / 1000);
                        json.end_time = parseInt(this.synchronize_times[1] / 1000);
                    } else {
                        json.start_time = "";
                        json.end_time ="";
                    }

                    this.synchronize_loading = true;
                    this.$http.post("{!!yzWebFullUrl('plugin.min-app.Backend.Controllers.send-manage.sync-order')!!}", {
                        data:json
                    }).then(res => {
                        if (res.data.result === 1) {
                            this.$message.success(res.data.msg + '，订单数：' +res.data.data.order_num);
                            this.search(this.currentPage);
                        } else {
                            this.$message.error(res.data.msg)
                        }
                        this.synchronize_loading = false;
                        this.synchronize_order = false;
                    }), function (res) {
                        this.synchronize_loading = false;
                        console.log(res);
                    };
                },

                syncUpload(id) {
                    this.$http.post("{!!yzWebFullUrl('plugin.min-app.Backend.Controllers.send-manage.sync-upload')!!}", {
                        id:id
                    }).then(res => {
                        if (res.data.result === 1) {
                            this.$message.success(res.data.msg);
                            this.search(this.currentPage);
                        } else {
                            this.$message.error(res.data.msg)
                        }
                    }), function (res) {
                        console.log(res);
                    };
                },

                //微信订单详情
                showOrder(id) {

                },

                //打开商城订单弹窗
                shopOrders(orders) {
                    this.currentOrders = orders;
                    this.shopOrdersVisible = true;
                },

                gotoMember(id) {
                    window.location.href = `{!! yzWebFullUrl('member.member.detail') !!}`+`&id=`+id;
                },

                // 字符转义
                escapeHTML(a) {
                    a = "" + a;
                    return a.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, "\"").replace(/&apos;/g, "'");;
                },
                getParam(name) {
                    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                    var r = window.location.search.substr(1).match(reg);
                    if (r != null) return unescape(r[2]);
                    return null;
                },

                showSynchronizeWhere() {

                    this.synchronize_order = true;
                    this.switchSearchTime(5);

                },

                getStartEndTime (num = 1) {
                    // 一天的毫秒数
                    const MillisecondsADay = 24*60*60*1000 * num;
                    // 今日开始时间戳
                    const todayStartTime = new Date(new Date().setHours(0, 0, 0, 0)).getTime();
                    // 今日结束时间戳
                    const todayEndTime = new Date(new Date().setHours(23,59,59,999)).getTime();

                    // 昨日开始时间戳
                    const yesterdayStartTime = todayStartTime - MillisecondsADay;
                    // 昨日结束时间戳
                    const yesterdayEndTime = todayEndTime - MillisecondsADay;

                    return [parseInt(yesterdayStartTime),parseInt(num > 1 ? todayEndTime : yesterdayEndTime)]
                },

                switchSearchTime(timeType) {
                    switch (timeType) {
                        //今天
                        case 1:
                            timeArr = this.getStartEndTime(0);
                            break;
                        //昨天
                        case 2:
                            timeArr = this.getStartEndTime(1);
                            break;
                        //近7天
                        case 3:
                            timeArr = this.getStartEndTime(7);
                            break;
                        //近30天
                        case 4:
                            timeArr = this.getStartEndTime(30);
                            break;
                        //近1年
                        case 5:
                            timeArr = this.getStartEndTime(this.days_of_last_year);
                            break;
                        case 6:
                            timeArr = [];
                            break;
                    }
                    this.synchronize_times = timeArr;
                    if(this.timeType == timeType){
                        this.timeType = 0;
                        this.synchronize_times = [];
                    } else {
                        this.timeType = timeType;
                    }

                },

            },
        })
    </script>
@endsection