<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/head :: head(links)"/>
<body>
<div class="ok-body" id="app" v-cloak>
    <template>
        <i-form ref="checkForm" :model="user" :rules="ruleValidate" :label-width="100">
            <row>
                <i-col span="12">
                    <form-item prop="username" label="用户名：" v-if="user.userId==null">
                        <i-input  maxlength="20" v-model="user.username" placeholder="请输入用户名"></i-input>
                    </form-item>
                    <form-item prop="username" label="用户名：" v-if="user.userId!=null">
                        {{user.username}}
                    </form-item>
                </i-col>
                <i-col span="12">
                    <form-item prop="password" label="密码：" >
                        <i-input maxlength="20" v-model="user.password"  placeholder="请输入密码"></i-input>
                    </form-item>
                </i-col>
            </row>
            <row>
                <i-col span="12">
                    <form-item prop="address" label="地址：">
                        <tooltip theme="dark"  style="width:100%" content="输入地址获取经纬度" placement="top-start">
                            <i-input  search  enter-button @on-search="getLocation"    v-model="user.address" placeholder="请输入地址" ></i-input>
                        </tooltip>
                    </form-item>
                </i-col>
                <i-col span="12">
                    <form-item prop="country" label="国家：">
                        <i-input v-model="user.country" placeholder="请输入国家"></i-input>
                    </form-item>
                </i-col>
            </row>
            <row>
                <i-col span="12">
                    <form-item prop="province" label="省：">
                        <i-input v-model="user.province" placeholder="请输入省"></i-input>
                    </form-item>
                </i-col>
                <i-col span="12">
                    <form-item prop="city" label="市：">
                        <i-input v-model="user.city" placeholder="请输入市"></i-input>
                    </form-item>
                </i-col>
            </row>
            <row>
                <i-col span="12">
                    <form-item prop="latitude" label="纬度：">
                        <i-input v-model="user.latitude" placeholder="请输入纬度"></i-input>
                    </form-item>
                </i-col>
                <i-col span="12">
                    <form-item prop="longitude" label="经度：">
                        <i-input v-model="user.longitude" placeholder="请输入经度"></i-input>
                    </form-item>
                </i-col>
            </row>

            <row>
                <i-col span="12">
                    <form-item prop="description" label="心情：">
                        <i-input v-model="user.description" placeholder="请输入心情"></i-input>
                    </form-item>
                </i-col>
            </row>
        </i-form>
    </template>
</div>
<div th:replace="common/foot :: foot(script)"></div>
<script th:inline="none">
var vm = new Vue({
    el: '#app',
    data:{
        user:{
            country:'中国',
            address:''
        },
        roleName:"",
        statusList:[{"label":"正常","value":1},{"label":"禁用","value":0}],
        ruleValidate : {
			username: [
				{ required: true, message: '不能为空', trigger: 'blur' }
			],
			password: [
				{ required: true, message: '不能为空', trigger: 'blur' }
			],
			address: [
				{ required: true, message: '不能为空', trigger: 'change' }
			],
			country: [
				{ required: true, message: '不能为空', trigger: 'blur' }
			],
			province: [
				{ required: true, message: '不能为空', trigger: 'blur' }
			],
			city: [
				{ required: true, message: '不能为空', trigger: 'blur' }
			],
			latitude: [
				{ required: true, message: '不能为空', trigger: 'blur' }
			],
			longitude: [
				{ required: true, message: '不能为空', trigger: 'change' }
			],
			description: [
				{ required: true, message: '不能为空', trigger: 'change' }
			]
		},
		okUtils:null,
		okLayer:null
    },
    methods: {
        load : function(){
            layui.use(["okUtils", "okLayer"], function () {
                 vm.okUtils = layui.okUtils;
                 vm.okLayer = layui.okLayer;
                 if(vm.user.userId!=undefined){
                     vm.okUtils.ajaxCloud({
                        url:"/app/ding/get",
                        param : {userId:vm.user.userId},
                        close : false,
                        success : function(result) {
                            vm.user = result.msg;
                        }
                     });
                 }
            });
	    },
        acceptClick : function(dialog){
          vm.$refs.checkForm.validate(function(valid){
            if (valid) {
                 vm.okUtils.ajaxCloud({
                    url:"/app/ding/save",
                    param : vm.user,
                    json:true,
                    success : function(result) {
                         vm.okLayer.msg.greenTick(result.msg, function () {
                              dialog.load();
                         })
                    }
                 });
            }
          });
	    },
	    getLocation:function(){
	        if(vm.user.address==""){
	            vm.okLayer.msg.greenTick("请输入地址");
	            return;
	        }
            vm.okUtils.ajaxCloud({
                url:"/app/ding/getLocation",
                param : {'address':vm.user.address},
                close:false,
                success : function(result) {
                    var location = result.msg;
                    var array = location.split(",");
                    vm.user.longitude = array[0]+'111';
                    vm.user.latitude = array[1];
                }
            });
	    }
    },
    created: function() {

    }
});
</script>
</body>
</html>
