<#include "/incloud/header.ftl"/>
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<@header></@header>

<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <@top></@top>
    <@left></@left>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                会员管理
                <small>Optional description</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
                <li class="active">Here</li>
            </ol>
        </section>
        <!-- Main content -->
        <section class="content container-fluid" id="app">
            <div class="box-body">
                <!--查询区域-->
                <div class="query">
                    <el-form :inline="true" :model="con" class="demo-form-inline">
                    	<el-form-item label="最近登录时间" :label-width="queryLabelWidth">
		                    <el-date-picker
						      v-model="con.times"
						      type="datetimerange"
						      range-separator="至"
						      start-placeholder="开始日期"
						      end-placeholder="结束日期">
						    </el-date-picker>
					    </el-form-item>
                        <el-form-item label="昵称" :label-width="queryLabelWidth">
                            <el-input v-model="con.nickName" placeholder="昵称"></el-input>
                        </el-form-item>
                       <!-- <el-form-item label="手机号" :label-width="queryLabelWidth">
                            <el-input v-model="con.phone" placeholder="手机号"></el-input>
                        </el-form-item>-->
                        <el-form-item>
                            <el-button type="primary" @click="loadTable1()">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <!--表格区-->
                <el-table border
                          :data="tableData"
                          style="width: 100%">
                    <el-table-column min-width="150px"
                                     label="头像">
                        <template slot-scope="scope">
                            <img :src="scope.row.headPic" width="50px;" height="50px;">
                        </template>
                    </el-table-column>
                    <el-table-column min-width="150px"
                                     label="昵称"
                                     prop="nickName">
                    </el-table-column>
                    <!--<el-table-column min-width="150px"
                                     label="联系方式"
                                     prop="phone">
                    </el-table-column>-->
                    <el-table-column min-width="150px"
                                     label="性别">
                           <template slot-scope="scope">
                            {{scope.row.sex == 1 ? '男' : '女'}}
                        </template>
                    </el-table-column>
                    <el-table-column min-width="150px"
                                     label="状态">
                        <template slot-scope="scope">
                            {{scope.row.status|getEnumVal(MANAGE_STATUS)}}
                        </template>
                    </el-table-column>
                    <el-table-column min-width="150px"
                                     label="最近登录时间"
                                     prop="createTime">
                    </el-table-column>
                    <!--<el-table-column min-width="150px"
                                     label="修改时间"
                                     prop="uodateTime">
                    </el-table-column>-->
                     <el-table-column label="操作" min-width="300px">
                        <template slot-scope="scope">
                            <el-button
                                    v-if="scope.row.status==1"
                                    size="mini"
                                    type="danger"
                                    @click="table1Edit(scope.$index, scope.row)">冻结
                            </el-button>
                            <el-button
                                    v-if="scope.row.status==2"
                                    size="mini"
                                    type="primary"
                                    @click="table1Edit(scope.$index, scope.row)">解冻
                            </el-button>
                            <!--<el-button-->
                                    <!--size="mini"-->
                                    <!--type="primary"-->
                                    <!--@click="distributionStatistics(scope.$index, scope.row)">分配统计权限-->
                            <!--</el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页-->
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="con.currentPage"
                            :page-sizes="[1,10, 50, 200, 500]"
                            :page-size="con.pageSize"
                            layout="total, sizes, prev, pager, next, jumper, slot"
                            :total="con.total">
                    </el-pagination>
                </div>

                <!--对话框1 分配统计权限-->
                <el-dialog title="分配统计权限" :visible.sync="dialog1Visible" :custom-class="'ele-dialog'" :center="true">
                    <el-form :model="editData" status-icon :rules="rules" ref="dialog1">
                        <el-form-item label="授权类型" :label-width="formLabelWidth">
                            <template v-for="item in permissions">
                                <el-checkbox :label="item.name" v-model="item.checked"></el-checkbox>
                            </template>
                        </el-form-item>
                        <el-form-item label="秘钥" :label-width="formLabelWidth" prop="secretKey1">
                            <el-input type="password" v-model="editData.secretKey1" placeholder="请输入秘钥"></el-input>
                        </el-form-item>
                        <el-form-item label="确认秘钥" :label-width="formLabelWidth" prop="secretKey2">
                            <el-input type="password" v-model="editData.secretKey2" placeholder="请再次输入秘钥"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="dialog1Sub('dialog1')">提 交</el-button>
                        <el-button @click="dialog1Visible = false;jsonClear(editData);">取 消</el-button>
                    </div>
                </el-dialog>

                <!--对话框2 编辑-->
                <el-dialog title="编辑" :visible.sync="dialog2Visible" :custom-class="'ele-dialog'" :center="true">
                    <el-form :model="editData" status-icon :rules="rules2" ref="dialog2">
                        <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
                            <el-input v-model="editData.name" placeholder="请输入姓名"></el-input>
                        </el-form-item>
                        <el-form-item label="电话" :label-width="formLabelWidth" prop="phone">
                            <el-input v-model="editData.phone" placeholder="请输入电话"></el-input>
                        </el-form-item>
                        <el-form-item label="账号" :label-width="formLabelWidth" prop="account">
                            <el-input v-model="editData.account" placeholder="请输入账号"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
                            <el-input type="password" v-model="editData.password" placeholder="请输入密码"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" :label-width="formLabelWidth" prop="password2">
                            <el-input type="password" v-model="editData.password2" placeholder="请再次输入密码"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="dialog2Sub('dialog2')">提 交</el-button>
                        <el-button @click="dialog2Visible = false">取 消</el-button>
                    </div>
                </el-dialog>

            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- Main Footer -->
    <@footer></@footer>
</div>
</body>
<script src="/js/util/dyAjax.js"></script>
<script>
    $(function () {
        var option = {
            mixins: [dyMixin],
            data() {
                return {
                    con: {currentPage: 1, pageSize: 10, total: 0},//查询条件
                    tableData: [],
                    editData: {},//编辑数据
                    dialog2Visible: false,//编辑弹框隐藏
                    rules2: {
                        name: [
                            {required: true, message: '请输入姓名', trigger: 'change'}
                        ],
                        phone: [
                            {required: true, message: '请输入联系方式', trigger: 'change'}
                        ],
                        account: [
                            {required: true, message: '请输入账号', trigger: 'change'}
                        ],
                        password: [
                            {
                                required: true, validator: (rule, value, callback) => {
                                if (value === '') {
                                    callback(new Error('请输入密码'));
                                } else {
                                    if (this.editData.password !== '') {
                                        this.$refs.dialog2.validateField('pwd2');
                                    }
                                    callback();
                                }
                            }, trigger: 'blur'
                            }
                        ],
                        password2: [
                            {
                                required: true, validator: (rule, value, callback) => {
                                if (value === '') {
                                    callback(new Error('请再次输入密码'));
                                } else if (value !== this.editData.password) {
                                    callback(new Error('两次输入密码不一致!'));
                                } else {
                                    callback();
                                }
                            }, trigger: 'blur'
                            }
                        ],
                    },//对话框2验证规则
                    MANAGE_STATUS:{'正常':'1','冻结':'2'},//账户状态
                    permissions:[],
                    dialog1Visible : false,//对话框1 分配权限隐藏
                    rules: {
                        secretKey1: [
                            {
                                required: true, validator: (rule, value, callback) => {
                                if (value === ''||typeof (value)==='undefined') {
                                    callback(new Error('请输入秘钥'));
                                } else {
                                    if (this.editData.secretKey1 !== '') {
                                        this.$refs.dialog1.validateField('secretKey2');
                                    }
                                    callback();
                                }
                            }, trigger: 'blur'
                            }
                        ],
                        secretKey2: [
                            {
                                required: true, validator: (rule, value, callback) => {
                                if (value === ''||typeof (value)==='undefined') {
                                    callback(new Error('请再次输入秘钥'));
                                } else if (value !== this.editData.secretKey1) {
                                    callback(new Error('两次输入秘钥不一致!'));
                                } else {
                                    callback();
                                }
                            }, trigger: 'blur'
                            }
                        ],
                    },//对话框1验证规则
                    checkedUserInfo:{},//选中行数据
                }
            },
            mounted: function () {
                this.loadTable1();
            },
            methods: {
                //编辑
                table1Edit(index, row) {
                    let _this = this;
                    /*$.dyAjax('/user/get/' + row.id, {}, function (data) {
                        _this.editData = data;
//                        _this.editData.password2 = '';
                        _this.dialog2Visible = true;
                        console.log(data);
                    }, 'get');*/

                    this.$confirm('此操作将冻结该用户, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.dyAjax('/user/frozen', {id: row.id}, function (data) {
                        if(data.status==200){
                            _this.loadTable1(function () {
                                _this.$message({
                                    type: 'success',
                                    message: '操作成功!'
                                });
                            });
                        }else {
                            _this.loadTable1(function () {
                                _this.$message({
                                    message: data.msg,
                                    type: 'error'
                                });
                            });
                        }

                    }, 'post');
                }).catch(() => {
                    });
                },
                //翻页大小改变事件
                handleSizeChange(val) {
                    var _this = this;
                    _this.con.pageSize = val;
                    _this.loadTable1();
                },
                //翻页翻页事件
                handleCurrentChange(val) {
                    var _this = this;
                    _this.con.currentPage = val;
                    _this.loadTable1();
                },
                //加载表数据
                loadTable1: function (callback) {
                    var _this = this;
                    if(this.con.times != null){
                    	var date1 = new Date(this.con.times[0]); 
                    	var date2 = new Date(this.con.times[1]); 
                    	
                    	this.con.startTime = date1.getFullYear() + '-' + (date1.getMonth() + 1) + '-' + date1.getDate() + ' ' + date1.getHours() + ':' + date1.getMinutes() + ':' + date1.getSeconds();
                    	this.con.endTime = date2.getFullYear() + '-' + (date2.getMonth() + 1) + '-' + date2.getDate() + ' ' + date2.getHours() + ':' + date2.getMinutes() + ':' + date2.getSeconds();
                    }else{
                    	this.con.startTime = "";
                    	this.con.endTime = "";
                    }
                    $.dyAjax('/user/page', this.con, function (data) {
                        callback && callback(data);
                        console.log(data)
                        _this.tableData = data.list;
                        _this.con.total = data.total;
                        _this.con.currentPage = data.pageNum;
                        _this.con.pageSize = data.pageSize;
                    });
                },
                //对话框2 编辑提交事件
                dialog2Sub: function (formName) {
                    var _this = this;
                    console.log(this.editData);
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            console.log(_this.editData);
                            $.dyAjax('/user/update', _this.editData, function (data) {
                                _this.loadTable1(function () {
                                    _this.$message({
                                        message: '成功',
                                        type: 'success'
                                    });
                                    _this.dialog2Visible = false;
                                    _this.jsonClear(_this.editData);
                                });
                            });
                        } else {
                            return false;
                        }
                    });
                },
                //对话框1 分配权限提交事件
                dialog1Sub: function (formName) {
                    var _this = this;
                    console.log(this.permissions);
                    let ids = '';
                    let checkedPermissionsArray = _this.geJsonArrayByKeyVal(_this.permissions,'checked',true);
                    ids = _this.jsonArrayJoin(checkedPermissionsArray,'id');
                    console.log(ids);
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            $.dyAjax('/user/allocationPermission',
                                {ids:ids,userID:_this.checkedUserInfo.id,secretKey:_this.editData.secretKey1}, function (data) {
                                    _this.$message({
                                        message: '成功',
                                        type: 'success'
                                    });
                                    _this.dialog1Visible = false;
                                    _this.jsonClear(_this.editData);
                                    _this.permissions = [];
                            });
                        } else {
                            return false;
                        }
                    });
                },
                //分配统计权限
                distributionStatistics:function (index, row) {
                    var _this = this;
                    _this.checkedUserInfo = row;
                    //获取用户的统计权限
                    $.dyAjax('/user/selectByUserID', {id: _this.checkedUserInfo.id}, function (data) {
                        $.each(data,function (index,item) {
                            item.checked = item.user_id?true:false;
                        });
                        _this.permissions = data;
                        _this.dialog1Visible = true;
                    });
                }
            }
        };
        var app = Vue.extend(option);
        new app().$mount('#app');
    });
</script>
</html>