@extends('layouts.base')
@section('title', '全部会员列表')
@section('content')
    <link href="{{static_url('yunshop/css/total.css')}}" media="all" rel="stylesheet" type="text/css" />
    <style scoped>
        .vue-title {
            display: flex;
            margin: 5px 0;
            line-height: 32px;
            font-size: 16px;
            color: #333;
            font-weight: 600;
        }

        .vue-title-left {
            width: 4px;
            height: 18px;
            margin-top: 6px;
            background: #29ba9c;
            display: inline-block;
            margin-right: 10px;
        }

        .vue-title-content {
            font-size: 14px;
            flex: 1;
        }

        .inputs {
            margin-top: 20px;
            padding-left: 15px;
        }

        .input-w-1 {
            width: 300px;
            margin-right: 10px;
        }

        .picker-box {
            margin-left: -10px;
        }

        .spanClass {
            font-family: SourceHanSansCN-Regular;
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 1px;
            color: #999999;
            margin-left: 10px;
        }

        .el-table_1_column_8,
        .el-table_1_column_9 {
            text-align: left !important;
        }

        .excelUp {
            width: 140px;
            height: 40px;
            border: 1px solid #29ba9c;
            color: #29ba9c;
            border-radius: 5px;
        }

        .excelUp .el-link--inner {
            color: #29ba9c;
        }

        .el-dialog {
            height: 685px;
        }

        .el-dialog__body {
            height: 540px;
        }
        .member-merge{
            height: 350px;
        }
        .member-merge .el-dialog__body {
            height: 200px;
        }

        .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;
        }

        .cell {
            text-align: center;
        }

        .el-table_1_column_1 .cell {
            text-align: left;
            margin-left: 10px
        }

        .el-table_1_column_7 .cell {
            text-align: left;
        }

        .el-table_1_column_8 .cell {
            text-align: left;
        }

        .titleE {
            cursor: pointer;
            user-select: none;
        }

        .keep {
            width: 40px;
            height: 22px;
            font-family: SourceHanSansCN-Medium;
            font-size: 12px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 1px;
            color: #ffffff;
            font-weight: bold;
            background: #ff9800;
            text-align: center;
        }

        .keep_0 {
            background: #9c27b0;
            margin: 0 auto !important;
        }

        /* 显示图标 */
        .icon_size {
            font-size: 30px;
        }

        /* 已关注 */
        .wechat_public_already {
            color: #04af82;
        }

        /* 未关注 */
        .wechat_public_not {
            color: #999999;
        }

        /* 微信小程序 */
        .smallprogram {
            color: #00b84b;
        }

        /* APP */
        .all_app {
            color: #0068ff;
        }

        /* 微信开放平台 */
        .all_wechat {
            color: #0ad76d;
        }

        /* 支付宝 */
        .all_alipay {
            color: #069eff;
        }

        /* 抖音 */
        .all_tril {
            color: #23042b;
        }

        /* 企业微信 */
        .qiyeweixin01 {
            color: #0082ef;
        }

        [v-cloak] {
            display: none;
        }

        .input-w {
            height: 40px;
            margin-right: 19px;
            margin-bottom: 20px;
            border-radius: 4px;
        }

        .input_1 {
            width: 120px;
        }

        .input_2 {
            width: 300px;
        }

        .input_3 {
            width: 230px;
        }

        .input_4 {
            width: 437px;
            height: 42px;
            border-radius: 6px;
            border: solid 1px #dee2ee;
        }

        .input_5 {
            width: 102px;
            height: 40px;
            background-color: #29ba9c;
            border-radius: 4px;
        }

        .input_6 {
            width: 140px;
            height: 40px;
            border-radius: 4px;
            color: #29ba9c;
            border: solid 1px #29ba9c;
        }

        .input_7 {
            width: 125px;
            height: 40px;
            border-radius: 4px;
            border: solid 1px #29ba9c;
        }

        .tag_all {
            height: 22px;
            line-height: 22px;
        }

        .tag_13c7a7 {
            background-color: #13c7a7;
            margin-bottom: 4px;
        }

        .tag_ffb025 {
            background-color: #ffb025;
        }

        .tag_box {
            text-align: left;
        }

        .tag_box .el-tag--dark {
            font-family: SourceHanSansCN-Medium;
            font-size: 12px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 1px;
            color: #ffffff;
            border: none;
        }

        .table_p p {
            margin: 0;
        }

        .addTag {
            width: 89px;
            height: 30px;
            border-radius: 4px;
            font-family: SourceHanSansCN-Heavy;
            font-size: 12px;
            font-weight: normal;
            color: #29ba9c;
            padding: 0px 0px;
            border: solid 1px #29ba9c;
            margin-right: 20px;
            margin-left: -45px;
        }

        /* 隐藏折叠功能 */
        .table_p .el-table__expand-column .cell {
            display: none;
        }

        .tableBox.noborder .expanded td {
            border: none;
        }

        .operation {
            width: 70px;
            height: 30px;
            border-radius: 4px;
            margin-bottom: 5px;
            border: solid 1px #a2a2a2;
        }

        .el-table__expanded-cell[class*=cell] {
            padding: 12px 50px;
        }

        .fixed {
            margin-left: -10px;
        }

        /* 链接列表 */
        .linkList {
            height: 30px;
            line-height: 30px;
        }
        .a_userOrder{
            color: #0ab2dc;
        }
        .a_userOrder:hover{
            color: #0b1eee;
            cursor: pointer;
        }
    </style>
    <div class="all">
        <div id="app" v-cloak>
            <div class="total-head">
                <div class="vue-title">
                    <div class="vue-title-left"></div>
                    <div class="vue-title-content">会员查询</div>
                </div>
                <!-- 搜索列表 -->
                <div class="inputs">
                    <el-input class="input-w input_1" clearable class="input-w" v-model="search_form.account_number" placeholder="户号"></el-input>
                    <el-input class="input-w input_1" clearable class="input-w" v-model="search_form.account_name" placeholder="户名"></el-input>
                    <el-input class="input-w input_1" clearable class="input-w" v-model="search_form.member_id" placeholder="会员ID"></el-input>
                    <el-input class="input-w input_1" clearable class="input-w" v-model="search_form.member_info" placeholder="会员昵称/姓名/手机号" style="width: 200px"></el-input>
                    <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-button class="input_5" @click="search" type="primary">搜索</el-button>
                </div>
            </div>
            <div class="total-floo" style="padding-bottom:50px;overflow-x: scroll;">
                <div class="main">
                    <el-table class="table_p tableBox" :data="list" style="width: 100%">
                        <el-table-column label="ID">
                            <template slot-scope="scope">
                                <span>[[scope.row.id]]</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="添加时间">
                            <template slot-scope="scope">
                                <span>[[scope.row.created_at]]</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="户名">
                            <template slot-scope="scope">
                                <span>[[scope.row.account_name]]</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="户号">
                            <template slot-scope="scope">
                                <span>[[scope.row.account_number]]</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="所在区域">
                            <template slot-scope="scope">
                                <span>[[scope.row.province]]</span><br>
                                <span>[[scope.row.city]]</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="会员">
                            <template slot-scope="scope">
                                <div>
                                    <el-image style="width: 100px; height: 100px" :src="scope.row.avatar" :fit="cover"></el-image>
                                </div>
                                <div>
                                    <span>[[scope.row.nickname]]</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column>
                            <template slot="header" slot-scope="scope">
                                <div>累计订单充值（单）</div>
                                <div>累计订单金额（元）</div>
                            </template>
                            <template slot-scope="scope">
                                <span>[[scope.row.orders_total ? scope.row.orders_total : 0]]</span><br>
                                <span>[[scope.row.orders_price ? scope.row.orders_price : 0]]</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <span class="a_userOrder" @click="userOrder(scope.row.id)" >查看充值订单</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <div class="fixed total-floo">
                    <div class="fixed_box">
                        <el-pagination layout="prev, pager, next,jumper" background style="text-align:right" :page-size="per_page" :current-page="current_page" :total="total" @current-change="search">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                // 防止后端冲突,修改ma语法符号
                delimiters: ['[[', ']]'],
                data() {
                    return {
                        list_url:'{!! $list_url !!}',
                        account_order_url:'{!! $account_order_url !!}',
                        search_form:{},
                        list:[],
                        current_page:1,
                        total:1,
                        per_page:1,
                        times:[],
                    }
                },
                //定义全局的方法
                beforeCreate() {

                },
                created() {

                },
                mounted() {
                    this.getData(1);
                },
                watch: {

                },
                filters: {

                },
                computed: {

                },
                methods: {
                    getData(page){
                        let requestData = {
                            page:page,
                            code: this.code,
                            search: JSON.parse(JSON.stringify(this.search_form)),
                        };

                        if(this.times && this.times.length>0) {
                            requestData.search.start_time = this.times[0];
                            requestData.search.end_time = this.times[1];
                        }
                        let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                        this.$http.post(this.list_url,requestData).then(function(response) {
                            if (response.data.result) {
                                this.list = response.data.data.list.data;

                                this.current_page = response.data.data.list.current_page;
                                this.total = response.data.data.list.total;
                                this.per_page = response.data.data.list.per_page;
                                loading.close();

                            } else {
                                this.$message({
                                    message: response.data.msg,
                                    type: 'error'
                                });
                            }
                            loading.close();

                        }, function(response) {
                            this.$message({
                                message: response.data.msg,
                                type: 'error'
                            });
                            loading.close();
                        });
                    },
                    search(page){
                        this.getData(page);
                    },
                    userOrder(account_id){
                        window.location.href = this.account_order_url + '&account_id=' + account_id;
                    }
                }
            })
        </script>
@endsection