@extends('layouts.base')
@section('title', '自购省记录')
@section('content')
    <link rel="stylesheet" href="{{resource_get('plugins/store-cashier/src/common/static/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="right-titpos">
                    <ul class="add-snav">
                        <li class="active"><a href="#">自购省>订单记录</a></li>
                    </ul>
                </div>
                <div class="vue-search" >
                    <el-form :inline="true" :model="search_form" class="demo-form-inline" >
                        <el-col :span="3">
                        <el-form-item label="" >
                            <el-input v-model="search_form.order_sn" placeholder="订单号"></el-input>
                        </el-form-item>
                        </el-col>
                        <el-col :span="3">
                        <el-form-item label="">
                            <el-input v-model="search_form.member_mes" placeholder="会员昵称/姓名/手机号"></el-input>
                        </el-form-item>
                        </el-col>
                        <el-col :span="2">
                        <el-form-item>
                            <el-select v-model="search_form.order_type" placeholder="订单类型">
                                <el-option
                                        v-for="(item,index) in order_type_arr"
                                        :key="index"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        </el-col>
                        <el-col :span="2">
                        <el-form-item>
                            <el-select v-model="search_form.order_status" placeholder="订单状态">
                                <el-option
                                        v-for="(item,index) in order_status_arr"
                                        :key="index"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        </el-col>
                        <el-col :span="3">
                        <el-form-item>
                            <el-select v-model="search_form.ts_type" placeholder="不搜索订单时间">
                                <el-option
                                        v-for="(item,index) in ts_arr"
                                        :key="index"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        </el-col>
                        <el-form-item>
                            <div class="block">
                                <span class="demonstration"></span>
                                <el-date-picker
                                        v-model="search_form.time_value"
                                        type="datetimerange"
                                        :picker-options="pickerOptions"
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        value-format="timestamp"
                                        align="right">
                                </el-date-picker>
                            </div>
                        </el-form-item>

                        <el-form-item label="">
                            <el-button type="primary" @click="changeForm()">搜索</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 class="" style="text-align:left;color:#999">
                            <span>数量：[[total]]</span>&nbsp;&nbsp;&nbsp;自购省金额合计：￥[[sum_amount]]
                        </div>
                        <div class="vue-main-title-button">
                        </div>
                    </div>
                    <el-table :data="list" style="width: 100%;" align="center" :fit="true">
                        <el-table-column label="ID" align="center" prop="id" width="70">
                        </el-table-column>

                        <el-table-column prop="created_at" label="下单时间" align="center"></el-table-column>
                        <el-table-column prop="order_sn" label="订单号" align="center"></el-table-column>
                        <el-table-column  align="center" label="下单会员">
                            <template slot-scope="scope">
                                <div class="block"  >
                                    <el-avatar shape="square" :size="40"  :src="scope.row.has_one_member.avatar_image"  :error="errorPic(scope.row.id)"></el-avatar><br>
                                    <span class="title">[[scope.row.has_one_member.username]]</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="order_amount" label="订单金额" align="center"></el-table-column>
                        <el-table-column prop="discount_amount" label="自购省金额" align="center"></el-table-column>
                        <el-table-column prop="has_one_order.status_name" label="订单状态" align="center"></el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button type="primary" @click="orderDetail(scope.row.order_id)">查看订单</el-button>
                            </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="getData" :total="total"
                                       :page-size="per_page" :current-page="current_page" background
                        ></el-pagination>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                return {
                    default_img1 : "{!! $dafault_img1 !!}",
                    default_img2 : "{!! $dafault_img2 !!}",
                    pickerOptions: {
                        shortcuts: [{
                            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]);
                            }
                        }, {
                            text: '最近三个月',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                                picker.$emit('pick', [start, end]);
                            }
                        }]
                    },
                    list:[],
                    order_type_arr: [
                        {
                            value: '-1',
                            label: '订单类型'
                        },
                        {
                        value: '1',
                        label: '平台自营'
                    }, {
                        value: '2',
                        label: '供应商'
                    }, {
                        value: '3',
                        label: '门店'
                    }, {
                        value: '4',
                        label: '聚合供应链'
                    }],
                    order_status_arr: [
                        {
                            value: '-1',
                            label: '订单状态'
                        },
                        {
                            value: '0',
                            label: '未支付'
                        }, {
                            value: '1',
                            label: '未完成'
                        }, {
                            value: '2',
                            label: '已完成'
                        }, {
                            value: '3',
                            label: '已退款'
                        }],
                    ts_arr: [
                        {
                            value: '0',
                            label: '不搜索订单时间'
                        },
                        {
                            value: '1',
                            label: '搜索订单时间'
                        }],
                    search_form:{
                        'order_sn' : '',
                        'member_mes':'',
                        'time_value': [new Date().getTime(), new Date().getTime()],
                        'order_status':'-1',
                        'order_type':'-1',
                        'ts_type':'0',
                    },
                    true_form:{
                        'order_sn' : '',
                        'member_mes':'',
                        'time_value': [new Date().getTime(), new Date().getTime()],
                        'order_status':'-1',
                        'order_type':'-1',
                        'ts_type':'0',
                    },
                    order_count:0,
                    sum_amount:0,
                    total:1,
                    per_page:1,
                    current_page:1,
                }
            },
            created() {

            },
            mounted() {
                this.search();
            },
            methods: {
                errorPic:function(id){
                    console.log(this.list);
                    var obj = this.list;
                    var default_img1 = this.default_img1;
                    var default_img2 = this.default_img2;
                   $.each(this.list,function (k,v) {
                       // obj[k].has_one_member.avatar_image = default_img1;
                       if(v.id == id){
                           if(default_img1 == '' || default_img1 == null || default_img1 == undefined){
                               obj[k].has_one_member.avatar_image = default_img2;
                           }else{
                               obj[k].has_one_member.avatar_image = default_img1;
                           }
                       }
                   })
                },
                search:function () {
                    let post_data = this.true_form;
                    post_data.page = this.current_page;
                    // alert(post_data.page);
                    this.$http.post('{!! yzWebFullUrl('plugin.selfbuy-discount.admin.order.get-data') !!}',post_data).then(function (response){
                        console.log(response);
                        if (response.data.result) {
                            let this_data = response.data.data;
                            this.current_page = this_data.current_page;
                            this.list = this_data.data;
                            this.total = this_data.total;
                            this.per_page = this_data.per_page;
                            this.sum_amount = this_data.sum_amount;
                            // this.$message({message: response.data.msg,type: 'success'});
                            // location.reload();
                        }else {
                            this.$message({message: response.data.msg,type: 'error'});
                        }
                    },function (response) {
                        this.$message({message: response.data.msg,type: 'error'});
                    })

                },
                orderDetail:function (order_id) {
                    window.open("{!! yzWebUrl('order.detail') !!}"+'&id='+order_id,"_blank");
                },
                getData:function(val){
                    this.current_page = val;
                    this.search();
                },
                changeForm:function () {
                    this.true_form = this.search_form;
                    this.current_page = 1;
                    this.search();
                }

            },
        })
    </script>
@endsection