<#include "/incloud/header.ftl"/>
<!DOCTYPE>
<html>
<@header>
</@header>
<style>
    /*.el-dialog{*/
    /*max-width: 700px*/
    /*}*/
    /*.el-dialog__footer{*/
    /*text-align: center;*/
    /*}*/
    /*.el-dialog__body{*/
    /*width: 500px;*/
    /*margin: auto;*/
    /*}*/
</style>
<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="buttonDiv">
            <el-button
                    size="mini" type="primary" class="pagination-but"
                    @click="add">新增
            </el-button>
        </div>
        <!--表格区-->
        <el-table border
                  :data="tableData"
                  style="width: 100%">
            <el-table-column min-width="150px"
                             label="姓名"
                             prop="name">
            </el-table-column>
            <el-table-column min-width="150px"
                             label="帐号"
                             prop="account">
            </el-table-column>
            <el-table-column min-width="150px"
                             label="电话"
                             prop="phone">
            </el-table-column>
            <el-table-column min-width="150px"
                             label="状态"
                             prop="status">
                <template slot-scope="scope">
                    <span v-if="scope.row.status==='1'">正常</span>
                    <span v-else>已冻结</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" min-width="300px">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary"
                            @click="edit(scope.row.id)">修改
                    </el-button>
                    <el-button
                            size="mini" type="danger"
                            @click="del(scope.row.id)">删除
                    </el-button>
                    <el-button
                            size="mini" type="danger"
                            @click="updateStatus(scope.row.id,scope.row.status)">
                        <span v-if="scope.row.status ==='1'">冻结</span>
                        <span v-else>解冻</span>
                    </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>

        <!--对话框4 选择用户-->
        <el-dialog title="新增领导" :visible.sync="dialog4FormVisible" :close-on-click-modal="false" style="width: 100%">
            <!--查询区域-->
            <el-form :model="dialog4Con" ref="dialog" status-icon :rules="rules">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="dialog4Con.name" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="dialog4Con.phone" type="number" placeholder="手机号"></el-input>
                </el-form-item>
                <el-form-item label="帐号" prop="account">
                    <el-input v-model="dialog4Con.account" placeholder="请输入帐号"></el-input>
                </el-form-item>
                <el-form-item label="景区权限" prop="supplier">
                    <el-select v-model="dialog4Con.supplier" multiple placeholder="请选择景区权限" style="width: 100%">
                        <el-option
                                v-for="item in suppliers"
                                :key="item.ISCENICID"
                                :label="item.SZSCENICNAME"
                                :value="item.ISCENICID">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="统计查看权限" prop="permissions">
                    <el-select v-model="dialog4Con.permissions" multiple placeholder="请选择领导权限" style="width: 100%">
                        <el-option
                                v-for="item in permissions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="密码" prop="password1">
                    <el-input v-model="dialog4Con.password1" type="password" :placeholder="placeholder"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="password2">
                    <el-input v-model="dialog4Con.password2" type="password" :placeholder="placeholder"></el-input>
                </el-form-item>
                <el-form-item style="text-align: center">
                    <el-button type="primary" @click="dialog4Submit('dialog')">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </section>
    <!-- /.content -->
</div>
<!-- Main Footer -->
<!--<@footer></@footer>-->
<@footer></@footer>
</div>
</body>
<script src="/js/util/dyAjax.js"></script>
<script>
    $(function () {
        var option = {
            mixins: [dyMixin],
            data() {
                return {
                    dialog4Con: {
                        currentPage: 1,
                        pageSize: 10,
                        total: 0,
                        id: undefined,
                        name: undefined,
                        account: undefined,
                        phone: undefined,
                        password1: undefined,
                        password2: undefined,
                        permissions: [],
                        supplier:[]
                    },//对话框4 选择用户查询条件
                    con: {currentPage: 1, pageSize: 10, total: 0},//查询条件
                    tableData: [],
                    dialog4FormVisible: false,
                    dialogVisible1: false,
                    placeholder:'请输入密码',
                    rules: {
                        name: [
                            {required: true,validator: (rule, value, callback) => {
                                    if (!(/^[\u4E00-\u9FA5\uf900-\ufa2d]{2,4}$/.test(value))) {
                                        callback(new Error('请输入正确的姓名'));
                                    } else {
                                        callback();
                                    }
                                }, trigger: 'blur'}
                        ],
                        permissions: [{required: true, message: '至少选择一项统计查看权限!'}],
                        supplier: [{required: true, message: '至少选择一项景区权限!'}],
                        account: [{required: true, validator: this.validateAccount, trigger: 'blur'}
                        ,{min: 6, message: '账号至少6位！'}],
                        phone: [{
                            required: true, validator: this.validatePhone, trigger: 'blur'
                        }],
                        password1: [
                            {
                                required: true, validator: (rule, value, callback) => {
                                    if (value === '' || typeof (value) === 'undefined') {
                                        callback(new Error('请输入密码!'));
                                    } else {
                                        if (this.dialog4Con.password1 !== '') {
                                            this.$refs['dialog'].validateField('password2');
                                        }
                                        callback();
                                    }
                                }, trigger: 'blur',
                            },
                            {min: 6, message: '密码至少6位！'}
                        ],
                        password2: [
                            {
                                required: true, validator: (rule, value, callback) => {
                                    if (value === '' || typeof (value) === 'undefined') {
                                        callback(new Error('请再次输入密码!'));
                                    } else if (value !== this.dialog4Con.password1) {
                                        callback(new Error('两次输入密码不一致!'));
                                    } else {
                                        callback();
                                    }
                                }, trigger: 'blur'
                            }
                        ],
                    },//对话框1验证规则
                    baseUrl: '/leaderManage',//通用url
                    permissions: [],//统计权限集合
                    suppliers:[], //景区集合
                }
            },
            mounted: function () {
                this.loadTable1();
                this.loadDia4Table1();
                this.getAllPermisson();
            },
            methods: {
                //验证手机号
                validatePhone(rule, value, callback) {
                    var _this = this
                    $.dyAjax(_this.baseUrl + '/queryByPhone', {phone: value}, function (data) {
                        if (!value) {
                            callback(new Error('手机号不能为空！'));
                        } else if (!/^1\d{10}$/.test(value)) {
                            callback(new Error('请输入正确手机号！'));
                        } else {
                            if (data !== null) {
                                if (_this.dialog4Con.id !== undefined) {
                                    if (data === _this.dialog4Con.id) {
                                        callback()
                                    } else {
                                        callback(new Error('手机号已经存在！'));
                                    }
                                } else {
                                    callback(new Error('手机号已经存在！'));
                                }
                            } else {
                                callback();
                            }
                        }
                    });
                },
                //验证账号
                validateAccount(rule, value, callback) {
                    var _this = this
                    $.dyAjax(_this.baseUrl + '/queryByAccount', {account: value}, function (data) {
                        if (!value) {
                            callback(new Error('帐号不能为空！'));
                        } else {
                            if (data !== null) {
                                if (_this.dialog4Con.id !== undefined) {
                                    if (data === _this.dialog4Con.id) {
                                        callback()
                                    } else {
                                        callback(new Error('帐号已经存在！'));
                                    }
                                } else {
                                    callback(new Error('帐号已经存在！'));
                                }
                            } else {
                                callback();
                            }
                        }
                    });
                },
                //加载表数据
                loadDia4Table1: function (callback) {
                    var _this = this;
                    $.dyAjax(_this.baseUrl + '/page', this.dialog4Con, function (data) {
                        callback && callback(data);
                        console.log(data)
                        _this.dialog4TableData = data.list;
                        _this.dialog4Con.total = data.total;
                        _this.dialog4Con.currentPage = data.pageNum;
                        _this.dialog4Con.pageSize = data.pageSize;
                    });
                },
                //翻页大小改变事件
                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;
                    $.dyAjax(_this.baseUrl + '/page', this.con, function (data) {
                        callback && callback(data);
                        _this.tableData = data.list;
                        _this.con.total = data.total;
                        _this.con.currentPage = data.pageNum;
                        _this.con.pageSize = data.pageSize;
                    });
                },
                dialog4Submit(formName) {
                    var _this = this
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            if (_this.dialog4Con.id) {
                                $.dyAjax(_this.baseUrl + '/update',
                                    {
                                        id: _this.dialog4Con.id,
                                        name: _this.dialog4Con.name,
                                        account: _this.dialog4Con.account,
                                        password: _this.dialog4Con.password2,
                                        phone: _this.dialog4Con.phone,
                                        permissions: _this.dialog4Con.permissions.toString(),
                                        supplierIds: _this.dialog4Con.supplier.toString(),
                                    }, function (data) {
                                        _this.$message({
                                            message: '成功',
                                            type: 'success'
                                        });
                                    })
                            } else {
                                $.dyAjax(_this.baseUrl + '/add',
                                    {
                                        name: _this.dialog4Con.name,
                                        account: _this.dialog4Con.account,
                                        password: _this.dialog4Con.password2,
                                        phone: _this.dialog4Con.phone,
                                        permissions: _this.dialog4Con.permissions.toString(),
                                        supplierIds: _this.dialog4Con.supplier.toString(),
                                        status: '1',
                                    }, function (data) {
                                        _this.$message({
                                            message: '成功',
                                            type: 'success'
                                        });
                                    })
                            }
                            _this.dialog4FormVisible = false;
                            _this.loadTable1();
                        }
                    })
                },
                del(id) {
                    let _this = this;
                    this.$confirm('确认删除该用户?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.dyAjax(_this.baseUrl + '/del/' + id, {}, function (data) {
                            _this.loadTable1(function () {
                                _this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                            });
                        });
                    });
                },
                edit(id) {
                    var _this = this
                    $.dyAjax(this.baseUrl + '/queryOne', {id: id}
                        , function (data) {
                            _this.dialog4Con.id = data.id
                            _this.dialog4Con.name = data.name
                            _this.dialog4Con.account = data.account
                            _this.dialog4Con.phone = data.phone
                            _this.dialog4Con.supplier = data.supplierIds.split(',').map(Number);
                        })
                    _this.getLeaderPermisson(id);
                    _this.rules.password1[0].validator = (rule, value, callback) => {
                        callback()
                    }
                    _this.rules.password2[0].validator = (rule, value, callback) => {
                        callback()
                    }
                    _this.placeholder = '请输入密码,留空不作修改'
                    _this.dialog4FormVisible = true
                },
                add() {
                    if (this.dialog4Con.account !== undefined) {
                        this.$refs['dialog'].clearValidate(['id', 'name', 'account', 'phone', 'supplier' , 'password1', 'password2', 'permissions'])
                        this.$refs['dialog'].resetFields();
                    }
                    this.dialog4Con.id = undefined
                    this.rules.password1[0].validator = (rule, value, callback) => {
                        if (value === '' || typeof (value) === 'undefined') {
                            callback(new Error('请输入密码!'));
                        } else {
                            if (this.dialog4Con.password1 !== '') {
                                this.$refs['dialog'].validateField('password2');
                            }
                            callback();
                        }
                    }
                    this.rules.password2[0].validator = (rule, value, callback) => {
                        if (value === '' || typeof (value) === 'undefined') {
                            callback(new Error('请再次输入密码!'));
                        } else if (value !== this.dialog4Con.password1) {
                            callback(new Error('两次输入密码不一致!'));
                        } else {
                            callback();
                        }
                    }
                    this.placeholder = '请输入密码'
                    this.dialog4FormVisible = true
                },
                cancel() {
                    this.$refs['dialog'].clearValidate(['id', 'name', 'account', 'phone', 'password1', 'password2', 'permissions'])
                    this.$refs['dialog'].resetFields();
                    this.dialog4FormVisible = false
                },
                updateStatus(id, status) {
                    status = status === '0' ? '1' : '0'
                    var _this = this
                    _this.$confirm('确定冻结该用户?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.dyAjax(_this.baseUrl + '/updateStatus', {id: id, status: status},
                            function (data) {
                                _this.loadTable1(function () {
                                    _this.$message({
                                        type: 'success',
                                        message: '操作成功!'
                                    });
                                });
                            });
                    });
                },
                getAllPermisson() {
                    var _this = this
                    $.dyAjax(this.baseUrl + '/getAllPermissons', {}
                        , function (data) {
                            _this.permissions = data
                        })
                    _this.getSupplier()
                },
                getSupplier() {
                    var _this = this
                    $.dyAjax(this.baseUrl + '/getSupplier', {}
                        , function (data) {
                            _this.suppliers = data
                        })
                },
                getLeaderPermisson(id) {
                    var _this = this
                    $.dyAjax(this.baseUrl + '/getLeaderPermissonsById', {id: id}
                        , function (data) {
                            _this.dialog4Con.permissions = data
                        })
                },
            }
        };
        var app = Vue.extend(option);
        new app().$mount('#app');
    });
</script>
</html>