/**
 * 小程序用户管理列表
 */
Vue.component('mini-program-user-index', {
    template: `<div>
                    <div style="margin-right: 10px;margin-bottom: 10px;display: inline-block;">
                        <date-picker-range :date-time.sync="searchForm.time" 
                                           :start-placeholder="'注册时间（起）'"
                                           :end-placeholder="'注册时间（止）'"></date-picker-range>
                
                        <el-input v-model="searchForm.nick_name" style="width: 200px"
                                  placeholder="昵称"
                                  @keydown.enter.exact.native.prevent="currentChange(1)"
                                  size="small"></el-input>
                
                        <select-store :store-id.sync="searchForm.store_id" :show-status="true" :placeholder="'所属门店'"></select-store>

                        <el-button type="primary" size="small" @click="currentChange(1)">查询</el-button>
                
                        <el-button @click="reset" type="primary" plain size="small">重置</el-button>
                
                        <el-button v-if="operate.export&&(userType==1||userType==2&&storeAuth.data_export==1)"
                                   size="small"
                                   @click="exportData">导出用户信息
                        </el-button>
                    </div>
                    <div v-loading="loading">
                        <el-table :data="vipList" size="small" border style="width: calc(100vw - 208px);box-sizing: border-box;">
                            <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
                            <el-table-column align="center" label="头像" min-width="80">
                                <template slot-scope="scope">
                                    <el-avatar :size="40" :src="scope.row.avatar"></el-avatar>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="nickname" label="昵称" min-width="180"></el-table-column>
                            <el-table-column align="center" label="所属门店" min-width="120">
                                <template slot-scope="scope">
                                    <span>{{scope.row.storetag || '------'}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="mobile_phone" min-width="120" label="自提手机号"></el-table-column>
                            <el-table-column align="center" prop="link_name" min-width="100" label="自提姓名"></el-table-column>
                            <el-table-column align="center" prop="add_time" min-width="130" label="注册时间"></el-table-column>
                            <el-table-column align="center" label="操作" width="80">
                                <template slot-scope="scope">
                                    <el-button type="text" size="mini" @click="userTypeChange(scope.row)"
                                               v-if="operate.changeRole&&(userType==1||userType==2&&storeAuth.store_ordinary_operation_vip==1)">变更
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination
                                @size-change="sizeChange"
                                @current-change="currentChange"
                                layout="total, sizes, prev, pager, next, jumper"
                                :current-page="searchForm.page"
                                :pager-count="5"
                                :page-sizes="[10,20,30,40,50,60,70,80,90]"
                                :page-size="10"
                                :total="total">
                        </el-pagination>
                    </div>
                
                    <change-user-type :show="showEditDialog" :user-type="userType" :data="editData" @end="userTypeChangeEnd"></change-user-type>
                </div>`,
    props: {
        'userType': {
            type: Number,
            default: 1,//1商户 2门店
        },
    },
    data() {
        return {
            operate: {},
            searchForm: {
                nick_name: '',
                time: '',
                store_id: '',
                page: 1,                         // 分页
                limit: 10,                       // 每页显示条数
            },
            vipList: [],
            loading: false,
            total: 0,                            // 总数 int类型
            showEditDialog: false,               // 变更弹出框
            editData: {
                id: 0,                           // id
                nickname: '',                    // 昵称
            },
            requestUrl: {
                getData: {
                    1: 'Retail/Vip/getXcxUser',
                    2: 'Retail/Vips/store_xcxvip_list',
                },
                export: {
                    1: '/index.php/Retail/Vip/xcxUserExport',
                    2: '/index.php/Retail/Vips/store_xcxvip_list_export',
                },
            }
        };
    },
    methods: {
        // 修改页码
        currentChange(val) {
            this.searchForm.page = val;
            this.getData();
        },
        // 修改每页显示数量
        sizeChange(val) {
            this.searchForm.limit = val;
            this.searchForm.page = 1;
            this.getData();
        },
        getData() {
            this.sendRequest(this.requestUrl.getData[this.userType], {
                data: {
                    page: this.searchForm.page,
                    limit: this.searchForm.limit,
                    search_info: JSON.stringify({
                        store_id: this.searchForm.store_id,
                        nick_name: this.searchForm.nick_name,
                        time: this.searchForm.time
                    })
                },
                success: (res) => {
                    this.loading = false;
                    if (res.status == 1) {
                        this.vipList = res.list;
                        this.total = res.count;
                    } else {
                        this.$message.error(res.message)
                    }
                }
            })
        },
        exportData() {
            this.$confirm('确定导出数据吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'info'
            }).then(() => {
                window.location.href = this.requestUrl.export[this.userType] + '?nick_name=' + this.searchForm.nick_name + '&time=' + this.searchForm.time;
            });
        },
        // 显示用户类型转变弹框
        userTypeChange(item) {
            this.editData = {
                id: item.id,
                nickname: item.nickname,
            };
            this.showEditDialog = true;
        },
        userTypeChangeEnd() {
            this.showEditDialog = false;
            this.getData();
        },
        // 重置搜索表单
        reset() {
            this.searchForm = {
                nick_name: '',
                time: '',
                page: 1,                             // 分页
                limit: 10,                           // 每页显示条数
            };
            this.getData();
        },
    },
    created() {
        this.checkOperateAuth((this.userType == 1 ? {
            export: '/index.php/Retail/Vip/xcxvip_list_export',
            changeRole: '/index.php/Retail/Vip/changeRole',
        } : {
            export: '/index.php/Retail/Vips/store_xcxvip_list_export',
            changeRole: '/index.php/Retail/Vips/changeRole',
        }), (data) => {
            this.operate = data;
        });
        this.getData();
    },
});

/**
 * 变更小程序用户
 */
Vue.component('change-user-type', {
    template: `<el-dialog :visible.sync="show" title="变更用户类型"
                          :append-to-body="true" :close-on-click-modal="false"
                          :before-close="clearDialog" width="500px">
                    <el-form label-width="100px"
                             size="small"
                             ref="editForm"
                             :rules="rules" :model="editForm">
                        <el-form-item label="角色:" prop="type">
                            <el-radio-group v-model="editForm.type" @change="changeType">
                                <el-radio-button :label="1">常规会员</el-radio-button>
                                <el-radio-button :label="2">PLUS会员</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="过期时间:" prop="end_time" v-if="editForm.type==2">
                            <el-date-picker
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    v-model="editForm.end_time"
                                    type="datetime"
                                    range-separator="至"
                                    placeholder="PLUS会员过期时间">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="等级:" prop="grade_id" v-else>
                            <select-vip-grade :grade-id.sync="editForm.grade_id"
                                              :show-discount="true"
                                              :placeholder="'变更等级'"></select-vip-grade>
                            <span style="margin-left: 5px;color: #409EFF;">默认无等级</span>
                        </el-form-item>
                        <el-form-item v-if="userType==1" label="所属门店:">
                            <select-store :store-id.sync="editForm.store_id"
                                          :show-status="true"
                                          :placeholder="'所属门店'"></select-store>
                        </el-form-item>
                        <el-form-item label="姓名:" prop="name">
                            <el-input style="width:220px" v-model="editForm.name" placeholder="会员姓名"></el-input>
                        </el-form-item>
                        <el-form-item label="昵称:" prop="nickname">
                            <el-input style="width:220px" v-model="editForm.nickname" placeholder="会员昵称"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号:" prop="mobile_phone">
                            <el-input style="width:220px" v-model="editForm.mobile_phone"
                                      onkeyup="value=value.replace(/[^\\d]/g,'')" placeholder="会员手机号"></el-input>
                        </el-form-item>
                        <el-form-item label="余额:" prop="balance">
                            <el-input style="width:220px" v-model="editForm.balance"
                                      onkeyup="value=value.replace(/[^\\d|.]/g,'')" placeholder="会员卡余额"></el-input>
                            <span style="margin-left: 5px;color: #409EFF;">默认余额为0</span>
                        </el-form-item>
                        <el-form-item label="生日:" prop="birthday">
                            <el-date-picker v-model="editForm.birthday"
                                            size="small"
                                            placeholder="会员生日"
                                            value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label-width="0" style="text-align: center">
                            <el-button :loading="subLoading" type="primary" size="medium" @click="submitForm">提交</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>`,
    props: {
        'show': {
            type: Boolean,
            default: false,
        },
        'userType': {
            type: Number,
            default: 1,//1商户 2门店
        },
        'data': {
            type: Object,
            default() {
                return {
                    id: 0,
                    nickname: ''
                }
            }
        },
    },
    data() {
        return {
            editForm: {
                id: 0,                           // id
                type: '',                        // 类型
                grade_id: '',                    // 等级
                store_id: '',                    // 门店ID
                name: '',                        // 姓名
                nickname: '',                    // 昵称
                mobile_phone: '',                // 手机号
                birthday: '',                    // 生日
                balance: '',                     // 余额
                end_time: '',                    // plus会员过期时间
            },
            rules: {
                type: [{required: true, message: '请选择会员类型', trigger: 'change'}],
                // store_id: [{required: true, message: '请选择会员直属门店', trigger: 'change'}],
                grade_id: [{required: false, message: '请选择会员等级', trigger: 'change'}],
                name: [{required: true, message: '请输入会员姓名', trigger: 'change'}],
                nickname: [{required: false, message: '请输入会员姓名', trigger: 'change'}],
                balance: [{required: true, message: '请输入会员余额', trigger: 'change'}, {
                    validator: function (rule, value, callback) {
                        var reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d{0,2})$/;
                        if (value === '' || value === null || value == undefined) {
                            callback(new Error("请输入会员余额"));
                        } else if (reg.test(value) == false) {
                            callback(new Error("请输入正确的会员余额"));
                        } else {
                            callback();
                        }
                    }, trigger: 'change'
                }],
                mobile_phone: [{required: true, message: '请输入会员手机号', trigger: 'change'}, {
                    validator: function (rule, value, callback) {
                        if (value == '') {
                            callback(new Error("请输入会员手机号"));
                        } else if (!(/^[1][3456789][0-9]{9}$/).test(value)) {
                            callback(new Error("请输入正确的会员手机号"));
                        } else {
                            callback();
                        }
                    }, trigger: 'change'
                }],
                end_time: [{required: true, message: '请选择PLUS会员过期时间', trigger: 'change'}],
            },//变更的规则
            subLoading: false,
            requestUrl: {
                1: 'Retail/Vip/changeRole',
                2: 'Retail/Vips/changeRole',
            }
        };
    },
    methods: {
        clearDialog() {
            this.$refs.editForm.resetFields();
            this.$emit('end');
        },
        changeType(val) {
            this.editForm.grade_id = '';
            if (val == 1) {
                this.$refs.editForm.validateField('grade_id');
            }
        },
        // 提交表单
        submitForm() {
            this.$refs.editForm.validate((valid) => {
                if (!valid) {
                    return this.$message.warning('请检查表单信息');
                }
                this.$confirm('确认变更该普通用户的信息吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'info'
                }).then(() => {
                    this.subLoading = true;
                    this.sendRequest(this.requestUrl[this.userType], {
                        data: this.editForm,
                        success: (res) => {
                            this.subLoading = false;
                            if (res.status == 1) {
                                this.$message.success(res.message);
                                this.clearDialog();
                            } else {
                                this.$message.error(res.message);
                            }
                        }
                    })
                })
            })
        },
    },
    watch: {
        show(n) {
            if (n) {
                this.editForm.id = this.data.id;
                this.editForm.nickname = this.data.nickname;
            }
        }
    }
});