// 第二种
// 组件模板必须有且只有一个唯一的根元素
Vue.component('myCom2',{
	template:'<div><h3>这是使用Vue.component创建的组件</h3></div>'
})

// 第三种
Vue.component('myCom3',{
	template:'#tmp1'
})
var vm = new Vue({
	el:'#app',
	data:{

	},
	methods:{},
})

var login = {
	template: '<h1>登录组件</h1>'
}
var vm = new Vue({
	el:'#app',
	data:{},
	methods:{},
	render: function(createElements){
		// createElements 是一个方法，调用它，能够把指定的组件模板渲染为html结构
		return createElements(login)
		// 主题：这里return结果会自然替换el指定的容器
	}
})

var vm2 = new Vue({
	el:'#app-2',
	data:{},
	methods:{},
	directives:{},
	components:{
		login:{
			template:'#login'
		}
	},
	filters:{}
})

var dataObj ={count:0}
Vue.component('counter',{
	template: '#tmp_count',
	data: function(){
		return dataObj
	}
	methods:{
		increament:function(){
			this.count++	
		}
	}
})	

// 注册一个计数器组件counter，每当点击data值里的count+1
Vue.component('counter',{
	template: '#tmp_count',
	data: function(){
		return{
			count:0
		}
	},
	methods:{
		increament:function(){
			this.count++	
		}
	}
})	

// 登录注册组件切换
Vue.component('login',{
	template:'#login'
})
Vue.component('register',{
	template:'#register'
})
var vm = new Vue({
	el:'#app',
	data:{
		flag:true
	},
	methods:{}
})

// 登录注册组件切换
// 组件名称是字符串
Vue.component('login',{
	template:'#login'
})
Vue.component('register',{
	template:'#register'
})
var vm = new Vue({
	el:'#app',
	data:{
		component_name: 'login'
	}
})

var com2 = Vue.component('com2',{
	template:'#tmp1',
	data(){
		return{
			msg:'儿子：我有钱了，给爸爸200块钱拿去买烟'
			// sonmsg:{name:'我',agee:21}
		}
	},
	methods:{
		myclick:function(){
			// 当点击子组件，触发拿到父组件传递过来的func方法
			this.$emit('func',123,456,this.msg)
		}
	}
})

var vm = new Vue({
	el:'#app',
	data:{
		msg: '爸爸这里有100块钱，儿子你要不要？',
		datamsgForSon: null
	},

	components:{
		// 结论：经过演示发现子组件默认无法访问到父组件data数据
		com1:{
			data(){
			//注意子组件的data数据，并不是通过父组件传递过来的，而是子组件私有的，比如Ajax请求回来的数据，都可以放在data身上
			// data 上的数据都是可读可写的
				return{
					title:'123',
					content:'小名'
				}
			},
			// 注意： 组件种所有props数据都是通过父组件传递给子组件的
			template:'<h1>这是子组件{{parentmsg}}</h1>',
			// props中的数据都是只读的
			props:['parentmsg'] 
			//把父组件传递过来的parentmsg属性，在props定义才能使用这个数据
		}
	},
	methods:{
		// onChange:function(){
		// 	this.parentmsg = "被修改了！"
		// }
		show:function(data,data2,data3){
			console.log('这是调用了子组件show方法'+data+data2+data3)
			// 拿到子组件data数据为父组件data数据赋值
			this.datamsgForSon = data3
		}
	}
})

var commentBox ={
	template:'#tmp1',
	data(){
		return{
			user:'',
			content:''
		}
	},
	methods:{
		// 发表评论
		// 分析：发表评论的业务逻辑
		// 1.评论数据放在哪 存localStorage中 localStorage.getItem()
		// 2.先组织一个最新的评论数据对象
		// 3.想办法，把第二步得到评论对象保存到localStorage [只支持存放字符串数据]，调用json.stringify
		// 在保存最新的评论数据之前，要先从localStorage获取到之前的数据{string}，转换成一个数组对象，然后把最新评论Push到整个数组
		// 如果获取到的localStorage中的评论字符串为空或不存在，则可以返回一个'[]',让JSON.parse转换

		// 4.把最新的评论列表数组，再次调用JSON.stringify 转为数组字符串，然后调用 localStorage.setItem()存入文件
		postComment:function(){
			var comment ={id: Date.now(),user: this.user,content: this.content}
			// 从localStorage 中获取所有的评论
			var list = JSON.parse(localStorage.getItem('cmts') || '[]')
			list.unshift(comment)
			console.log(list)
			// 重新保存最新的评论数据
			localStorage.setItem('cmts',JSON.stringify(list))
			this.$emit('func')
			this.user = this.content =''
		}
	}			
}
var vm = new Vue({
	el:'#app',
	data:{
		list:[
			{id:Date.now(),user:'李白',content:'大河之水天上来，奔流到海不复回'}
		]
	},
	methods:{
		loadComments:function(){
			// 从本地加载评论列表
			var list = JSON.parse(localStorage.getItem('cmts') || '[]')
			this.list = list
		}
	},
	filters:{
		dateFormat:function(dataStr,pattern){
			// 根据给定的字符串给出特定的时间
			var dt = new Date(dataStr)

			// yyyy-mm-dd
			var y = dt.getFullYear()


			// 月|日|十|分|秒  存在 单 位数，需要用es6字符串组合补位 .padStart(length,value)
			var m = (dt.getMonth()+1).toString().padStart(2,'0')
			var d = (dt.getDate()).toString().padStart(2,'0')
			// return y+'-'+m+'-'+'d'

			if (pattern && pattern.toLowerCase()==='yyyy-mm-dd') {
				return `${y}-${m}-${d}`
			}
			else{
				var hh = (dt.getHours()).toString().padStart(2,'0')
				var mm = (dt.getMinutes()).toString().padStart(2,'0')
				var ss = (dt.getSeconds()).toString().padStart(2,'0')
				return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
			}
		}
	},
	components:{
		'cmt-box':commentBox
	},
	// 实现添加焦点聚集
	directives:{
		'focus':{
			bind:function(el){
				//每当指令绑定到指令上会立即执行这个函数，只执行一次
				// 注意： 在每个函数中，第一个参数永远是el ，表示指令绑定的元素，是一个原生js对象

				// 在元素 刚绑定指令时.还没有插入到DOM中去.这时候调用没作用
				// el.focus()
			},
			inserted:function(el){
				// 表示元素插入到DOM中时候执行这个函数，只执行一次
				el.focus()
			},
			update: function(){
				// 表示元素更新到DOM中时候执行这个函数，可执行多次
			}
		}
	},
	created(){
		this.loadComments()
	}
})

var login = {
	template:'<h1>登录组件</h1>',
	data(){
		return{
			msg:'son msg'
		}
	},
	methods:{
		show:function(){
			console.log('调用了子组件的show 方法')
		}
	}
}
var vm = new Vue({
	el:'#app',
	data:{
		
	},
	methods:{
		getElement:function(){
			// console.log(document.getElementById('myh3').innerText)
			console.log(this.$refs.myh3.innerText)
			console.log(this.$refs.mylogin.msg)
			this.$refs.mylogin.show()
		}
	},
	components:{
		login
	}
})