{{define "setting_bottom"}}
<script>
    var ACTION="{{.action}}";
</script>
<script>
    var app=new Vue({
        el: '#app',
        delimiters:["<{","}>"],
        data: {
            fullscreenLoading:true,
            openIndex:[1],
            account: {
                username: "",
                password: "",
            },
            mysql: {
                server: "",
                port: "",
                database: "",
                username: "",
                password: "",
            },
            rules: {
                server: [
                    { required: true, message: '请输入服务地址', trigger: 'blur' },
                ],
                port: [
                    { required: true, message: '请输入端口号', trigger: 'blur' },
                ],
                database: [
                    { required: true, message: '请输入数据库名', trigger: 'blur' },
                ],
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                name: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                avator: [
                    { required: true, message: '请选择头像', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
            },
            kefuList:[],
            kefuDialog:false,
            kefuForm:{
                name:"",
                password:"",
                avator:"",
            },
            kefuSelectAvator:"/static/images/0.jpg",
        },
        methods: {
            //提交表单
            setAccount(formName){
                let _this=this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        $.post("/setting_account",_this.account,function(data){
                            if(data.code==200){
                                _this.$message({
                                    message: data.msg,
                                    type: 'success'
                                });
                            }else{
                                _this.$message({
                                    message: data.msg,
                                    type: 'error'
                                });
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            //设置mysql
            setMysql(formName){
                let _this=this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        $.ajax({
                            type:"POST",
                            url:"/mysql",
                            data:_this.mysql,
                            headers:{
                                "token":localStorage.getItem("token")
                            },
                            success: function(data) {
                                if(data.code==200){
                                    _this.$message({
                                        message: data.msg,
                                        type: 'success'
                                    });
                                }else{
                                    _this.$message({
                                        message: data.msg,
                                        type: 'error'
                                    });
                                }
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            //重置表单
            resetForm(formName) {
                this.loading=false;
                this.$refs[formName].resetFields();
            },
            //跳转
            openUrl(url){
                window.location.href=url;
            },
            //展示提示
            showNotice(){
                this.fullscreenLoading=false;
                this.$message({
                    message: '配置信息写入同级config目录，目录不存在会自动创建！',
                    type: 'warning',
                    duration:'8000',
                    showClose:true,
                });
            },
            //初始化数据
            initInfo(){
                let _this=this;
                if(ACTION=="setting_mysql"){
                    this.sendAjax("/mysql","get",{},function(result){
                        _this.mysql.username=result.Username;
                        _this.mysql.password=result.Password;
                        _this.mysql.database=result.Database;
                        _this.mysql.server=result.Server;
                        _this.mysql.port=result.Port;
                    });
                }
                if(ACTION=="setting_kefu_list"){
                    this.sendAjax("/kefulist","get",{},function(result){
                        _this.kefuList=result;
                    });
                }

            },
            sendAjax(url,method,params,callback){
                let _this=this;
                $.ajax({
                    type: method,
                    url: url,
                    data:params,
                    headers: {
                        "token": localStorage.getItem("token")
                    },
                    success: function(data) {
                        if(data.code!=200){
                            _this.$message({
                                message: data.msg,
                                type: 'error'
                            });
                        }else if(data.result!=null){
                            callback(data.result);
                        }
                        _this.fullscreenLoading=false

                    }
                });
            },
            //添加客服的dialog
            addKefu(){
                this.kefuDialog=true;
            },
            //提交客服表单
            submitKefuForm(formName){
                let _this=this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.sendAjax("/kefuinfo","POST",_this.kefuForm,function(result){
                            _this.kefuDialog=false;
                            _this.sendAjax("/kefulist","get",{},function(result){
                                _this.kefuList=result;
                            });
                        });
                    } else {
                        return false;
                    }
                });
            },
            //编辑客服表单
            editKefuForm(formName){
                let _this=this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                            _this.sendAjax("/kefulist","PUT",_this.kefuForm,function(result){
                                _this.kefuList=result;
                            });
                    } else {
                        return false;
                    }
                });
            },
            //获取客服
            getKefu(kefuId){
                let _this=this;
                this.sendAjax("/kefuinfo_setting","GET",{kefu_id:kefuId},function(result){
                    _this.kefuDialog=true;
                    _this.kefuForm=result;
                });
            },
            //删除客服
            deleteKefu(kefuId){
                let _this=this;
                this.sendAjax("/kefuinfo?id="+kefuId,"DELETE",{id:kefuId},function(result){
                    _this.kefuDialog=false;
                    _this.sendAjax("/kefulist","get",{},function(result){
                        _this.kefuList=result;
                    });
                });
            }
        },
        created: function () {
            if(ACTION=="setting"){
                this.showNotice();
            }
            this.initInfo();
        }
    })

</script>
</html>
{{end}}