<template>
    <div class="app-container">
        <el-row type="flex" justify="space-between">
            <!-- 左侧内容 -->
            <el-col :span="5">
                <div class="advContent" style="margin-bottom:10px">
                    <el-card class="box-card" shadow="hover">
                        <div slot="header" class="clearfix">
                            <span>会员信息</span>
                        </div>
                        <div style="margin: 10px 0">
                        </div>
                    </el-card>
                </div>
            </el-col>
            <!-- 右侧内容 -->
            <el-col :span="19" style="margin-left: 18px;">
                <el-tabs type="border-card">
                    <el-tab-pane label="客户">
                        <el-col :span="1.5">
                            <el-button type="primary" size="mini" icon="el-icon-plus"
                                @click="handleAddMember">添加会员</el-button>
                        </el-col>
                    </el-tab-pane>
                    <el-tab-pane label="交易流水">交易流水</el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
        <!--添加会员-->
        <el-dialog title="添加会员" :visible.sync="openAddMember" width="500px" append-to-body>
            <el-input v-model="queryParams.phoneNumber" placeholder="请输入手机号"></el-input>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { queryOrderList, addMemberGroup, queryMemberList } from "@/api/member/memberGroup";
export default {
    name: 'JsowellUiDetail',

    data() {
        return {
            openAddMember: false,
            queryParams: {
                groupCode: this.$route.params.groupCode,
                phoneNumber: null
            }
        };
    },

    mounted() {
        console.log(this.$route.params.groupCode);
    },

    methods: {
        handleAddMember() {
            this.openAddMember = true
        },
        /** 添加会员按钮 */
        submitForm() {
            console.log(this.queryParams);
            var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
            if (!reg_tel.test(this.queryParams.phoneNumber)) {
                this.$modal.msgError("请正确填写您的手机号码！");
                this.queryParams.phoneNumber = ''
                return false;
            }
            addMemberGroup(this.phoneNumber).then(response => {
                console.log(response);
                this.$modal.msgSuccess("添加成功");
                this.queryParams.openAddMember = true;
            });
        },
        cancel() {
            this.openAddMember = false;
            this.queryParams.phoneNumber = ''
        }
    },
};
</script>

<style lang="scss" scoped></style>